Comment créer une application de réservation avec Vue ?

Français

La gestion des réservations est un élément essentiel de l’activité dans le secteur des services, où les horaires et la capacité d’accueil des clients sont essentiels, comme dans les restaurants.

Avec Back4app, l’API Twilio et Vue, vous pouvez créer une application simple de réservation de restaurant avec des fonctionnalités telles que la réservation, la réception de messages de confirmation et la visualisation des créneaux réservés.

Dans cet article, vous allez construire et déployer une application de réservation avec Vue sur le front-end, Back4app pour gérer votre back-end et vos besoins de déploiement, et Twilio pour communiquer avec les utilisateurs via Whatsapp.

Contents

1 Aperçu du projet
2 Construire votre application Vue
3 Création d’un backend Back4app
- 3.1 Création de la classe de réservation et des fonctions cloud à l’aide de l’agent AI
4 Intégrer vos fonctions cloud dans votre application Vue
5 Test de l’application
6 Déployer votre application avec l’agent AI de Back4app sur les conteneurs Back4app
7 Conclusion

Aperçu du projet

Dans ce guide, vous allez construire une application de réservation simple avec Vue. L’application de réservation aura une vue ReservationForm et une vue ReservationList.

Les clients interagissent avec la vue ReservationForm pour saisir les détails de leur réservation, tels que le nom, l’adresse électronique, la date, l’heure et le numéro de téléphone. Ils peuvent également consulter toutes les réservations effectuées dans la vue ReservationList.

Vous utiliserez les éléments suivants :

Back4app Backend: Vous allez créer un backend Back4app pour stocker et gérer les données de réservation de votre application Vue dans une base de données.

API Twilio: Vous intégrerez l’API Twilio dans votre application Vue pour envoyer des messages de confirmation WhatsApp aux clients qui ont effectué une réservation.

L’agent AI de Back4pp: Vous allez créer quatre fonctions cloud avec l’agent AI de Back4app, que vous allez intégrer dans votre application Vue pour gérer :
- stocker les détails de la réservation dans une base de données Back4App
- Vérifier la disponibilité de la date et de l’heure à réserver
- L’envoi d’un message de succès WhatsApp avec l’API Twilio indiquant à l’invité que sa réservation a été effectuée.
- Visualiser les réservations déjà effectuées par les clients dans votre base de données.

Conteneurs Back4app: Vous allez déployer votre application Vue dans un conteneur Back4app pour la rendre accessible en ligne.

Construire votre application Vue

Cette section vous guidera dans la mise en place de votre environnement de développement et dans la construction du modèle de base de votre application de réservation.

Configuration de l’environnement de développement

Pour créer une application Vue, exécutez la commande suivante dans votre terminal :

npm create vue

La commande ci-dessus vous invitera à nommer votre application et à activer certaines fonctionnalités pour votre application, telles que l’ajout de TypeScript, la prise en charge de JSX, etc. Sélectionnez no pour toutes les options à l’exception de “Vue Router”. Vous en aurez besoin pour naviguer entre les vues.

Ensuite, allez dans le répertoire créé et exécutez la commande ci-dessous pour installer les dépendances nécessaires :

npm install

Ensuite, installez le SDK Parse en exécutant la commande ci-dessous :

npm install parse

Le SDK Parse vous permet de communiquer entre votre application Vue et votre backend Back4app.

Après avoir configuré votre environnement de développement, créez les vues de votre application de réservation.

Créer les vues de votre application

Créez les vues ReservationForm et ReservationList dans le répertoire des vues de votre application.

Ensuite, activez le routage entre ces deux vues en ajoutant le code ci-dessous dans le fichier index.js de votre répertoire routeur:

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

Le bloc de code ci-dessus met en place le routage dans votre application Vue. Il définit une route / et une route /reservations. Lorsque les invités accèdent à l’URL de l’application, le bloc de code les dirige vers la vue ReservationForm en tant que route Home.

La route /reservations dirige les utilisateurs vers la vue ReservationList. Cette route est chargée paresseusement, ce qui signifie que votre application ne la charge que lorsque c’est nécessaire, ce qui contribue à améliorer les performances de votre application.

Ensuite, pour permettre aux utilisateurs de naviguer entre les deux itinéraires, configurez votre fichier App.vue pour qu’il rende une barre de navigation affichant les liens de l’itinéraire :

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

