Cursor din drøm, del 1: Hvordan man flytter fra produktidé til første prompt

Hvem er denne artikel for? Grundlæggere, der er vant til at stole på udviklingsteams, men hvis nuværende ressourcer eller budgetter har tvunget nogle projekter til at sidde i skuffen i årevis. Nybegyndere, der ikke føler sig sikre på at kode den første version af deres produkt og ikke har budgettet til at ansætte udviklere. Startups, der er fast i at forsøge at hæve en runde bare for at bygge en prototype eller MVP. Hvad gør dette materiale anderledes? Jeg er ikke en programmør, og jeg skriver dette med læsere i tankerne, der ikke har en teknisk baggrund (selvom en teknisk tankegang vil helt sikkert hjælpe). I løbet af de sidste seks måneder har jeg gået hele vejen fra ikke at skrive kode overhovedet til at opbygge to fuldt udførte produkter. Hver af disse tjenester omfatter 30-40 database tabeller, omkring 50 komponenter og omkring 100.000 linjer kode. Den første tjeneste integrerer med OpenAI for at "gøre mening" af brugergenereret indhold. den bruger en vektor database, indlejringer og operationer bygget omkring dem. Den anden service omfatter et internt regnskabssystem med dobbeltoptagelsesregnskab, idempotent operationer og et integreret betalingssystem til behandling af online betalinger. Jeg beskriver ikke nogen magisk måde at opbygge software uden at røre koden overhovedet, men dette materiale viser, at det er muligt at opbygge et ægte produkt uden at bruge de første år på at lære programmeringssprog. Du bliver stadig nødt til at se på koden, lejlighedsvis redigere den manuelt, og holde tingene under kontrol - men du vil være i stand til at gøre det. Introduction Introduktion Ideen om fuldt automatiseret udvikling er meget populær lige nu: Beskriv et produkt i tekst og få en fungerende applikation. Men når vi bygger et produkt for at teste virkelige hypoteser, er forventningerne forskellige.Vi vil have korrekt UI / UX, god ydeevne, caching, skalerbarhed og evnen for virkelige udviklere til at arbejde med denne kode senere. Ud fra min erfaring håndterer selv stærke modeller som Opus backend-logik og databasestruktur ret godt, men de kæmper meget mere med frontend-arkitektur. Der er ingen magi her: hvis selv Opus inde i min Cursor kan forvirre frontend, vil det samme ske i ethvert andet produkt bygget på toppen af LLMs. I denne serie bruger jeg en anden tilgang: en IDE med indbyggede AI-agenter. AI hjælper med at skrive kode og planlægge opgaver, men arkitekturen og de centrale beslutninger forbliver under menneskelig kontrol. Hvorfor valgte jeg Cursor? Bare fordi jeg læste, at det er bygget på toppen af den populære VS Code editor. Det syntes som et rimeligt valg. ville være værre; i praksis vil resultatet være omtrent det samme, fordi kvaliteten af løsningen mest afhænger af den model, der anvendes. Antigravitationen Historien begyndte i sommeren Da jeg diskuterede med Det var en tanke, der havde været i mit hoved i mange år. : a , hvor brugerne modtager anbefalinger baseret på ligheder i deres personlige ratings (restauranter, hoteller, lande, hobbyer, stort set alt). 2025 DeepSeek 10 years social network of preferences Lad os bygge det. Vi bør bruge Next.js. Lad os bygge det. Vi bør bruge Next.js. Lad os bygge det. Vi bør bruge Next.js. 3 måneder senere fandt jeg mig selv præsenterer produktet til topledelsen i en stor virksomhed, og det var dem, der bad mig om at gøre det. Det sjove er, at på trods af 20 år i IT som grundlægger, havde det aldrig sket for mig før. Jeg har altid antaget, at det ville være for komplekst og dyrt at bygge, og selve emnet føltes risikabelt nok, at jeg ikke ønskede at investere penge i det. I denne serie vil jeg dele hele oplevelsen: rigtige opfordringer, konfigurationer og fælder.Men før vi går videre, skal vi svare på det vigtigste spørgsmål: Skal du endda prøve det her? Skal du endda prøve det her? Kort svar - Hvis du godt forstår disse begreber: yes Fronten Tilbagetræk Databaser HTML struktur CSS styling JavaScript adfærd Grundlæggende reaktionskoncepter Hvis disse ideer allerede giver mening for dig, er du velkommen til at rulle ned til afsnittet "Vælg en ramme". Hvis disse ideer allerede giver mening for dig, er du velkommen til at rulle ned til afsnittet "Vælg en ramme". Hvis disse udtryk lyder ukendte, er det bedre at tage et øjeblik til Hvad der følger, vil ikke føles som at rulle på sociale medier, men overvej dette: Denne rejse reddede mig omtrent At ansætte entreprenører og skabe et team. understand them now $300,000 and a couple of years of development Frontend mod backend I enkle ord, den Hvad brugeren ser: frontend En hjemmeside i en browser En mobil applikation En browser udvidelse enhver grænseflade, hvor brugerne klikker på knapper eller læser information Den er den del af systemet, der kører på servere et eller andet sted på internettet. backend Det håndterer: Databehandling autentisering Forretningslogik Kommunikation med databaser Når en bruger klikker på en knap, sender frontend en anmodning til backend. Interaktionen ser omtrent sådan ud: User → Frontend → Backend → Database → Backend → Frontend → User I praksis interagerer frontend med backend gennem : særlige URL-adresser, som frontend sender anmodninger til: API routes /api/articles /api/login /api/create-article Når frontend ringer til en af disse adresser, kører serveren den nødvendige kode: Kontroller brugeren Kræver databasen Behandler dataene og returnerer resultatet. For eksempel kan frontend sende en anmodning som denne: GET /api/articles?author_id=535 Backend modtager denne anmodning, henter artiklerne fra databasen og returnerer dem til frontend. Hvad er en database? En database gemmer de oplysninger, der anvendes af applikationen. Hvis du har brugt Excel eller Google Sheets, er konceptet meget lignende. Hver tabel er som et regneark. tables Users Table id name email 1 Alice alice@example.com 2 Jack jack@example.com 1 af Alice af alice@example.com 2 af Jack af Jack@example.com Articles Table id name email 1 1 First article 2 1 Another article 3 2 Jack's article 1 1 Første artikel 2 1 En anden artikel 3 2 Jack’s artikel I dette eksempel kan én bruger oprette mange artikler. Denne enkle struktur af er grundlaget for de fleste software-systemer. I din egen tjeneste kan der være Selv om det lige nu føles som om, at der kun vil være tre. related tables 30–50 tables HTML: Struktur af hjemmesiden HTML definerer . what exists on the page Hovedsætninger afsnit Knapperne Billeder containere Eksempler på: Hello This is a paragraph

