Debuter avec Firebase

Débuter avec Firebase : Tutoriel Approfondi pour Les Développeurs Novices

Pourquoi Firebase ?

Firebase est une plateforme de développement rapide qui permet aux développeurs d'ajouter des fonctionnalités en temps réel, des analyses et des bases de données à leurs applications web et mobiles. Il offre une solution complète pour le développement full stack, offrant une facilité accrue dans la création et la maintenance des applications.

Un cas d'utilisation concret : Firebase permet aux développeurs de créer rapidement une application de chat en temps réel où les messages sont instantanément partagés entre les utilisateurs. En utilisant Firestore (la base de données NoSQL), Realtime Database, Authentification et Hosting, il est possible de construire cette fonctionnalité avec des délais de développement réduits.

Prerequis

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

• Connaissances :

  • Connaissance de base du JavaScript
  • Familiarité avec les concepts de développement web (HTML, CSS)

• Outils à installer :

  • Node.js v14 ou plus tard
  • npm (Node Package Manager)
  • Un éditeur de code (Visual Studio Code recommandé)
  • Firebase CLI (Command Line Interface) : Installez-le en exécutant la commande suivante dans votre terminal

npm install -g firebase-tools

Concepts fondamentaux

1. Firebase Project

Firebase est organisé autour de projets. Chaque projet contient toutes les ressources nécessaires à une application.

Code :

// Initialiser un nouveau Firebase project
firebase.initializeApp({
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID"
});

2. Firestore

Firestore est une base de données NoSQL qui offre des opérations en temps réel et des performances élevées.

Code :

// Ajouter un document à Firestore
const db = firebase.firestore();
db.collection("users").add({
    first: "Ada",
    last: "Lovelace",
    born: 1815
}).then((docRef) => {
    console.log("Document written with ID: ", docRef.id);
}).catch((error) => {
    console.error("Error adding document: ", error);
});

3. Authentication (Auth)

Firebase Auth permet de gérer l'authentification des utilisateurs en fournissant plusieurs méthodes, comme les identifiants d'email et mot de passe, Google, Facebook, etc.

Code :

// Connexion avec un compte existant
firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    console.log("Utilisateur connecté :", user);
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    console.error("Erreur d'authentification : ", errorMessage);
  });

4. Hosting

Firebase Hosting permet de déployer et héberger des applications web statiques directement sur Firebase.

Code :

## Initialiser le déploiement Firebase Hosting
firebase init hosting

## Déployer l'application
firebase deploy --only hosting

Mise en pratique : Projet fil rouge - Gestionnaire de tâches

Dans cette partie, nous allons construire un simple gestionnaire de tâches en utilisant Firebase.

Étape 1 : Initialiser le projet Firebase

## Créer un nouveau projet Firebase
firebase init

## Sélectionner Hosting et Firestore

Étape 2 : Structure du projet

Voici la structure de base de notre projet :

my-task-manager/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── index.js
│   ├── taskManager.js
│   └── ...
├── .gitignore
├── package.json
└── firebase.json

Étape 3 : Configurer Firebase

Initialisez Firebase dans src/index.js :

// src/index.js
import firebase from 'firebase/app';
import 'firebase/firestore';

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID"
};

firebase.initializeApp(firebaseConfig);

const db = firebase.firestore();
export { db };

Étape 4 : Ajouter des tâches

Créez un fichier taskManager.js pour gérer les opérations de Firestore :

// src/taskManager.js
import { db } from './index';

export async function addTask(task) {
  try {
    await db.collection('tasks').add({
      task,
      completed: false,
      timestamp: firebase.firestore.FieldValue.serverTimestamp()
    });
  } catch (error) {
    console.error("Erreur lors de l'ajout d'une tâche : ", error);
  }
}

export async function getTasks() {
  try {
    const querySnapshot = await db.collection('tasks').get();
    return querySnapshot.docs.map(doc => ({
      id: doc.id,
      ...doc.data()
    }));
  } catch (error) {
    console.error("Erreur lors de la récupération des tâches : ", error);
  }
}

Étape 5 : Afficher les tâches

Modifiez index.js pour afficher les tâches :

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { getTasks, addTask } from './taskManager';

function TaskList() {
  const [tasks, setTasks] = React.useState([]);

  React.useEffect(() => {
    async function fetchTasks() {
      const tasks = await getTasks();
      setTasks(tasks);
    }
    fetchTasks();
  }, []);

  return (
    <div>
      <h1>Gestionnaire de tâches</h1>
      <ul>
        {tasks.map(task => (
          <li key={task.id}>{task.task} - {task.completed ? 'Terminée' : 'En cours'}</li>
        ))}
      </ul>
      <input type="text" id="newTask" placeholder="Nouvelle tâche" />
      <button onClick={() => {
        const task = document.getElementById('newTask').value;
        if (task) {
          addTask(task);
          document.getElementById('newTask').value = '';
        }
      }}>Ajouter</button>
    </div>
  );
}

ReactDOM.render(<TaskList />, document.getElementById('root'));

Étape 6 : Déployer l'application

## Compiler le code React (si nécessaire)
npm run build

## Déployer sur Firebase Hosting
firebase deploy --only hosting

Erreurs fréquentes et debugging

1. Erreur d'authentification

Code incorrect :

firebase.auth().signInWithEmailAndPassword(email, password);

Code correct :

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    var user = userCredential.user;
    console.log("Utilisateur connecté :", user);
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    console.error("Erreur d'authentification : ", errorMessage);
  });

2. Erreur d'accès à Firestore

Code incorrect :

db.collection('tasks').get();

Code correct :

import { db } from './index';

async function getTasks() {
  try {
    const querySnapshot = await db.collection('tasks').get();
    return querySnapshot.docs.map(doc => ({
      id: doc.id,
      ...doc.data()
    }));
  } catch (error) {
    console.error("Erreur lors de la récupération des tâches : ", error);
  }
}

3. Erreur de déploiement

Code incorrect :

firebase deploy --only hosting

Code correct :

## Assurez-vous que les fichiers sont correctement compilés et placés dans le dossier public
npm run build
firebase deploy --only hosting

Pour aller plus loin

1. Authentification avec Google : Ajoutez l'authentification avec Google pour permettre aux utilisateurs de s'inscrire en utilisant leurs comptes Google.
2. Notifications push : Utilisez Firebase Cloud Messaging pour envoyer des notifications push à vos utilisateurs.
3. Intégration avec Google Maps : Ajoutez une carte à votre application pour afficher les emplacements des tâches.

Défi pratique

Créez une petite application de todo list qui permet aux utilisateurs de créer, lire, mettre à jour et supprimer des tâches en utilisant Firebase. Assurez-vous d'ajouter une authentification simple (email/password) pour protéger les données des utilisateurs.