Tutorial zur Buchung von Besprechungsräumen mit Back4App, Next.js und Vercel

in diesem tutorial werden sie bookit , ein system zur buchung von besprechungsräumen, mit next js als frontend framework und back4app als backend service erstellen sie werden die benutzerauthentifizierung, das raummanagement und die buchungsfunktionalität implementieren und die app auf vercel bereitstellen 1 voraussetzungen um dieses tutorial abzuschließen, benötigen sie ein back4app konto (melden sie sich an bei back4app https //www back4app com/ ) ein back4app projekt (folgen sie diesem leitfaden https //www back4app com/docs/get started/welcome ) node js auf ihrem lokalen rechner installiert ( installationsanleitung https //nodejs org/ ) grundkenntnisse in javascript, next js und rest apis (falls erforderlich, siehe javascript grundlagen https //www back4app com/docs/javascript guide ) 2 einrichtung von back4app melden sie sich bei ihrem back4app konto an und navigieren sie zu ihrem projekt dashboard klicken sie in der linken seitenleiste auf datenbank , um auf den datenbrowser zuzugreifen sie müssen die folgenden klassen erstellen, um die daten zu modellieren 2 1 erstellen sie die benutzer klasse standardmäßig verwaltet parse die benutzerauthentifizierung, sodass sie diese klasse nicht manuell erstellen müssen parse verwaltet automatisch die folgenden felder für sie email e mail adresse für den login password passwort (gehasht) username optionaler benutzername 2 2 erstellen sie die room klasse im data browser , klicken sie auf klasse erstellen , wählen sie benutzerdefiniert , und benennen sie die klasse raum fügen sie die folgenden spalten hinzu spaltenname typ beschreibung name zeichenfolge raumname beschreibung zeichenfolge zimmerbeschreibung kapazität nummer anzahl der personen, die der raum fassen kann annehmlichkeiten array liste der annehmlichkeiten (tv, wlan usw ) preis nummer preis pro stunde bild datei bild url besitzer zeiger weist auf die benutzer klasse hin 2 3 erstellen sie die booking klasse erstellen sie eine weitere benutzerdefinierte klasse mit dem namen booking fügen sie die folgenden spalten hinzu spaltenname typ beschreibung zimmer zeiger zeigt auf die zimmer klasse benutzer zeiger zeigt auf die benutzer klasse check in datum startdatum/ uhrzeit der buchung check out datum enddatum/ uhrzeit der buchung 3 einrichtung von next js und parse sdk erstellen sie ein neues next js projekt npx create next app bookit app cd bookit app installieren sie das parse js sdk npm install parse in der pages/ app js datei, initialisieren sie parse mit ihren back4app anmeldeinformationen import parse from 'parse'; parse initialize('your app id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; function myapp({ component, pageprops }) { return \<component { pageprops} /> } export default myapp; ersetzen sie 'your app id' und 'your javascript key' durch ihre back4app app anmeldeinformationen 4 implementierung der benutzeranmeldung 4 1 benutzerregistrierung erstellen sie eine neue seite pages/signup js mit einem registrierungsformular import { usestate } from 'react'; import parse from 'parse'; export default function signup() { const \[email, setemail] = usestate(''); const \[password, setpassword] = usestate(''); const handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', email); user set('email', email); user set('password', password); try { await user signup(); alert('signup successful!'); } catch (error) { alert('error ' + error message); } }; return ( \<form onsubmit={handlesignup}> \<input type="email" value={email} onchange={(e) => setemail(e target value)} placeholder="email" /> \<input type="password" value={password} onchange={(e) => setpassword(e target value)} placeholder="password" /> \<button type="submit">sign up\</button> \</form> ); } 4 2 benutzeranmeldung erstellen sie pages/login js für die benutzeranmeldung import { usestate } from 'react'; import parse from 'parse'; export default function login() { const \[email, setemail] = usestate(''); const \[password, setpassword] = usestate(''); const handlelogin = async (e) => { e preventdefault(); try { await parse user login(email, password); alert('login successful!'); } catch (error) { alert('error ' + error message); } }; return ( \<form onsubmit={handlelogin}> \<input type="email" value={email} onchange={(e) => setemail(e target value)} placeholder="email" /> \<input type="password" value={password} onchange={(e) => setpassword(e target value)} placeholder="password" /> \<button type="submit">login\</button> \</form> ); } 4 3 geschützte routen für geschützte routen können sie die next js api routen verwenden und überprüfen, ob der benutzer authentifiziert ist import parse from 'parse'; export default async function handler(req, res) { const user = parse user current(); if (!user) { return res status(401) json({ message 'unauthorized' }); } // proceed with the request } 5 raumverwaltung 5 1 verfügbare räume anzeigen erstellen sie pages/index js um verfügbare räume aufzulisten import { useeffect, usestate } from 'react'; import parse from 'parse'; export default function home() { const \[rooms, setrooms] = usestate(\[]); useeffect(() => { const fetchrooms = async () => { const room = parse object extend('room'); const query = new parse query(room); const results = await query find(); setrooms(results); }; fetchrooms(); }, \[]); return ( \<div> \<h1>available rooms\</h1> {rooms map(room => ( \<div key={room id}> \<h2>{room get('name')}\</h2> \<img src={room get('image') url()} alt={room get('name')} /> \<p>capacity {room get('capacity')}\</p> \<p>price ${room get('price')} per hour\</p> \</div> ))} \</div> ); } 5 2 hinzufügen eines zimmers erstellen sie pages/add room js zum hinzufügen neuer zimmer (für autorisierte benutzer) import { usestate } from 'react'; import parse from 'parse'; export default function addroom() { const \[name, setname] = usestate(''); const \[description, setdescription] = usestate(''); const \[capacity, setcapacity] = usestate(0); const \[price, setprice] = usestate(0); const handleaddroom = async (e) => { e preventdefault(); const room = parse object extend('room'); const room = new room(); room set('name', name); room set('description', description); room set('capacity', capacity); room set('price', price); try { await room save(); alert('room added successfully!'); } catch (error) { alert('error ' + error message); } }; return ( \<form onsubmit={handleaddroom}> \<input type="text" value={name} onchange={(e) => setname(e target value)} placeholder="room name" /> \<textarea value={description} onchange={(e) => setdescription(e target value)} placeholder="description">\</textarea> \<input type="number" value={capacity} onchange={(e) => setcapacity(parseint(e target value))} placeholder="capacity" /> \<input type="number" value={price} onchange={(e) => setprice(parseint(e target value))} placeholder="price" /> \<button type="submit">add room\</button> \</form> ); } 5 3 zimmerdetails erstellen sie pages/rooms/\[id] js um detaillierte informationen über ein zimmer anzuzeigen import { userouter } from 'next/router'; import { useeffect, usestate } from 'react'; import parse from 'parse'; export default function roomdetails() { const router = userouter(); const { id } = router query; const \[room, setroom] = usestate(null); useeffect(() => { if (!id) return; const fetchroom = async () => { const room = parse object extend('room'); const query = new parse query(room); query equalto('objectid', id); const result = await query first(); setroom(result); }; fetchroom(); }, \[id]); if (!room) return \<div>loading \</div>; return ( \<div> \<h1>{room get('name')}\</h1> \<img src={room get('image') url()} alt={room get('name')} /> \<p>{room get('description')}\</p> \<p>capacity {room get('capacity')}\</p> \<p>price ${room get('price')} per hour\</p> \</div> ); } 6 buchungssystem 6 1 buchung eines zimmers fügen sie die buchungsfunktionalität in pages/rooms/\[id] js hinzu, indem sie ein buchungsformular hinzufügen const \[checkin, setcheckin] = usestate(''); const \[checkout, setcheckout] = usestate(''); const handlebooking = async () => { const booking = parse object extend('booking'); const booking = new booking(); booking set('room', room); booking set('user', parse user current()); booking set('checkin', new date(checkin)); booking set('checkout', new date(checkout)); // check for double booking (example logic) const query = new parse query(booking); query equalto('room', room); query greaterthanorequalto('checkin', new date(checkin)); query lessthanorequalto('checkout', new date(checkout)); const overlap = await query first(); if (!overlap) { try { await booking save(); alert('booking successful!'); } catch (error) { alert('error ' + error message); } } else { alert('room is already booked for the selected time range '); } }; 6 2 anzeigen und stornieren von buchungen erstellen sie pages/my bookings js um buchungen anzuzeigen und zu stornieren import { useeffect, usestate } from 'react'; import parse from 'parse'; export default function mybookings() { const \[bookings, setbookings] = usestate(\[]); useeffect(() => { const fetchbookings = async () => { const booking = parse object extend('booking'); const query = new parse query(booking); query equalto('user', parse user current()); const results = await query find(); setbookings(results); }; fetchbookings(); }, \[]); const handlecancel = async (id) => { const booking = bookings find(b => b id === id); if (booking) { await booking destroy(); setbookings(bookings filter(b => b id !== id)); } }; return ( \<div> \<h1>my bookings\</h1> {bookings map(booking => ( \<div key={booking id}> \<p>room {booking get('room') get('name')}\</p> \<p>check in {new date(booking get('checkin')) tolocalestring()}\</p> \<p>check out {new date(booking get('checkout')) tolocalestring()}\</p> \<button onclick={() => handlecancel(booking id)}>cancel booking\</button> \</div> ))} \</div> ); } 7 bereitstellung auf vercel installieren sie die vercel cli npm install g vercel deployen sie ihre next js app mit vercel befolgen sie die anweisungen, um ihre app auf vercel bereitzustellen nach der bereitstellung wird ihre app unter einer öffentlichen url live sein 8 fazit in diesem tutorial haben sie eine bookit app mit next js für das frontend und back4app als backend erstellt sie haben die benutzeranmeldung, das raummanagement und die buchungsfunktionalität implementiert schließlich haben sie die app auf vercel , bereitgestellt sie können die app jetzt mit zusätzlichen funktionen wie suche, zahlungsintegration oder benachrichtigungen erweitern