Vue로 예약 앱을 구축하는 방법은 무엇인가요?

예약 관리는 레스토랑과 같이 일정과 고객 수용 인원이 중요한 서비스 업계에서 비즈니스의 필수적인 부분입니다.

Back4app, Twilio API 및 Vue를 사용하면 예약하기, 확인 메시지 받기, 예약된 슬롯 보기와 같은 기능을 갖춘 간단한 레스토랑 예약 앱을 구축할 수 있습니다.

이 문서에서는 프런트엔드에 Vue, 백엔드 및 배포 요구 사항을 처리하는 Back4app, Whatsapp을 통해 사용자와 통신하는 Twilio를 사용하여 예약 앱을 빌드하고 배포하는 방법을 설명합니다.

프로젝트 개요

이 가이드에서는 Vue를 사용하여 간단한 예약 애플리케이션을 구축합니다. 예약 애플리케이션에는 예약 양식 보기와 예약 목록 보기가 있습니다.

게스트는 예약 양식 보기와 상호 작용하여 이름, 이메일, 날짜, 시간, 전화번호 등 예약 세부 정보를 입력합니다. 또한 예약 목록 보기에서 모든 예약을 확인할 수 있습니다.

다음을 활용하게 됩니다:

• Back4app 백엔드: Vue 애플리케이션의 예약 데이터를 데이터베이스에 저장하고 관리하기 위해 Back4app 백엔드를 생성합니다.

• Twilio API: 예약을 완료한 게스트에게 WhatsApp 확인 메시지를 보내기 위해 Twilio API를 Vue 애플리케이션에 통합합니다.

• Back4pp의 AI 에이전트: Back4app AI 에이전트로 네 가지 클라우드 기능을 생성하고, 이를 Vue 애플리케이션에 통합하여 처리할 수 있습니다:
  • 백4앱 데이터베이스에 예약 세부 정보 저장
  • 예약할 날짜와 시간의 예약 가능 여부 확인
  • 게스트에게 예약이 완료되었음을 알리는 WhatsApp 성공 메시지 보내기.
  • 데이터베이스에서 게스트가 이미 예약한 예약 보기.

• Back4app 컨테이너: Vue 애플리케이션을 Back4app 컨테이너에 배포하여 온라인에서 액세스할 수 있도록 합니다.

Vue 애플리케이션 구축

이 섹션에서는 개발 환경을 설정하고 예약 애플리케이션의 상용구를 구축하는 방법을 안내합니다.

개발 환경 설정

Vue 애플리케이션을 만들려면 터미널에서 다음 명령을 실행합니다:

npm create vue

위의 명령은 애플리케이션의 이름을 지정하고 애플리케이션의 특정 기능(예: TypeScript, JSX 지원 추가 등)을 활성화할지 묻는 메시지를 표시합니다. “Vue 라우터“를 제외한 모든 옵션에 대해 아니요를 선택합니다. 뷰 사이를 탐색하려면 이 옵션이 필요합니다.

그런 다음 생성된 디렉터리에 CD를 넣고 아래 명령을 실행하여 필요한 종속 요소를 설치합니다:

npm install

다음으로 아래 명령을 실행하여 Parse SDK를 설치합니다:

npm install parse

Parse SDK를 사용하면 Vue 애플리케이션과 Back4app 백엔드 간에 통신할 수 있습니다.

개발 환경을 설정한 후 예약 애플리케이션 보기 생성을 진행합니다.

애플리케이션의 뷰 만들기

애플리케이션의 보기 디렉터리에 예약 양식 및 예약 목록 보기를 만듭니다.

그런 다음 라우터 디렉터리의 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 애플리케이션 내에서 라우팅을 설정합니다. 경로 및 /예약 경로를 정의합니다. 게스트가 앱의 URL에 액세스하면 코드 블록이 예약 양식 보기를 홈 경로로 안내합니다.

예약 경로는 사용자를 예약 목록 보기로 안내합니다. 이 경로는 지연 로드되므로 앱이 필요할 때만 이 경로를 로드하므로 앱의 성능을 개선하는 데 도움이 됩니다.

