NextJS Шаблоны
Учебное пособие по приложению для бронирования конференц-залов с использованием Back4App, Next.js и Vercel

23min
В этом учебном пособии вы создадите Bookit, систему бронирования конференц-залов, используя Next.js в качестве фронтенд-фреймворка и Back4App в качестве бэкенд-сервиса. Вы реализуете аутентификацию пользователей, управление комнатами и функциональность бронирования, а также развернете приложение на Vercel.
1. Предварительные требования
Чтобы завершить это учебное пособие, вам понадобятся:
Учетная запись Back4App (зарегистрируйтесь на Back4App)
Проект Back4App (следуйте за этим руководством)
Установленный Node.js на вашем локальном компьютере (Руководство по установке)
Базовые знания JavaScript, Next.js и REST API (если необходимо, смотрите Основы JavaScript)
2. Настройка Back4App
Войдите в свою учетную запись Back4App и перейдите на панель управления проектом.
В левой боковой панели нажмите на База данных для доступа к браузеру данных.
Вам нужно будет создать следующие классы для моделирования данных:
2.1. Создайте класс Пользователь 
email: Адрес электронной почты для входа
password: Пароль (хэшированный)
username: Необязательное имя пользователя
2.2. Создайте Room Класс
В Data Browser, нажмите Создать класс, выберите Пользовательский, и назовите класс Комната.
Добавьте следующие столбцы:
Имя столбца
Тип
Описание
имя
Строка
Название комнаты
описание
Строка
Описание комнаты
вместимость
Номер
Количество людей, которые может вмещать комната
удобства
Массив
Список удобств (телевизор, WiFi и т.д.)
цена
Номер
Цена за час
изображение
Файл
URL изображения
владелец
Указатель
Указывает на Пользователь класс
2.3. Создайте Booking класс
Создайте другой пользовательский класс с именем Booking.
Добавьте следующие столбцы:
Название столбца
Тип
Описание
комната
Указатель
Указывает на класс Room
пользователь
Указатель
Указывает на класс User
заезд
Дата
Дата/время начала бронирования
выезд
Дата
Дата/время окончания бронирования
3. Настройка Next.js и Parse SDK
Создайте новый проект Next.js:
Bash
npx create-next-app bookit-app
cd bookit-app
npx create-next-app bookit-app
cd bookit-app
﻿
Установите Parse JS SDK:
Bash
npm install parse
npm install parse
﻿
В файле pages/_app.js инициализируйте Parse с вашими учетными данными 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;
﻿
Замените 'YOUR_APP_ID' и 'YOUR_JAVASCRIPT_KEY' на ваши учетные данные приложения Back4App.
4. Реализация аутентификации пользователей
4.1. Регистрация пользователя
Создайте новую страницу pages/signup.js с формой регистрации:
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. Вход пользователя
Создайте pages/login.js для входа пользователя:
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. Защищенные маршруты
Для защищенных маршрутов вы можете использовать API маршруты Next.js и проверить, аутентифицирован ли пользователь:
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. Управление комнатами
5.1. Отображение доступных комнат
Создайте pages/index.js для отображения доступных комнат:
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. Добавление комнаты
Создайте pages/add-room.js для добавления новых комнат (для авторизованных пользователей):
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. Детали комнаты
Создайте pages/rooms/[id].js для просмотра подробной информации о комнате:
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. Система бронирования
6.1. Бронирование номера
Добавьте функциональность бронирования в pages/rooms/[id].js добавив форму бронирования:
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. Просмотр и отмена бронирований
Создайте pages/my-bookings.js для просмотра и отмены бронирований:
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. Развертывание на Vercel
Установите Vercel CLI:
Bash
npm install -g vercel
npm install -g vercel
﻿
Разверните ваше приложение Next.js с помощью:
Bash
vercel
vercel
﻿
Следуйте инструкциям, чтобы развернуть ваше приложение на Vercel. После развертывания ваше приложение будет доступно по публичному URL.
8. Заключение
В этом учебном пособии вы создали приложение Bookit с использованием Next.js для фронтенда и Back4App в качестве бэкенда. Вы реализовали аутентификацию пользователей, управление комнатами и функциональность бронирования. Наконец, вы развернули приложение на Vercel. Теперь вы можете расширить приложение дополнительными функциями, такими как поиск, интеграция платежей или уведомления.
Имя столбца	Тип	Описание
имя	Строка	Название комнаты
описание	Строка	Описание комнаты
вместимость	Номер	Количество людей, которые может вмещать комната
удобства	Массив	Список удобств (телевизор, WiFi и т.д.)
цена	Номер	Цена за час
изображение	Файл	URL изображения
владелец	Указатель	Указывает на Пользователь класс
Название столбца	Тип	Описание
комната	Указатель	Указывает на класс Room
пользователь	Указатель	Указывает на класс User
заезд	Дата	Дата/время начала бронирования
выезд	Дата	Дата/время окончания бронирования
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Учебник по созданию приложения для выставления счетов с Next.js, Vercel и Back4app
Создание многоплатформенной игры с использованием Flutter и Back4app