Ecco la traduzione in italiano del testo fornito, seguendo tutte le linee guida specificate.
Recentemente, molti amici con un background umanistico hanno provato a usare Codex per sviluppare i propri prodotti.
I due articoli precedenti spiegavano come usare Codex; questo si concentra sull'applicazione pratica: come usarlo per creare un Mini Program WeChat.
Per prima cosa, diamo un'occhiata al risultato. Questa volta abbiamo creato un Mini Program di check-in per la lettura chiamato "One Page". Di seguito è mostrata la sua interfaccia in esecuzione negli Strumenti per Sviluppatori di WeChat.
L'intero processo, dall'idea a un Mini Program utilizzabile, può essere suddiviso in questi passaggi:
Progettazione del Prototipo in Figma → Generazione del Codice con Codex → Simulazione negli Strumenti Sviluppatore → Anteprima Mobile → Invio per Revisione e Pubblicazione.
Figma è responsabile per determinare l'aspetto delle pagine e dove portano i pulsanti; Codex trascrive il progetto in codice; gli Strumenti per Sviluppatori di WeChat servono per eseguire, controllare e inviare il Mini Program a un telefono per l'anteprima. Dopo aver preparato il tuo account Mini Program, lo invii per la revisione e lo pubblichi tramite il backend di WeChat.
1. Cos'è Figma e perché usarlo prima?
Figma è uno strumento di progettazione e collaborazione per interfacce, comunemente usato per progettare pagine di app, siti web e Mini Program. I designer lo usano per layout, colori e pulsanti; i product manager lo usano per discutere i flussi operativi; gli sviluppatori visualizzano dimensioni, spaziature e risorse del progetto per implementare le pagine.
Permette anche di creare prototipi di prodotto cliccabili. Ad esempio, collegando un pulsante della home page a un'altra pagina in modo che cliccandolo si attivi un salto, permettendoti di testare in anticipo se il flusso operativo è fluido.
Questo è esattamente ciò per cui lo stiamo usando questa volta. Prima di scrivere qualsiasi codice, puoi vedere diverse pagine insieme e discutere se un pulsante è ben posizionato o se una schermata è troppo affollata.
In precedenza, questa bozza di progetto veniva solitamente consegnata a uno sviluppatore. Ora, puoi dare la bozza confermata a Codex per scrivere il codice. I designer possono partire da Figma, che conoscono bene; chi usa già Codex può fargli generare una bozza e poi modificarla in Figma.
È così che è stato realizzato "One Page". Abbiamo prima determinato le tre pagine principali — Scaffale, Registrazione e Statistiche — e poi unificato la combinazione di colori e il layout.
Questa è la vetrina del progetto. Il bianco crema è usato per lo sfondo, il blu scuro per il testo e i pulsanti principali, e il verde chiaro per evidenziare l'operazione corrente. La home page mette il libro attualmente in lettura nella posizione più prominente, mentre le informazioni statistiche sono posizionate in una pagina separata per non sovraccaricare l'utente con numeri all'apertura.
Questo passaggio riguarda l'effetto complessivo. Una volta che sei soddisfatto dei colori, delle dimensioni dei caratteri e della disposizione delle pagine, si procede.
2. Lascia che Codex generi una bozza e completi il prototipo in Figma
Anche se non sai disegnare interfacce, puoi iniziare con un requisito chiaro. Ad esempio, questa volta volevo un diario di lettura con molto spazio bianco, dove poter vedere il libro che sto leggendo, registrare facilmente i progressi e rivedere la mia cronologia di lettura.
Spiega a Codex i tuoi requisiti e la direzione visiva insieme:
1Voglio creare un Mini Program WeChat chiamato "One Page" per il check-in di lettura.2Per favore, progetta prima tre pagine: Home Page Scaffale, Registrazione Lettura e Statistiche Lettura. Non scrivere ancora codice funzionale.34Lo stile visivo dovrebbe essere come un tranquillo diario di lettura:5Sfondo bianco crema, testo blu scuro, aree chiave verde chiaro, con molto spazio bianco.6La home page dovrebbe evidenziare il libro in lettura e il punto di accesso per la registrazione. Le altre pagine dovrebbero mantenere lo stesso stile visivo.7Usa grafiche geometriche originali per le copertine dei libri; usa contenuti fittizi per i libri di esempio.89Per prima cosa, dammi un'immagine di anteprima delle tre pagine affiancate.10Inoltre, genera tre file SVG indipendenti da 390×844, mantenendo intatti i raggruppamenti di testo, grafica e pulsanti per ulteriori modifiche in Figma. Per favore, nomina i pulsanti principali individualmente.
Richiedere un output SVG ti permette di inserire il progetto in Figma. SVG è un formato grafico vettoriale; in questo caso, importarlo fornisce testo, grafica e gruppi che possono essere selezionati e modificati individualmente.
Dopo aver ottenuto la bozza, modificala finché non sei soddisfatto. Sii il più specifico possibile con il feedback, ad esempio "restringi un po' il titolo della home page", "uniforma i pulsanti principali al blu scuro" o "ingrandisci la copertina del libro". Una volta che tutte e tre le pagine sono soddisfacenti, gestisci l'interazione del prototipo.
Inserire il progetto in Figma
Apri un file di Progetto Figma, clicca sul "+" accanto a Pagine a sinistra e crea una nuova pagina.
In questo esempio, l'importazione è completata copiando il contenuto SVG e incollandolo sulla tela di Figma. Dai un nome ai tre artboard "01-Home Page Scaffale", "02-Registrazione Lettura" e "03-Statistiche Lettura" e disponili orizzontalmente. Dopo aver selezionato un artboard, controlla larghezza e altezza nel pannello di Progetto a destra.
Se è la prima volta che apri Figma, identifica queste aree: Elenco dei livelli a sinistra, Tela al centro, Pannello di Progetto a destra per l'aspetto e Prototipo per impostare le interazioni. Per modificare qualsiasi testo o pulsante, selezionalo prima nell'Elenco dei livelli.
Ricorda di controllare i font dopo l'importazione. I font potrebbero essere sostituiti a seconda dell'ambiente, il che può cambiare la disposizione dei titoli e la larghezza del testo. Il rendering dei font nella bozza di progetto e nel Mini Program era diverso questa volta, quindi sono stati necessari controlli separati.
Aggiungere salti ai pulsanti
Prendi come esempio la scheda "Continua a Leggere" sulla home page. Selezionala, passa a Prototipo in alto a destra e clicca sul "+" accanto a Interazioni.
Nel pannello Interazione che si apre, imposta queste tre opzioni:
- Trigger: Seleziona "Al clic."
- Azione: Seleziona "Naviga verso."
- Destinazione: Seleziona "02-Registrazione Lettura" (l'artboard di destinazione).
Il pulsante di salvataggio sulla pagina di registrazione si ricollega alla home page, e l'icona delle statistiche sulla home page si collega alla pagina delle statistiche. L'immagine sotto mostra l'impostazione per il punto di accesso alle statistiche.
Clicca sull'icona triangolare "Presenta" in alto a destra per aprire la demo del prototipo. Clicca dalla home page e torna indietro per testare i percorsi tra le pagine.
Il prototipo Figma dimostra i salti; l'inserimento effettivo, il salvataggio e gli aggiornamenti dei dati saranno implementati dal codice del Mini Program nel passaggio successivo.
3. Il progetto è pronto; dove uso MCP?
MCP viene utilizzato nel passaggio in cui si consegna il progetto Figma a Codex. Una volta connesso, Codex può leggere la struttura del progetto, gli stili e le risorse dell'artboard selezionato e continuare l'implementazione basandosi sulla bozza di progetto.
Se sai già come usare Figma e hai una bozza pronta, puoi iniziare direttamente da qui. Seleziona l'artboard che vuoi implementare, copia il link che contiene le informazioni sul nodo di quell'artboard e invialo a Codex con la connessione Figma abilitata.
1Per favore, leggi il contesto del progetto e gli screenshot di questo artboard tramite Figma MCP.2Per prima cosa, spiega la struttura della pagina, le dimensioni dei font, i colori, la spaziatura e le risorse che hai letto.3Dimmi chiaramente se ci sono parti che non riesci a leggere; non fare supposizioni.45Successivamente, creeremo un Mini Program WeChat nativo usando WXML, WXSS, JavaScript e JSON.6Per favore, implementalo secondo questo stack tecnologico, riutilizzando gli stili e le risorse esistenti del progetto.7Completa prima la home page e continua con le altre pagine dopo la conferma.
Assicurati di specificare "Mini Program WeChat nativo". Le informazioni di progetto fornite da Figma devono essere implementate secondo la piattaforma di destinazione; non puoi semplicemente usare codice web per un Mini Program.
In questo esempio, il progetto è stato importato in Figma tramite SVG e il codice segue lo stesso file di progetto e le stesse risorse; MCP è un modo per colmare il divario quando esiste già una bozza di progetto Figma. Indipendentemente dal metodo, ciò che viene consegnato a Codex dovrebbe essere un progetto confermato.
4. Trascrivere il progetto in un Mini Program
Apri la cartella del progetto in Codex, posiziona i file di progetto e le risorse delle copertine dei libri e puoi iniziare l'implementazione.
In questo passaggio, oltre a specificare la tecnologia, devi dichiarare chiaramente cosa vuoi ricevere: un progetto che possa essere importato direttamente negli Strumenti per Sviluppatori di WeChat.
1Per favore, completa il Mini Program WeChat nativo basandoti sul progetto confermato "One Page".23Usa WXML, WXSS, JavaScript e JSON.4Posiziona il codice nella cartella miniprogram e fornisci app.json e project.config.json per garantire che possa essere importato direttamente negli Strumenti per Sviluppatori di WeChat.56Implementa le pagine Scaffale, Registrazione Lettura, Statistiche e Aggiungi Libro.7Segui la combinazione di colori, il layout e le risorse delle copertine dei libri originali confermati.8Salva i dati localmente usando wx.setStorageSync per ora e leggili quando riapri.9Aggiungi validazione dell'input, stati vuoti e messaggi di errore di salvataggio.1011Controlla il codice al termine e dimmi quale directory importare e come compilare.12Se ci sono elementi che devo configurare, elencali separatamente.
Nel progetto generato da Codex, WXML gestisce la struttura della pagina, WXSS gestisce gli stili, JavaScript gestisce i clic e il salvataggio, e JSON configura i percorsi delle pagine. Una volta che riconosci cosa fa ogni file, puoi capire la directory consegnata.
Non farti sopraffare qui; lascia che sia Codex a risolvere per te. Non hai bisogno di capire il codice; basta copiare i prompt, inserire la tua bozza di progetto e cambiarla con il tuo nome.
5. Mettilo negli Strumenti per Sviluppatori di WeChat e vedi se funziona
Dopo aver installato e aver effettuato l'accesso agli Strumenti per Sviluppatori di WeChat, seleziona "Importa Progetto" dal menu "Progetto" e trova la cartella miniprogram generata da Codex.
Il nome del progetto può essere qualsiasi cosa tu voglia. L'AppID è l'identità di questo Mini Program: puoi usare l'account di test fornito dallo strumento per l'apprendimento locale, ma devi passare al tuo AppID Mini Program quando ti prepari a pubblicare. Per questo esempio, seleziona "Non utilizzare servizi cloud" per il backend.
Clicca "Crea", entra nel progetto e attendi la compilazione. Una volta che il simulatore a destra visualizza la pagina, puoi operare direttamente con il mouse. Dopo che Codex modifica il codice, ricompila per vedere i risultati.
Qui, controlla principalmente tre cose: se le pagine sono allineate, se i pulsanti portano alle pagine corrette e se il contenuto inserito può essere salvato. Inoltre, cambia la dimensione dello schermo del simulatore per vedere se titoli lunghi, caselle di input e navigazione inferiore sono angusti.
Se si verificano problemi, invia il testo dell'errore o lo screenshot a Codex, insieme a ciò che hai appena fatto e cosa ti aspettavi di vedere. Per esempio:
1Questo è uno screenshot di un errore negli Strumenti per Sviluppatori di WeChat.2Quando entro nella pagina di registrazione dalla home page, la copertina del libro non viene visualizzata.3Per favore, controlla il percorso dell'immagine e i tempi di caricamento della pagina. Risolvi mantenendo invariato il layout esistente.
In questo caso, abbiamo effettivamente riscontrato un problema di caricamento dell'immagine: il codice iniziava a concatenare l'indirizzo dell'immagine prima che i dati della pagina fossero pronti, risultando in un nome di copertina mancante nel percorso. Dire al codice di attendere che i dati siano pronti prima di visualizzare l'immagine ha risolto il problema.
Problemi simili non richiedono di studiare il codice da zero, ma devi dichiarare chiaramente dove si verificano. Dopo la correzione, torna al simulatore, ripeti l'operazione e conferma che sia tornato alla normalità.
6. Dal simulatore del computer all'anteprima mobile e alla pubblicazione
Una volta che funziona sul computer, controllalo sul telefono.
Usando un AppID con i permessi appropriati, clicca "Anteprima" nella parte superiore degli strumenti di sviluppo, attendi la generazione del codice QR, quindi scansionalo con un account WeChat autorizzato. Concentrati sulla dimensione del carattere sul telefono, se la tastiera blocca l'area di input quando appare e se i pulsanti inferiori sono facili da raggiungere.
In questo esempio, i dati vengono salvati localmente, quindi i record nel simulatore non verranno sincronizzati automaticamente sul telefono. Devi reinserire il contenuto di test sul telefono; se in futuro desideri mantenere i dati su più dispositivi, puoi aggiungere funzioni di sincronizzazione cloud o backup.
Quando sei pronto per far provare gli amici, clicca "Carica" nella parte superiore degli strumenti di sviluppo, poi vai al backend del Mini Program della Piattaforma Ufficiale WeChat. Entra in Gestione Versioni, trova la versione di sviluppo corrispondente, impostala come Versione di Prova e aggiungi i membri di prova. I membri di prova necessitano dei permessi appropriati.
Una volta confermato utilizzabile, invialo per la revisione nel backend e pubblicalo dopo l'approvazione. Compila le informazioni dell'account e le categorie di servizio come richiesto dal backend; non hai bisogno di Codex per completare queste operazioni sull'account per te.
Questo esempio ha raggiunto la fase di esecuzione negli strumenti di sviluppo. I lettori possono procedere con l'anteprima mobile, il caricamento e l'invio per la revisione utilizzando i propri account Mini Program.
Collegare l'intero processo
Per prima cosa, usa Figma per determinare le pagine e i salti dei pulsanti finché non sei soddisfatto del progetto; poi consegna il file di progetto o il link dell'artboard a Codex per trascriverlo in un Mini Program WeChat; quindi importalo negli strumenti di sviluppo per simulare, eseguire e controllare gli errori; infine, visualizzalo in anteprima su un telefono e, dopo la conferma, caricalo, invialo per la revisione e pubblicalo.
In futuro, che tu stia creando uno strumento di check-in, un'app di ricette o altre piccole utility, puoi comunque seguire questo flusso di lavoro. Se il progetto non è soddisfacente, torna a Figma per modificarlo; se c'è un problema funzionale, consegna l'operazione specifica e l'errore a Codex, quindi conferma i risultati della modifica negli strumenti di sviluppo.
Sono Miles, un esperto di algoritmi AI che è passato da una grande azienda tecnologica a FDE. Ho lavorato su R&D, ottimizzazione e distribuzione di algoritmi, oltre che sulla formazione aziendale. Seguimi @miles_mazy per crescere insieme e guadagnare insieme.
