Le dynamisme derrière l'intégration de Firebase dans vos projets Web - Édition JavaScript

Par sebrahim, 18 février, 2024
Image retirée.

Bonjour chers lecteurs et lectrices,

La semaine dernière, je vous ai parlé de la versatilité de Firebase lorsqu'un utilisateur souhaite créer un compte, ainsi que de la facilité avec laquelle un développeur peut intégrer un module d'authentification dans son projet grâce aux outils et aux bibliothèques disponibles tels que FirebaseUI ou le SDK. Pour approfondir davantage sur la plateforme Firebase et en tenant compte de l'évolution rapide des technologies web, la question à laquelle je vais tenter de répondre dans l'article de cette semaine est: Comment ajouter Firebase à votre projet JavaScript?

Image retirée.

Début du guide d'intégration:

Étape 1 : Créez un projet Firebase et enregistrez votre application.

Avant de pouvoir ajouter Firebase à votre application JavaScript, vous devez créer un projet Firebase et enregistrer votre application auprès de ce projet. Lorsque vous enregistrez votre application auprès de Firebase, vous allez obtenir un objet de configuration Firebase que vous utiliserez pour connecter votre application aux ressources de votre projet Firebase.

Image retirée.
  • Nommez votre projet.
Image retirée.
  • Choisissez entre Activer ou désactiver Google Analytics pour votre projet.
    Image retirée.
  • Cliquez sur Créer un projet 
    Image retirée.

    Aussitôt que vous créez votre projet, Firebase provisionne automatiquement les ressources pour votre projet Firebase. Une fois le processus terminé, vous serez redirigé vers la page de présentation de votre projet Firebase dans la console Firebase.

  •  Cliquez sur l'icône Web pour lancer le flux de travail.

    Image retirée.

  • Enregistrez votre application 
Image retirée.

 

Rendu à la dernière étape de la création de votre projet sur Firebase, vous allez voir comment ajouter ainsi qu'initialiser le SDK dans les instructions qui suivront. Cela dit, afin d'utiliser les commandes npm (Node Package Manager) dans la prochaine étape, vous aurez besoin d'installer Node.js 


Étape 2 : Installez le SDK et initialisez Firebase

  • Installez Firebase à l'aide de npm :

    npm install firebase

  • Initialisez Firebase dans votre application et créez un objet Firebase App :

    import { initializeApp } from 'firebase/app';

    //TODO: Remplacez ce qui suit avec la configuration Firebase de votre application Firebase project configuration
    const firebaseConfig = {
      //...
    };

    const app = initializeApp(firebaseConfig);
     

    À noter: une application Firebase est un objet de type conteneur qui stocke la configuration commune et partage l'authentification entre les services Firebase. Après avoir initialisé un objet Firebase App dans votre code, vous pouvez ajouter et commencer à utiliser les services Firebase.

Étape 3 : Accédez à Firebase dans votre application

Les services Firebase tels que Cloud Firestore, Authentification, Base de données en temps réel et configuration à distance peuvent être importés dans des sous-packages individuels.

L'exemple ci-dessous montre comment utiliser le SDK Cloud Firestore Lite pour récupérer une liste de données.

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Poursuivez les étapes
// import { } from 'firebase/<service>';

// TODO: Remplacez ce qui suit avec la configuration Firebase de votre application Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Get a list of cities from your database
async function getCities(db) {
  const citiesCol = collection(db, 'cities');
  const citySnapshot = await getDocs(citiesCol);
  const cityList = citySnapshot.docs.map(doc => doc.data());
  return cityList;
}
 

D'autant plus, vous pouvez commencer à ajouter et à utiliser les services Firebase suivants dans votre application Web. D'ailleurs, les commandes ci-dessous servent à importer les bibliothèques Firebase installées localement avec npm (Node package manager).

Liste des commandes:

Pour conclure, nous avons vu à travers l'article de cette semaine le guide d'intégration complet de Firebase. De plus, nous avons parlé des services Firebase disponibles qui peuvent être ajoutés à vos applications Web avec le Node package manger. Je vous remercie chers lecteurs et lectrices pour votre attention et n'hésitez pas à me laisser vos avis en commentaire.

À la semaine prochaine sur mon blogue.

Références:

Étiquettes

Commentaires