如何使用 Vue 创建预订应用程序？

管理预订是服务行业业务的重要组成部分，在这些行业中，时间安排和客户容量至关重要，例如餐厅。

利用 Back4app、Twilio API 和 Vue，您可以创建一个简单的餐厅预订应用程序，具有预订、接收确认消息和查看预订时段等功能。

在本文中，您将在前端使用 Vue 构建和部署一个预订应用程序，使用 Back4app 处理后台和部署需求，使用 Twilio 通过 Whatsapp 与用户通信。

项目概述

在本指南中，您将使用 Vue 构建一个简单的预订应用程序。预订应用程序将包含一个ReservationForm视图和一个ReservationList视图。

客人与ReservationForm视图交互，输入他们的预订详细信息，如姓名、电子邮件、日期、时间和电话号码。他们还可以在ReservationList视图中查看所有预订。

您将使用以下功能：

  • Back4app 后端：您将创建一个 Back4app 后端，以便在数据库中存储和管理来自 Vue 应用程序的预订数据。
  • Twilio API：您将在 Vue 应用程序中集成 Twilio API，以便向已预订的客人发送 WhatsApp 确认消息。
  • Back4pp 的人工智能代理：您将使用 Back4app AI 代理创建四个云功能，并将其集成到您的 Vue 应用程序中进行处理：
    • 在 Back4App 数据库中存储预订详情
    • 检查预订日期和时间的可用性
    • 使用 Twilio API 发送 WhatsApp 成功消息，告知客人预订已完成。
    • 查看客人已在数据库中进行的预订。
  • Back4app 容器：您将把 Vue 应用程序部署到 Back4app 容器中，以便在线访问。

构建您的 Vue 应用程序

本节将指导您设置开发环境和构建预订应用程序的模板。

设置开发环境

要创建 Vue 应用程序，请在终端运行以下命令：

npm create vue

上面的命令将提示您为应用程序命名，并启用应用程序的某些功能，如添加 TypeScript、JSX 支持等。除 “Vue 路由器 “外，其他选项请选择 “否“。您将需要它在视图之间导航。

然后，cd进入创建的目录，运行下面的命令安装所需的依赖项：

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视图，作为主页路由。

/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文件，它是应用程序的主布局。该代码块从 Vue Router 库中导入了RouterLink和RouterView组件，用一个RouterLink组件来表示每个路由。

RouterLink组件使用一个toprop 来指定链接指向的路由。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>

上面的代码块创建了一个带有必填字段的表单元素，用于捕捉用户姓名、电子邮件、日期、时间和电话号码等各种详细信息的输入。

然后，上述代码块使用vue库中的ref函数创建了一个反应式预订对象，用于存储用户详细信息。

接下来，在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>

最后，在assets目录中的main.css文件中添加以下 CSS 样式，为 Vue 应用程序定义全局样式：

