Feu de données
Éducation
## Chapitre 1 – Aperçu de la plateforme Firebase
### Page 1 – Présentation de la console Firebase et d'une application Web « Hello Firebase »
---
#### Objectifs d’apprentissage
À la fin de cette page, le lecteur sera capable de:
1. Localiser et naviguer dans la **console Firebase**.
2. Définir les blocs de construction fondamentaux d’un projet Firebase (Projet, Application, Authentification, Realtime Database, Cloud Firestore, Hosting, Cloud Functions).
3. Créer une application web minimale qui se connecte à un projet Firebase nouvellement créé et affiche un message simple récupéré depuis la **Realtime Database** de la console.
4. Identifier les pièges courants auxquels les développeurs novices sont confrontés lors de l’initialisation d’une application Firebase.
5. Anticiper les prochains sujets du chapitre, qui approfondiront la compréhension de chaque service et montreront comment ils interopèrent.
---
#### 1. La console Firebase – Votre hub de développement
La **console Firebase** (https://console.firebase.google.com) est un tableau de bord web qui regroupe tous les services Firebase sous une même interface visuelle. Elle suit un modèle centré sur le projet :
- **Projet** – Le conteneur de niveau supérieur qui regroupe toutes les ressources (instances de bases de données, fournisseurs d’authentification, sites d’hébergement, etc.).
- **Application** – Une représentation d’une plateforme cliente spécifique (iOS, Android, Web) qui vit à l’intérieur d’un projet. Chaque application reçoit un **objet de configuration Firebase** unique (clé API, ID du projet, etc.).
- **Services** – Des fonctionnalités telles que Authentification, Realtime Database, Firestore, Hosting et Functions sont activées au niveau du Projet et peuvent être accédées par toute Application au sein de ce Projet.
> **Aide visuelle** – Imaginez l’écran d’accueil de la console comme un panneau de contrôle avec des tuiles intitulées *Authentication*, *Realtime Database*, *Firestore*, *Hosting*, *Functions* et *Analytics*. Cliquer sur une tuile développe un panneau affichant les détails de configuration, les statistiques d’utilisation et des guides de démarrage rapide.
**Point de contrôle 1** – Ouvrez la console, cliquez sur *Add project* et saisissez le nom **"hello‑firebase‑demo"**. Notez l’ID du projet ; il apparaîtra plus tard dans l’extrait de configuration.
---
#### 2. Concepts clés en un clin d’œil
| Concept | Objectif | Cas d’utilisation typique |
|---------|----------|----------------------------|
| **Authentication** | Gérer les utilisateurs et sécuriser les ressources | Connexion email/mot de passe, OAuth Google |
| **Realtime Database** | Stockage d’arbre JSON à faible latence | Chat en direct, édition collaborative |
| **Cloud Firestore** | Stockage de documents structuré et interrogeable | Catalogues e‑commerce, analyses |
| **Hosting** | Déploiement de sites web statiques avec CDN | Pages d’atterrissage, applications monopage |
| **Cloud Functions** | Logique backend serverless déclenchée par des événements | Redimensionnement d’images, traitement de paiements |
Ces services sont faiblement couplés ; un projet unique peut utiliser n’importe quelle combinaison. L’exemple **Hello Firebase** n’utilisera que deux services (Hosting et Realtime Database) afin de garder la courbe d’apprentissage douce.
---
#### 3. Exemple pratique – Construire une application Web « Hello Firebase »
L’objectif est de servir une page HTML statique depuis Firebase Hosting qui lit une salutation depuis la Realtime Database et l’affiche.
**Étape 1 – Activer Realtime Database**
1. Dans la console, sélectionnez la tuile *Realtime Database*.
2. Cliquez sur **Create Database** → *Start in Test Mode* (autorise la lecture/écriture publique pour ce tutoriel).
3. Dans l’onglet *Data*, ajoutez un nœud:
```json
{
"greeting": "Hello, Firebase!"
}
```
La console affiche l’URL de la Realtime Database (par ex. `https://<PROJECT_ID>.firebaseio.com`). Firestore est accédé via le SDK et n’a pas d’URL directe affichée dans la console.
**Étape 2 – Installer le Firebase CLI**
```bash
npm install -g firebase-tools # Node.js must be installed
firebase login # Authenticate with the Google account
```
**Étape 3 – Initialiser un projet local**
```bash
mkdir hello-firebase && cd hello-firebase
firebase init hosting # Choose the project created above
```
Lorsque l’on vous le demande, acceptez le répertoire public par défaut (`public`) et configurez‑le comme une **application monopage** – une application web qui charge une seule page HTML et met à jour dynamiquement le contenu sans rechargement complet.
**Étape 4 – Ajouter le HTML et le JavaScript**
Créez `public/index.html` avec le contenu suivant :
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hello Firebase</title>
<script src="https://www.gstatic.com/firebasejs/9.x.x/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.x.x/firebase-database-compat.js"></script>
</head>
<body>
<h1 id="msg">Loading…</h1>
<script>
// 1️⃣ Firebase configuration – copy from console > Project settings > General > Your apps
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "hello-firebase-demo.firebaseapp.com",
databaseURL: "https://hello-firebase-demo.firebaseio.com",
projectId: "hello-firebase-demo",
storageBucket: "hello-firebase-demo.appspot.com",
messagingSenderId: "YOUR_SENDER_ID",
appId: "YOUR_APP_ID"
};
// 2️⃣ Initialize Firebase
firebase.initializeApp(firebaseConfig);
// 3️⃣ Reference the "greeting" node and display it
const dbRef = firebase.database().ref('greeting');
dbRef.once('value')
.then(snapshot => {
document.getElementById('msg').textContent = snapshot.val();
})
.catch(err => {
console.error('Error fetching greeting:', err);
document.getElementById('msg').textContent = 'Failed to load greeting.';
});
</script>
</body>
</html>
```
Les valeurs de substitution (`YOUR_API_KEY`, etc.) doivent être remplacées par les clés réelles affichées dans la section **Web app** de la console.
**Étape 5 – Déployer sur Firebase Hosting**
```bash
firebase deploy
```
Après un bref téléchargement, le CLI affiche une URL publique comme `https://hello-firebase-demo.web.app`. Ouvrir cette URL dans un navigateur doit afficher **"Hello, Firebase!"** récupéré directement depuis la base de données.
---
#### 4. Erreurs courantes & conseils
| Erreur | Pourquoi cela se produit | Solution |
|----------|--------------------------|----------|
| **Utiliser la mauvaise URL de base de données** | La console montre deux URL (Realtime vs. Firestore). | Assurez‑vous que `databaseURL` pointe vers le point d’accès Realtime Database (`*.firebaseio.com`). |
| **Laisser le mode Test activé en production** | Le mode Test accorde un accès en lecture/écriture ouvert. | Passez en *Locked Mode* et définissez des règles de sécurité avant de lancer publiquement. |
| **Oublier de remplacer les clés API factices** | Le squelette inclut des chaînes génériques. | Copiez les valeurs exactes depuis *Project settings → General → Your apps*. |
| **Déployer depuis le mauvais répertoire** | Le CLI utilise par défaut `public/`. | Vérifiez que `index.html` se trouve dans le dossier public sélectionné. |
**Conseil** – Exécutez `firebase emulators:start` (ou `firebase emulators:start --only hosting`) localement avant de déployer ; cela fournit le rechargement à chaud et un environnement d’émulation complet.
---
#### 5. Résumé
- La console Firebase centralise tous les services sous un **projet**.
- Les services de base (Authentication, Realtime Database, Firestore, Hosting, Functions) peuvent être combinés librement.
- Une application minimale **Hello Firebase** montre le flux complet : créer un projet, activer un service, écrire une configuration côté client, et déployer via le CLI.
- Maîtriser ce squelette prépare l’apprenant à des explorations plus approfondies des flux d’authentification, de la sécurité des données et des fonctions serverless qui seront abordées dans les pages suivantes.
---
#### 6. Questions de révision
1. Quelles sont les deux entités hiérarchiques dans Firebase (Projet → Application) et comment les services s’y rapportent ?
2. Décrivez l’objectif du **Test Mode** versus le **Locked Mode** dans les règles de sécurité de Realtime Database, en expliquant pourquoi le Test Mode est dangereux en production (tout le monde connaissant l’URL de la base de données peut lire ou écrire des données).
3. Décrivez les étapes nécessaires pour récupérer une valeur depuis Realtime Database dans un client web.
4. Pourquoi est‑il important de remplacer les valeurs factices de la clé API par celles générées pour le projet ?
---
#### 7. Lectures complémentaires
- *Documentation Firebase – Démarrer avec la console* (firebase.google.com/docs/console)
- *Référence du Firebase CLI* (firebase.google.com/docs/cli)
- *Règles de sécurité Realtime Database* (firebase.google.com/docs/database/security)
---
*Après avoir construit une application fonctionnelle « Hello Firebase », le lecteur est maintenant prêt à aller plus loin. Les pages suivantes exploreront chaque service Firebase en profondeur — stratégies d’authentification, données structurées avec Cloud Firestore, logique serverless avec Cloud Functions et surveillance des performances—culminant dans la dernière page de ce chapitre, qui synthétise les capacités de la plateforme en une architecture cohérente, prête pour la production.*
---
#### Exercice pratique
Modifiez l’application pour lire un second nœud nommé `author` depuis la base de données et l’afficher sous la salutation.