Как создать приложение для бронирования с помощью Vue?

pусский

Управление бронированием – неотъемлемая часть бизнеса в сфере услуг, где составление расписания и привлечение клиентов имеют решающее значение, например в ресторанах.

С помощью Back4app, Twilio API и Vue вы можете создать простое приложение для бронирования столиков в ресторане с такими функциями, как бронирование, получение подтверждающих сообщений и просмотр зарезервированных мест.

В этой статье вы создадите и развернете приложение для бронирования с помощью Vue на передней панели, Back4app для управления бэкендом и развертывания, а также Twilio для связи с пользователями через Whatsapp.

Contents

1 Обзор проекта
2 Создание приложения Vue
3 Создание бэкэнда Back4app
- 3.1 Создание класса резервирования и облачных функций с помощью агента ИИ
4 Интеграция облачных функций в приложение Vue
5 Тестирование приложения
6 Развертывание приложения с агентом искусственного интеллекта Back4app на контейнерах Back4app
7 Заключение

Обзор проекта

В этом руководстве вы создадите простое приложение для бронирования с помощью Vue. Приложение для бронирования будет иметь вид ReservationForm и вид ReservationList.

Гости взаимодействуют с представлением ReservationForm, чтобы ввести данные о своем бронировании, такие как имя, электронная почта, дата, время и номер телефона. Они также видят все сделанные бронирования в представлении ReservationList.

Вы будете использовать следующее:

Back4app Backend: Вы создадите бэкэнд Back4app для хранения и управления данными о бронировании из вашего приложения Vue в базе данных.

API Twilio: Вы интегрируете Twilio API в свое приложение Vue для отправки подтверждающих сообщений по WhatsApp гостям, забронировавшим номер.

Агент искусственного интеллекта Back4pp: Вы создадите четыре облачные функции с помощью агента искусственного интеллекта Back4app, которые вы интегрируете в свое приложение Vue для обработки:
- Хранение данных о бронировании в базе данных Back4App
- Проверка доступности даты и времени для резервирования
- Отправка сообщения об успехе в WhatsApp с помощью Twilio API, сообщающего гостю, что его бронь была сделана.
- Просмотр уже сделанных гостями бронирований в вашей базе данных.

Контейнеры Back4app: Вы развернете свое приложение Vue в контейнере Back4app, чтобы сделать его доступным онлайн.

Создание приложения Vue

В этом разделе мы расскажем вам о том, как настроить среду разработки и создать шаблон приложения для резервирования.

Настройка среды разработки

Чтобы создать приложение Vue, выполните следующую команду в терминале:

npm create vue

Команда выше предложит вам назвать ваше приложение и включить определенные функции для него, например, добавить TypeScript, поддержку JSX и т. д. Выберите “нет” для всех опций, кроме “Vue Router”. Он понадобится вам для навигации между представлениями.

Затем перейдите в созданную директорию и выполните приведенную ниже команду для установки необходимых зависимостей:

npm install

Затем установите Parse SDK, выполнив приведенную ниже команду:

npm install parse

Parse SDK позволяет вам взаимодействовать между вашим приложением Vue и бэкендом Back4app.

После настройки среды разработки приступайте к созданию представлений приложения резервирования.

Создание представлений вашего приложения

Создайте представления ReservationForm и ReservationList в каталоге представлений вашего приложения.

Затем включите маршрутизацию между этими двумя представлениями, добавив приведенный ниже код в файл index.js в каталоге маршрутизатора:

// index.js
import { createRouter, createWebHistory } from "vue-router";
import ReservationForm from "@/views/ReservationForm.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "Home",
      component: ReservationForm,
    },
    {
      path: "/reservations",
      name: "Reservations",
      component: () => import("@/views/ReservationList.vue"),
    },
  ],
});

export default router;

Блок кода выше устанавливает маршрутизацию в вашем приложении Vue. Он определяет маршрут / и маршрут /reservations. Когда гости обращаются к URL-адресу приложения, блок кода направляет их к представлению ReservationForm в качестве маршрута Home.

