Vue ile bir rezervasyon uygulaması nasıl oluşturulur?

Türkçe

Rezervasyonları yönetmek, restoranlar gibi zamanlama ve müşteri kapasitesinin kritik olduğu hizmet sektöründe işin önemli bir parçasıdır.

Back4app, Twilio API ve Vue ile rezervasyon yapma, onay mesajları alma ve ayrılmış slotları görüntüleme gibi özelliklere sahip basit bir restoran rezervasyon uygulaması oluşturabilirsiniz.

Bu makalede, ön uçta Vue, arka uç ve dağıtım ihtiyaçlarınızı karşılamak için Back4app ve Whatsapp aracılığıyla kullanıcılarla iletişim kurmak için Twilio ile bir rezervasyon uygulaması oluşturacak ve dağıtacaksınız.

Contents

1 Projeye Genel Bakış
2 Vue Uygulamanızı Oluşturma
3 Back4app Arka Uç Oluşturma
- 3.1 AI Agent Kullanarak Rezervasyon Sınıfı ve Bulut İşlevleri Oluşturma
4 Bulut İşlevlerinizi Vue Uygulamanıza Entegre Etme
5 Uygulamanın Test Edilmesi
6 Back4app’in AI Agent’ı ile Uygulamanızı Back4app Konteynerlerine Dağıtma
7 Sonuç

Projeye Genel Bakış

Bu kılavuzda, Vue ile basit bir rezervasyon uygulaması oluşturacaksınız. Rezervasyon uygulaması bir ReservationForm görünümüne ve bir ReservationList görünümüne sahip olacaktır.

Konuklar isim, e-posta, tarih, saat ve telefon numarası gibi rezervasyon ayrıntılarını girmek için ReservationForm görünümü ile etkileşime girer. Ayrıca ReservationList görünümünde yapılan tüm rezervasyonları da görürler.

Aşağıdakilerden yararlanacaksınız:

Back4app Arka Uç: Vue uygulamanızdaki rezervasyon verilerini bir veritabanında depolamak ve yönetmek için bir Back4app arka ucu oluşturacaksınız.

Twilio API: Rezervasyon yaptıran misafirlere WhatsApp onay mesajları göndermek için Twilio API’yi Vue uygulamanıza entegre edeceksiniz.

Back4pp’in Yapay Zeka Aracısı: Back4app AI aracısı ile dört bulut işlevi oluşturacaksınız ve bunları işlemek için Vue uygulamanıza entegre edeceksiniz:
- Rezervasyon detaylarının Back4App veritabanında saklanması
- Rezervasyon yapılacak tarih ve saatin uygunluğunun kontrol edilmesi
- Twilio API ile konuklara rezervasyonlarının yapıldığını bildiren bir WhatsApp başarı mesajı gönderme.
- Misafirlerin daha önce yapmış olduğu rezervasyonları veritabanınızda görüntülemek.

Back4app Konteynerleri: Vue uygulamanızı çevrimiçi erişilebilir hale getirmek için bir Back4app konteynerine dağıtacaksınız.

Vue Uygulamanızı Oluşturma

Bu bölüm, geliştirme ortamınızı kurma ve rezervasyon uygulamanızın taslağını oluşturma konusunda size rehberlik edecektir.

Geliştirme Ortamınızı Kurma

Bir Vue uygulaması oluşturmak için terminalinizde aşağıdaki komutu çalıştırın:

npm create vue

Yukarıdaki komut sizden uygulamanızı adlandırmanızı ve uygulamanız için TypeScript, JSX desteği vb. gibi belirli özellikleri etkinleştirmenizi isteyecektir. “Vue Router” dışındaki tüm seçenekler için hayır seçeneğini seçin. Görünümler arasında gezinmek için buna ihtiyacınız olacak.

Ardından, oluşturulan dizine gidin ve gerekli bağımlılıkları yüklemek için aşağıdaki komutu çalıştırın:

npm install

Ardından, aşağıdaki komutu çalıştırarak Parse SDK’yı yükleyin:

npm install parse

Parse SDK, Vue uygulamanız ile Back4app arka ucunuz arasında iletişim kurmanızı sağlar.

Geliştirme ortamınızı kurduktan sonra, rezervasyon uygulama görünümlerinizi oluşturmaya devam edin.

Uygulamanızın Görünümlerini Oluşturma

Uygulamanızın görünümler dizininde ReservationForm ve ReservationList görünümlerini oluşturun.

Ardından, yönlendirici dizininizdeki index.js dosyasına aşağıdaki kodu ekleyerek bu iki görünüm arasında yönlendirmeyi etkinleştirin:

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

Yukarıdaki kod bloğu, Vue uygulamanız içinde yönlendirme ayarlar. Bir / rotası ve bir /reservations rotası tanımlar. Misafirler uygulamanın URL’sine eriştiğinde, kod bloğu onları Ana Sayfa rotası olarak ReservationForm görünümüne yönlendirir.

reservations rotası kullanıcıları ReservationList görünümüne yönlendirir. Bu rota tembel olarak yüklenir, yani uygulamanız bu rotayı yalnızca gerektiğinde yükler ve bu da uygulamanızın performansını artırmaya yardımcı olur.

Ardından, kullanıcıların iki rota arasında gezinmesini sağlamak için App.vue dosyanızı rota bağlantılarını görüntüleyen bir gezinme çubuğu oluşturacak şekilde yapılandırın:

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

