Erstellung der Ticketing-App mit Next.js, Vercel und Back4App

in diesem tutorial werden wir ein ticketing system mit next js und dem app router, back4app als backend service und tailwind css für das styling erstellen die app ermöglicht es benutzern, tickets zu erstellen, zu aktualisieren, anzuzeigen und zu löschen, während sie parse server auf back4app für die datenbankverwaltung nutzen 1\ voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie node js auf ihrem computer installiert haben ( node js installationsanleitung https //nodejs org/ ) ein back4app konto ( kostenlos anmelden https //www back4app com/ ) ein vercel konto für die bereitstellung ( für vercel anmelden https //vercel com/ ) 2\ einrichtung von back4app melden sie sich bei ihrem back4app dashboard an und erstellen sie ein neues projekt navigieren sie zum datenbrowser und erstellen sie eine neue klasse namens ticket mit dem folgenden schema feldname typ titel zeichenfolge beschreibung zeichenfolge kategorie zeichenfolge priorität nummer fortschritt nummer status zeichenfolge erstelltam datum (automatisch generiert) aktualisiertam datum (automatisch generiert) 3\ einrichtung des frontends (next js) 3 1 erstellen sie ein neues next js projekt führen sie den folgenden befehl aus, um ein neues next js projekt zu erstellen npx create next app\@latest ticketing app cd ticketing app 3 2 abhängigkeiten installieren installieren sie tailwind css , font awesome , und parse sdk für backend operationen npm install tailwindcss postcss autoprefixer @fortawesome/fontawesome free parse npx tailwindcss init p 3 3 tailwind css einrichten bearbeiten sie die tailwind config js datei, um die tailwind css inhaltspfade zu konfigurieren module exports = { content \[ ' /app/ / {js,ts,jsx,tsx}', ' /components/ / {js,ts,jsx,tsx}', ], theme { extend {}, }, plugins \[], } in styles/globals css , fügen sie die tailwind imports hinzu @tailwind base; @tailwind components; @tailwind utilities; 3 4 erstellen sie die projektstruktur erstellen sie gemäß der bereitgestellten struktur die erforderlichen verzeichnisse und komponenten verzeichnisstruktur /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\ einrichtung des parse clients im /lib ordner erstellen sie eine parseclient js datei, um das parse sdk zu konfigurieren import parse from 'parse'; // initialize parse sdk parse initialize('your app id', 'your js key'); parse serverurl = 'https //parseapi back4app com'; export default parse; ersetzen sie 'your app id' und 'your js key' durch ihre back4app projektanmeldeinformationen 5\ erstellung der hauptkomponenten 5 1 ticketform diese komponente wird sowohl für das erstellen als auch für das aktualisieren von tickets zuständig sein in /components/ticketform jsx , erstellen sie folgendes 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 diese komponente zeigt individuelle ticketinformationen an 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 deleteblock eine bestätigungskomponente zum löschen von tickets 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 progressdisplay diese komponente zeigt den fortschritt als prozentbalken an 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> ); } 5 4 fortschrittsanzeige 6\ seiten und routing 6 1 liste der tickets in /app/page js , zeigen sie die liste der tickets an 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 ticketdetails und bearbeiten 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\ bereitstellung auf vercel 7 1 erstellen sie ein vercel konto wenn sie noch kein vercel konto haben, gehen sie zu vercel com https //vercel com/ und erstellen sie ein konto sie können sich mit github, gitlab oder bitbucket anmelden vercel macht es einfach, ihr repository direkt für bereitstellungen zu verknüpfen 7 2 pushen sie ihren code zu github um ihre app auf vercel bereitzustellen, müssen sie ihr projekt auf einer versionskontrollplattform wie github (oder gitlab/bitbucket) gehostet haben wenn ihr projekt noch nicht auf github ist, folgen sie diesen schritten initialisieren sie git in ihrem projektverzeichnis fügen sie ihr projekt zu github hinzu 7 3 vercel cli installieren (optional) wenn sie es bevorzugen, direkt über die befehlszeile bereitzustellen, installieren sie die vercel cli global alternativ können sie über das dashboard von vercel bereitstellen, das wir als nächstes behandeln werden 7 4 verbinden sie ihr github repository mit vercel gehe zu vercel https //vercel com/ klicke auf neues projekt wähle das git repository aus, das dein next js projekt enthält konfiguriere dein projekt vercel wird automatisch erkennen, dass es sich um ein next js projekt handelt und die richtigen build einstellungen anwenden setze das wurzelverzeichnis auf den projektordner (falls erforderlich) 7 5 umgebungsvariablen festlegen du musst deine back4app anmeldeinformationen und alle anderen umgebungsvariablen in vercel konfigurieren gehe in den projekteinstellungen , zu dem umgebungsvariablen bereich füge die folgenden umgebungsvariablen hinzu 7 6 parse konfiguration in env local einrichten (optional) wenn du während der entwicklung lokale umgebungsvariablen verwendest, stelle sicher, dass du eine env local datei in deinem stammprojektverzeichnis mit den folgenden variablen erstellst diese umgebungsvariablen werden auch von vercel verwendet, sobald sie im vercel dashboard festgelegt sind 7 7 build einstellungen konfigurieren (optional) stellen sie sicher, dass node js version und build befehl korrekt konfiguriert sind (vercel erkennt dies automatisch) für next js apps sollten die standardeinstellungen sein build befehl npm run build ausgabeverzeichnis next/ 7 8 projekt bereitstellen nachdem sie ihr github repository verlinkt haben, wird vercel automatisch einen build und bereitstellungsprozess auslösen sie können den status ihres builds im vercel dashboard einsehen 7 9 überprüfen sie die bereitstellungsprotokolle wenn während der bereitstellung probleme auftreten, können sie die bereitstellungsprotokolle überprüfen, um diese zu debuggen 7 10 greifen sie auf ihre bereitgestellte app zu sobald die bereitstellung erfolgreich ist, stellt ihnen vercel eine einzigartige url zur verfügung, unter der ihre next js app live ist sie können die url besuchen, um auf ihre bereitgestellte ticketing app zuzugreifen zum beispiel https //your app name vercel app/ 8\ sicherstellen einer reibungslosen bereitstellung back4app anmeldeinformationen überprüfen sie, ob ihre back4app umgebungsvariablen sowohl in env local (für die lokale entwicklung) als auch im vercel dashboard (für die produktion) korrekt eingestellt sind cors (cross origin resource sharing) stellen sie sicher, dass back4app ihre vercel url in seinen cors einstellungen zulässt, die sie im back4app dashboard unter sicherheit konfigurieren können testen sie ihre api testen sie vor der bereitstellung ihre back4app api interaktionen lokal, um sicherzustellen, dass alles reibungslos funktioniert 9\ fazit mit diesen schritten sollte ihre next js ticketing app jetzt auf vercel , unter verwendung von back4app für das backend, bereitgestellt sein dies schließt den gesamten entwicklungszyklus ab, von der einrichtung von back4app, über die erstellung des frontends in next js, bis hin zur bereitstellung der app live auf vercel wenn sie aktualisierungen vornehmen möchten, pushen sie einfach änderungen in ihr github repository, und vercel wird automatisch eine neue bereitstellung auslösen