Bagaimana cara membuat aplikasi reservasi dengan Vue?

Bahasa Indonesia

Mengelola reservasi adalah bagian penting dari bisnis di industri jasa, di mana penjadwalan dan kapasitas pelanggan sangat penting, seperti restoran.

Dengan Back4app, API Twilio, dan Vue, Anda dapat membuat aplikasi reservasi restoran sederhana dengan fitur-fitur seperti membuat reservasi, menerima pesan konfirmasi, dan melihat slot yang dipesan.

Pada artikel ini, Anda akan membangun dan menggunakan aplikasi reservasi dengan Vue di bagian depan, Back4app untuk menangani kebutuhan backend dan deployment Anda, dan Twilio untuk berkomunikasi dengan pengguna melalui Whatsapp.

Contents

1 Gambaran Umum Proyek
2 Membangun Aplikasi Vue Anda
3 Membuat Backend Back4app
- 3.1 Membuat Kelas Reservasi dan Fungsi Cloud Menggunakan Agen AI
4 Mengintegrasikan Fungsi Cloud Anda dalam Aplikasi Vue Anda
5 Menguji Aplikasi
6 Menerapkan Aplikasi Anda dengan Agen AI Back4app di Wadah Back4app
7 Kesimpulan

Gambaran Umum Proyek

Dalam panduan ini, Anda akan membuat aplikasi reservasi sederhana dengan Vue. Aplikasi reservasi akan memiliki tampilan ReservationForm dan tampilan ReservationList.

Para tamu berinteraksi dengan tampilan ReservationForm untuk memasukkan rincian reservasi mereka, seperti nama, email, tanggal, waktu, dan nomor telepon. Mereka juga dapat melihat semua reservasi yang telah dibuat di tampilan ReservationList.

Anda akan menggunakan yang berikut ini:

Back4app Backend: Anda akan membuat backend Back4app untuk menyimpan dan mengelola data reservasi dari aplikasi Vue Anda dalam database.

API Twilio: Anda akan mengintegrasikan Twilio API ke dalam aplikasi Vue Anda untuk mengirimkan pesan konfirmasi WhatsApp kepada tamu yang telah memesan reservasi.

Agen AI Back4pp: Anda akan membuat empat fungsi cloud dengan agen AI Back4app, yang akan Anda integrasikan ke dalam aplikasi Vue untuk ditangani:
- Menyimpan detail reservasi di basis data Back4App
- Memeriksa ketersediaan tanggal dan waktu yang akan dipesan
- Mengirim pesan sukses WhatsApp dengan API Twilio yang memberi tahu tamu bahwa reservasi mereka telah dibuat.
- Melihat reservasi yang telah dibuat oleh tamu di database Anda.

Kontainer Back4app: Anda akan menerapkan aplikasi Vue Anda ke kontainer Back4app agar dapat diakses secara online.

Membangun Aplikasi Vue Anda

Bagian ini akan memandu Anda dalam menyiapkan lingkungan pengembangan dan membangun boilerplate aplikasi reservasi Anda.

Menyiapkan Lingkungan Pengembangan Anda

Untuk membuat aplikasi Vue, jalankan perintah berikut di terminal Anda:

npm create vue

Perintah di atas akan meminta Anda untuk memberi nama aplikasi Anda dan mengaktifkan fitur-fitur tertentu untuk aplikasi Anda, seperti menambahkan TypeScript, dukungan JSX, dll. Pilih tidak untuk semua opsi kecuali “Vue Router”. Anda akan membutuhkannya untuk menavigasi antar tampilan.

Selanjutnya, cd ke dalam direktori yang telah dibuat dan jalankan perintah di bawah ini untuk menginstal dependensi yang diperlukan:

npm install

Selanjutnya, instal Parse SDK dengan menjalankan perintah di bawah ini:

npm install parse

Parse SDK memungkinkan Anda untuk berkomunikasi antara aplikasi Vue dan backend Back4app Anda.

Setelah menyiapkan lingkungan pengembangan Anda, lanjutkan dengan membuat tampilan aplikasi reservasi Anda.

Membuat Tampilan Aplikasi Anda

Buat tampilan ReservationForm dan ReservationList di direktori tampilan aplikasi Anda.

Kemudian, aktifkan perutean di antara kedua tampilan ini dengan menambahkan kode di bawah ini pada berkas index.js di direktori router Anda:

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

Blok kode di atas mengatur perutean di dalam aplikasi Vue Anda. Ini mendefinisikan rute /rute dan rute /reservasi. Ketika tamu mengakses URL aplikasi, blok kode mengarahkan mereka ke tampilan ReservationForm sebagai rute Home.

Rute /reservasi mengarahkan pengguna ke tampilan DaftarReservasi. Rute ini dimuat dengan lambat, yang berarti aplikasi Anda hanya memuat rute ini ketika diperlukan, yang membantu meningkatkan kinerja aplikasi Anda.