Маршрут /reservations направляет пользователей к представлению ReservationList. Этот маршрут загружается лениво, то есть ваше приложение загружает его только при необходимости, что помогает повысить производительность приложения.

Далее, чтобы пользователи могли перемещаться между двумя маршрутами, настройте файл App.vue на отображение навигационной панели, показывающей ссылки на маршруты:

//App.vue
<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <header>
    <div class="wrapper" id="app">
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/reservations">View Reservations</RouterLink>
      </nav>
    </div>
  </header>
  <RouterView />
</template>

Блок кода выше отображает файл App.vue, который выступает в качестве основного макета вашего приложения. Блок кода импортирует компоненты RouterLink и RouterView из библиотеки Vue Router, представляя каждый маршрут компонентом RouterLink.

Компонент RouterLink принимает параметр to prop для указания маршрута, на который направляется ссылка. Компонент RouterView выступает в качестве заполнителя, динамически отображая содержимое текущего маршрута.

В файле ReservationForm.vue добавьте приведенный ниже блок кода, чтобы создать форму для ввода данных о бронировании:

// ReservationForm.vue
<template>
  <div>
    <form>
      <input v-model="reservation.name" placeholder="Name" required />
      <input
        v-model="reservation.email"
        type="email"
        placeholder="Email"
        required
      />
      <input
        v-model="reservation.date"
        type="date"
        placeholder="Date"
        required
      />
      <input
        v-model="reservation.time"
        type="time"
        placeholder="Time"
        required
      />
      <input
        v-model="reservation.phoneNumber"
        type="tel"
        placeholder="Phone Number"
        required
      />
      <button type="submit">Create Reservation</button>
    </form>
  </div>
</template>

<script setup>
import { ref } from "vue";
const reservation = ref({
  name: "",
  email: "",
  date: "",
  time: "",
  phoneNumber: "",
});
</script>

Приведенный выше блок кода создает элемент формы с обязательными полями для ввода различных данных, таких как имя пользователя, электронная почта, дата, время и номер телефона.

В приведенном выше блоке кода создается реактивный объект резервирования для хранения данных о пользователе с помощью функции ref из библиотеки vue.

Затем добавьте следующий блок кода в файл ReservationList.vue, чтобы отобразить список бронирований, сделанных пользователями:

// ReservationList.vue
<template>
  <div>
    <ul v-if="reservations.length" class="wrapper">
      <li
        v-for="reservation in reservations"
        :key="reservation.objectId"
        class="card"
      >
        <p>Name: {{ reservation.name }}</p>
        <p>Date: {{ new Date(reservation.date).toLocaleDateString() }}</p>
        <p>Time: {{ reservation.time }}</p>
        <p>Phone: {{ reservation.phoneNumber }}</p>
      </li>
    </ul>
    <p v-else>No reservations found.</p>
  </div>
</template>

<script setup>
import { ref } from "vue";

const reservations = ref([]);
</script>

В приведенном выше блоке кода используется директива vue условного оператора v-if для отображения существующих бронирований, если таковые имеются.

Если резервирование существует, блок кода с помощью директивы v-for перебирает каждую резервацию в массиве резерваций и отображает сделанные резервации.

Стилизация представлений вашего приложения

Добавьте следующий блок стилей в представление ReservationList, чтобы управлять внешним видом списка и других элементов:

// ReservationList.vue
<style scoped>
h1{
  margin-block-end: 2rem;
}

.card{
  background-color: #D99858;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 12px;
  padding: 2rem;
  align-items: center;
}

li{
  color: #FFFFFF;
}

