Tutoriel de réservation de salle de réunion avec Back4App, Next.js et Vercel

dans ce tutoriel, vous allez construire bookit , un système de réservation de salles de réunion utilisant next js comme framework frontend et back4app comme service backend vous allez mettre en œuvre l'authentification des utilisateurs, la gestion des salles et la fonctionnalité de réservation, et déployer l'application sur vercel 1 prérequis pour compléter ce tutoriel, vous aurez besoin de un compte back4app (inscrivez vous sur back4app https //www back4app com/ ) un projet back4app (suivez ce guide https //www back4app com/docs/get started/welcome ) node js installé sur votre machine locale ( guide d'installation https //nodejs org/ ) connaissances de base en javascript, next js et rest apis (si nécessaire, voir fondamentaux de javascript https //www back4app com/docs/javascript guide ) 2 configuration de back4app connectez vous à votre compte back4app et accédez à votre tableau de bord de projet dans la barre latérale gauche, cliquez sur base de données pour accéder au navigateur de données vous devrez créer les classes suivantes pour modéliser les données 2 1 créer la classe utilisateur email adresse e mail pour la connexion password mot de passe (haché) username nom d'utilisateur optionnel 2 2 créer la room classe dans le data browser , cliquez sur créer une classe , sélectionnez personnalisé , et nommez la classe chambre ajoutez les colonnes suivantes nom de la colonne type description nom chaîne nom de la chambre description chaîne description de la chambre capacité numéro nombre de personnes que la salle peut accueillir commodités tableau liste des équipements (tv, wifi, etc ) prix numéro prix par heure image fichier url de l'image propriétaire pointeur pointe vers le utilisateur classe 2 3 créer le booking classe créer une autre classe personnalisée nommée booking ajouter les colonnes suivantes nom de la colonne type description chambre pointeur pointe vers la classe chambre utilisateur pointeur pointe vers la classe utilisateur enregistrement date date/heure de début de la réservation départ date date/heure de fin de la réservation 3 configuration de next js et du sdk parse créez un nouveau projet next js npx create next app bookit app cd bookit app installez le sdk js de parse npm install parse dans le pages/ app js fichier, initialisez parse avec vos identifiants 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; remplacez 'your app id' et 'your javascript key' par vos identifiants d'application back4app 4 mise en œuvre de l'authentification des utilisateurs 4 1 inscription des utilisateurs créez une nouvelle page pages/signup js avec un formulaire d'inscription 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 routes protégées pour les routes protégées, vous pouvez utiliser les routes api de next js et vérifier si l'utilisateur est authentifié 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 gestion des chambres 5 1 affichage des chambres disponibles créer pages/index js pour lister les chambres disponibles 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 ajouter une chambre créer pages/add room js pour ajouter de nouvelles chambres (pour les utilisateurs autorisés) 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 détails de la chambre créer pages/rooms/\[id] js pour voir des informations détaillées sur une chambre 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 système de réservation 6 1 réserver une chambre ajouter la fonctionnalité de réservation dans pages/rooms/\[id] js en ajoutant un formulaire de réservation 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 voir et annuler les réservations créer pages/my bookings js pour voir et annuler les réservations 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 déploiement sur vercel installez le vercel cli npm install g vercel déployez votre application next js avec vercel suivez les instructions pour déployer votre application sur vercel une fois déployée, votre application sera en ligne sur une url publique 8 conclusion dans ce tutoriel, vous avez construit une bookit application avec next js pour le frontend et back4app comme backend vous avez mis en œuvre l'authentification des utilisateurs, la gestion des chambres et la fonctionnalité de réservation enfin, vous avez déployé l'application sur vercel vous pouvez maintenant étendre l'application avec des fonctionnalités supplémentaires telles que la recherche, l'intégration de paiements ou les notifications