Cursore del tuo sogno, parte 1: Come passare dall'idea del prodotto al primo prompt

Per chi è questo articolo? Fondatori che sono abituati a fare affidamento su team di sviluppo, ma le cui risorse o budget attuali hanno costretto alcuni progetti a rimanere nel cassetto per anni. I principianti che non si sentono fiduciosi nel codificare la prima versione del loro prodotto e non hanno il budget per assumere sviluppatori. Startup che sono bloccati cercando di sollevare un round solo per costruire un prototipo o MVP. Cosa rende questo materiale diverso? Non sono un programmatore, e sto scrivendo questo con lettori che non hanno un background tecnico (anche se una mentalità tecnica aiuterà sicuramente). Negli ultimi sei mesi, sono andato tutto il modo di non scrivere il codice per costruire due prodotti a pieno titolo. naturalmente, la mia comprensione del codice è cresciuta molto durante quel tempo. Ciascuno di questi servizi include 30-40 tabelle di database, circa 50 componenti e circa 100.000 righe di codice. Il primo servizio si integra con OpenAI per "fare senso" ai contenuti generati dagli utenti. utilizza un database vettoriale, embeddings e operazioni costruite attorno a loro. Il secondo servizio comprende un sistema contabile interno con contabilità a doppio ingresso, operazioni idempotent e un sistema di pagamento integrato per il trattamento dei pagamenti online. Non sto descrivendo un modo magico per costruire software senza toccare il codice, ma questo materiale mostra che è possibile costruire un prodotto reale senza trascorrere i primi anni imparando i linguaggi di programmazione. Dovrai ancora guardare il codice, occasionalmente modificarlo manualmente e mantenere le cose sotto controllo, ma potrai farlo. Introduction Introduzione L'idea di sviluppo completamente automatizzato è molto popolare in questo momento: descrivi un prodotto in testo e ottieni un'applicazione funzionale. Ma quando stiamo costruendo un prodotto per testare ipotesi reali, le aspettative sono diverse. vogliamo un UI / UX adeguato, buone prestazioni, cache, scalabilità e la capacità per gli sviluppatori reali di lavorare con questo codice in seguito. Dalla mia esperienza, anche i modelli potenti come Opus gestiscono abbastanza bene la logica backend e la struttura dei database, ma lottano molto di più con l'architettura frontend. Non c'è magia qui: se anche l'Opus all'interno del mio Cursor può confondere il frontend, la stessa cosa accadrà in qualsiasi altro prodotto costruito su LLM. In questa serie, uso un approccio diverso: un IDE con agenti di intelligenza artificiale incorporati.L'IA aiuta a scrivere codice e pianificare compiti, ma l'architettura e le decisioni chiave rimangono sotto il controllo umano. Perché ho scelto Cursor? Semplicemente perché ho letto che è costruito sopra il popolare editor di codice VS. sembrava una scelta ragionevole. Sarebbe peggio; in pratica, il risultato sarà approssimativamente lo stesso, perché la qualità della soluzione dipende principalmente dal modello utilizzato. Antigravità La storia è iniziata nell’estate di Quando ho discusso con Un’idea che mi era venuta in mente per quasi : a , dove gli utenti ricevono raccomandazioni basate sulle somiglianze nelle loro valutazioni personali (restauranti, alberghi, paesi, hobby, praticamente qualsiasi cosa). 2025 DeepSeek 10 years social network of preferences Siamo pronti ad usare Next.js. Siamo pronti ad usare Next.js. Siamo pronti ad usare Next.js. 3 mesi dopo, mi sono trovato a presentare il prodotto alla direzione superiore di una grande società, e sono stati quelli che mi hanno chiesto di farlo. Ciò che è divertente è che, nonostante 20 anni in IT come fondatore, questo non mi era mai accaduto prima. Più recentemente, ho anche portato un altro progetto a lungo ritardato per lanciare, uno che era stato seduto in una cartella per anni. ho sempre supposto che sarebbe stato troppo complesso e costoso da costruire, e il tema stesso si sentiva abbastanza rischioso che non volevo investire soldi in esso. In questa serie, condividerò l'intera esperienza: suggerimenti reali, configurazioni e trappole.Ma prima di andare oltre, dobbiamo rispondere alla domanda più importante: Dovresti provare anche questo? Dovresti provare anche questo? Risposta breve - Se capisci bene questi concetti: yes frontale Ritorno Database Struttura HTML Stile CSS comportamento javascript Principali concetti di reazione Se queste idee hanno già senso per voi, non esitate a scorrere fino alla sezione "Choosing a Framework". Se queste idee hanno già senso per voi, non esitate a scorrere fino alla sezione "Choosing a Framework". Se questi termini sembrano sconosciuti, è meglio prendere un momento per Quello che segue non si sentirà come scorrere i social media, ma considera questo: questo viaggio mi ha salvato in gran parte. Assunzione di collaboratori e costruzione di una squadra. understand them now $300,000 and a couple of years of development Frontend contro backend In termini semplici, il Ecco cosa vede l’utente: frontend Un sito web in un browser Applicazione mobile L’estensione del browser qualsiasi interfaccia in cui gli utenti cliccano sui pulsanti o leggono le informazioni Il è la parte del sistema che funziona su server da qualche parte su Internet. backend Si tratta di: Trattamento dei dati autenticazione Logica aziendale Comunicazione con database Quando un utente fa clic su un pulsante, il frontend invia una richiesta al backend. L’interazione appare approssimativamente così: User → Frontend → Backend → Database → Backend → Frontend → User In pratica, il frontend interagisce con il backend attraverso URL speciali che il frontend invia richieste a: API routes /api/articles /api/login /api/create-article Quando il frontend chiama uno di questi indirizzi, il server esegue il codice necessario: Verificare l'utente Richiedi il database Processare i dati e restituisce il risultato. Ad esempio, il frontend potrebbe inviare una richiesta come questa: GET /api/articles?author_id=535 Il backend riceve questa richiesta, recupera gli articoli dal database e li restituisce al frontend. Che cosa è un database? Un database memorizza le informazioni utilizzate dall'applicazione. Se hai usato Excel o Google Sheets, il concetto è molto simile. Ogni tavola è come un foglio di calcolo. tables Users Table id name email 1 Alice alice@example.com 2 Jack jack@example.com 1 Alice alice@esempio.com 2 di Jack di Jack@example.com Articles Table id name email 1 1 First article 2 1 Another article 3 2 Jack's article 1 1 Primo articolo 2 1 Altro articolo 3 2 Articolo di Jack In questo esempio, un utente può creare molti articoli. Questa semplice struttura di costituisce la base della maggior parte dei sistemi software. nel tuo servizio potrebbe esserci Anche se in questo momento sembra che ci saranno solo tre. related tables 30–50 tables HTML: Struttura della pagina HTML definisce . what exists on the page Titoli paragrafi I bottoni Immagini Contenitori Esempio di: Hello This is a paragraph

