วิธีพัฒนาแอปจองด้วย Vue? คู่มือทีละขั้นตอน

Thai

การจัดการการจองเป็นส่วนสำคัญของธุรกิจในอุตสาหกรรมบริการ โดยเฉพาะในธุรกิจที่ต้องมีการกำหนดเวลาและความสามารถในการรองรับลูกค้า เช่น ร้านอาหาร

ด้วย Back4app, Twilio API และ Vue คุณสามารถสร้างแอปจองร้านอาหารง่าย ๆ ที่มีคุณสมบัติต่าง ๆ เช่น การจอง การรับข้อความยืนยัน และการดูช่องเวลาที่มีการจองไว้

ในบทความนี้ คุณจะได้สร้างและปรับใช้แอปจองด้วย Vue สำหรับส่วนหน้าจอ, Back4app สำหรับจัดการส่วนหลังและการปรับใช้ และ Twilio สำหรับการสื่อสารกับผู้ใช้ผ่าน WhatsApp

Contents

1 ภาพรวมของโปรเจกต์
2 การสร้างแอป Vue ของคุณ
3 การสร้าง Back4app Backend
- 3.1 การสร้าง Reservation Class และ Cloud Functions ด้วย AI Agent
4 การผสานรวม Cloud Functions ในแอป Vue ของคุณ
5 การทดสอบแอปพลิเคชัน
6 การปรับใช้แอปพลิเคชันของคุณด้วย Back4app’s AI Agent บน Back4app Containers
7 บทสรุป

ภาพรวมของโปรเจกต์

ในคู่มือนี้ คุณจะสร้างแอปจองง่าย ๆ ด้วย Vue โดยแอปจองนี้จะมีมุมมอง ReservationForm และ ReservationList

ผู้เข้าชมจะมีปฏิสัมพันธ์กับมุมมอง ReservationForm เพื่อกรอกข้อมูลการจอง เช่น ชื่อ, อีเมล, วันที่, เวลา และ หมายเลขโทรศัพท์ นอกจากนี้ พวกเขายังสามารถดูการจองทั้งหมดที่ทำในมุมมอง ReservationList

คุณจะใช้สิ่งต่อไปนี้:

Back4app Backend: คุณจะสร้าง Back4app backend เพื่อเก็บและจัดการข้อมูลการจองจากแอป Vue ของคุณในฐานข้อมูล

Twilio API: คุณจะผสานรวม Twilio API เข้ากับแอป Vue ของคุณเพื่อส่งข้อความยืนยันผ่าน WhatsApp ไปยังผู้ที่ทำการจอง

Back4pp’s AI Agent: คุณจะสร้างคลาวด์ฟังก์ชันสี่ฟังก์ชันด้วย Back4app AI Agent ซึ่งคุณจะผสานรวมเข้ากับแอป Vue ของคุณเพื่อจัดการกับ:
- การจัดเก็บรายละเอียดการจองลงในฐานข้อมูลของ Back4app
- การตรวจสอบความพร้อมใช้งานของวันที่และเวลาที่จะจอง
- การส่งข้อความยืนยันผ่าน WhatsApp โดยใช้ Twilio API เพื่อแจ้งผู้ใช้ว่าการจองเสร็จสมบูรณ์
- การดูการจองที่ผู้เข้าชมได้ทำไว้แล้วในฐานข้อมูลของคุณ

Back4app Containers: คุณจะปรับใช้แอป Vue ของคุณใน Back4app container เพื่อให้สามารถเข้าถึงได้ทางออนไลน์

การสร้างแอป Vue ของคุณ

ส่วนนี้จะนำคุณผ่านการตั้งค่าสภาพแวดล้อมการพัฒนาและการสร้างโครงสร้างเริ่มต้นของแอปจองของคุณ

การตั้งค่าสภาพแวดล้อมการพัฒนาของคุณ

ในการสร้างแอป Vue ให้รันคำสั่งต่อไปนี้ในเทอร์มินัลของคุณ:

npm create vue

คำสั่งข้างต้นจะให้คุณตั้งชื่อแอปและเปิดใช้งานคุณสมบัติบางอย่างสำหรับแอปของคุณ เช่น การเพิ่ม TypeScript, การรองรับ JSX ฯลฯ เลือก no สำหรับตัวเลือกทั้งหมด ยกเว้น “Vue Router” ซึ่งคุณจะต้องใช้สำหรับการนำทางระหว่างมุมมอง