Yukarıdaki kod bloğu, uygulamanızın ana düzeni olarak işlev gören App.vue dosyasını görüntüler. Kod bloğu, Vue Router kütüphanesinden RouterLink ve RouterView bileşenlerini içe aktarır ve her rotayı bir RouterLink bileşeniyle temsil eder.

RouterLink bileşeni, bağlantının yönlendirdiği rotayı belirtmek için bir to prop alır. RouterView bileşeni, geçerli rotanın içeriğini dinamik olarak görüntüleyen bir yer tutucu görevi görür.

ReservationForm.vue dosyanıza, kullanıcıların rezervasyon bilgilerini girebilecekleri bir form oluşturmak için aşağıdaki kod bloğunu ekleyin:

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

Yukarıdaki kod bloğu, kullanıcının adı, e-postası, tarihi, saati ve telefon numarası gibi çeşitli ayrıntılara yönelik girdileri yakalamak için gerekli alanlara sahip bir form öğesi oluşturur.

Yukarıdaki kod bloğu daha sonra vue kütüphanesinden ref fonksiyonu ile kullanıcı detaylarını saklamak için reaktif bir rezervasyon nesnesi oluşturur.

Ardından, kullanıcıların yaptığı rezervasyonların listesini görüntülemek için aşağıdaki kod bloğunu ReservationList.vue dosyanıza ekleyin:

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

Yukarıdaki kod bloğu, varsa mevcut rezervasyonları görüntülemek için bir vue koşullu ifade yönergesi olan v-if kullanır.

Rezervasyonlar mevcutsa, kod bloğu v-for yönergesi ile rezervasyonlar dizisindeki her rezervasyonu yineler ve yapılan rezervasyonları görüntüler.

Uygulamanızın Görünümlerini Şekillendirme

Listenin ve diğer öğelerin görünümünü kontrol etmek için ReservationList görünümünüze aşağıdaki kapsamlandırılmış stil bloğunu ekleyin:

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

Formun görünümünü kontrol etmek için aşağıdaki kapsamı belirlenmiş stil bloğunu ReservationForm görünümünüze ekleyin:

// ReservationForm.vue
<style scoped>

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

</style>

Son olarak, assets dizinindeki main.css dosyanıza aşağıdaki CSS stillerini ekleyerek Vue uygulamanız için global stiller tanımlayın:

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

Rezervasyon uygulamanızın şablonunu oluşturduktan sonra, rezervasyon ayrıntılarını bir veritabanında saklamak için bir Back4app Backend oluşturun.

Back4app Arka Uç Oluşturma

Back4app’te Backend’inizi oluşturmak için bir Back4app hesabı gerekir. Eğer bir hesabınız yoksa, ücretsiz olarak kaydolabilirsiniz.

Hesabınıza giriş yapın ve sağ üst köşedeki “YENİ UYGULAMA” düğmesine tıklayın. Bu sizi “Hizmet Olarak Arka Uç” seçeneğini seçeceğiniz bir sayfaya yönlendirecektir.

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

“Hizmet Olarak Arka Uç” seçeneğine tıkladığınızda, uygulama örneğinize bir ad vermeniz ve uygulamanız için veritabanı türünü seçmeniz istenecektir. PostgreSQL veritabanını seçin ve “Oluştur” düğmesine basın.

Naming_App_and_Selecting_Database_Type - Your Application's Backend, Simplified

Back4app uygulamanızı kurduktan sonra, aşağıda gösterildiği gibi uygulama örneğinize yönlendirileceksiniz.

“Uygulama Kimliğinizi” ve “JavaScriptAnahtarınızı” “Güvenlik ve Anahtarlar” bölümünden alın. Bu bölümü kenar çubuğundaki “Uygulama Ayarları“na tıklayarak bulabilirsiniz.

Ardından, bir .env dosyası oluşturun ve uygulamanızda çevresel değişkenler olarak yüklemek için “Uygulama Kimliğinizi” ve “Javascript Anahtarınızı” ekleyin:

VITE_BACK4APP_APPLICATION_ID = <YOUR_APP_ID>
VITE_BACK4APP_JAVASCRIPT_KEY = YOUR_JAVASCRIPT_KEY>

Şimdi, main.js dosyanızı Parse’ı Vue uygulamanızda başlatmak için değiştirin. Bunun gibi:

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

Yukarıdaki kod bloğu, Vue uygulamanızdaki Parse SDK’yı içe aktarır ve başlatarak uygulamanızın Back4app arka ucunuzla iletişim kurmasını sağlar.

Şimdi, rezervasyon detaylarını Back4app veritabanınızda saklamanız gerekiyor. Bir misafirin rezervasyon detaylarını saklamak için, Back4app’in AI aracısını kullanarak veritabanınızda bir sınıf oluşturacaksınız.

Sınıf, ad, e-posta, tarih vb. gibi rezervasyon ayrıntılarını depolayacaktır.

AI Agent Kullanarak Rezervasyon Sınıfı ve Bulut İşlevleri Oluşturma

Ekranınızın sol üst tarafındaki “AI Agent” sekmesini bulun ve veritabanında sınıf oluşturmak için aşağıdaki komut istemiyle ajanı besleyin:

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>