Gli elementi HTML formano una struttura integrata chiamata . DOM div ├── h1 └── p Ogni pagina web nel tuo browser è essenzialmente un grande albero di elementi. CSS: come le cose sembrano Se l'HTML definisce la struttura, . CSS defines appearance Colori fonti Spazio Il layout Posizionamento Esempio di: /* CSS class that defines how the title looks */

.title { color: blue; font-size: 32px; } applicato in questo modo:

Hello Combinazione di più classi Un concetto importante in CSS è che gli elementi possono avere . multiple classes Esempio di:

Submit Ogni classe può controllare diversi aspetti dello styling. /* base button style */ .button { border-radius: 6px; }

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

/* button size */ .button-large { padding: 16px 24px; } Questa flessibilità è potente, ma può anche diventare confusa in grandi applicazioni quando gli stili iniziano a interagire tra loro. Perché il vento aiuta Questo è uno dei motivi per cui molti progetti moderni usano Invece di scrivere grandi file CSS, Tailwind utilizza classi di utility predefinite. Tailwind CSS Esempio di: Submit

Ogni classe rappresenta una piccola regola di styling. Questo approccio ha un vantaggio sorprendente quando si lavora con strumenti AI come Cursor. . Tailwind layouts much more reliably than traditional CSS Se non istruisci esplicitamente Cursor a utilizzare Tailwind, potrebbe iniziare a incorporare stili direttamente in ogni elemento. Se non istruisci esplicitamente Cursor a utilizzare Tailwind, potrebbe iniziare a incorporare stili direttamente in ogni elemento. Esempio di:

Inizialmente questo funziona. Ma più tardi diventa doloroso, perché cambiare il design richiede di modificare ogni componente individualmente.Le classi riutilizzabili consentono di modificare il design dell'intera applicazione modificando solo alcuni stili condivisi. JavaScript e TypeScript HTML definisce la struttura, CSS definisce l’aspetto. JavaScript defines behavior. Premere Enter o cliccare per visualizzare l'immagine in piena dimensione JavaScript permette all'interfaccia di reagire alle azioni dell'utente. Esempio di: // when the user clicks the button, show a message

button.addEventListener("click", () => { alert("Hello!"); }); TypeScript è essenzialmente JavaScript con sicurezza di tipo aggiuntivo. di JavaScript: // a simple function that adds two numbers

function add(a, b) { return a + b; } di 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; } La maggior parte delle applicazioni moderne utilizza TypeScript perché impedisce molti errori nei sistemi più grandi. Perché usare Next.js Nel resto di questa serie, costruiremo l'applicazione di esempio utilizzando Next.js è un framework costruito su React. React si concentra sulla creazione di interfacce utente. Next.js Next.js aggiunge cose come: Rottura Servizio Rendering Endpoint di incendio Struttura del progetto Costruire strumenti Non è necessario comprendere profondamente gli interni di Next.js, ma aiuta a capire come sono strutturate le applicazioni React. Non è necessario comprendere profondamente gli interni di Next.js, ma aiuta a capire come sono strutturate le applicazioni React. Fortunatamente, le idee di base sono molto semplici. Devi solo capire tre cose: componenti Props Hooks Componenti reattivi Le applicazioni sono costruite da . components Un componente è un pezzo di interfaccia riutilizzabile. Esempi includono: I bottoni navigazione bar Come si blocca Modalità di Windows Esempio di componente: // A simple React component. // It renders a button.

function Button() { return Click me } Ora può essere riutilizzato ovunque. Le applicazioni diventano . trees of components Props I props sono input trasmessi in componenti. Esempio di: // A simple React component. // It renders a button and shows the text passed in props.label.

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

Hooks I ganci consentono ai componenti di memorizzare lo stato e reagire alle interazioni degli utenti. Esempio di: // 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) Ora il componente può aggiornare il suo stato interno. // When the button is clicked, the count increases by 1. // The text updates automatically.

