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

23min
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)
Un progetto Back4App (segui questa guida)
Node.js installato sulla tua macchina locale (Guida all'installazione)
Conoscenze di base di JavaScript, Next.js e REST APIs (se necessario, vedi Fondamenti di JavaScript)
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:
Bash
npx create-next-app bookit-app
cd bookit-app
npx create-next-app bookit-app
cd bookit-app
﻿
Installa Parse JS SDK:
Bash
npm install parse
npm install parse
﻿
Nel pages/_app.js file, inizializza Parse con le tue credenziali 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;
﻿
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:
JS
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>
  );
}
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:
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. Rotte Protette
Per le rotte protette, puoi utilizzare le rotte API di Next.js e controllare se l'utente è autenticato:
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. Gestione delle Stanze
5.1. Visualizzazione delle Stanze Disponibili
Crea pages/index.js per elencare le stanze disponibili:
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. Aggiungere una Stanza
Crea pages/add-room.js per aggiungere nuove stanze (per utenti autorizzati):
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. Dettagli della Stanza
Crea pages/rooms/[id].js per visualizzare informazioni dettagliate su una stanza:
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. Sistema di Prenotazione
6.1. Prenotazione di una Stanza
Aggiungi funzionalità di prenotazione in pages/rooms/[id].js aggiungendo un modulo di prenotazione:
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. Visualizzazione e Cancellazione delle Prenotazioni
Crea pages/my-bookings.js per visualizzare e cancellare le prenotazioni:
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. Distribuzione su Vercel
Installa il Vercel CLI:
Bash
npm install -g vercel
npm install -g vercel
﻿
Distribuisci la tua app Next.js con:
Bash
vercel
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.
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
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
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Tutorial on Billing App with Next.js, Vercel and Back4app
AVANTI IL PROSSIMO
Crea un gioco multipiattaforma con Flutter e Back4app