كيف تنشئ تطبيق حجز باستخدام Vue؟

Arabic

تُعد إدارة الحجوزات جزءًا أساسيًا من العمل في مجال الخدمات، حيث تكون الجدولة وسعة العملاء أمرًا بالغ الأهمية، مثل المطاعم.

باستخدام Back4app وTwilio API وVue، يمكنك إنشاء تطبيق بسيط لحجز المطاعم مع ميزات مثل إجراء الحجوزات وتلقي رسائل التأكيد وعرض الخانات المحجوزة.

في هذه المقالة، ستقوم ببناء تطبيق حجز ونشره باستخدام Vue في الواجهة الأمامية، و Back4app للتعامل مع الواجهة الخلفية واحتياجات النشر، و Twilio للتواصل مع المستخدمين من خلال Whatsapp.

Contents

1 نظرة عامة على المشروع
2 بناء تطبيق Vue الخاص بك
3 إنشاء خلفية Back4app Back4app
- 3.1 إنشاء فئة الحجز والوظائف السحابية باستخدام عامل الذكاء الاصطناعي
4 دمج وظائف السحابة في تطبيق Vue الخاص بك
5 اختبار التطبيق
6 نشر تطبيقك باستخدام وكيل الذكاء الاصطناعي الخاص ب Back4app على حاويات Back4app
7 الخاتمة

نظرة عامة على المشروع

في هذا الدليل، ستقوم ببناء تطبيق حجز بسيط باستخدام Vue. سيحتوي تطبيق الحجز على طريقة عرض ReservationForm وطريقة عرض ReservationList.

يتفاعل الضيوف مع طريقة عرض ReservationForm لإدخال تفاصيل الحجز، مثل الاسم والبريد الإلكتروني والتاريخ والوقت ورقم الهاتف. كما يرون جميع الحجوزات التي تم إجراؤها في طريقة عرض ReservationList.

سوف تستفيد مما يلي:

خلفية Back4app Back4app: ستقوم بإنشاء خلفية Back4app Back4app لتخزين وإدارة بيانات الحجز من تطبيق Vue الخاص بك في قاعدة بيانات.

واجهة برمجة تطبيقات Twilio: ستقوم بدمج Twilio API في تطبيق Vue الخاص بك لإرسال رسائل تأكيد الواتساب إلى الضيوف الذين حجزوا حجزاً.

وكيل الذكاء الاصطناعي الخاص بـ Back4pp ستقوم بإنشاء أربع وظائف سحابية باستخدام وكيل Back4App AI، والتي ستدمجها في تطبيق Vue الخاص بك للتعامل معها:
- تخزين تفاصيل الحجز على قاعدة بيانات Back4App
- التحقق من توفر التاريخ والوقت المراد حجزه
- إرسال رسالة نجاح عبر تطبيق واتساب باستخدام واجهة برمجة التطبيقات 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 الخاص بك. فهو يحدد مسار / مسار ومسار /حجوزات. عندما يصل الضيوف إلى عنوان URL الخاص بالتطبيق، يوجههم مكوِّن الشيفرة إلى طريقة عرض ReservationForm كمسار الصفحة الرئيسية.

يوجه المسار/الحجوزات المستخدمين إلى عرض 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 خاصية لتحديد المسار الذي يوجه إليه الرابط. يعمل مكوِّن 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.

بعد ذلك، أضف كتلة التعليمات البرمجية التالية إلى ملف 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-إذا، لعرض الحجوزات الموجودة، إن وجدت.

إذا كانت الحجوزات موجودة، تقوم كتلة التعليمات البرمجية بتكرار كل حجز في مصفوفة الحجوزات باستخدام التوجيه v مقابل، وتعرض الحجوزات التي تم إجراؤها.

تصميم طرق عرض تطبيقك

أضف كتلة الأنماط المحددة النطاق التالية إلى طريقة عرض 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 في دليل الأصول :

/* 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 حساب Back4app. إذا لم يكن لديك حساب، يمكنك التسجيل مجاناً.

سجّل الدخول إلى حسابك وانقر على زر “تطبيق جديد” في الزاوية العلوية اليمنى. سيقودك هذا إلى صفحة حيث ستختار خيار “الواجهة الخلفية كخدمة“.

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 بإعداد تطبيقك، سيتم توجيهك إلى مثيل التطبيق الخاص بك، كما هو موضح أدناه.

استرجع “معرّف التطبيق” و”مفتاح جافا سكريبت” من قسم “الأمان والمفاتيح“. يمكنك تحديد موقع هذا القسم بالنقر على “إعدادات التطبيق” في الشريط الجانبي.

بعد ذلك، أنشئ ملف .env وأضف “معرّف التطبيق” و”مفتاح جافا سكريبت” لتحميلها كمتغيرات بيئية داخل تطبيقك:

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 الخاصة بك. لتخزين تفاصيل حجز الضيف، ستقوم بإنشاء فئة داخل قاعدة البيانات الخاصة بك باستخدام عامل الذكاء الاصطناعي الخاص بـ 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>