Créer l'application de billetterie avec Next.js, Vercel et Back4App

dans ce tutoriel, nous allons construire un système de billetterie en utilisant next js avec le routeur d'application, back4app comme service backend, et tailwind css pour le style l'application permet aux utilisateurs de créer, mettre à jour, consulter et supprimer des billets, tout en utilisant parse server sur back4app pour la gestion de la base de données 1\ prérequis avant de commencer, assurez vous d'avoir node js installé sur votre machine ( guide d'installation de node js https //nodejs org/ ) compte back4app ( inscrivez vous gratuitement https //www back4app com/ ) compte vercel pour le déploiement ( inscrivez vous pour vercel https //vercel com/ ) 2\ configuration de back4app connectez vous à votre tableau de bord back4app et créez un nouveau projet accédez au navigateur de données et créez une nouvelle classe appelée billet avec le schéma suivant nom du champ type titre chaîne description chaîne catégorie chaîne priorité numéro progrès numéro statut chaîne créé à date (généré automatiquement) mis à jour à date (généré automatiquement) 3\ configuration du frontend (next js) 3 1 créer un nouveau projet next js exécutez la commande suivante pour créer un nouveau projet next js npx create next app\@latest ticketing app cd ticketing app 3 2 installer les dépendances installer tailwind css , font awesome , et parse sdk pour les opérations backend npm install tailwindcss postcss autoprefixer @fortawesome/fontawesome free parse npx tailwindcss init p 3 3 configurer tailwind css modifier le tailwind config js fichier pour configurer les chemins de contenu de tailwind css module exports = { content \[ ' /app/ / {js,ts,jsx,tsx}', ' /components/ / {js,ts,jsx,tsx}', ], theme { extend {}, }, plugins \[], } dans styles/globals css , ajoutez les imports de tailwind @tailwind base; @tailwind components; @tailwind utilities; 3 4 créer la structure du projet en suivant la structure fournie, créez les répertoires et composants nécessaires structure des répertoires /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\ configuration du client parse dans le /lib dossier, créez un parseclient js fichier pour configurer le sdk 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; remplacez 'your app id' et 'your js key' par les identifiants de votre projet back4app 5\ création des composants clés 5 1 ticketform ce composant gérera à la fois la création et la mise à jour des tickets dans /components/ticketform jsx , créez ce qui suit 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 ce composant affichera les informations individuelles des billets dans /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 supprimerbloc un composant de confirmation pour supprimer des billets dans /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 affichageprogression ce composant montre la progression sous forme de barre de pourcentage dans /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> ); } 5 4 affichageprogression 6\ pages et routage 6 1 liste des billets dans /app/page js , affichez la liste des billets 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 détails et édition du billet dans /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\ déploiement sur vercel 7 1 créer un compte vercel si vous n'avez pas encore de compte vercel, rendez vous sur vercel com https //vercel com/ et créez un compte vous pouvez vous inscrire avec github, gitlab ou bitbucket vercel facilite la liaison de votre dépôt directement pour les déploiements 7 2 poussez votre code sur github pour déployer votre application sur vercel, vous devez avoir votre projet hébergé sur une plateforme de contrôle de version comme github (ou gitlab/bitbucket) si votre projet n'est pas encore sur github, suivez ces étapes initialisez git dans votre répertoire de projet ajoutez votre projet à github 7 3 installer vercel cli (optionnel) si vous préférez déployer directement depuis la ligne de commande, installez le vercel cli globalement alternativement, vous pouvez déployer via le tableau de bord de vercel, que nous allons aborder ensuite 7 4 connectez votre dépôt github à vercel allez à vercel https //vercel com/ cliquez sur nouveau projet choisissez le dépôt git qui contient votre projet next js configurez votre projet vercel détectera automatiquement qu'il s'agit d'un projet next js et appliquera les paramètres de construction corrects définissez le répertoire racine sur le dossier du projet (si nécessaire) 7 5 définir les variables d'environnement vous devrez configurer vos identifiants back4app et toutes les autres variables d'environnement dans vercel dans les paramètres du projet , allez à la section variables d'environnement ajoutez les variables d'environnement suivantes 7 6 configurer parse dans env local (optionnel) si vous utilisez des variables d'environnement locales pendant le développement, assurez vous de créer un fichier env local dans le répertoire racine de votre projet avec les variables suivantes ces variables d'environnement seront également utilisées par vercel une fois qu'elles seront définies dans le tableau de bord vercel 7 7 configurer les paramètres de construction (optionnel) assurez vous que la version de node js et la commande de construction sont correctement configurées (vercel détecte cela automatiquement) pour les applications next js , les paramètres par défaut devraient être commande de construction npm run build répertoire de sortie next/ 7 8 déployer le projet après avoir lié votre dépôt github, vercel déclenchera automatiquement un processus de construction et de déploiement vous pouvez consulter l'état de votre construction dans le tableau de bord vercel 7 9 vérifier les journaux de déploiement si des problèmes surviennent pendant le déploiement, vous pouvez inspecter les journaux de déploiement pour les déboguer 7 10 accéder à votre application déployée une fois le déploiement réussi, vercel vous fournira une url unique où votre application next js est en ligne vous pouvez visiter l'url pour accéder à votre application de billetterie déployée par exemple https //your app name vercel app/ 8\ assurer un déploiement fluide identifiants back4app vérifiez que vos variables d'environnement back4app sont correctement définies à la fois dans env local (pour le développement local) et dans le tableau de bord vercel (pour la production) cors (cross origin resource sharing) assurez vous que back4app autorise votre url vercel dans ses paramètres cors, que vous pouvez configurer dans le tableau de bord back4app sous sécurité testez votre api avant de déployer, testez vos interactions avec l'api back4app localement pour vous assurer que tout fonctionne correctement 9\ conclusion avec ces étapes, votre application de billetterie next js devrait maintenant être déployée sur vercel , en utilisant back4app pour le backend cela complète le cycle de développement complet, depuis la configuration de back4app, la création du frontend dans next js, jusqu'au déploiement de l'application en direct sur vercel si vous souhaitez apporter des mises à jour, il vous suffit de pousser des modifications vers votre dépôt github, et vercel déclenchera automatiquement un nouveau déploiement