Selanjutnya, untuk memungkinkan pengguna menavigasi di antara dua rute, konfigurasikan file App.vue Anda untuk membuat bilah navigasi yang menampilkan tautan rute:

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

Blok kode di atas menampilkan file App.vue, yang bertindak sebagai tata letak utama aplikasi Anda. Blok kode mengimpor komponen RouterLink dan RouterView dari pustaka Vue Router, yang merepresentasikan setiap rute dengan komponen RouterLink.

Komponen RouterLink membutuhkan penopang untuk menentukan rute yang dituju oleh tautan. Komponen RouterView bertindak sebagai placeholder, yang secara dinamis merender konten rute saat ini.

Dalam file ReservationForm.vue Anda, tambahkan blok kode di bawah ini untuk membuat formulir bagi pengguna untuk memasukkan detail reservasi mereka:

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

Blok kode di atas membuat elemen formulir dengan bidang wajib untuk menangkap input untuk berbagai detail seperti nama pengguna, email, tanggal, waktu, dan nomor telepon.

Blok kode di atas kemudian membuat objek reservasi reaktif untuk menyimpan detail pengguna dengan fungsi ref dari pustaka vue.

Selanjutnya, tambahkan blok kode berikut ini ke file ReservationList.vue Anda untuk menampilkan daftar reservasi yang telah dibuat pengguna:

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

Blok kode di atas menggunakan direktif pernyataan bersyarat vue, v-if, untuk menampilkan reservasi yang ada, jika ada.

Jika ada reservasi, blok kode akan mengulang setiap reservasi dalam larik reservasi dengan direktif v-for dan menampilkan reservasi yang dibuat.

Menata Tampilan Aplikasi Anda

Tambahkan blok gaya cakupan berikut ini ke tampilan ReservationList Anda untuk mengontrol tampilan daftar dan elemen lainnya:

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

Tambahkan blok gaya cakupan di bawah ini ke tampilan ReservationForm Anda untuk mengontrol tampilan formulir:

// ReservationForm.vue
<style scoped>

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

</style>

Terakhir, tentukan gaya global untuk aplikasi Vue Anda dengan menambahkan gaya CSS berikut ini ke berkas main.css di direktori aset:

/* 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;
}

Setelah membuat boilerplate aplikasi reservasi Anda, buat Back4app Backend untuk menyimpan detail reservasi dalam database.

Membuat Backend Back4app

Membuat Backend Anda di Back4app membutuhkan akun Back4app. Jika Anda tidak memilikinya, Anda dapat mendaftar secara gratis.

Masuk ke akun Anda dan klik tombol “APLIKASI BARU” di sudut kanan atas. Ini akan membawa Anda ke halaman di mana Anda akan memilih opsi “Backend sebagai Layanan“.

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

Mengklik “Backend as a Service” akan meminta Anda untuk memberi nama instance aplikasi Anda dan memilih jenis database untuk aplikasi Anda. Pilih basis data PostgreSQL dan tekan tombol “Buat“.

Naming_App_and_Selecting_Database_Type - Your Application's Backend, Simplified

Setelah Back4app menyiapkan aplikasi Anda, Anda akan diarahkan ke instance aplikasi Anda, seperti yang ditunjukkan di bawah ini.

Ambil “ID Aplikasi” dan “Kunci JavaScript” Anda dari bagian “Keamanan & Kunci“. Anda dapat menemukan bagian ini dengan mengeklik “Pengaturan Aplikasi” di bilah sisi.

Selanjutnya, buat file .env dan tambahkan “ID Aplikasi” dan “Javascript Key” untuk memuatnya sebagai variabel lingkungan di dalam aplikasi Anda:

VITE_BACK4APP_APPLICATION_ID = <YOUR_APP_ID>
VITE_BACK4APP_JAVASCRIPT_KEY = YOUR_JAVASCRIPT_KEY>

Sekarang, ubah file main.js Anda untuk menginisialisasi Parse di aplikasi Vue Anda. Seperti itu:

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

Blok kode di atas mengimpor dan menginisialisasi Parse SDK di aplikasi Vue Anda, sehingga aplikasi Anda dapat berkomunikasi dengan backend Back4app.

Sekarang, Anda perlu menyimpan detail reservasi pada database Back4app Anda. Untuk menyimpan detail reservasi tamu, Anda akan membuat kelas di dalam database Anda menggunakan agen AI Back4app.

Kelas akan menyimpan detail reservasi, seperti nama, email, tanggal, dll.

Membuat Kelas Reservasi dan Fungsi Cloud Menggunakan Agen AI

Cari tab “Agen AI” di sisi kiri atas layar Anda dan berikan perintah di bawah ini kepada agen untuk membuat kelas di database:

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>