Tutorial sull'app di prenotazione delle sale riunioni con Back4App, Next.js e Vercel

in questo tutorial, costruirai bookit , un sistema di prenotazione di sale riunioni utilizzando next js come framework frontend e back4app come servizio backend implementerai l'autenticazione degli utenti, la gestione delle stanze e la funzionalità di prenotazione, e distribuirai l'app su vercel 1 requisiti per completare questo tutorial, avrai bisogno di un account back4app (iscriviti su back4app https //www back4app com/ ) un progetto back4app (segui questa guida https //www back4app com/docs/get started/welcome ) node js installato sulla tua macchina locale ( guida all'installazione https //nodejs org/ ) conoscenze di base di javascript, next js e rest apis (se necessario, vedi fondamenti di javascript https //www back4app com/docs/javascript guide ) 2 configurazione di back4app accedi al tuo account back4app e vai al tuo cruscotto del progetto nella barra laterale sinistra, fai clic su database per accedere al data browser dovrai creare le seguenti classi per modellare i dati 2 1 crea la classe utente email indirizzo email per il login password password (hashata) username nome utente facoltativo 2 2 crea la room classe nella data browser , clicca su crea una classe , seleziona personalizzato , e nomina la classe stanza aggiungi le seguenti colonne nome della colonna tipo descrizione nome stringa nome della stanza descrizione stringa descrizione della stanza capacità numero numero di persone che la stanza può contenere servizi array elenco dei servizi (tv, wifi, ecc ) prezzo numero prezzo per ora immagine file url dell'immagine proprietario puntatore punti al utente classe 2 3 crea il booking classe crea un'altra classe personalizzata chiamata booking aggiungi le seguenti colonne nome della colonna tipo descrizione stanza puntatore punta alla classe stanza utente puntatore punta alla classe utente checkin data data/ora di inizio della prenotazione checkout data data/ora di fine della prenotazione 3 configurazione di next js e parse sdk crea un nuovo progetto next js npx create next app bookit app cd bookit app installa parse js sdk npm install parse nel pages/ app js file, inizializza parse con le tue credenziali back4app 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; sostituisci 'your app id' e 'your javascript key' con le credenziali della tua app back4app 4 implementazione dell'autenticazione utente 4 1 registrazione utente crea una nuova pagina pages/signup js con un modulo di registrazione 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 accesso utente crea pages/login js per l'accesso utente 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 rotte protette per le rotte protette, puoi utilizzare le rotte api di next js e controllare se l'utente è autenticato 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 gestione delle stanze 5 1 visualizzazione delle stanze disponibili crea pages/index js per elencare le stanze disponibili 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 aggiungere una stanza crea pages/add room js per aggiungere nuove stanze (per utenti autorizzati) 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 dettagli della stanza crea pages/rooms/\[id] js per visualizzare informazioni dettagliate su una stanza 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 sistema di prenotazione 6 1 prenotazione di una stanza aggiungi funzionalità di prenotazione in pages/rooms/\[id] js aggiungendo un modulo di prenotazione 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 visualizzazione e cancellazione delle prenotazioni crea pages/my bookings js per visualizzare e cancellare le prenotazioni 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 distribuzione su vercel installa il vercel cli npm install g vercel distribuisci la tua app next js con vercel segui le istruzioni per distribuire la tua app su vercel una volta distribuita, la tua app sarà attiva su un url pubblico 8 conclusione in questo tutorial, hai costruito un bookit app con next js per il frontend e back4app come backend hai implementato l'autenticazione degli utenti, la gestione delle stanze e la funzionalità di prenotazione infine, hai distribuito l'app su vercel ora puoi espandere l'app con funzionalità aggiuntive come ricerca, integrazione dei pagamenti o notifiche