Dans ce tutoriel, nous allons créer une application de réservation d'événements avec HTML, CSS, JavaScript et Firebase.

Sorry for the interrupt!

If you're interested in learning JavaScript in a comprehensive way, I highly recommend this course: JavaScript - The Complete Guide 2020 (Beginner + Advanced)

It's an affiliate link, so by purchasing, you support the blog at the same time.

Planifier notre application
Balisage
Stylisation
Interagir avec Firebase
Afficher et mettre à jour les données avec JavaScript

Planifier notre application

Nous n'allons pas créer une application de réservation d'événements complète avec toutes les fonctionnalités. Ce n'est pas pertinent de tout couvrir dans un seul didacticiel, je veux juste garder les choses simples et faciles à digérer, peut-être que la partie authentification sera couverte dans un autre article.

Ainsi, notre application de réservation d'événements aura les fonctionnalités suivantes:

L'utilisateur peut créer un événement et le stocker dans Firestore.
L'utilisateur peut récupérer tous les événements en temps réel.
L'utilisateur peut réserver un événement.
L'utilisateur ne peut pas réserver un événement plus d'une fois.

Maintenant que nous savons à quoi ressemblera notre application, commençons à la construire dans la section suivante.

Balisage

Notre fichier HTML sera relativement simple. Nous allons contenir notre barre de navigation et le dernier événement enregistré dans la balise header.

Dans index.html

<body>
  <header id="home">
    <nav class="navbar">
      <h1>Event'King</h1>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#events">Events</a></li>
        <li><a href="#add-event">New Event</a></li>
      </ul>
    </nav>
    <div class="welcome-event"></div>
  </header>
  <main>
    <section id="events">
      <h1 class="section-title">Events</h1>
      <div class="events-container"></div>
    </section>
    <section id="add-event">
      <h1 class="section-title">New Event</h1>
      <form class="form">
        <input type="text" id="name" placeholder="Name" />
        <input type="number" id="attendee" placeholder="Attendees" />
        <textarea
          id="description"
          cols="30"
          rows="10"
          placeholder="Description..."
        ></textarea>
        <select id="status">
          <option value="0">Free</option>
          <option value="1">Paid</option>
        </select>
        <button class="btn btn-primary">Save</button>
      </form>
    </section>
  </main>
</body>

Ensuite, la balise main encapsule la liste des événements et le formulaire qui nous permet de créer un nouvel événement.

Les événements seront affichés plus tard avec l'aide de JavaScript.

Dans index.html

<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-firestore.js"></script>

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
    appId: "xxxxxxxxxxxxxxxxxxxxxxxxx"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  const db = firebase.firestore()
</script>

<script src="db.js"></script>
<script src="app.js"></script>

</body>
</html>

Ensuite, nous devons connecter notre application à Firebase pour pouvoir stocker nos données.

Pour disposer de ces informations d'identification, vous devrez créer une nouvelle application dans la Firebase Console. Et une fois le projet créé, cliquez sur l'icône de code </> qui se trouve à côté des icônes IOS et Android pour enregistrer votre application.

Maintenant, pour générer les informations d'identification, vous devez enregistrer le nom de votre application.

Et enfin, mettez les informations d'identification dans le fichier HTML comme je le fais ici.

Ensuite, dupliquez la première balise script et changer firebase-app.js en firebase-firestore.js car nous utiliserons Firestore dans ce projet.

Ensuite, initialisez firebase avec la configuration et déclarer une variable db qui sera utilisée plus tard pour interagir avec Firebase.

Maintenant que nous avons notre balisage et avons réussi à lier notre projet à Firebase, commençons à le styliser dans la section suivante.

Stylisation

Le fichier CSS est un peu long, donc je ne couvrirai pas tout dans ce article, je vais juste souligner les parties les plus importantes. Cependant, pas de soucis, vous trouverez le code source à la fin de l'article.

Comme d'habitude, nous commençons par importer notre police et faisons quelques réinitialisations pour éviter le comportement par défaut.

Dans style.css

@import url("https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap");

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  --primary-color: #e74c3c;
  --secondary-color: #222;
  --tertiary-color: #333;
  --light-color: #fff;
  scroll-behavior: smooth;
}

body {
  background-color: #1f1f1f;
  font-family: "Nunito", sans-serif;
  font-size: 1rem;
  color: var(--light-color);
  line-height: 1.6;
}

Ensuite, nous utilisons des variables CSS pour stocker nos couleurs et définissons le comportement de défilement sur lisse pour avoir juste un bel effet de défilement lorsque l'utilisateur clique sur les liens de la barre de navigation.