.wrapper{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

div{
  padding-inline-start: 1rem;
}

</style>

Добавьте приведенный ниже блок стилей к представлению ReservationForm, чтобы управлять внешним видом формы:

// ReservationForm.vue
<style scoped>

  form{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }

</style>

Наконец, определите глобальные стили для вашего приложения Vue, добавив следующие CSS-стили в файл main.css в директории assets:

/* main.css */
@import url('<https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap>');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  font-family: "Montserrat", sans-serif;
  background-color: #333333;
  color: #FFFFFF;
}
nav {
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
nav a{
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  color: #888888;
  margin-block-end: 3rem;
}
nav a:hover{
  color: #D99858;
}
header{
  padding: 1rem;
}
button {
  background-color: #FFFFFF;
  color: #D99858;
  border: none;
  padding: 0.7rem 0.9rem;
  font-size: 14px;
  border-radius: 7px;
  font-weight: 500;
}
button:hover {
  background-color: #D99858;
  color: #FFFFFF; 
}
input{
  inline-size: 100%;
  border: none;
  border-radius: 5px;
  outline: none;
  padding: 1rem;
  font-family: "Montserrat", sans-serif;
}
.container{
  inline-size: 60%;
  margin: auto;
}

После создания шаблона приложения для бронирования создайте Back4app Backend для хранения информации о бронировании в базе данных.

Создание бэкэнда Back4app

Создание бэкенда на Back4app требует наличия учетной записи Back4app. Если у вас его нет, вы можете зарегистрироваться бесплатно.

Войдите в свою учетную запись и нажмите кнопку “NEW APP” в правом верхнем углу. Это приведет вас на страницу, где вы выберете опцию “Backend as a Service“.

Selecting_the_Backend-as-a-Service_Option - Your Application's Backend, Simplified

При нажатии кнопки “Backend as a Service” вам будет предложено дать имя экземпляру приложения и выбрать тип базы данных для вашего приложения. Выберите базу данных PostgreSQL и нажмите кнопку “Создать“.

Naming_App_and_Selecting_Database_Type - Your Application's Backend, Simplified

После того как Back4app настроит ваше приложение, вы будете направлены на ваш экземпляр приложения, как показано ниже.

Получите “Идентификатор приложения” и “Ключ JavaScript” в разделе “Безопасность и ключи“. Вы можете найти этот раздел, нажав “Настройки приложения” в боковой панели.

Затем создайте файл .env и добавьте в него “ID приложения” и “Javascript Key“, чтобы загрузить их в качестве переменных окружения в вашем приложении:

VITE_BACK4APP_APPLICATION_ID = <YOUR_APP_ID>
VITE_BACK4APP_JAVASCRIPT_KEY = YOUR_JAVASCRIPT_KEY>

Теперь измените свой файл main.js, чтобы инициализировать Parse в приложении Vue. Например:

//  main.js
import "./assets/main.css";
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import Parse from "parse/dist/parse.min.js";

Parse.initialize(
  `${import.meta.env.VITE_BACK4APP_APPLICATION_ID}`,
  `${import.meta.env.VITE_BACK4APP_JAVASCRIPT_KEY}`,
);

Parse.serverURL = "<https://parseapi.back4app.com/>";

const app = createApp(App);

app.use(router);

app.mount("#app");

Приведенный выше блок кода импортирует и инициализирует Parse SDK в вашем приложении Vue, позволяя вашему приложению взаимодействовать с бэкендом Back4app.

Теперь вам нужно сохранить данные о бронировании в базе данных Back4app. Для хранения данных о бронировании гостя вы создадите класс в своей базе данных с помощью AI-агента Back4app.

В этом классе будут храниться данные о бронировании, такие как имя, электронная почта, дата и т. д.

Создание класса резервирования и облачных функций с помощью агента ИИ

Найдите вкладку “AI Agent” в верхней левой части экрана и передайте агенту нижеприведенную подсказку, чтобы он создал класс в базе данных:

Create database tables in my Back4app app with the following information.

1. Reservation Class:
Class Name: Reservation

Fields:
objectId (String, Automatically generated by Back4App).
name (String, Required)
email (String, Required)
date (Date, Required)
time (String, Required)
phoneNumber (String, Required)

Populate the database tables with test data.

My Parse App ID: <Your Parse App ID>