다음으로 사용자가 두 경로 사이를 탐색할 수 있도록 하려면 경로 링크를 표시하는 탐색 표시줄을 렌더링하도록 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 라우터 라이브러리에서 라우터링크 및 라우터뷰 컴포넌트를 가져와서 각 경로를 라우터링크 컴포넌트로 표현합니다.

라우터링크 컴포넌트는 링크가 가리키는 경로를 지정하기 위해 to 프로퍼티를 받습니다. 라우터뷰 컴포넌트는 현재 경로의 콘텐츠를 동적으로 렌더링하는 플레이스홀더 역할을 합니다.

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.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.vue
<style scoped>

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

</style>

마지막으로 자산 디렉터리의 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 계정이 필요합니다. 계정이 없는 경우 무료로 가입할 수 있습니다.

계정에 로그인하고 오른쪽 상단에 있는 ‘새 앱‘ 버튼을 클릭합니다. 그러면 ‘서비스형 백엔드‘ 옵션을 선택할 수 있는 페이지로 이동합니다.

“서비스형 백엔드“를 클릭하면 앱 인스턴스의 이름을 지정하고 애플리케이션의 데이터베이스 유형을 선택하라는 메시지가 표시됩니다. PostgreSQL 데이터베이스를 선택하고 “만들기” 버튼을 누릅니다.

Back4app이 애플리케이션을 설정하면 아래와 같이 애플리케이션 인스턴스로 이동합니다.

‘보안 및 키‘ 섹션에서 ‘애플리케이션 ID‘와 ‘JavaScript 키‘를 검색합니다. 사이드바에서 “앱 설정“을 클릭하면 이 섹션을 찾을 수 있습니다.

그런 다음 .env 파일을 만들고 ‘애플리케이션ID‘와 ‘자바스크립트 키‘를 추가하여 애플리케이션 내에서 환경 변수로 로드합니다:

VITE_BACK4APP_APPLICATION_ID = <YOUR_APP_ID>
VITE_BACK4APP_JAVASCRIPT_KEY = YOUR_JAVASCRIPT_KEY>

이제 메인.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 백엔드와 통신할 수 있도록 합니다.

이제 백4앱 데이터베이스에 예약 세부 정보를 저장해야 합니다. 게스트의 예약 세부 정보를 저장하려면 Back4app의 AI 에이전트를 사용하여 데이터베이스 내에 클래스를 생성합니다.

클래스에는 이름, 이메일, 날짜 등의 예약 세부 정보가 저장됩니다.

AI 에이전트를 사용하여 예약 클래스 및 클라우드 함수 만들기

화면 왼쪽 상단의 ‘AI 상담원‘ 탭을 찾아 아래 프롬프트에 따라 상담원에게 데이터베이스에 클래스를 생성하도록 지시합니다:

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>

아래와 유사한 응답이 표시될 것입니다:

예약 세부 정보를 저장할 필드가 있는 예약 클래스를 성공적으로 생성했습니다. 생성한 데이터베이스와 상호 작용하는 AI 에이전트로 네 가지 클라우드 함수를 만들게 됩니다.

AI 상담원에게 다음 명령을 입력하여 예약 클래스에 데이터를 저장하는 클라우드 함수를 만들라는 메시지를 표시합니다:

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

아래와 유사한 응답이 표시될 것입니다:

createReservation 함수를 생성한 후 AI 상담원에게 다음 명령을 입력하여 게스트가 예약해야 하는 날짜와 시간의 예약 가능 여부를 확인합니다:

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.

아래와 유사한 응답이 표시될 것입니다:

트윌리오의 왓츠앱 API로 왓츠앱 메시지를 보내려면 트윌리오 계정을 만들고 설정해야 합니다. Twilio는 사용자가 애플리케이션에서 WhatsApp 메시지를 보낼 수 있는 API를 제공합니다.

트윌리오 계정에서 트윌리오 계정 SID, 트윌리오 인증 토큰, 트윌리오 왓츠앱 번호를 가져와 AI 에이전트에게 트윌리오의 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>

아래와 유사한 응답이 표시될 것입니다:

그런 다음 AI 에이전트에게 데이터베이스에 저장된 모든 예약을 볼 수 있는 마지막 클라우드 기능을 생성하라는 메시지를 표시합니다:

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의 백엔드에 정의한 클라우드 함수를 호출할 수 있습니다.

