Modèles NextJS
Tutoriel de réservation de salle de réunion avec Back4App, Next.js et Vercel

22min
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)
Un projet Back4App (suivez ce guide)
Node.js installé sur votre machine locale (Guide d'installation)
Connaissances de base en JavaScript, Next.js et REST APIs (si nécessaire, voir Fondamentaux de JavaScript)
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 :
Bash
npx create-next-app bookit-app
cd bookit-app
npx create-next-app bookit-app
cd bookit-app
﻿
Installez le SDK JS de Parse :
Bash
npm install parse
npm install parse
﻿
Dans le pages/_app.js fichier, initialisez Parse avec vos identifiants Back4App :
JS
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;
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 :
JS
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>
  );
}
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é :
JS
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
}
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 :
JS
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>
  );
}
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) :
JS
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>
  );
}
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 :
JS
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>
  );
}
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 :
JS
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.');
  }
};
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 :
JS
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>
  );
}
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 :
Bash
npm install -g vercel
npm install -g vercel
﻿
Déployez votre application Next.js avec :
Bash
vercel
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.
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
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
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Tutoriel d'application de facturation avec Next.js, Vercel et Back4app
Créer un jeu multiplateforme en utilisant Flutter et Back4app