จากนั้น ใช้คำสั่ง cd เพื่อเข้าสู่ไดเรกทอรีที่สร้างขึ้นและรันคำสั่งด้านล่างเพื่อติดตั้ง dependencies ที่จำเป็น:

npm install

ต่อไป ให้ติดตั้ง Parse SDK โดยรันคำสั่งด้านล่าง:

npm install parse

Parse SDK ช่วยให้คุณสื่อสารระหว่างแอป Vue ของคุณกับ Back4app backend ได้

หลังจากตั้งค่าสภาพแวดล้อมการพัฒนาแล้ว ให้ดำเนินการสร้างมุมมองสำหรับแอปจองของคุณ

การสร้างมุมมองในแอปของคุณ

สร้างมุมมอง ReservationForm และ ReservationList ในไดเรกทอรี views ของแอปของคุณ

จากนั้น เปิดใช้งานการนำทางระหว่างมุมมองทั้งสองนี้โดยการเพิ่มโค้ดด้านล่างในไฟล์ index.js ในไดเรกทอรี router:

// 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 route

เส้นทาง /reservations จะนำผู้ใช้ไปยังมุมมอง ReservationList ซึ่งถูกโหลดแบบ lazy load หมายความว่าแอปของคุณจะโหลดเส้นทางนี้เฉพาะเมื่อจำเป็น ซึ่งช่วยปรับปรุงประสิทธิภาพของแอป

ต่อไป เพื่อให้ผู้ใช้สามารถนำทางระหว่างสองเส้นทางได้ ให้กำหนดค่าไฟล์ 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 รับ prop to เพื่อระบุเส้นทางที่ลิงก์จะชี้ไป ส่วนคอมโพเนนต์ 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>

โค้ดข้างต้นสร้างฟอร์มที่มีฟิลด์ที่จำเป็นสำหรับการกรอกข้อมูล เช่น name, email, date, time และ phoneNumber

จากนั้นโค้ดจะสร้างออบเจ็กต์ reservation แบบ reactive เพื่อเก็บข้อมูลผู้ใช้โดยใช้ฟังก์ชัน 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>

โค้ดข้างต้นใช้ directive ของ Vue คือ v-if ในการแสดงการจองที่มีอยู่ (ถ้ามี) โดยถ้ามีการจอง โค้ดจะวนลูปผ่านแต่ละการจองในอาร์เรย์ reservations ด้วย directive v-for และแสดงรายละเอียดการจองนั้น

การปรับสไตล์มุมมองในแอปของคุณ

เพิ่มบล็อกสไตล์ที่มีขอบเขต (scoped style block) ต่อไปนี้ในมุมมอง 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>

สุดท้าย กำหนดสไตล์แบบ global สำหรับแอป 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 Backend

การสร้าง Backend บน 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 และคลิกปุ่ม “Create”

Naming_App_and_Selecting_Database_Type - Your Application's Backend, Simplified

หลังจาก Back4app ตั้งค่าแอปของคุณแล้ว คุณจะถูกนำไปยังอินสแตนซ์แอปของคุณ ดังที่แสดงด้านล่าง

ดึง “Application ID” และ “JavaScript Key” ของคุณจากส่วน “Security & Keys” ซึ่งสามารถเข้าถึงได้โดยคลิก “App Settings” ในแถบด้านข้าง

จากนั้น สร้างไฟล์ .env และเพิ่ม “Application ID” และ “Javascript Key” ของคุณลงไปเพื่อโหลดเป็น environmental variables ในแอปของคุณ:

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 backend ได้

ต่อไป คุณจะต้องเก็บรายละเอียดการจองในฐานข้อมูลของ Back4app เพื่อเก็บข้อมูลการจองของผู้เข้าชม คุณจะสร้างคลาสในฐานข้อมูลโดยใช้ Back4app AI Agent

คลาสนี้จะเก็บรายละเอียดการจอง เช่น name, email, date เป็นต้น

การสร้าง Reservation Class และ Cloud Functions ด้วย AI Agent

ค้นหาแท็บ “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>