HTML-elementer danner en struktur, der kaldes . DOM div ├── h1 └── p Hver webside i din browser er i det væsentlige et stort træ af elementer. CSS: Hvordan tingene ser ud Hvis HTML definerer struktur, . CSS defines appearance Farver kilder Spacing Layout Positionering Eksempler på: /* CSS class that defines how the title looks */

.title { color: blue; font-size: 32px; } Anvendes sådan her:

Hello Kombination af flere klasser Et vigtigt begreb i CSS er, at elementer kan have . multiple classes Eksempler på:

Submit Hver klasse kan styre forskellige aspekter af styling. /* base button style */ .button { border-radius: 6px; }

/* button color style */ .button-primary { background: blue; color: white; }

/* button size */ .button-large { padding: 16px 24px; } Men det kan også blive forvirrende i store applikationer, når stilarter begynder at interagere med hinanden. Hvorfor Tailwind Hjælper Dette er en af grundene til, at mange moderne projekter bruger I stedet for at skrive store CSS-filer bruger Tailwind foruddefinerede værktøjsklasser. Tailwind CSS Eksempler på: Submit

Hver klasse repræsenterer en lille stylingregel. Denne tilgang har en overraskende fordel, når man arbejder med AI-værktøjer som Cursor. . Tailwind layouts much more reliably than traditional CSS Hvis du ikke udtrykkeligt instruerer Cursor til at bruge Tailwind, kan det begynde at indlejre stilarter direkte i hvert element. Hvis du ikke udtrykkeligt instruerer Cursor til at bruge Tailwind, kan det begynde at indlejre stilarter direkte i hvert element. Eksempler på:

Det virker i starten. Men senere bliver det smertefuldt, fordi ændring af designet kræver redigering af hver komponent individuelt. genanvendelige klasser giver dig mulighed for at ændre designet af hele applikationen ved kun at ændre nogle få delte stilarter. JavaScript og TypeScript HTML definerer struktur, CSS definerer udseende. JavaScript defines behavior. Tryk på eller klik for at se billedet i fuld størrelse JavaScript gør det muligt for grænsefladen at reagere på brugerhandlinger. Eksempler på: // when the user clicks the button, show a message

button.addEventListener("click", () => { alert("Hello!"); }); TypeScript er i det væsentlige JavaScript med ekstra type sikkerhed. af JavaScript: // a simple function that adds two numbers

function add(a, b) { return a + b; } af TypeScript: // the same function, but with explicit types // a and b must be numbers // the function returns a number

function add(a: number, b: number): number { return a + b; } De fleste moderne applikationer bruger TypeScript, fordi det forhindrer mange fejl i større systemer. Hvorfor skal vi bruge Next.js I resten af denne serie vil vi bygge eksemplet applikation ved hjælp af Next.js er et framework bygget på toppen af React. React fokuserer på at opbygge brugergrænseflader. Next.js Next.js tilføjer ting som: Rutering Server rendering Brændende slutpunkter Projektstruktur Byg værktøjer Du behøver ikke at forstå Next.js internals dybt, men det hjælper med at forstå, hvordan React-applikationer er struktureret. Du behøver ikke at forstå Next.js internals dybt, men det hjælper med at forstå, hvordan React-applikationer er struktureret. Heldigvis er de grundlæggende ideer meget enkle. Du behøver kun at forstå tre ting: Komponenterne Props Hooks Reagerende komponenter React applikationer er opbygget fra . components En komponent er et genanvendeligt stykke interface. Eksempler omfatter: Knapperne Navigation af barer Hvordan blokerer Moderne vinduer Eksempel på komponent: // A simple React component. // It renders a button.

function Button() { return Click me } Nu kan den genbruges overalt. Store applikationer bliver . trees of components Props Props er input, der overføres til komponenter. Eksempler på: // A simple React component. // It renders a button and shows the text passed in props.label.

function Button(props) { return {props.label} } Brug af: // The same component can be reused with different labels

Hooks Hooks gør det muligt for komponenter at gemme status og reagere på brugerinteraktioner. Eksempler på: // useState creates a piece of state inside the component. // "count" stores the current value. // "setCount" is the function used to update it.

const [count, setCount] = useState(0) Nu kan komponenten opdatere sin interne tilstand. // When the button is clicked, the count increases by 1. // The text updates automatically.