Le bloc de code ci-dessus affiche le fichier App.vue, qui constitue la présentation principale de votre application. Le bloc de code importe les composants RouterLink et RouterView de la bibliothèque Vue Router, représentant chaque route par un composant RouterLink.

Le composant RouterLink prend une propriété to pour spécifier la route vers laquelle le lien est dirigé. Le composant RouterView fait office de placeholder et rend dynamiquement le contenu de l’itinéraire actuel.

Dans votre fichier ReservationForm.vue, ajoutez le bloc de code ci-dessous pour créer un formulaire permettant aux utilisateurs de saisir les détails de leur réservation :

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

Le bloc de code ci-dessus crée un élément de formulaire avec des champs obligatoires pour capturer les entrées de divers détails comme le nom de l’utilisateur, l’adresse électronique, la date, l’heure et le numéro de téléphone.

Le bloc de code ci-dessus crée ensuite un objet de réservation réactif pour stocker les détails de l’utilisateur à l’aide de la fonction ref de la bibliothèque vue.

Ensuite, ajoutez le bloc de code suivant à votre fichier ReservationList.vue pour afficher la liste des réservations effectuées par les utilisateurs :

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

Le bloc de code ci-dessus utilise une directive de déclaration conditionnelle vue, v-if, pour afficher les réservations existantes, le cas échéant.

Si des réservations existent, le bloc de code parcourt chaque réservation dans le tableau des réservations avec la directive v-for et affiche les réservations effectuées.

Styliser les vues de votre application

Ajoutez le bloc de style suivant à votre vue ReservationList pour contrôler l’apparence de la liste et des autres éléments :

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

Ajoutez le bloc de style ci-dessous à votre vue ReservationForm pour contrôler l’apparence du formulaire :

// ReservationForm.vue
<style scoped>

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

</style>

Enfin, définissez des styles globaux pour votre application Vue en ajoutant les styles CSS suivants à votre fichier main.css dans le répertoire 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;
}

Après avoir élaboré le modèle de votre application de réservation, créez un Back4app Backend pour stocker les détails de la réservation dans une base de données.

Création d’un backend Back4app

La création de votre Backend sur Back4app nécessite un compte Back4app. Si vous n’en avez pas, vous pouvez vous inscrire gratuitement.

Connectez-vous à votre compte et cliquez sur le bouton “NEW APP” en haut à droite. Cela vous mènera à une page où vous choisirez l’option “Backend as a Service“.

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

En cliquant sur “Backend as a Service“, vous serez invité à donner un nom à votre instance d’application et à sélectionner le type de base de données pour votre application. Sélectionnez la base de données PostgreSQL et cliquez sur le bouton “Créer“.

Naming_App_and_Selecting_Database_Type - Your Application's Backend, Simplified

Après que Back4app ait configuré votre application, vous serez dirigé vers l’instance de votre application, comme indiqué ci-dessous.

Récupérez votre “Application ID” et votre “JavaScript Key” dans la section “Security & Keys“. Vous pouvez trouver cette section en cliquant sur “App Settings” dans la barre latérale.

Ensuite, créez un fichier .env et ajoutez votre “Application ID” et votre “Javascript Key” pour les charger en tant que variables environnementales dans votre application :

VITE_BACK4APP_APPLICATION_ID = <YOUR_APP_ID>
VITE_BACK4APP_JAVASCRIPT_KEY = YOUR_JAVASCRIPT_KEY>

Maintenant, modifiez votre fichier main.js pour initialiser Parse dans votre application Vue. Comme cela :

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

Le bloc de code ci-dessus importe et initialise le SDK Parse dans votre application Vue, permettant à votre application de communiquer avec votre backend Back4app.

Maintenant, vous devez stocker les détails de la réservation dans votre base de données Back4app. Pour stocker les détails de la réservation d’un client, vous allez créer une classe dans votre base de données en utilisant l’agent AI de Back4app.

La classe stocke les détails de la réservation, tels que le nom, l’adresse électronique, la date, etc.

Création de la classe de réservation et des fonctions cloud à l’aide de l’agent AI

Localisez l’onglet “AI Agent” en haut à gauche de votre écran et envoyez à l’agent l’invite ci-dessous pour créer la classe dans la base de données :

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>