Costruisci l'app di biglietteria con Next.js, Vercel e Back4App

in questo tutorial, costruiremo un ticketing system utilizzando next js con l'app router, back4app come servizio backend, e tailwind css per lo styling l'app consente agli utenti di creare, aggiornare, visualizzare e eliminare i biglietti, utilizzando parse server su back4app per la gestione del database 1\ requisiti prima di iniziare, assicurati di avere node js installato sul tuo computer ( guida all'installazione di node js https //nodejs org/ ) un account back4app ( registrati gratuitamente https //www back4app com/ ) un account vercel per il deployment ( registrati per vercel https //vercel com/ ) 2\ configurazione di back4app accedi al tuo dashboard di back4app e crea un nuovo progetto naviga nel data browser e crea una nuova classe chiamata ticket con il seguente schema nome del campo tipo titolo stringa descrizione stringa categoria stringa priorità numero progresso numero stato stringa creatoil data (generato automaticamente) aggiornatoa data (generato automaticamente) 3\ configurazione del frontend (next js) 3 1 crea un nuovo progetto next js esegui il seguente comando per creare un nuovo progetto next js npx create next app\@latest ticketing app cd ticketing app 3 2 installa le dipendenze installa tailwind css , font awesome , e parse sdk per le operazioni di backend npm install tailwindcss postcss autoprefixer @fortawesome/fontawesome free parse npx tailwindcss init p 3 3 configura tailwind css modifica il tailwind config js file per configurare i percorsi dei contenuti di tailwind css module exports = { content \[ ' /app/ / {js,ts,jsx,tsx}', ' /components/ / {js,ts,jsx,tsx}', ], theme { extend {}, }, plugins \[], } in styles/globals css , aggiungi le importazioni di tailwind @tailwind base; @tailwind components; @tailwind utilities; 3 4 crea la struttura del progetto seguendo la struttura fornita, crea le directory e i componenti necessari struttura delle directory /app /tickets /\[id] page js layout js page js /components deleteblock jsx nav jsx prioritydisplay jsx progressdisplay jsx statusdisplay jsx ticketcard jsx ticketform jsx /lib parseclient js 4\ configurazione del client parse nella /lib cartella, crea un parseclient js file per configurare il sdk di parse import parse from 'parse'; // initialize parse sdk parse initialize('your app id', 'your js key'); parse serverurl = 'https //parseapi back4app com'; export default parse; sostituisci 'your app id' e 'your js key' con le credenziali del tuo progetto back4app 5\ creazione dei componenti chiave 5 1 ticketform questo componente gestirà sia la creazione che l'aggiornamento dei ticket in /components/ticketform jsx , crea il seguente import { usestate } from 'react'; import parse from ' /lib/parseclient'; export default function ticketform({ ticket }) { const \[title, settitle] = usestate(ticket? title || ''); const \[description, setdescription] = usestate(ticket? description || ''); const handlesubmit = async (e) => { e preventdefault(); const ticket = parse object extend('ticket'); const newticket = ticket || new ticket(); newticket set('title', title); newticket set('description', description); try { await newticket save(); alert('ticket saved successfully!'); } catch (error) { console error('error saving ticket ', error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" value={title} onchange={(e) => settitle(e target value)} placeholder="title" required /> \<textarea value={description} onchange={(e) => setdescription(e target value)} placeholder="description" required /> \<button type="submit">save ticket\</button> \</form> ); } 5 2 ticketcard questo componente visualizzerà le informazioni sui singoli biglietti in /components/ticketcard jsx import link from 'next/link'; import progressdisplay from ' /progressdisplay'; export default function ticketcard({ ticket }) { return ( \<div classname="border p 4"> \<h2>{ticket title}\</h2> \<p>{ticket description}\</p> \<progressdisplay progress={ticket progress} /> \<link href={`/tickets/${ticket objectid}`}>edit\</link> \</div> ); } 5 3 eliminablocco un componente di conferma per eliminare i biglietti in /components/deleteblock jsx import parse from ' /lib/parseclient'; export default function deleteblock({ ticketid, ondelete }) { const handledelete = async () => { const query = new parse query('ticket'); const ticket = await query get(ticketid); try { await ticket destroy(); alert('ticket deleted successfully'); ondelete(); } catch (error) { console error('error deleting ticket ', error); } }; return ( \<button onclick={handledelete}>delete ticket\</button> ); } 5 4 visualizzazioneprogresso questo componente mostra il progresso come una barra percentuale in /components/progressdisplay jsx export default function progressdisplay({ progress }) { return ( \<div> \<div classname="w full bg gray 200 rounded"> \<div classname="bg blue 600 text xs font medium text blue 100 text center p 0 5 leading none rounded" style={{ width `${progress}%` }} \> {progress}% \</div> \</div> \</div> ); } 6\ pagine e routing 6 1 elenco dei ticket in /app/page js , visualizza l'elenco dei ticket import { useeffect, usestate } from 'react'; import parse from ' /lib/parseclient'; import ticketcard from ' /components/ticketcard'; export default function home() { const \[tickets, settickets] = usestate(\[]); useeffect(() => { const fetchtickets = async () => { const query = new parse query('ticket'); const results = await query find(); settickets(results); }; fetchtickets(); }, \[]); return ( \<div> \<h1>tickets\</h1> {tickets map(ticket => ( \<ticketcard key={ticket id} ticket={ticket} /> ))} \</div> ); } 6 2 dettagli e modifica del ticket in /app/tickets/\[id]/page js import { useeffect, usestate } from 'react'; import { userouter } from 'next/router'; import parse from ' / / /lib/parseclient'; import ticketform from ' / / /components/ticketform'; import deleteblock from ' / / /components/deleteblock'; export default function ticketdetail() { const router = userouter(); const { id } = router query; const \[ticket, setticket] = usestate(null); useeffect(() => { if (!id) return; const fetchticket = async () => { const query = new parse query('ticket'); const result = await query get(id); setticket(result); }; fetchticket(); }, \[id]); const handledelete = () => { router push('/'); }; if (!ticket) return \<div>loading \</div>; return ( \<div> \<ticketform ticket={ticket} /> \<deleteblock ticketid={ticket id} ondelete={handledelete} /> \</div> ); } 7\ distribuzione su vercel 7 1 crea un account vercel se non hai già un account vercel, vai su vercel com https //vercel com/ e crea un account puoi registrarti con github, gitlab o bitbucket vercel rende facile collegare il tuo repository direttamente per le distribuzioni 7 2 carica il tuo codice su github per distribuire la tua app su vercel, devi avere il tuo progetto ospitato su una piattaforma di controllo versione come github (o gitlab/bitbucket) se il tuo progetto non è ancora su github, segui questi passaggi inizializza git nella directory del tuo progetto aggiungi il tuo progetto a github 7 3 installa vercel cli (opzionale) se preferisci distribuire direttamente dalla riga di comando, installa il vercel cli globalmente in alternativa, puoi distribuire tramite il dashboard di vercel, che tratteremo nel prossimo passaggio 7 4 collega il tuo repository github a vercel vai a vercel https //vercel com/ clicca su nuovo progetto scegli il repository git che contiene il tuo progetto next js configura il tuo progetto vercel rileverà automaticamente che si tratta di un progetto next js e applicherà le impostazioni di build corrette imposta la directory radice sulla cartella del progetto (se necessario) 7 5 imposta le variabili d'ambiente dovrai configurare le tue credenziali back4app e qualsiasi altra variabile d'ambiente in vercel nelle impostazioni del progetto , vai alla sezione variabili d'ambiente aggiungi le seguenti variabili d'ambiente 7 6 configura parse in env local (opzionale) se utilizzi variabili d'ambiente locali durante lo sviluppo, assicurati di creare un file env local nella directory principale del tuo progetto con le seguenti variabili queste variabili di ambiente saranno utilizzate anche da vercel una volta impostate nel dashboard di vercel 7 7 configura le impostazioni di build (opzionale) assicurati che la versione di node js e il comando di build siano configurati correttamente (vercel lo rileva automaticamente) per le app next js , le impostazioni predefinite dovrebbero essere comando di build npm run build directory di output next/ 7 8 distribuisci il progetto dopo aver collegato il tuo repository github, vercel attiverà automaticamente un processo di build e deployment puoi visualizzare lo stato della tua build nel dashboard di vercel 7 9 controlla i log di deployment se si verificano problemi durante il deployment, puoi ispezionare i log di deployment per risolverli 7 10 accedi alla tua app deployata una volta che il deployment è riuscito, vercel ti fornirà un url unico dove la tua app next js è attiva puoi visitare l'url per accedere alla tua app di ticketing deployata ad esempio https //your app name vercel app/ 8\ garantire un deployment fluido credenziali back4app controlla che le tue variabili d'ambiente back4app siano impostate correttamente sia in env local (per lo sviluppo locale) che nel dashboard di vercel (per la produzione) cors (cross origin resource sharing) assicurati che back4app consenta il tuo url vercel nelle sue impostazioni cors, che puoi configurare nel dashboard di back4app sotto sicurezza testa la tua api prima di effettuare il deployment, testa le interazioni della tua api back4app localmente per assicurarti che tutto funzioni senza problemi 9\ conclusione con questi passaggi, la tua app di ticketing next js dovrebbe ora essere deployata su vercel , utilizzando back4app per il backend questo completa il ciclo di sviluppo completo, dalla configurazione di back4app, alla creazione del frontend in next js, fino al deployment dell'app live su vercel se desideri apportare aggiornamenti, basta inviare modifiche al tuo repository github, e vercel attiverà automaticamente un nuovo deployment