Cependant, soyez prudent avec le scroll-behavior, il n'est pas pris en charge par tous les navigateurs. Vous pouvez toujours gérer la compatibilité des navigateurs ici.

Dans style.css

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 2.5rem;
  z-index: 100;
  width: 100%;
  transition: background 0.3s;
  position: fixed;
  top: 0;
  left: 0;
}

nav ul {
  display: flex;
  list-style: none;
}

nav li:not(:last-child),
.welcome-event div span {
  margin-right: 1.5rem;
}

Pour la barre de navigation, par défaut, l'arrière-plan sera transparent, et pour une meilleure utilisation, il changera lorsque l'utilisateur commencera à faire défiler.

Notre application de réservation d'événements commence à prendre forme, maintenant, commençons à implémenter Firebase et connectons notre application à Firestore.

Interagir avec Firebase

Firebase est une plateforme qui gère tout ce qui concerne le back-end pour nous, la seule chose que nous devons faire est de connecter notre application à elle et de démarrer en utilisant la base de données ou d'autres services.

Firestore) est une base de données NoSQL, elle n'est pas relationnelle et utilise des documents, des collections, etc. pour créer la base de données.

Maintenant, connectons-nous à Firestore et créons notre toute première base de données.

Récupérer les événements

Plus tôt dans ce tutoriel, nous avions déclaré une variable db dans la partie HTML. Il est temps d'utiliser cette variable pour connecter notre application à Firestore.

Je mettrai tout ce qui concerne la base de données dans le fichier db.js pour juste avoir une structure plus propre.

Dans db.js

db.collection("events").onSnapshot(snapshot => {
  // Handle the latest event
  const newestEvent = snapshot.docChanges()[0].doc.data()
  const id = snapshot.docChanges()[0].doc.id
  showLatestEvent(newestEvent, id)

  // delete the latest event element
  snapshot.docChanges().shift()

  snapshot.docChanges().forEach(event => {
    showEvents(event.doc.data(), event.doc.id)
  })
})

Avec l'aide de db, nous pouvons maintenant accéder à notre collection events. C'est juste le nom de notre base de données, et s'il n'existe pas, Firestore le créera à la volée pour nous.

L'objet de collection a une méthode très pratique appelée onSnapshot(). Il aide à écouter en temps réel la base de données, ce qui signifie que chaque fois qu'un changement survient, il réagit et nous renvoie le changement en temps réel.

La méthode onSnapshot() nous aidera également à accéder au document (nos données). Et maintenant, nous pouvons extraire le dernier événement à afficher sur l'en-tête. Et, avant de parcourir le tableau des événements, on supprime le dernier événement pour ne pas l'afficher encore une fois.

Maintenant, pour afficher les événements sur l'interface utilisateur, nous devons appeler nos fonctions nécessaires showLatestEvent() et showEvents(), puis, leur passer en paramètre l'événement à afficher et son id.

Nous pouvons maintenant récupérer les événements de Firestore, mais nous n'avons toujours pas d'événements à afficher. Il est temps de stocker notre tout premier événement dans notre base de données.

Créer un événement

Pour obtenir les valeurs entrées par l'utilisateur, nous devons d'abord sélectionner la balise form et l'utiliser pour choisir l'id de chaque entrée et extraire la valeur entrée.

Dans db.js

const addNewEvent = () => {
  const event = {
    name: form.name.value,
    attendee: form.attendee.value,
    booked: 0,
    description: form.description.value,
    status: parseInt(form.status.value, 10),
  }
  db.collection("events")
    .add(event)
    .then(() => {
      // Reset the form values
      ;(form.name.value = ""),
        (form.attendee.value = ""),
        (form.description.value = ""),
        (form.status.value = "")

      alert("Your event has been successfully saved")
    })
    .catch(err => console.log(err))
}