setCount(count + 1)}> Clicked {count} times Hooks gør komponenterne interaktive. Sammenfatning af: If you have never encountered these concepts before, I understand how this might feel. But you don’t need to master all of this at a professional level. You only need to understand the basic idea. If you have a technical mindset and can grasp these concepts, the journey becomes much easier. Instead of randomly asking AI to generate something, you will be able to guide it properly. And that makes a huge difference. Sammenfatning af: Hvis du aldrig har mødt disse begreber før, forstår jeg, hvordan dette kan føles. Men du behøver ikke at mestre alt dette på et professionelt niveau. Du behøver kun at forstå den grundlæggende idé. Hvis du har en teknisk tankegang og kan forstå disse begreber, bliver rejsen meget lettere. I stedet for tilfældigt at bede AI om at generere noget, vil du være i stand til at guide det ordentligt. Før vi bevæger os fremad Sørg for, at du godt forstår: Frontend mod backend Databaser som tabel HTML struktur CSS klasser og styling JavaScript adfærd React komponenter, props og hooks Hvad er næste? Før du dykker ind i en teknisk specifikation for dit produkt, skal du svare på følgende: Hvilken stack vil du bruge? Ved første øjekast kan dette virke som en rent teknisk beslutning. Hvis du ikke definerer det på forhånd, vil AI begynde at improvisere, og jeg vil hellere ikke engang tænke på, hvor det kan føre. Cursor Her vil jeg beskrive den stabel, jeg endte med at bruge mig selv. Denne opsætning fungerede ekstremt godt for mig og kan hjælpe dig med at undgå nogle af de problemer, jeg løb ind i i starten. Vælg en ramme Hvis dit produkt har et webgrænseflade (dvs. brugere interagerer med det gennem en browser), har du brug for et framework, der håndterer både frontend og backend. For begge tjenester, jeg byggede, valgte jeg Og jeg har aldrig fortrudt den beslutning. Next.js Jeg var bekendt med ting som PHP, Laravel, JavaScript og lignende teknologier, men i dette tilfælde fulgte jeg simpelthen ChatGPTs anbefaling. Pointen er: selvom du allerede kender en anden stack, kan dette være en god mulighed for at prøve noget nyt. Pointen er: selvom du allerede kender en anden stack, kan dette være en god mulighed for at prøve noget nyt. Hvis du har været langt fra udvikling overhovedet, kan du løbe ind i udfordringer med klientside caching og applikationstilstandsstyring (disse er nødvendige, hvis du vil helt undgå ting som sideopladninger, mens en bruger interagerer med din tjeneste). Hvis du har været langt fra udvikling overhovedet, kan du løbe ind i udfordringer med klientside caching og applikationstilstandsstyring (disse er nødvendige, hvis du vil helt undgå ting som sideopladninger, mens en bruger interagerer med din tjeneste). I sidste ende er denne type polering bestemt ikke påkrævet for at bringe et produkt på markedet.Når du har brugere og indtægter, kan du altid ansætte en frontend-udvikler til at forfine tingene yderligere. Hvor vil din server køre? Når rammen er valgt, er det næste spørgsmål, hvor applikationen rent faktisk vil køre. . hosting Vercel For mit første projekt brugte jeg . Vercel Det er et naturligt valg, når man arbejder med Deltakelse (trykning af din applikation til serveren) sker automatisk ud af boksen, når du kører . Next.js git push Men over tid løb jeg ind i et uventet problem: I nogle regioner er applikationen simpelthen ikke tilgængelig. Fly.io For the second project, I switched to Fly.io. Udvikling er lidt mere kompliceret end , men det kan automatiseres. Til sidst kunne jeg faktisk godt lide Fly.io endnu mere. Det føles mere fleksibelt at skalere, hvis projektet begynder at vokse. Vercel Interessant nok har Fly.io ikke formelt et gratis niveau, men hvis din månedlige brug forbliver under $ 5, opkræver de dig ikke noget overhovedet. Choosing a Database Vælg en database Der er to hovedtilgange her: Den første mulighed er at køre din egen database på din egen server. Dette giver dig fuld kontrol og kan være helt gratis. Den anden mulighed er at bruge databasen som en tjeneste. For begge mine projekter valgte jeg den anden tilgang, fordi jeg ønskede at bevæge mig så hurtigt som muligt. . Supabase Supabase giver en forvaltet Databasen indeholder en række nyttige værktøjer. PostgreSQL Hvorfor Supabase var bekvemt Supabase understøtter vektorlagring. Dette blev vigtigt for et af mine projekter, hvor data blev gemt som indlejringer genereret med OpenAI-embedding-3-small-modellen. Supabase indeholder indbygget godkendelse. Brugere kan logge ind ved hjælp af udbydere som Google, GitHub, e-mail og andre udbydere. Supabase giver også filopbevaring, som giver brugerne mulighed for at uploade billeder og andre aktiver uden at opbygge separat infrastruktur. En anden meget nyttig funktion er understøttelse af RPC-funktioner. I mit andet projekt stoppede jeg helt med at tillade backend at forespørge database tabeller direkte. I stedet går alt gennem RPC-funktioner. Supabase indeholder også kraftfulde sikkerhedsværktøjer som Row Level Security (RLS) politikker. Supabase Drawbacks Det første problem, jeg stødte på, involverede det indbyggede autentiseringssystem. Specifikt, Google login opfører sig inkonsekvent for brugere, der får adgang til applikationen via Safari på iPhone. Jeg opdagede dette først efter omkring to måneders udvikling, og i praksis viste det sig at være næsten umuligt at rette. Supabase tilbyder teknisk set et gratis niveau, men i praksis kan du stadig ende med at betale omkring $ 25-40 om måneden, selvom appen stadig er i udvikling og ikke har brugere. Cursor + ChatGPT: To forskellige roller For mig er, Der er andre IDE-muligheder, men Cursor fungerede meget godt i mit tilfælde. Skifte til noget som VS Code og interagere med en AI-assistent gennem terminalen er noget, jeg personligt ikke har nogen interesse i at prøve. Cursor is the primary development environment De vigtigste ulemper ved Cursor er og . cost frequent updates På nogle punkter nåede mine udgifter Over tid lærte jeg at kontrollere disse omkostninger.I dag er en realistisk estimat om hvis du aktivt bruger kraftfulde modeller. $100 per day $300 per month Cursor tilbyder også et baseabonnement til omkring , but relying on the cheapest model is practically impossible, and the limits for paid models are quite small. $20 Hvorfor ChatGPT er stadig vigtigt Selv hvis du bruger Cursor, anbefaler jeg stærkt at have en af abonnementet. ChatGPT Plus Min arbejdsproces ser normalt sådan ud: Cursor → skrive og ændre kode ChatGPT → diskuterer ideer og arkitektur Inden for Cursor er modellen optimeret til Uden for Cursor opfører ChatGPT sig mere som en kreativ tænkningspartner. code generation and stability En simpel regel: Spørg ikke ChatGPT om at skrive din produktionskode Don’t ask ChatGPT to write your production code Den samme model inde i Cursor, eller især modeller som Opus, vil generere kode meget bedre. Brug af ChatGPT til visuelle aktiver En anden uventet brug af ChatGPT var . image generation Mit andet projekt repræsenterer visuelle miljøer: digitale parker med monumenter, stier og dekorative objekter. Det krævede et stort antal grafiske aktiver. I stedet for at købe aktiver eller ansætte designere for hver iteration, genererede jeg de fleste af de visuelle direkte med ChatGPT. Da billedgenerering er inkluderet i ChatGPT Plus-abonnementet, sparede dette en overraskende mængde penge under udviklingen og var simpelthen meget bekvemt. Design værktøjer Mange udviklere bruger Design af grænseflader før kodning. Figma Cursor kan generere rimelige UI-layouts på egen hånd, og jeg justerer dem bare manuelt bagefter. Men hvis du foretrækker at designe grænseflader først, kan Figma stadig være meget nyttigt. Google eksperimenterer også med værktøjer, der konverterer designlayouter direkte til kode. , som kan generere en indledende implementering fra interface designs. Google Stitch I teorien kan du: Design af grænsefladen i Figma Generer templates med Stitch konvertere disse skabeloner til React-komponenter E-mail og små infrastrukturdele De fleste apps skal til sidst sende e-mails. Til dette brugte jeg en simpel tjeneste kaldet . Resend Senere vil du måske også indføre caching ved hjælp af noget som Men i begge mine projekter har jeg udskudt dette trin. Redis Redis Hvis arkitekturen er designet korrekt, kan caching altid tilføjes senere. Hvis arkitekturen er designet korrekt, kan caching altid tilføjes senere. Har du brug for Docker? I begge projekter lykkedes det mig at arbejde helt uden . Docker Docker Med Fly.io kan du bruge Docker til at opbygge projektet lokalt på din maskine, men du kan også uploade filerne som de er og lade builden køre på deres servere. På et tidspunkt brød noget sammen, og Fly.io stoppede med at hente filerne og starte builden. Det almindelige råd online er enten at ændre serverregionen i Fly-indstillingerne eller skifte til lokale builds (hvor Docker bliver nyttigt). men jeg løste det anderledes, ved at bruge et bestemt flag i Fly-implementeringskommandoen, så jeg ikke behøvede at gøre nogen af disse ting. Du kan også bare spørge Opus om, hvordan man reparerer det med minimal indsats (uden at ændre serveren eller installere Docker). Hardware betyder mere end du tror En uventet lektion havde intet at gøre med programmering. Din hardware er vigtig Your hardware setup matters Cursor fungerer meget bedre, når du har nok skærmplads til at se flere paneler på samme tid. Teknisk set fungerede det, men det var ekstremt ubehageligt. 13-inch tablet Skift til a Det forbedrede arbejdsprocessen markant. 27-inch monitor Cursor kan også være ret ressourceintensive, så at have en rimelig kraftig computer hjælper helt sikkert. Cursor kan også være ret ressourceintensive, så at have en rimelig kraftig computer hjælper helt sikkert. Operativsystemet For konteksten har jeg kørt hele dette eksperiment på . Windows Men intet i denne stack er faktisk afhængig af Windows, undtagen AI's konstante forsøg på at generere shell-kommandoer ved hjælp af (som kan løses med et par regler, jeg vil beskrive senere). && Samme sæt fungerer perfekt på . macOS or Linux Minimum Stack Oversigt Hvis vi forenkler alt, ser min stack omtrent sådan her ud: Framework: Next.js Database: Supabase Hjemmeside: Fly.io Næste: Cursor Anmeldelse af: ChatGPT E-mail: Send tilbage Og det viste sig at være mere end nok til at opbygge . real working products Hvad kommer næste Før du skriver en kode, skal du tydeligt beskrive produktet. De fleste mennesker, der bruger AI-værktøjer, hopper direkte ind i kodning.I min erfaring er det den hurtigste måde at skabe et kaotisk system på. Hvis du ikke har bygget et produkt med AI endnu, ærligt talt, misunner jeg dig. jeg husker stadig den følelse, jeg havde i sommeren 2025 da jeg først begyndte at eksperimentere med det. Hvis du ikke har bygget et produkt med AI endnu, ærligt talt, misunner jeg dig. jeg husker stadig den følelse, jeg havde i sommeren 2025 da jeg først begyndte at eksperimentere med det. Mit råd lyder måske lidt mærkeligt: Stop for et par dage. Stop for et par dage. Stop for et par dage. Tag 3-5 dage og modstå fristelsen til straks at installere Cursor, Antigravity eller enhver anden AI-udviklingsplatform. Fordi kvaliteten af dit tænkning på dette stadium vil afgøre, hvor smertefuldt (eller hvor glat) de næste uger eller endda måneder af udvikling vil være. Enhver Kan redde . 10 minutes of thinking now hours of refactoring later Start med en samtale Den nemmeste måde at gøre det på er at åbne ChatGPT og begynde at diskutere det ved hjælp af stemmeindtastning (ikke den fulde talekonversationstilstand, men tale-til-tekst-knappen). Just start talking. For example, explain: Hvad dit produkt gør Who the users are Hvilket problem løser det Hvilke handlinger vil brugerne udføre The goal of this conversation is not to generate code. The goal is to gradually discover the structure of the future system. I løbet af denne diskussion skal du også fortælle ChatGPT, hvilken teknologi stack du planlægger at bruge. For example: Næste.js Typografisk Supabase Vindevejr Spørg ChatGPT Forklar, at du vil skrive koden senere i Cursor, men du vil have ChatGPT til at beskrive, hvordan det ville arkitektere systemet. not to generate code Jeg har personligt set flere mennesker tilbringe måneder cirkulerer omkring en idé uden nogensinde at spørge AI dette enkle spørgsmål. Tænk på data, ikke bare skærme En af de vigtigste dele af dette trin er udformningen af datamodellen. Hvis du aldrig har arbejdet med databaser før, kan du forestille dig systemet som et sæt Excel-regneark. Ask yourself questions like: Kan én bruger oprette flere objekter? Er objekter i kategorier? Kan kategorier indeholde flere objekter? Er der relationer mellem objekter? For example: En bruger → Mange artikler En artikel → en kategori ... eller måske en artikel → flere kategorier og tags en artikel → mange kommentarer, der indlæser på scroll Kommentarer til Reaktioner Et andet vigtigt spørgsmål er Vil alle være lige, eller vil nogle brugere have yderligere privilegier? user roles Moderatørerne Administratorer Du kan tilføje roller senere, men det er meget lettere at planlægge dem tidligt. Ideelt set bør din tekniske beskrivelse omfatte: Tabelnavne (artikler, kommentarer og reaktioner) kolonne navne (brugernavn, avatar, bio) Forholdet mellem tabeller Selv hvis du planlægger at udvikle produktet gradvist, kan en klar struktur fra begyndelsen spare dig for en stor mængde refactoring senere. I begge mine projekter endte databasen med omkring Her er strukturen fra mit andet projekt: 30–40 tables Dit projekt vil sandsynligvis ende med et lignende nummer. Men for den oprindelige tekniske specifikation, selv Det er nok. 10 core tables Jobkæder Det sværeste koncept for begyndere er normalt En kø er en tabel, der gemmer opgaver i stedet for objekter som brugere eller artikler. Du har brug for en kø, når dit system interagerer med eksterne tjenester. job queues Forestil dig for eksempel, at efter at en bruger har offentliggjort en artikel, sender du den til en ekstern tjeneste til oversættelse eller analyse. Du kan ikke pålideligt udføre denne operation øjeblikkeligt under oprettelsen af artiklen, eksterne tjenester kan mislykkes eller reagere langsomt. Du kan ikke pålideligt udføre denne operation øjeblikkeligt under oprettelsen af artiklen, eksterne tjenester kan mislykkes eller reagere langsomt. Artiklen selv skal oprettes med det samme (fordi det kun afhænger af din ansøgning). For eksempel kan din artikel tabel se sådan ud: id author_id picture title_en text_en title_es text_es 32 535 one.jpg Article 1 Hello 33 535 two.jpg Article 2 Next part 32 535 af.jpg Artikel 1 Hej Hej 33 535 2 af JPG Artikel 2 Næste del После создания каждой статьи, она попадает в очередь на получение перевода от внешнего сервиса: id entity_type entity_id status attempts es_text_generated 1 article_text 32 processed 1 Hola 2 article_text 33 pending 0 1 artikel - tekst 32 Forarbejdet 1 Hola Hej Hej 2 artikel - tekst 33 Hængende 0 Som kun opgave i rækkefølge udføres, udløser trigger automatisk supplerer information om artiklen i hovedtabellen artikler id author_id picture title_en text_en title_es text_es 32 535 one.jpg Article 1 Hello Hola 33 535 two.jpg Article 2 Next part 32 535 af.jpg Artikel 1 Hej Hej Hola Hej Hej 33 535 2 af JPG Artikel 2 Næste del Køer til eksterne tjenester i Supabase håndteres normalt gennem . Edge Functions I Supabase er der 2 forskellige typer af funktioner: og . RPC Edge Fjernprocedure opkald er en funktion, der erstatter direkte forespørgsler til dine databasetabeller. For eksempel, i stedet for at din server foretager en direkte forespørgsel til at hente ( ) alle artikler tilhørende en bestemt bruger ( ) er: RPC Udvælgelse 535 Udvælgelse 535 SELECT * FROM articles WHERE author_id = 535; Jeg anbefaler stærkt at bede din AI-assistent om at oprette en funktion som denne i stedet: CREATE OR REPLACE FUNCTION get_user_articles(p_author_id bigint) RETURNS TABLE ( id bigint, author_id bigint, picture text, title_en text, text_en text, title_es text, text_es text ) LANGUAGE sql SET search_path = '' AS $$ SELECT id, author_id, picture, title_en, text_en, title_es, text_es FROM public.articles WHERE author_id = p_author_id ORDER BY id DESC; $$; Derefter, inde i din projektkode, kalder du simpelthen denne funktion som denne: SELECT * FROM get_user_articles(535); For at sikre, at denne tilgang altid fungerer korrekt og konsekvent, skal du tilføje eksplicitte regler til din tekniske specifikation (vi vil diskutere det senere): spørge aldrig databasen direkte fra klienten; altid gå gennem server API-ruter forbyde direkte tabelforespørgsler i API'en; hvis der er behov for en ny dataoperation, og der endnu ikke er nogen RPC, skal du oprette en migration med en ny RPC-funktion altid bruge SET search_path = '' inden for RPC-funktioner og udtrykkeligt henvise til skemaet, når du får adgang til tabeller Jeg vil ikke gå dybere ind i dette emne lige nu, men at følge disse regler vil spare dig for en masse hovedpine senere. Jeg vil ikke gå dybere ind i dette emne lige nu, men at følge disse regler vil spare dig for en masse hovedpine senere. Edge functions En Edge-funktion kører og bruges typisk til at interagere med eksterne tjenester. outside the database De løber på og kan kalde RPC-funktioner inde i din database, når det er nødvendigt. JavaScript or TypeScript (Deno runtime) Dette var den mest komplekse sektion om databasen. Du har måske ikke helt forstået det endnu, og det er helt fint: For det første er det på dette tidspunkt sekundære detaljer. For det andet kan du under din diskussion simpelthen bede ChatGPT om at finde denne artikel, "Cursor Your Dream," og præcisere alt, hvad du ikke forstår. For det tredje, som jeg nævnte i del 1, er Cursor meget god til at opbygge database og backend arkitektur. Tænk på komponenterne Hvis du allerede har en idé om grænsefladen, kan du beskrive den i form af komponenter. For eksempel: Artikkelkomponent Brugerprofil komponent Modulære vinduer Navigationselementer An article component might have several modes: View mode til læsere Edit mode for forfattere for admins moderation mode Hvis du tænker på komponenter på forhånd, vil AI-værktøjer senere generere meget renere kode. En vigtig regel for styling Fortæl ChatGPT at inkludere en instruktion i specifikationen, der , men i stedet bruge passende CSS klasser, for eksempel gennem Tailwind. Cursor should not use inline CSS styles I et af mine projekt glemte jeg at nævne dette. Som følge heraf blev stylinglogikken spredt på tværs af snesevis af komponenter, og det var smertefuldt at rydde op senere. En kritisk vigtig note om autentisering: Hvis du planlægger at bruge Supabase, skal du angive, at JWT-tokens skal genereres af din applikation, ikke af standard Supabase-godkendelsessystemet. Hvis du er ny til godkendelsessystemer, kan det lyde mærkeligt, men denne lille detalje kan forhindre alvorlige problemer senere, især når brugere logger ind via Safari på iPhone. En kritisk vigtig note om autentisering: Hvis du planlægger at bruge Supabase, skal du angive, at JWT-tokens skal genereres af din applikation, ikke af standard Supabase-godkendelsessystemet. Hvis du er ny til godkendelsessystemer, kan det lyde mærkeligt, men denne lille detalje kan forhindre alvorlige problemer senere, især når brugere logger ind via Safari på iPhone. Sample Case Study (fra mit andet projekt) For at gøre dette mere konkret, lad mig vise dig, hvordan denne proces rent faktisk fungerede for mit andet projekt, “ » » Honoramma Æreværd Den første prompt Her er den første opfordring, der startede debatten. I mange år har jeg haft ideen om at bygge et digitalt mindesmærke. Det kan være en platform, hvor en gruppe af brugere opretter landskabskort, en anden placerer monumenter, og andre efterlader tilbud - såsom blomster eller kommentarer. Jeg tror, det kan være en gennembrud idé, fordi intet som dette synes at eksistere. Men jeg er bekymret for juridiske spørgsmål. for eksempel, hvad hvis nogen opretter et monument for en levende person? eller opretter et monument for en som Michael Jackson - kan det forårsage juridiske problemer relateret til brugen af navnet? Teknisk set forestiller jeg mig det som et websted med et isometrisk kort, hvor monumenter er placeret. Ideelt set bør vi finde en god motor i stedet for at bygge alt fra bunden. I mange år har jeg haft ideen om at bygge et digitalt mindesmærke. Det kan være en platform, hvor en gruppe af brugere opretter landskabskort, en anden placerer monumenter, og andre efterlader tilbud - såsom blomster eller kommentarer. Jeg tror, det kan være en gennembrud idé, fordi intet som dette synes at eksistere. Men jeg er bekymret for juridiske spørgsmål. for eksempel, hvad hvis nogen opretter et monument for en levende person? eller opretter et monument for en som Michael Jackson - kan det forårsage juridiske problemer relateret til brugen af navnet? Teknisk set forestiller jeg mig det som et websted med et isometrisk kort, hvor monumenter er placeret. Isometrisk kort Ideelt set bør vi finde en god motor i stedet for at bygge alt fra bunden. På det tidspunkt var opfordringen slet ikke teknisk. Det var blot et udgangspunkt for diskussion. ChatGPT svar (forkortet) Ideen om et digitalt mindesmærke er interessant, fordi det ikke bare er et andet socialt netværk. dit koncept er tættere på et digitalt hukommelsesrum, hvor folk interagerer gennem symbolske handlinger: besøg, kommentarer, tilbud. Det juridiske problem, du nævnte - at skabe et monument for en levende person - eksisterer. Men platforme håndterer normalt denne risiko gennem produktdesign, ikke gennem total forbud. – klage- og takedown-systemer – klare regler for brugergenereret indhold – indramning af mindesmærker til asymboliske rum, ikke faktiske påstande om død Teknisk set er det for et isometrisk kort på internettet normalt bedst at bruge et eksisterende renderingsramme. Phaser til interaktive teglbaserede scener – PixiJS til fleksibel web rendering og brugergrænsefladeintegration Hvis du senere vil have rigtige 3D-monumenter, kan du skifte til Three.js, men for en MVP er en 2D-tilebaseret tilgang normalt meget hurtigere. Ideen om et digitalt mindesmærke er interessant, fordi det ikke bare er et andet socialt netværk. dit koncept er tættere på et digitalt hukommelsesrum, hvor folk interagerer gennem symbolske handlinger: besøg, kommentarer, tilbud. Digitalt hukommelsesrum Det juridiske problem, du nævnte - at skabe et monument for en levende person - eksisterer. Men platforme håndterer normalt denne risiko gennem produktdesign, ikke gennem total forbud. Produktdesign – klage- og takedown-systemer – klare regler for brugergenereret indhold – indramning af mindesmærker til asymboliske rum, ikke faktiske påstande om død Symboliske rum Teknisk set er det for et isometrisk kort på internettet normalt bedst at bruge et eksisterende renderingsramme. af Phaser til interaktive teglbaserede scener – PixiJS til fleksibel webrendering og UI-integration af Phaser Piksler Hvis du senere vil have rigtige 3D-monumenter, kan du skifte til Three.js, men for en MVP er en 2D-tilebaseret tilgang normalt meget hurtigere. Det er.js Derefter fortsatte diskussionen. Mine opfølgningsmeddelelser Jeg er rigtig god til pseudo-3D. På et niveau skaber brugerne et kort: de vælger dens størrelse som et gitter og fylder det med græs, stier og andre elementer gennem en visuel editor. På et andet niveau placerer brugerne monumenter, der kan besætte forskellige antal fliser, såsom 1, 2 eller 4. Der er også en tredje type brugere: de skaber ikke kort eller monumenter, de efterlader simpelthen tilbud som blomster. Hver mappe skal have sin egen unikke URL. Jeg er rigtig god til pseudo-3D. Psykologisk 3D På et niveau skaber brugerne et kort: de vælger dens størrelse som et gitter og fylder det med græs, stier og andre elementer gennem en visuel editor. På et andet niveau placerer brugerne monumenter, der kan besætte forskellige antal fliser, såsom 1, 2 eller 4. Der er også en tredje type brugere: de skaber ikke kort eller monumenter, de efterlader simpelthen tilbud som blomster. Hver mappe skal have sin egen unikke URL. Jeg vil også have, at kortejeren modtager en procentdel af købene inde i deres kort. For eksempel, hvis nogen køber et monument der, kan jeg dele 20% af indtægterne med kortejeren. Hvis nogen efterlader blomster på et monument, går næsten 20% til monumentets ejer og en anden 20% til kortets ejer. Jeg vil også have, at kortejeren modtager en procentdel af købene inde i deres kort. For eksempel, hvis nogen køber et monument der, kan jeg dele 20% af indtægterne med kortejeren. Hvis nogen efterlader blomster på et monument, går næsten 20% til monumentets ejer og en anden 20% til kortets ejer. Jeg tænker på at bygge projektet ved hjælp af Next.js + Supabase. Hvilken pseudo-3D-motor ville være bedst? Jeg tænker på at bygge projektet ved hjælp af Next.js + Supabase. Hvilken pseudo-3D-motor ville være bedst? Næste.js + Supabase Udvid nu den tekniske beskrivelse, saml alt i et enkelt dokument og tilføj en introduktion, der forklarer problemet og produktet. Udvid nu den tekniske beskrivelse, saml alt i et enkelt dokument og tilføj en introduktion, der forklarer problemet og produktet. Markdown (.md) File with the Spec Efter flere samtaler var den tekniske specifikation klar. Det samme vil ske for dig. Sørg for at bede om den endelige specifikation til at blive genereret i Markdown-format og kopiere det til en tekstfil. Du vil helt sikkert have brug for denne fil på et senere tidspunkt. .md Men i stedet for at sende det direkte til Cursor, spørg dig selv dette: Hvilken del af produktet er vigtigst for dig, eller den mest repræsentative? Dette er vigtigt, fordi din første opfordring til Cursor kan afvige fra den tekniske specifikation. For mig var den del af Så jeg besluttede at bygge kun det første (uden godkendelse, en database eller en backend). map editor mechanics Min sidste prompt til ChatGPT Skriv en opfordring til Cursor, hvor hovedformålet er at oprette en kortredigerer. For nu skal det fungere uden godkendelse og uden Supabase. Selv om kortet ikke kan gemmes endnu, det er okay. Det vigtigste mål er at føle mekanikken i kortet, før man bygger hele produktet. Ideelt set bør dette være en komponent, der senere kan integreres i et komplet system. Skriv en opfordring til Cursor, hvor hovedformålet er at oprette en kortredigerer. For nu skal det fungere uden godkendelse og uden Supabase. Selv om kortet ikke kan gemmes endnu, det er okay. Kort Redaktør Det vigtigste mål er at føle mekanikken i kortet, før man bygger hele produktet. Ideelt set bør dette være en komponent, der senere kan integreres i et komplet system. ChatGPT svar Nedenfor er den Dette resulterede i en prototype i Cursor. final instruction Du er en senior frontend / spilingeniør. Vi bygger kun en prototype af en korteditor (isometrisk pseudo-3D) som en isoleret komponent for at udforske kerneinteraktionsmekanikken. Strenge begrænsninger Ingen godkendelse. ingen Supabase, database, Stripe eller nogen backend-komponenter. ingen yderligere produktskærme. Målet er kun den interaktive mekanik ved redigering af kortet, slots og monumentplacering. Udgangsformat Implementér dette som en selvstændig React-komponent (React + TypeScript), som senere kan integreres i et Next.js-program. Komponenten skal være: *— vedligeholde **lokal tilstand*— udsætte en offentlig API (props / callbacks) teknologier — React + TypeScript — PixiJS + pixi-viewport Grundlæggende produktmodel (VIGTIGT) Når et kort oprettes, definerer ejeren SLOTS - rektangulære områder på gitteret, hvor andre brugere senere vil kunne placere monumenter. I denne prototype implementerer vi begge dele: — slot editor — monument placering Alle data gemmes lokalt. Enheder i hukommelse (In-Memory) Grid - NxM fliser (græs, vej) Slot — Rectangle defineret som x, y, w, hkind: monumentid Monument besætter nøjagtigt en slotEgenskaber: størrelse(1x2x1x1x2x2)slotIdrotation(valgfrit)id Prototype funktionalitet (Editor MVP) Generer et NxM-kort (standard: 20 × 20). Isometrisk projektion. Kontrol af kameraer: Pan (drag) – zoom (3 faste zoomniveauer) Værktøjer — Malet græs — Malet vej — Slot værktøj (oprette / slette slot, rektangelstørrelser: 1×1, 1×2, 2×2) — Placer monument (monumenter kan kun placeres på en eksisterende slot af matchende størrelse) — Eraser (sletter monument eller slot afhængigt af, hvad der er under markøren) Regler - Pladser kan ikke dækkes af slots. - Slots kan ikke krydses. - Et monument kan kun placeres i afree slot af matchende størrelse. - Slots og monumenter må aldrig overlappe. Udvælgelse Ved at klikke på et slot eller et monument vælges det (highlight med en ramme). Et lille info panel (React div) vises til højre, der viser: — type — koordinater — størrelse — id Eksport/import tilstand (JSON, In-Memory) Eksportknappen JSON → eksporterer den aktuelle tilstand til et tekstområde. Knappen Import JSON → loads stat fra textarea. UX detaljer Værktøjslinjen øverst eller venstre indeholder: — værktøjsudvælgelse — slotstørrelsesvælger (1×1 / 1×2 / 2×2) — eksport / import knapper Kursorindstillingen skal være tydeligt synlig (etiketten viser det aktuelle værktøj) Arkitektoniske krav (vigtige for fremtidig skalering) Separat model (grid / slots / monumenter) fra render (Pixi lag). Opret Pixi Application og viewport kun én gang. Brug brugEffect med ordentlig rengøring: — ødelægge app — fjerne lyttere — annullere animationsrammer Gem ikke Pixi-objekter i React-tilstand. Gem dem i refs. Håndter containeren korrekt ved hjælp af ResizeObserver. Vedhæft pointer-begivenheder til viewport/stage én gang, og fjern dem ved afmontering. Brug dybdesortering til isometrisk gengivelse (f.eks. x + y eller y), så objekter overlapper korrekt. opgave Først foreslår vi en minimal filstruktur: Uddybning.tsxmodel.tsisoMath.tsrender.ts Derefter implementere en minimal fungerende prototype (TypeScript), så jeg kan indsætte komponenten i et tomt React / Next.js-projekt og straks se editoren arbejde. Til sidst en kort liste over "ting at forbedre senere" (maksimum 8 elementer). Du må ikke tilføje andet end det, der er anført ovenfor. Du er en senior frontend / spilingeniør. Senior Frontend / Spilingeniør Vi bygger kun en prototype af en korteditor (isometrisk pseudo-3D) som en isoleret komponent for at udforske kerneinteraktionsmekanikken. Kun en prototype af en kortredigerer Strenge begrænsninger Strenge begrænsninger Ingen godkendelse. ingen Supabase, database, Stripe eller nogen backend-komponenter. ingen yderligere produktskærme. Målet er kun den interaktive mekanik ved redigering af kortet, slots og monumentplacering. Udgangsformat Udgangsformat Implementér dette som en selvstændig React-komponent (React + TypeScript), som senere kan integreres i et Next.js-program. Selvindstillet React-komponent Komponenten skal være: *— opretholde ** den lokale tilstand * — udsætte et offentligt API (props / callbacks) Offentlig ild teknologier teknologier — React + TypeScript — PixiJS + pixi-viewport Grundlæggende produktmodel (VIGTIGT) Grundlæggende produktmodel (VIGTIGT) Når et kort oprettes, definerer ejeren SLOTS - rektangulære områder på gitteret, hvor andre brugere senere vil kunne placere monumenter. Slots I denne prototype implementerer vi begge dele: I denne prototype implementerer vi begge dele: — slot editor — monument placering Alle data gemmes lokalt. Enheder i hukommelse (In-Memory) Enheder i hukommelse (In-Memory) Grid - NxM fliser (græs, vej) Slot — Rectangle defineret som x, y, w, hkind: monumentid Monument besætter nøjagtigt en slotEgenskaber: størrelse(1x2x1x1x2x2)slotIdrotation(valgfrit)id Prototype funktionalitet (Editor MVP) Prototype funktionalitet (Editor MVP) Generer et NxM-kort (standard: 20 × 20). Isometrisk projektion. 20 × 20 Kontrol af kameraer: Kontrol af kameraer: Pan (drag) – zoom (3 faste zoomniveauer) Værktøjer Værktøjer — Malet græs — Malet vej — Slot værktøj (oprette / slette slot, rektangelstørrelser: 1×1, 1×2, 2×2) — Placer monument (monumenter kan kun placeres på en eksisterende slot af matchende størrelse) — Eraser (sletter monument eller slot afhængigt af, hvad der er under markøren) Regler Regler - Pladser kan ikke dækkes af slots. - Slots kan ikke krydses. - Et monument kan kun placeres i afree slot af matchende størrelse. - Slots og monumenter må aldrig overlappe. Gratis slot til matchende størrelse Udvælgelse Udvælgelse Ved at klikke på et slot eller et monument vælges det (highlight med en ramme). Et lille info panel (React div) vises til højre, der viser: — type — koordinater — størrelse — id Eksport/import tilstand (JSON, In-Memory) Eksport/import tilstand (JSON, In-Memory) Eksportknappen JSON → eksporterer den aktuelle tilstand til et tekstområde. Eksport af JSON Knappen Import JSON → loads stat fra textarea. Import af JSON UX detaljer UX detaljer Værktøjslinjen øverst eller venstre indeholder: — værktøjsudvælgelse — slotstørrelsesvælger (1×1 / 1×2 / 2×2) — eksport / import knapper Kursorindstillingen skal være tydeligt synlig (etiketten viser det aktuelle værktøj) Arkitektoniske krav (vigtige for fremtidig skalering) Arkitektoniske krav (vigtige for fremtidig skalering) Separat model (grid / slots / monumenter) fra render (Pixi lag). Modellen Renderer Opret Pixi Application og viewport kun én gang. Pixi Application og viewport kun én gang Med ordentlig rengøring: Brug af useEffect — ødelægge app — fjerne lyttere — annullere animationsrammer Gem ikke Pixi-objekter i React-tilstand. Gem dem i refs. Refs Håndter containeren korrekt ved hjælp af ResizeObserver. Opfølgeren Vedhæft pointer-begivenheder til viewport/stage én gang, og fjern dem ved afmontering. En gang eller På den måde overlapper objekterne korrekt. Brug dybdesortering til isometrisk rendering (f.eks. x + y y Dybde sortering opgave opgave Først foreslår vi en minimal filstruktur: mapEditor.tsx model.ts isoMath.ts render.ts Derefter implementere en minimal fungerende prototype (TypeScript), så jeg kan indsætte komponenten i et tomt React / Next.js-projekt og straks se editoren arbejde. Minimalt arbejde prototype (TypeScript) Til sidst en kort liste over "ting at forbedre senere" (maksimum 8 elementer). Ting der skal forbedres senere Du må ikke tilføje andet end det, der er anført ovenfor. Du må ikke tilføje andet end det, der er angivet ovenfor. Skynd dig ikke til næste skridt Din opgave lige nu er at tænke over din idé. Diskuter den. I min erfaring er det også vigtigt at fokusere på — den minimumsversion af produktet, der stadig er tilstrækkelig til, at brugeren kan forstå, hvad produktet er, og hvilket kerneproblem det løser. MVP To vellykkede startups i mit liv begyndte faktisk som intet mere end demos, selv enkle præsentationer. , og test dem på reel trafik meget hurtigere. real products instead of demos Du bør også tænke ikke kun på selve produktet, men om . path to market Flere af mine projekter standsede præcis på det punkt, hvor jeg ikke havde et godt svar på grundlæggende Spørgsmål til. go-to-market Så før du skriver kode, prøv at afklare to ting: Hvad produktet er Hvordan det når sine første brugere. Til sidst skal du have Dokumenter To af To af Den første er den Dette dokument vil leve i roden af dit projekt og vil blive løbende læst og opdateret af AI under udvikling. full technical specification Den anden er den - den opfordring, du vil sende til Cursor som din allerførste opgave. Og dette vil kun være begyndelsen. . first working prompt hundreds of prompts like this Næste I den næste artikel (kommer snart), vil vi endelig gå til den tekniske del: installere Cursor og generere den første virkelige arbejdskode. Og det er her, alt bliver til begge dele . very exciting and a little chaotic