양식 제출 시 제출Res예약 함수를 실행하도록 ReservationForm.vue 파일에서 템플릿 블록을 수정합니다:

// 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가 컴포넌트를 마운트하기 직전에 onBeforeMount vue 함수를 사용하여 fetchReservations 함수를 호출합니다.

fetchReservations 함수는 백4앱 데이터베이스의 예약 클래스에 저장된 모든 예약을 검색하기 위해 getAllReservations 클라우드 함수를 실행합니다.

애플리케이션 테스트

애플리케이션을 Back4app 컨테이너에 배포하기 전에 애플리케이션을 테스트하여 모든 기능이 완벽하게 작동하는지 확인하세요.

아래 명령을 실행하여 애플리케이션을 시작하세요:

npm run dev

위의 명령을 실행하면 http://localhost:5173/ 에서 애플리케이션이 시작됩니다.

아래 이미지와 같이 http://localhost:5173/ 으로 이동하여 애플리케이션을 확인합니다:

‘예약 보기‘ 탭으로 이동하면 AI 상담원이 데이터베이스에 채운 예약을 확인할 수 있습니다.

양식을 작성하고 ‘예약 만들기‘ 버튼을 클릭하여 새 예약을 만드세요.

예약이 성공했는지 확인하려면 ‘예약 보기‘ 탭으로 이동하면 예약을 확인할 수 있습니다.

마지막으로 WhatsApp 애플리케이션을 열어 WhatsApp 번호로 전송된 확인 메시지를 확인합니다.

백4앱 컨테이너에서 백4앱의 AI 에이전트로 애플리케이션 배포하기

애플리케이션을 Back4app 컨테이너에 배포하려면 Vue 애플리케이션에 대한 Docker파일을 만들어야 합니다.

프로젝트의 루트 디렉토리에 Docker파일을 만들고 아래에 코드 블록을 추가합니다:

# 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;"]

Docker파일을 생성한 후 코드를 GitHub 리포지토리에 푸시합니다. AI 에이전트를 사용하여 GitHub에서 애플리케이션을 배포하려면 Back4app을 사용하려면 GitHub 계정에 Back4App 컨테이너 GitHub 앱을 설치해야 합니다.

또한 애플리케이션의 코드 저장소에 액세스하는 데 필요한 권한을 애플리케이션에 부여해야 합니다.

다음으로 Back4app 홈페이지로 이동하여 디스플레이 오른쪽 상단에 있는 ‘새 앱‘ 버튼을 클릭합니다.

그러면 설정 화면으로 이동하여 만들려는 앱의 유형을 선택해야 합니다.

아래 이미지와 같이 Back4app 에이전트 옵션을 선택합니다.

백4앱 에이전트 옵션을 선택하면 백4앱 AI 에이전트 페이지로 리디렉션됩니다.

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"

자리 표시자를 실제 값으로 바꿉니다. 위의 프롬프트가 나타나면 배포 프로세스가 시작됩니다.

완료되면 AI 에이전트가 응답하여 성공 또는 배포 보류 중임을 표시합니다. 보류 중인 배포를 받으면 Back4app 컨테이너 대시보드에서 앱의 배포 상태를 모니터링할 수 있습니다.

아래 이미지와 유사한 응답이 표시될 것입니다:

또는 애플리케이션을 Back4app 컨테이너에 수동으로 배포할 수도 있습니다.

결론

이 문서에서는 Back4app, Vue 및 Twilio API를 사용하여 기능적인 레스토랑 예약 앱을 빌드하고 배포했습니다.

앱을 통해 사용자는 예약을 할 수 있으며, 예약은 Back4app 백엔드에 저장됩니다. 사용자는 Vue에서 생성한 인터페이스와 AI 에이전트를 사용하여 생성한 Back4app 클라우드 코드를 통해 자신이 예약한 내용을 확인할 수 있습니다.

또한 앱은 Twilio API로 구동되는 WhatsApp 메시지를 통해 예약 성공 여부를 확인합니다.

이 튜토리얼에 사용된 전체 코드는 이 GitHub 리포지토리에서 찾을 수 있습니다.