La variable db (rappelez-vous que c'est la référence à firebase.firestore()) a une autre méthode pour enregistrer les données dans Firestore, la fonction save(). C'est une promesse, et une fois qu'il est terminé, nous pouvons maintenant réinitialiser les valeurs du formulaire et afficher un message de réussite à l'utilisateur.

Maintenant, allons de l'avant et traitons le cas lorsque l'utilisateur souhaite réserver un événement.

Réserver un événement

Comme je l'ai dit plus tôt, nous ne pouvons pas vérifier si l'utilisateur est authentifié ou non, il peut donc potentiellement réserver un événement plus d'une fois.

Donc, pour le gérer, j'utiliserai localStorage pour éviter la duplication de réservation.

Dans db.js

let bookedEvents = []

const bookEvent = (booked, id) => {
  const getBookedEvents = localStorage.getItem("booked-events")

  if (getBookedEvents) {
    bookedEvents = JSON.parse(localStorage.getItem("booked-events"))
    if (bookedEvents.includes(id)) {
      alert("Seems like you have already booked this event")
    } else {
      saveBooking(booked, id)
    }
  } else {
    saveBooking(booked, id)
  }
}

const saveBooking = (booked, id) => {
  bookedEvents.push(id)
  localStorage.setItem("booked-events", JSON.stringify(bookedEvents))

  const data = { booked: booked + 1 }
  db.collection("events")
    .doc(id)
    .update(data)
    .then(() => alert("Event successfully booked"))
    .catch(err => console.log(err))
}

Et comme vous pouvez le voir ici, nous vérifions d'abord si l'ID d'événement est stocké ou non dans localStorage. Si c'est le cas, l'utilisateur ne peut donc pas réserver le même événement une nouvelle fois, et au cas contraire, il pourra réserver l'événement.

Et pour mettre à jour le compteur de réservation, nous utilisons à nouveau db pour mettre à jour l'événement sur Firestore.

Le fichier db.js est maintenant terminé, Passons donc à la dernière partie et connectons notre projet à db.js

Afficher et mettre à jour les données avec JavaScript

Comme d'habitude, nous commençons par sélectionner les éléments nécessaires.

const eventsContainer = document.querySelector(".events-container")
const nav = document.querySelector("nav")
const welcomeEvent = document.querySelector(".welcome-event")
const form = document.querySelector(".form")

const showEvents = (event, id) => {
  const { name, attendee, status, description, booked } = event

  const eventStatus = status === 0 ? "free" : "paid"
  const output = `
        <div class="card">
          <div class="card--details">
            <div>
              <h1>${name}</h1>
              <span>${attendee - booked} attendees</span>
            </div>
            <span class="card--details-ribbon ribbon-${eventStatus}">
                ${eventStatus}
            </span>
             <p>${description}</p>
            <button onclick="bookEvent(${booked} ,'${id}')" class="btn btn-tertiary">Book</button>
          </div>
        </div>
        `
  eventsContainer.innerHTML += output
}

Plus tôt dans cet article, nous avions passé en paramètre à la fonction showEvents() l'événement récupéré de Firestore dans le fichier db.js.

Nous pouvons maintenant extraire les valeurs contenues sur l'objet événement et l'afficher. Et, lorsque l'utilisateur clique sur le bouton pour réserver un événement, nous allons appeler la fonction bookEvent() pour le gérer.

const showLatestEvent = (latestEvent, id) => {
  const { name, attendee, status, description, booked } = latestEvent
  // Get the first event
  welcomeEvent.innerHTML = `
    <h1>${name}</h1>
    <p>${
      description.length >= 100
        ? `${description.substring(0, 100)}...`
        : description
    }</p>
    <div>
      <span>Attendees: ${attendee - booked}</span>
      <span>Status: ${status === 0 ? "free" : "paid"}</span>
     </div>
     <button onclick="bookEvent(${booked} ,'${id}')" class="btn btn-tertiary">Book</button>
    `
}

form.addEventListener("submit", e => {
  e.preventDefault()
  addNewEvent()
})

window.onscroll = () => {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    nav.style.background = "var(--tertiary-color)"
    nav.style.boxShadow = "0 10px 42px rgba(25,17,34,.1)"
  } else {
    nav.style.background = "none"
    nav.style.boxShadow = "none"
  }
}

Comme vous pouvez le voir, la méthode showLatestEvent() est assez similaire à showEvents(). A la différence de l'élément utilisé pour afficher l'événement.

Et, lorsque la description est un peu longue, nous utilisons substring() pour tronquer la valeur.

Ensuite, nous écoutons l'élément form pour gérer l'événement de soumission et le stockons dans Firestore avec addNewEvent().

Et pour que tout soit joli, lorsque l'utilisateur défile, nous ajoutons une couleur d'arrière-plan et une ombre à la barre de navigation.

Avec ce changement, nous avons maintenant notre application de réservation d'événements en utilisant JavaScript et Firebase.

Cela étant dit, merci d'avoir lu cet article.

Vous pouvez le voir en direct ici ou trouver le code source ici.

#javascript#firebase

Support my work

Buy me a coffee

Get articles in your inbox

Comment créer une application de réservation d'événements en utilisant HTML, CSS, JavaScript et Firebase?

Subscribe to receive the free weekly article