/* 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 后端，将预订详细信息存储到数据库中。

创建 Back4app 后台

在 Back4app 上创建您的后台需要一个 Back4app 帐户。如果您没有账户，可以免费注册。

登录您的账户，点击右上角的 “NEW APP“按钮。这将引导您进入一个页面，选择 “后台即服务“选项。

单击 “Backend as a Service“（后台即服务）后，系统将提示您为应用程序实例命名，并为应用程序选择数据库类型。选择 PostgreSQL 数据库并点击 “创建“按钮。

Back4app 设置应用程序后，将引导您进入应用程序实例，如下图所示。

Back4app 控制面板

从 “安全与密钥“部分获取 “应用程序 ID“和 “JavaScript 密钥“。点击侧边栏中的 “应用程序设置“即可找到该部分。

Back4app 安全密钥

然后，创建一个.env文件，并添加 “应用程序 ID“和 “Javascript 密钥“，以便将它们作为环境变量加载到应用程序中：

VITE_BACK4APP_APPLICATION_ID = <YOUR_APP_ID>
VITE_BACK4APP_JAVASCRIPT_KEY = YOUR_JAVASCRIPT_KEY>

现在，修改你的main.js文件，在 Vue 应用程序中初始化 Parse。就像这样

//  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");

上面的代码块在您的 Vue 应用程序中导入并初始化 Parse SDK，使您的应用程序能与 Back4app 后端通信。

现在，您需要在 Back4app 数据库中存储预订详情。要存储客人的预订详情，您需要使用 Back4app 的人工智能代理在数据库中创建一个类。

该类将存储预订详情，如姓名、电子邮件、日期等。

使用人工智能代理创建预订类和云功能

找到屏幕左上方的 “人工智能代理“选项卡，然后向代理发送下面的提示，以便在数据库中创建类：

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>

您应该会收到类似下面的回复：

人工智能代理响应

在成功创建了带有存储预订详细信息字段的预订类之后。您将使用人工智能代理创建四个云函数，这些函数将与您创建的数据库进行交互。

用以下命令提示人工智能代理创建云函数，以便在预订类中存储数据：

Create a Cloud Code function "createReservation" that takes in necessary 
arguments to create a new reservation in the Reservation class.

您应该会收到类似下面的回复：

人工智能代理响应

创建createReservation功能后，向人工智能代理发送以下命令，以检查客人需要预订的日期和时间是否可用：

Create a Cloud Code function "checkAvailability" to check the availability of a reserved time and date. Create this second Cloud Code function in the same file.

您应该会收到类似下面的回复：

人工智能代理响应

使用 Twilio 的 WhatsApp API 发送 WhatsApp 消息需要创建和设置一个 Twilio 账户。Twilio 提供的 API 允许用户从您的应用程序发送 WhatsApp 消息。

从您的 Twilio 账户获取您的 Twilio 账户 SID、Twilio 身份验证令牌和 Twilio Whatsapp 号码，然后提示人工智能代理使用 Twilio 的 API 创建sendWhatsAppConfirmation云函数：

Create a Cloud Function with Twilio's WhatsApp API to send a WhatsApp confirmation message. Here are the Twilio account details you will need:
Twilio Account SID: <Your Twilio Account SID>
Auth Token: <Your Twilio Authentication Token>
WhatsApp number: <The Twilio WhatsApp Number>

您应该会收到类似下面的回复：

人工智能代理响应

接下来，提示人工智能代理创建最后一个云功能，以查看数据库中存储的所有预订：

Write a cloud code function to view all reservations stored in the database in the same file with the other three cloud functions.

您应该会收到类似下面的回复：

人工智能代理响应

您已通过 Back4app 实例创建了应用程序所需的所有功能。下一步是将 Back4app 后端的云功能集成到 Vue 应用程序中。

在 Vue 应用程序中集成云功能

本节将教您如何将云函数集成到 Vue 应用程序中。通过运行Parse.cloud.run()函数，您可以在 Vue 应用程序中调用在 Back4app 后台定义的云函数。

修改ReservationForm.vue文件中的模板块，以便在提交表单时运行submitReservation函数：

// ReservationForm.vue
<template>
  <div>
    <form @submit.prevent="submitReservation">
      // calls the function on form submission
      <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>

接下来，修改ReservationForm.vue文件中的脚本块，定义submitReservation函数，并运行与提交表单相关的云函数：

// ReservationForm.vue
<script setup>
import { ref } from "vue";
import Parse from "parse/dist/parse.min.js";

const reservation = ref({
  name: "",
  email: "",
  date: "",
  time: "",
  phoneNumber: "",
});

const submitReservation = async () => {
  try {
    const availabilityResult = await Parse.Cloud.run("checkAvailability", {
      date: reservation.value.date,
      time: reservation.value.time,
    });

    if (availabilityResult.available) {
      const creationResult = await Parse.Cloud.run("createReservation", {
        ...reservation.value,
        date: {
          __type: "Date",
          iso: new Date(
            reservation.value.date + "T" + reservation.value.time,
          ).toISOString(),
        },
      });

      if (creationResult) {
        await Parse.Cloud.run("sendWhatsAppConfirmation", {
          to: reservation.value.phoneNumber,
          reserveeName: reservation.value.name,
          body: "Your reservation has been confirmed.",
        });

        alert(
          "Reservation created and confirmation has been sent via WhatsApp.",
        );
      }
    } else {
      alert("Sorry, the chosen date and time are not available.");
    }
  } catch (error) {
    console.error("Error creating reservation:", error);
    alert("Error while processing your reservation: " + error.message);
  }
};
</script>

上面的代码块调用submitReservation函数来处理预订提交。

该函数首先通过调用checkAvailability云函数来检查所选日期和时间的可用性。

如果指定的日期和时间可用，代码块会调用另一个云函数createReservation 来创建包含客人详细信息的预订。

然后，代码块会调用sendWhatsAppConfirmation云函数发送 WhatsApp 消息，通知客人已成功预订时间段。

接下来，要让客人查看所有预订时段，请修改ReservationList.vue文件的脚本块，运行getAllReservations云函数：

// ReservationList.vue
<script setup>
import { ref, onBeforeMount } from "vue";
import Parse from "parse/dist/parse.min.js";

const reservations = ref([]);

const fetchReservations = async () => {
  try {
    const result = await Parse.Cloud.run("getAllReservations");
    reservations.value = result;
  } catch (error) {
    console.error("Error retrieving reservations:", error);
    alert(error.message);
  }
};

onBeforeMount(fetchReservations);
</script>

上面的代码块在 Vue 使用onBeforeMountvue 函数挂载组件之前调用了fetchReservations函数。

fetchReservations函数运行getAllReservations云函数，以检索 Back4app 数据库中Reservation类中存储的所有预订。

测试应用程序

在将应用程序部署到 Back4app 容器之前，请对应用程序进行测试，以确保所有功能都能正常运行。

运行以下命令启动应用程序：

npm run dev

运行上述命令可在http://localhost:5173/ 启动应用程序。

如下图所示，导航至http://localhost:5173/查看您的应用程序：

预订表格

如果您导航到 “查看预订“选项卡，就会看到人工智能代理在数据库中输入的预订。

默认预订列表

填写表格并点击 “创建预订“按钮，即可创建新的预订。

创建预订

要查看预订是否成功，请导航至 “查看预订 “选项卡，即可看到您的预订。

预订

最后，打开 WhatsApp 应用程序，查看发送到您的 WhatsApp 号码的确认信息。

WhatsApp 确认

使用 Back4app 的人工智能代理在 Back4app 容器上部署应用程序

要将应用程序部署到 Back4app 容器，需要为 Vue 应用程序创建一个Dockerfile。

在项目根目录下创建一个Dockerfile，并添加下面的代码块：

# Dockerfile

FROM node:18

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:1.19.0-alpine

COPY --from=0 /app/dist /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

创建Dockerfile 后，将代码推送到 GitHub 仓库。要使用人工智能代理从 GitHub 部署应用程序，Back4app 要求您在 GitHub 账户上安装Back4App Containers GitHub 应用程序。

您还需要授予应用程序访问应用程序代码库所需的权限。

然后，浏览 Back4app 主页，点击显示屏右上角的 “新建应用程序“按钮。

这将带您进入一个设置界面，您需要在此选择要创建的应用程序类型。

选择 Back4app Agent 选项，如下图所示。

创建新的应用程序主页

选择 Back4app 代理选项后，您将被重定向到 Back4app AI 代理页面。

向人工智能代理发出以下提示，以启动应用程序的部署流程：

Deploy my "YOUR_REPOSITORY_URL" repository on GitHub to a Back4App Container.
Here are the required environmental variables:
VITE_BACK4APP_APPLICATION_ID = "BACK4APP_APP_ID"
VITE_BACK4APP_JAVASCRIPT_KEY = "BACK4APP_JAVASCRIPT_KEY"

用实际值替换占位符。上述提示将启动部署流程。

完成后，人工智能代理会做出响应，显示部署成功或待定。如果是待部署，您可以在Back4app 容器仪表板上监控应用程序的部署状态。

您应该会收到类似下图的回复：

人工智能代理响应

或者，您也可以手动将应用程序部署到 Back4app 容器中。

结论

在本文中，您使用 Back4app、Vue 和 Twilio API 构建并部署了一个功能强大的餐厅预订应用程序。

通过您的应用程序，用户可以进行预订，预订信息存储在您的 Back4app 后台。他们可以通过 Vue 创建的界面查看预订信息，这些界面由您使用人工智能代理生成的 Back4app 云代码提供支持。

此外，您的应用程序还可通过 Twilio API 支持的 WhatsApp 消息确认预订成功。

您可以在GitHub 代码库中找到本教程使用的全部代码。


David Ekete

David Ekete兼具资深技术作家和优秀后端开发者的双重专长，使他在提供清晰、全面的技术文档以及构建高效、可扩展的网络应用程序方面独树一帜，成为业界的权威。他的丰富背景包括在back4app、Draft.dev和MUO等行业领袖处担任高端职位，同时他在Elevate Apps和Terrahaptix等公司担任后端工程师和工程实习生时也表现出色。 凭借丰富的实践经验，David拥有The Linux Foundation、Sololearn和Udemy颁发的业内认可认证，证明了他在技术文档、API开发及现代编程语言方面的精通。他的资历与卓越业绩使他成为那些追求技术卓越和创新解决方案的团队不可或缺的资产。 请在 GitHub 🛠️ 上浏览他的前沿项目和代码仓库，并通过 LinkedIn 🔗 与他联系，了解他的专业知识如何提升您的技术项目。无论您需要专业技术文档、稳健的后端开发还是具备扎实工程基础的协作型问题解决者，David Ekete都已准备好带来显著影响。

Leave a reply

Your email address will not be published.