setCount(count + 1)}> Clicked {count} times I hooks rendono i componenti interattivi. Il riassunto: Se non avete mai incontrato questi concetti prima, capisco come potrebbe sentirsi. 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. Il riassunto: Se non avete mai incontrato questi concetti prima, capisco come potrebbe sentirsi. Ma non hai bisogno di padroneggiare tutto questo a livello professionale. devi solo capire l'idea di base. Se hai una mentalità tecnica e puoi cogliere questi concetti, il viaggio diventa molto più facile. Invece di chiedere casualmente all'IA di generare qualcosa, sarai in grado di guidarlo correttamente. Prima di andare avanti Assicurati di comprendere in modo approfondito: Frontend contro backend Database come tabelle Struttura HTML CSS e Styling comportamento javascript Componenti React, Props e Hooks Cos’è il prossimo? Prima di immergersi in una specifica tecnica per il tuo prodotto, rispondi a questo: quale stack utilizzerai? A prima vista, questo può sembrare una decisione puramente tecnica. Se non lo definisci in anticipo, l’IA inizierà a improvvisare, e preferisco non pensare nemmeno a dove ciò potrebbe portare. Cursor Questo setup ha funzionato estremamente bene per me e può aiutare a evitare alcuni dei problemi che ho incontrato all'inizio. Scegliere un quadro Se il tuo prodotto ha un'interfaccia web (cioè gli utenti interagiscono con esso tramite un browser), avrai bisogno di un framework che gestisca sia il frontend che il backend. Per entrambi i servizi che ho costruito, ho scelto E non mi sono mai pentito di quella decisione. Next.js Devo menzionare che non avevo mai lavorato con Next.js prima. Ero a conoscenza di cose come PHP, Laravel, JavaScript e tecnologie simili, ma in questo caso ho semplicemente seguito la raccomandazione di ChatGPT. Il punto è: anche se conosci già un altro stack, questa potrebbe essere una buona opportunità per provare qualcosa di nuovo. Il punto è: anche se conosci già un altro stack, questa potrebbe essere una buona opportunità per provare qualcosa di nuovo. Se sei stato lontano dal sviluppo del tutto, potresti trovarti in difficoltà con la cache sul lato client e la gestione dello stato delle applicazioni (questi sono necessari se vuoi evitare completamente cose come i ricaricamenti delle pagine mentre un utente interagisce con il tuo servizio). Se sei stato lontano dal sviluppo del tutto, potresti trovarti in difficoltà con la cache sul lato client e la gestione dello stato delle applicazioni (questi sono necessari se vuoi evitare completamente cose come i ricaricamenti delle pagine mentre un utente interagisce con il tuo servizio). Alla fine, questo tipo di lucidatura non è assolutamente necessario per portare un prodotto sul mercato. Una volta che hai utenti e ricavi, puoi sempre assumere uno sviluppatore frontend per affinare ulteriormente le cose. Dove funziona il tuo server? Una volta scelto il framework, la prossima domanda è dove verrà effettivamente eseguita l'applicazione. . hosting Vercel Per il mio primo progetto, ho usato . Vercel Questa è una scelta naturale quando si lavora con La distribuzione (spingendo l'applicazione al server) avviene automaticamente fuori dalla casella ogni volta che si esegue . Next.js git push Tuttavia, nel corso del tempo, ho affrontato un problema inaspettato: in alcune regioni l'applicazione non è semplicemente accessibile.Per questo motivo, il primo progetto è rimasto su Vercel, ma per il secondo ho deciso di provare qualcosa di diverso. Fly.io Per il secondo progetto, ho cambiato Fly.io. La distribuzione è un po' più complessa di , ma può essere automatizzato. Alla fine, mi è piaciuto ancora di più Fly.io. Si sente più flessibile per la scalabilità se il progetto inizia a crescere. Vercel È interessante notare che Fly.io non ha formalmente un livello gratuito, ma se il tuo utilizzo mensile rimane al di sotto di $ 5, non ti addebiteranno nulla. Choosing a Database Scegliere un database Ci sono due approcci principali qui: La prima opzione è quella di eseguire il proprio database sul proprio server. Questo ti dà il pieno controllo e può essere completamente gratuito. La seconda opzione è quella di utilizzare il database come servizio. Per entrambi i miei progetti, ho scelto il secondo approccio perché volevo muoversi il più velocemente possibile. . Supabase Supabase fornisce una gestione Un database con diversi strumenti utili. PostgreSQL Perché Supabase è conveniente Supabase supporta lo storage vettoriale. Questo è diventato importante per uno dei miei progetti in cui i dati sono stati memorizzati come embeddings generati con il modello OpenAI embedding-3-small. Supabase include l'autenticazione integrata. Gli utenti possono accedere utilizzando fornitori come Google, GitHub, email e altri fornitori. Supabase fornisce anche archiviazione di file, che consente agli utenti di caricare immagini e altre risorse senza costruire infrastrutture separate. Un'altra caratteristica molto utile è il supporto per le funzioni RPC. Nel mio secondo progetto ho completamente smesso di consentire al backend di interrogare direttamente le tabelle di database. Invece, tutto passa attraverso le funzioni RPC. In pratica, questo ha significativamente ridotto gli errori di generazione di codice. Supabase include anche potenti strumenti di sicurezza come le politiche Row Level Security (RLS). Supabase Drawbacks Il primo problema che ho incontrato riguardava il sistema di autenticazione integrato. In particolare, il login di Google si comporta in modo inconsistente per gli utenti che accedono all'applicazione tramite Safari su iPhone. Ho scoperto questo solo dopo circa due mesi di sviluppo e in pratica si è rivelato quasi impossibile risolvere. Supabase offre tecnicamente un livello gratuito, ma in pratica, potresti ancora finire per pagare intorno a $ 25-40 al mese, anche se l'applicazione è ancora in fase di sviluppo e non ha utenti. Cursore + ChatGPT: due ruoli diversi per me, Ci sono altre opzioni IDE, ma Cursor ha funzionato molto bene nel mio caso. passare a qualcosa come VS Code e interagire con un assistente AI attraverso il terminale è qualcosa che personalmente non ho interesse a provare. Cursor is the primary development environment I principali svantaggi del cursore sono e . cost frequent updates In alcuni casi, le spese sono state Con il tempo, ho imparato a controllare quei costi.Oggi, una stima realistica è circa se si utilizzano attivamente modelli potenti. $100 per day $300 per month Cursor offre anche un abbonamento di base per , ma affidarsi al modello più economico è praticamente impossibile, e i limiti per i modelli a pagamento sono piuttosto piccoli. $20 Perché ChatGPT è ancora importante Anche se si utilizza Cursor, consiglio vivamente di avere un della sottoscrizione. ChatGPT Plus Il mio flusso di lavoro di solito sembra questo: Cursore → scrivere e modificare il codice ChatGPT → discutere idee e architettura All'interno di Cursor, il modello è ottimizzato per Al di fuori di Cursor, ChatGPT si comporta più come un partner di pensiero creativo. code generation and stability Una regola semplice: Non chiedere a ChatGPT di scrivere il codice di produzione Don’t ask ChatGPT to write your production code Lo stesso modello all'interno di Cursor, o in particolare modelli come Opus, genererà codice molto meglio. Utilizzo di ChatGPT per Visual Assets Un altro uso inaspettato di ChatGPT è stato . image generation Il mio secondo progetto rappresenta gli ambienti visivi: parchi digitali con monumenti, percorsi e oggetti decorativi. Questo richiede un gran numero di risorse grafiche. Invece di acquistare risorse o assumere progettisti per ogni iterazione, ho generato la maggior parte delle immagini direttamente con ChatGPT. Dal momento che la generazione di immagini è inclusa nell'abbonamento ChatGPT Plus, questo ha risparmiato una quantità sorprendente di denaro durante lo sviluppo ed è stato semplicemente molto conveniente. strumenti di progettazione Molti sviluppatori usano Progettare interfacce prima di scrivere il codice. Figma Cursor può generare layout UI ragionevoli da solo, e io li regolerò semplicemente manualmente dopo. Tuttavia, se si preferisce progettare le interfacce prima, Figma può ancora essere molto utile. Google sta anche sperimentando strumenti che convertono layout di design direttamente in codice. , che può generare un'implementazione iniziale dai progetti di interfaccia. Google Stitch In teoria si può: Progetta l'interfaccia in Figma Creare template con Stitch Convertire i modelli in componenti React Email e piccole parti di infrastruttura La maggior parte delle applicazioni alla fine devono inviare e-mail. Per fare questo, ho usato un semplice servizio chiamato . Resend Più tardi, potresti anche voler introdurre il caching utilizzando qualcosa come Ma in entrambi i miei progetti ho rinviato questo passo. Redis Redis Se l'architettura è progettata correttamente, la cache può sempre essere aggiunta in un secondo momento. Se l'architettura è progettata correttamente, la cache può sempre essere aggiunta in un secondo momento. Hai bisogno di Docker? In entrambi i progetti, sono riuscito a lavorare completamente senza . doccia doccia Vercel costruisce il progetto automaticamente (come lo capisco, il servizio è stato creato dalla stessa squadra che ha sviluppato Next.js).Con Fly.io, puoi usare Docker per costruire il progetto localmente sulla tua macchina, ma puoi anche caricare i file come sono e lasciare che il build venga eseguito sui loro server. A un certo punto, qualcosa si è rotto e Fly.io ha smesso di raccogliere i file e avviare il build. Il consiglio comune online è di cambiare la regione del server nelle impostazioni Fly o passare a build locali (che è dove Docker diventa utile). ma ho risolto in modo diverso, utilizzando una bandiera specifica nel comando di distribuzione Fly, quindi non ho dovuto fare nessuna di queste cose. Puoi anche chiedere a Opus come risolverlo con un minimo sforzo (senza cambiare il server o installare Docker). Il hardware conta più di quanto pensi Una lezione inaspettata non aveva nulla a che fare con la programmazione. Il tuo hardware conta Your hardware setup matters Il cursore funziona molto meglio quando hai abbastanza spazio sullo schermo per vedere più pannelli contemporaneamente. Tecnicamente ha funzionato, ma è stato estremamente scomodo. 13-inch tablet Trasformazione a Migliora drasticamente il flusso di lavoro. 27-inch monitor Il cursore può anche essere abbastanza ricco di risorse, quindi avere un computer ragionevolmente potente aiuta sicuramente. Il cursore può anche essere abbastanza ricco di risorse, quindi avere un computer ragionevolmente potente aiuta sicuramente. Sistema operativo Per il contesto, ho eseguito l'intero esperimento su . Windows Tuttavia, nulla in questa pila dipende effettivamente da Windows, tranne che i costanti tentativi dell'IA di generare comandi di shell utilizzando (che può essere risolto con alcune regole che descriverò più avanti). && Lo stesso dispositivo funziona perfettamente su . macOS or Linux Minimum Stack riassunto Se semplifiamo tutto, il mio stack sembra approssimativamente questo: Impostazione: Next.js Base dati: Supabase Servizio di hosting: Fly.io Titolo: Il Cursore Servizio di chat: ChatGPT Email: inviare E questo è stato più che sufficiente per costruire . real working products Cosa verrà dopo Prima di scrivere qualsiasi codice, è necessario descrivere chiaramente il prodotto. La maggior parte delle persone che utilizzano strumenti di intelligenza artificiale salta direttamente nella codifica. Nella mia esperienza, questo è il modo più veloce per creare un sistema caotico. Se non hai ancora costruito un prodotto con AI, onestamente, ti invido. ricordo ancora la sensazione che ho avuto nell'estate del 2025 quando ho iniziato a sperimentare con esso. Se non hai ancora costruito un prodotto con AI, onestamente, ti invido. ricordo ancora la sensazione che ho avuto nell'estate del 2025 quando ho iniziato a sperimentare con esso. Ora il mio consiglio può sembrare un po' strano: Fermati per qualche giorno. Fermati per qualche giorno. Fermati per qualche giorno. Prenditi 3-5 giorni e resisti alla tentazione di installare immediatamente Cursor, Antigravity o qualsiasi altra piattaforma di sviluppo AI. Perché la qualità del tuo pensiero in questa fase determinerà quanto doloroso (o come liscio) le prossime settimane o anche mesi di sviluppo saranno. ogni Può salvare . 10 minutes of thinking now hours of refactoring later Inizia con una conversazione Il modo più semplice per farlo è aprire ChatGPT e iniziare a discutere utilizzando l'ingresso vocale (non la modalità di conversazione vocale completa, ma il pulsante voce-testo). Just start talking. For example, explain: Cosa fa il tuo prodotto Chi sono gli utenti Quale problema risolve Quali azioni eseguiranno gli utenti L’obiettivo di questa conversazione non è quello di generare codice, ma quello di scoprire gradualmente la struttura del futuro sistema. Durante questa discussione, dovresti anche dire a ChatGPT quale pila di tecnologia hai intenzione di utilizzare. For example: successivo.js Tipi di script supporti Il vento E chiedere esplicitamente ChatGPT Spiegare che si scriverà il codice più tardi in Cursor, ma si vuole ChatGPT per descrivere come sarebbe architettura del sistema. not to generate code Personalmente ho visto diverse persone trascorrere mesi intorno a un'idea senza mai chiedere all'IA questa semplice domanda. Pensa ai dati, non solo agli schermi Una delle parti più importanti di questa fase è la progettazione del modello dei dati. Se non hai mai lavorato con database prima, immagina il sistema come un insieme di fogli di calcolo di Excel. Ask yourself questions like: Un singolo utente può creare più oggetti? Gli oggetti appartengono a categorie? Le categorie possono contenere più oggetti? Esistono relazioni tra gli oggetti? For example: Un utente, molti articoli Un articolo → una categoria... o forse un articolo → più categorie e tag un articolo → molti commenti che caricano su scroll Commenti → Reazioni Un’altra questione importante è Tutti saranno uguali o alcuni utenti avranno privilegi aggiuntivi? user roles moderatori amministratori Puoi aggiungere ruoli più tardi, ma è molto più facile pianificare per loro in anticipo. Idealmente, la tua descrizione tecnica dovrebbe includere: I nomi delle tabelle (articoli, commenti, reazioni) Nomi di colonna (nome utente, avatar, bio) Relazioni tra tabelle Anche se si prevede di evolvere il prodotto gradualmente, una struttura chiara dall'inizio può risparmiare un'enorme quantità di rifactoring in seguito. In entrambi i miei progetti, il database alla fine si è concluso con circa Ecco la struttura del mio secondo progetto: 30–40 tables Il tuo progetto probabilmente finirà con un numero simile. ma per le specifiche tecniche iniziali, anche è sufficiente 10 core tables lavoro chees Il concetto più difficile per i principianti è di solito Una coda è una tabella che memorizza attività piuttosto che oggetti come utenti o articoli. Hai bisogno di una coda quando il sistema interagisce con servizi esterni. job queues Ad esempio, immaginate che dopo che un utente pubblica un articolo, lo invii a un servizio esterno per la traduzione o l'analisi. Non è possibile eseguire in modo affidabile l'operazione immediatamente durante la creazione dell'articolo, i servizi esterni potrebbero fallire o rispondere lentamente. Non è possibile eseguire in modo affidabile l'operazione immediatamente durante la creazione dell'articolo, i servizi esterni potrebbero fallire o rispondere lentamente. L'articolo stesso deve essere creato immediatamente (perché dipende solo dalla tua applicazione).Ma ulteriori dati possono essere aggiunti in seguito attraverso un processo di background. Ad esempio, la tabella articoli potrebbe apparire così: 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 di .jpg Articolo 1 Ciao 33 535 2° JPG Articolo 2 Prossima parte Dopo la creazione di ciascun articolo, viene rilasciato il seguente articolo: id entity_type entity_id status attempts es_text_generated 1 article_text 32 processed 1 Hola 2 article_text 33 pending 0 1 Articolo - Testo 32 processi 1 Hola Ciao 2 Articolo - Testo 33 pendente 0 Come solo l'applicazione viene eseguita, il trigger aggiunge automaticamente le informazioni sull'articolo nella tabella principale degli articoli 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 di .jpg Articolo 1 Ciao Hola Ciao 33 535 2° JPG Articolo 2 Prossima parte Le cadenze per i servizi esterni in Supabase sono solitamente gestite attraverso . Edge Functions In Supabase ci sono 2 diversi tipi di funzioni: e . RPC Edge Procedura di chiamata remota è una funzione che sostituisce le query dirette alle tue tabelle di database. Ad esempio, invece che il tuo server faccia una query diretta per recuperare ( ) tutti gli articoli appartenenti a un utente specifico ( ) di : RPC selezione 535 selezione 535 SELECT * FROM articles WHERE author_id = 535; Consiglio vivamente di chiedere al tuo assistente AI di creare una funzione come questa: 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; $$; Poi, all'interno del codice del progetto, si chiama semplicemente questa funzione in questo modo: SELECT * FROM get_user_articles(535); Per assicurarsi che questo approccio funzioni sempre correttamente e in modo coerente, aggiungi regole esplicite alla tua specifica tecnica (lo discuteremo più avanti): mai interrogare il database direttamente dal client; sempre passare attraverso le rotte API del server vietare le query di tabella diretta all'interno dell'API; se è necessaria una nuova operazione dati e non esiste ancora un RPC, creare una migrazione con una nuova funzione RPC usare sempre SET search_path = '' all'interno delle funzioni RPC e riferirsi esplicitamente allo schema quando si accede alle tabelle Non entrerò più in profondità in questo argomento in questo momento, ma seguire queste regole ti salverà un sacco di mal di testa in seguito. Non andrò più in profondità in questo argomento in questo momento, ma seguire queste regole ti salverà . a lot of headaches later Edge functions Funzione Edge e viene tipicamente utilizzato per interagire con servizi esterni. outside the database Corrono su e può chiamare funzioni RPC all'interno del database quando necessario. JavaScript or TypeScript (Deno runtime) Questa era la sezione più complessa sul database. Forse non lo capisci ancora completamente e questo è del tutto ok: In questo caso si tratta di dettagli secondari. In secondo luogo, durante la tua discussione puoi semplicemente chiedere a ChatGPT di trovare questo articolo, “Cursor Your Dream”, e chiarire tutto ciò che non capisci. In terzo luogo, come ho detto nella parte 1, Cursor è molto bravo a costruire database e architettura backend. Pensa ai componenti Se hai già un'idea dell'interfaccia, puoi descriverla in termini di componenti. Ad esempio: Articolo componente Componente del profilo utente Modalità di Windows Elementi di navigazione Un componente articolo può avere diversi modi: Modalità di visualizzazione per lettori Modalità edit per autori Modalità di moderazione per admin Se pensi ai componenti in anticipo, gli strumenti AI genereranno successivamente un codice molto più pulito. Una regola importante per lo styling Chiedi a ChatGPT di includere un'istruzione nella specifica che , ma invece usare correttamente le classi CSS, ad esempio attraverso Tailwind. Cursor should not use inline CSS styles In uno dei miei progetti ho dimenticato di menzionare questo. Di conseguenza, la logica dello styling è finita per essere dispersa su decine di componenti, e pulirlo in seguito è stato doloroso. Una nota fondamentale sull’autenticazione: If you plan to use Supabase, specify that , not by the default Supabase authentication system. JWT tokens should be generated by your application If you’re new to authentication systems, this may sound strange. But this small detail can prevent serious problems later, especially when users sign in through . Safari on iPhone Una nota fondamentale sull’autenticazione: Se si prevede di utilizzare Supabase, specificare che i token JWT dovrebbero essere generati dalla vostra applicazione, non dal sistema di autenticazione Supabase predefinito. Se sei nuovo nei sistemi di autenticazione, questo può sembrare strano, ma questo piccolo dettaglio può prevenire gravi problemi in seguito, specialmente quando gli utenti si accedono tramite Safari su iPhone. Sample Case Study (dal mio secondo progetto) Per rendere questo più concreto, lascia che ti mostriamo come questo processo abbia funzionato per il mio secondo progetto, “. ”. onore onore Il primo prompt Ecco la prima prompt che ha avviato la discussione. Per molti anni ho avuto l’idea di costruire un memoriale digitale. Può essere una piattaforma in cui un gruppo di utenti crea mappe paesaggistiche, un altro colloca monumenti e altri lasciano offerte - come fiori o commenti. Penso che possa essere un’idea rivoluzionaria perché nulla di simile sembra esistere. Ma sono preoccupato per le questioni legali. ad esempio, cosa succede se qualcuno crea un monumento per una persona viva? o crea un monumento per qualcuno come Michael Jackson - potrebbe causare problemi legali legati all'uso del nome? Tecnicamente lo immagino come un sito web con una mappa isometrica in cui sono collocati i monumenti. Idealmente dovremmo trovare un buon motore invece di costruire tutto da zero. Per molti anni ho avuto l’idea di costruire un memoriale digitale. Può essere una piattaforma in cui un gruppo di utenti crea mappe paesaggistiche, un altro colloca monumenti e altri lasciano offerte - come fiori o commenti. Penso che possa essere un’idea rivoluzionaria perché nulla di simile sembra esistere. Ma sono preoccupato per le questioni legali. ad esempio, cosa succede se qualcuno crea un monumento per una persona viva? o crea un monumento per qualcuno come Michael Jackson - potrebbe causare problemi legali legati all'uso del nome? Tecnicamente lo immagino come un sito web con una mappa isometrica in cui sono collocati i monumenti. Mappa isometrica Idealmente dovremmo trovare un buon motore invece di costruire tutto da zero. A quel punto la prompt non era affatto tecnica; era semplicemente un punto di partenza per la discussione. ChatGPT Response (risposta abbreviata) L’idea di un memoriale digitale è interessante perché non è solo un altro social network.Il vostro concetto è più vicino a uno spazio digitale di memoria, dove le persone interagiscono attraverso azioni simboliche: visite, commenti, offerte. La questione legale che hai menzionato – la creazione di un monumento per una persona viva – esiste, in alcuni casi potrebbe essere interpretata come diffamazione o danno alla reputazione. Tuttavia, le piattaforme di solito gestiscono questo rischio attraverso la progettazione del prodotto, non attraverso il divieto totale. - sistemi di reclamo e tag-down - regole chiare per i contenuti generati dall'utente - frammenting memorials spazi asymbolic, non affermazioni factuali sulla morte Tecnicamente, per una mappa isometrica sul web è solitamente meglio utilizzare un framework di rendering esistente. - Phaser per scene interattive a base di piastrelle - PixiJS per rendering web flessibile e integrazione UI Se più tardi si vogliono veri monumenti 3D, si potrebbe passare a Three.js, ma per un MVP un approccio basato su piastrelle 2D è di solito molto più veloce. L’idea di un memoriale digitale è interessante perché non è solo un altro social network.Il vostro concetto è più vicino a uno spazio digitale di memoria, dove le persone interagiscono attraverso azioni simboliche: visite, commenti, offerte. Lo spazio digitale della memoria La questione legale che hai menzionato – la creazione di un monumento per una persona viva – esiste, in alcuni casi potrebbe essere interpretata come diffamazione o danno alla reputazione. Tuttavia, le piattaforme di solito gestiscono questo rischio attraverso la progettazione del prodotto, non attraverso il divieto totale. Prodotto Design - sistemi di reclamo e tag-down - regole chiare per i contenuti generati dall'utente - frammenting memorials spazi asymbolic, non affermazioni factuali sulla morte Gli spazi simbolici Tecnicamente, per una mappa isometrica sul web è solitamente meglio utilizzare un framework di rendering esistente. - Phaser per scene interattive a base di piastrelle - PixiJS per rendering web flessibile e integrazione UI Il Phaser pizzico Se più tardi si vogliono veri monumenti 3D, si potrebbe passare a Three.js, ma per un MVP un approccio basato su piastrelle 2D è di solito molto più veloce. di.js Dopo di che la discussione è proseguita. I miei messaggi di seguito Mi sento molto bene con la pseudo-3D. A un livello, gli utenti creano una mappa: la scelgono come griglia e la riempiono di erba, percorsi e altri elementi attraverso un editor visivo. A un altro livello, gli utenti collocano monumenti che possono occupare diversi numeri di piastrelle, come 1, 2 o 4. C’è anche un terzo tipo di utente: non creano mappe o monumenti, semplicemente lasciano offerte come fiori. Ogni mappa dovrebbe avere la sua URL unica. Mi sento molto bene con la pseudo-3D. Il pseudo-3D A un livello, gli utenti creano una mappa: la scelgono come griglia e la riempiono di erba, percorsi e altri elementi attraverso un editor visivo. A un altro livello, gli utenti collocano monumenti che possono occupare diversi numeri di piastrelle, come 1, 2 o 4. C’è anche un terzo tipo di utente: non creano mappe o monumenti, semplicemente lasciano offerte come fiori. Ogni mappa dovrebbe avere la sua URL unica. Voglio anche che il proprietario della mappa riceva una percentuale di acquisti all'interno della mappa. ad esempio, se qualcuno acquista un monumento lì, potrei condividere il 20% dei ricavi con il proprietario della mappa. Se qualcuno lascia fiori in un monumento, quasi il 20% va al proprietario del monumento e un altro 20% al proprietario della mappa. Voglio anche che il proprietario della mappa riceva una percentuale di acquisti all'interno della mappa. ad esempio, se qualcuno acquista un monumento lì, potrei condividere il 20% dei ricavi con il proprietario della mappa. Se qualcuno lascia fiori in un monumento, quasi il 20% va al proprietario del monumento e un altro 20% al proprietario della mappa. Sto pensando di costruire il progetto utilizzando Next.js + Supabase. Che motore pseudo-3D sarebbe il migliore? Sto pensando di costruire il progetto utilizzando Next.js + Supabase. Che motore pseudo-3D sarebbe il migliore? Articolo successivo Next.js + Supabase Ora espandi la descrizione tecnica, riunisci tutto in un unico documento e aggiungi un'introduzione che spiega il problema e il prodotto. Ora espandi la descrizione tecnica, riunisci tutto in un unico documento e aggiungi un'introduzione che spiega il problema e il prodotto. Markdown (.md) File with the Spec Dopo diverse conversazioni, la specifica tecnica era pronta. Lo stesso accadrà per te. Assicurati di chiedere che la specifica finale venga generata nel formato Markdown e copiarla in un file di testo. Questo file sarà sicuramente necessario in una fase successiva. .md Ma invece di inviarlo direttamente al Cursor, chiedetevi questo: Quale parte del prodotto è la più importante per te, o la più rappresentativa? Questo è importante perché il tuo primo prompt per Cursor può differire dalla specifica tecnica. Per me questa parte è stata la Così ho deciso di costruire solo quello prima (senza autenticazione, un database o un backend). map editor mechanics Il mio ultimo prompt a ChatGPT Scrivi un prompt per Cursor dove l'obiettivo principale è quello di creare un editor di mappe. Per ora dovrebbe funzionare senza autenticazione e senza Supabase. Anche se la mappa non può essere salvata ancora, questo è ok. L'obiettivo principale è quello di sentire la meccanica della mappa prima di costruire l'intero prodotto. Idealmente questo dovrebbe essere un componente che in seguito può essere integrato in un sistema completo. Scrivi un prompt per Cursor dove l'obiettivo principale è quello di creare un editor di mappe. Per ora dovrebbe funzionare senza autenticazione e senza Supabase. Anche se la mappa non può essere salvata ancora, questo è ok. Mappa editore L'obiettivo principale è quello di sentire la meccanica della mappa prima di costruire l'intero prodotto. Idealmente questo dovrebbe essere un componente che in seguito può essere integrato in un sistema completo. ChatGPT Risposta Qui sotto è il che alla fine ha prodotto il prototipo di lavoro in Cursor. final instruction Sei un ingegnere senior frontend / gioco. Stiamo costruendo solo un prototipo di un editor di mappe (pseudo-3D isometrico) come componente isolato al fine di esplorare la meccanica di interazione principale. Restrizioni severe Nessuna autenticazione. nessun Supabase, database, Stripe o qualsiasi componente di backend. nessun schermo di prodotto aggiuntivo. L'obiettivo è solo la meccanica interattiva di modifica della mappa, delle slot e del posizionamento dei monumenti. Formato di uscita Implementare questo come un componente React autonomo (React + TypeScript) che può essere integrato in un'applicazione Next.js. Il componente deve: *— mantenere lo stato locale*— esporre un'API pubblica (props / callbacks) tecnologie — React + TypeScript — PixiJS + pixi-viewport Modello di prodotto (importante) Quando viene creata una mappa, il proprietario definisce SLOTS - aree rettangolari sulla griglia dove altri utenti saranno in grado di posizionare monumenti in seguito. In questo prototipo realizziamo entrambi: L'editore di slot - posizionamento del monumento Tutti i dati vengono memorizzati localmente. Le entità (in memoria) Grid - piastrelle NxM (erba, percorso) Slot — rettangolo definito come x, y, w, hkind: monumentid Monumento occupa esattamente uno slotProperties: dimensioni(1x1x1x2x2)slotIdrotazione(opzionale)id Funzionalità di prototipo (Editor MVP) Generare una mappa NxM (default: 20 × 20). Proiezione isometrica. Controllo delle telecamere: - Pan (drag) – zoom (3 livelli di zoom fissati) strumenti Paint grass – Paint path – Strumento di slot (creare/eliminare slot, dimensioni rettangolari: 1×1, 1×2, 2×2) – Monumento di posto (i monumenti possono essere posizionati solo su uno slot esistente di dimensioni corrispondenti) – Eraser (elimina il monumento o lo slot a seconda di ciò che si trova sotto il cursore) regole - I percorsi non possono essere coperti da slot. - Le slot non possono intersecarsi. - Un monumento può essere collocato solo in slot di dimensioni corrispondenti. - Le slot e i monumenti non devono mai sovrapporsi. selezione Cliccando su un slot o un monumento lo seleziona (fissare con un telaio). Un piccolo pannello di informazioni (React div) appare a destra mostrando: — tipo — coordinate — dimensioni — id Stato di esportazione/importazione (JSON, In-Memory) Il pulsante JSON → esporta lo stato corrente in un'area di testo. Il pulsante Importazione JSON → carica lo stato da textarea. UX Dettagli La barra degli strumenti in alto o a sinistra contiene: — selezione degli strumenti— selettore delle dimensioni della slot (1×1 / 1×2 / 2×2)— pulsanti di esportazione / importazione La modalità del cursore deve essere chiaramente visibile (l'etichetta mostra lo strumento corrente) Requisiti architettonici (importanti per la futura scalazione) Modello separato (grid / slot / monumenti) dal render (layer Pixi). Crea Pixi Application e viewport solo una volta. Non ricrearli ogni volta che cambi lo stato. Usare usEffect con la pulizia corretta: - distruggere l'app - rimuovere gli ascoltatori - cancellare i quadri di animazione Non archiviare gli oggetti Pixi in stato React. Gestire correttamente la dimensione del contenitore utilizzando ResizeObserver. Attaccare gli eventi del puntatore a viewport/stage una volta e rimuoverli in unmount. Utilizzare la classificazione della profondità per il rendering isometrico (ad esempio x + y o y) in modo che gli oggetti si sovrappongano correttamente. Il compito In primo luogo, proponiamo una struttura di file minima: mapEditor.tsxmodel.tsisoMath.tsrender.ts Quindi implementare un prototipo di lavoro minimo (TypeScript) in modo da poter incollare il componente in un progetto React / Next.js vuoto e vedere immediatamente l'editor in funzione. Al termine includere una breve lista di “cose da migliorare in seguito” (massimo 8 elementi). Non aggiungere nulla al di là di quanto sopra specificato. Sei un ingegnere senior frontend / gioco. Senior Frontend / Ingegnere di Giochi Stiamo costruendo solo un prototipo di un editor di mappe (pseudo-3D isometrico) come componente isolato al fine di esplorare la meccanica di interazione principale. solo un prototipo di un editor di mappe Restrizioni severe Restrizioni severe Nessuna autenticazione. nessun Supabase, database, Stripe o qualsiasi componente di backend. nessun schermo di prodotto aggiuntivo. L'obiettivo è solo la meccanica interattiva di modifica della mappa, delle slot e del posizionamento dei monumenti. Formato di uscita Formato di uscita Implementare questo come un componente React autonomo (React + TypeScript) che può essere integrato in un'applicazione Next.js. Componente React autonomo Il componente deve: *— mantenere lo stato locale*— esporre un'API pubblica (props / callbacks) Fuoco pubblico tecnologie tecnologie — React + TypeScript — PixiJS + pixi-viewport Modello di prodotto (importante) Modello di prodotto (importante) Quando viene creata una mappa, il proprietario definisce SLOTS - aree rettangolari sulla griglia dove altri utenti saranno in grado di posizionare monumenti in seguito. Gli slot In questo prototipo realizziamo entrambi: In questo prototipo realizziamo entrambi: L'editore di slot - posizionamento del monumento Tutti i dati vengono memorizzati localmente. Le entità (in memoria) Le entità (in memoria) Grid - piastrelle NxM (erba, percorso) Slot - rettangolo definito come x, y, w, h kind: monument id Monumento occupa esattamente uno slotProperties: dimensioni(1x1x1x2x2)slotIdrotazione(opzionale)id Funzionalità di prototipo (Editor MVP) Funzionalità di prototipo (Editor MVP) Generare una mappa NxM (default: 20 × 20). Proiezione isometrica. 20 × 20 Controllo delle telecamere: Controllo delle telecamere: - Pan (drag) – zoom (3 livelli di zoom fissati) strumenti strumenti Paint grass – Paint path – Strumento di slot (creare/eliminare slot, dimensioni rettangolari: 1×1, 1×2, 2×2) – Monumento di posto (i monumenti possono essere posizionati solo su uno slot esistente di dimensioni corrispondenti) – Eraser (elimina il monumento o lo slot a seconda di ciò che si trova sotto il cursore) regole regole - I percorsi non possono essere coperti da slot. - Le slot non possono intersecarsi. - Un monumento può essere collocato solo in slot di dimensioni corrispondenti. - Le slot e i monumenti non devono mai sovrapporsi. Slot gratuito di matching size selezione selezione Cliccando su un slot o un monumento lo seleziona (fissare con un telaio). Un piccolo pannello di informazioni (React div) appare a destra mostrando: — tipo — coordinate — dimensioni — id Stato di esportazione/importazione (JSON, In-Memory) Stato di esportazione/importazione (JSON, In-Memory) Il pulsante JSON → esporta lo stato corrente in un'area di testo. Esportazione JSON Il pulsante Importazione JSON → carica lo stato da textarea. Importazione JSON UX Dettagli UX Dettagli La barra degli strumenti in alto o a sinistra contiene: — selezione degli strumenti— selettore delle dimensioni della slot (1×1 / 1×2 / 2×2)— pulsanti di esportazione / importazione La modalità del cursore deve essere chiaramente visibile (l'etichetta mostra lo strumento corrente) Requisiti architettonici (importanti per la futura scalazione) Requisiti architettonici (importanti per la futura scalazione) Modello separato (grid / slot / monumenti) dal render (layer Pixi). Modello rendere Crea Pixi Application e viewport solo una volta. Non ricrearli ogni volta che cambi lo stato. Applicazione Pixi e viewport solo una volta Con una corretta pulizia: usare useEffect - distruggere l'app - rimuovere gli ascoltatori - cancellare i quadri di animazione Non archiviare gli oggetti Pixi in stato React. Rif Gestire correttamente la dimensione del contenitore utilizzando ResizeObserver. Ricostruzione Attaccare gli eventi del puntatore a viewport/stage una volta e rimuoverli in unmount. Una volta o Gli oggetti si sovrappongono correttamente. Utilizzare la classificazione della profondità per il rendering isometrico (ad esempio x + y y Profondità Sorteggio Il compito Il compito In primo luogo, proponiamo una struttura di file minima: mapEditor.tsx model.ts isoMath.ts render.ts Quindi implementare un prototipo di lavoro minimo (TypeScript) in modo da poter incollare il componente in un progetto React / Next.js vuoto e vedere immediatamente l'editor in funzione. Prototipo di lavoro minimo (TypeScript) Al termine includere una breve lista di “cose da migliorare in seguito” (massimo 8 elementi). “Cose da migliorare dopo” Non aggiungere nulla al di là di quanto sopra specificato. Non aggiungere nulla al di là di quanto sopra specificato. Non affrettarti al passo successivo Il tuo compito in questo momento è quello di pensare alla tua idea. discutilo. Nella mia esperienza, è anche importante concentrarsi sul - la versione minima del prodotto che è ancora sufficiente per consentire all'utente di comprendere cos'è il prodotto e quale problema principale risolve. MVP Due start-up di successo nella mia vita hanno in realtà iniziato come niente di più che demo, anche semplici presentazioni. , e testarli sul traffico reale molto più velocemente. real products instead of demos Dovresti anche pensare non solo al prodotto stesso, ma anche al . path to market Diversi dei miei progetti si sono fermati esattamente al punto in cui non avevo una buona risposta alle basi. delle domande. go-to-market Quindi, prima di scrivere il codice, cercare di chiarire due cose: Che cosa è il prodotto Come arrivare ai primi utenti? Alla fine, dovresti avere Documenti due due Il primo è il Questo documento vivrà nella radice del tuo progetto e sarà continuamente letto e aggiornato dall'IA durante lo sviluppo. full technical specification La seconda è la - il prompt che invierai a Cursor come tuo primo compito. E questo sarà solo l'inizio. man mano che lo sviluppo progredisce, finirai per scrivere . first working prompt hundreds of prompts like this Successivo Nel prossimo articolo (in arrivo presto), passeremo finalmente alla parte tecnica: installare Cursor e generare il primo codice di lavoro reale. Ed è qui che tutto diventa entrambi . very exciting and a little chaotic