Création de projet avec

Firebase

AYIKPA KACOUTCHY JEAN & IRIE BI DIZAN :

Enseignant - Chercheur
 Table des
matières
Objectifs 3

I - Création d'un projet avec la SDK Firebase 4

1. Ajouter une application dans Firebase ............................................................................................................ 4

2. Intégrer firebase dans un projet web ............................................................................................................... 6

3. Initiation d'un projet Firebase avec NPM ....................................................................................................... 8

II - Exercice : Activité d'auto-évaluation 1 12

III - Création de projet avec Google Firebase CLI 13

1. Installation et configuration .......................................................................................................................... 13

2. Initialiser un projet Firebase avec la CLI de Firebase .................................................................................. 14

3. Servir et tester votre projet Firebase localement .......................................................................................... 14

4. Déployer un projet Firebase ......................................................................................................................... 15

IV - Exercice : Activité d'auto-évaluation 2 16

 Objectifs

À la fin de cette leçon, l'apprenant sera capable de :

Créer un projet avec la SDK Firebase

Créer un projet avec Google Firebase CLI

3
 Création d'un projet avec la SDK Firebase

Création d'un projet avec

la SDK Firebase I

Sous firebase, il existe plusieurs type de projets :

- Projet web
- Projet android
- Projet ios

Dans ce cours nous verrons comment créer un projet web avec la SDK Firabse JS

Pour plus d'information : https://firebase.google.com/docs/web/setup

1. Ajouter une application dans Firebase

Rappel
Avant de pouvoir ajouter Firebase à votre application web JavaScript, vous devez créer un projet dans Firebase,
c'est ce que nous venons de faire dans le chapitre précédent.

Création du projet dans firebase

- Connectez-vous à Firebase à l' aide de votre compte Google. https://console.firebase.google.com

- Créez un projet Firebase (si ce n'est pas encore fait) ou sélectionner un projet firebase que vous avez déjà
créé.

Dans un projet firebase nous pouvons ajouter plusieurs applications de type web, android ou ios.

Ajout d'une application web

- Dans l'interface d'administration de votre projet, au centre de la page de présentation du projet de la

console Firebase , cliquez sur une des 3 icônes android, ios, ou web (dans notre cas, il s'agit de l'icône
Web) pour lancer le workflow de configuration.
Si vous avez déjà ajouté une application à votre projet Firebase, cliquez sur "add app" ou "Ajouter une
application" pour ajouter une nouvelle application.

4
 Intégrer firebase dans un projet web

- Dans la fenêtre qui s'affiche saisissez le nom que vous voulez donner à votre application (ex : myApp),
puis cliquez sur le bouton register app.
Ce nom est un identifiant qui va permettre d’accéder à votre application dans firebase.

- Vous pouvez configurer Firebase Hosting maintenant ou plus tard . Vous pouvez également lier votre
Firebase Web App à un site d'hébergement à tout moment dans les paramètres de votre projet .
Si vous choisissez de configurer l'hébergement maintenant, définissez un nom d’hébergement ou
sélectionnez un site dans la liste déroulante pour créer un lien vers votre application Web Firebase.
Chaque site d'hébergement ne peut être lié qu'à une seule application Web Firebase.
- Une fois l'application enregistrée, on vous propose d'ajouter firebase SDK, elle nous propose deux
manière de l’intégrer : par script tag et par npm. Nous verrons cette partie à la suite.

Les différentes manières d'intégrer firebase dans un projet web

Mais il faut savoir qu'il existe deux grandes façons d’intégrer firebase dans un projet web :

- Par URL : elle ne nécessite pas de configuration à faire sur l'ordinateur, mais plutôt un script à référencer
par url dans le projet. Elle comprend 3 manière possibles :

- par cdn :
<script src="https://www.gstatic.com/firebasejs/8.9.1/firebase-
app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.9.1/firebase-
auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.9.1/firebase-
firestore.js"></script>
- par url hébergement :
<script src="/__/firebase/8.9.1/firebase-app.js"></script>
<script src="/__/firebase/8.9.1/firebase-auth.js"></script>
<script src="/__/firebase/8.9.1/firebase-firestore.js"></script>
- par script tag :
import { initializeApp } from "https://www.gstatic.com
/firebasejs/9.0.1/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs
/9.0.1/firebase-analytics.js";

- par NPM : elle nécessite la mise en place de l'environnement nodeJs

Remarque
La manière la plus facile d’intégrer firebase dans un projet web est par référencement url, soit par CDN, par
script tag ou url d’hébergement.

Mais si vous travaillez avec des frameworks nodejs tel que Angular, ReactJs ou Vue.js, alors l’intégration par
NPM est la mieux appropriée.

5
 Intégrer firebase dans un projet web

2. Intégrer firebase dans un projet web

Démarche d'intégration

Si vous aimeriez utiliser les services de firebase dans un projet web :

- la première chose est de créer votre projet. Puis vous référencer dans le header, le body ou en dessous
du body de la page le script firebase, ainsi que les scripts des différents services de firebase que vous
aimeriez utiliser dans votre projet.
- Ensuite, vous initialiser l'application firebase dans votre projet et vous utilisez l'objet firebase dans votre
script pour avoir accès aux services de firebase.
- L'initialisation de firebase fait intervenir la définition d'une variable de configuration qui vous permet
d'avoir accès à vos projets et applications dans Google firebase.
Syntatxe :
var firebaseConfig = {
apiKey: "API_KEY",
authDomain: "PROJECT_ID.firebaseapp.com",
databaseURL: "https://PROJECT_ID.firebaseio.com",
projectId: "PROJECT_ID",
storageBucket: "PROJECT_ID.appspot.com",
messagingSenderId: "SENDER_ID",
appId: "APP_ID",
measurementId: "G-MEASUREMENT_ID",
};
Ex :
var firebaseConfig = {
apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
authDomain: "myapp-project-123.firebaseapp.com",
databaseURL: "https://myapp-project-123.firebaseio.com",
projectId: "myapp-project-123",
storageBucket: "myapp-project-123.appspot.com",
messagingSenderId: "65211879809",
appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
measurementId: "G-8GSGZQ44ST"
};

Exemple de d'intégration

Ci-dessous un exemple d’intégration de Firebase dans un projet

1 <html>
2
3 <head>
4
5 <!-- inclure premièrement Firebase App -->
6 <script src="https://www.gstatic.com/firebasejs/5.9.4/firebase-app.js"></script>
7
8 <!-- les services additionnels à utiliser -->

6
 Initiation d'un projet Firebase avec NPM

9 <script src="https://www.gstatic.com/firebasejs/5.9.4/firebase-auth.js"></script
>
10 <script src="https://www.gstatic.com/firebasejs/5.9.4/firebase-database.js"></
script>
11 <script src="https://www.gstatic.com/firebasejs/5.9.4/firebase-firestore.js"></
script>
12 <script src="https://www.gstatic.com/firebasejs/5.9.4/firebase-messaging.js"></
script>
13
14 </head>
15
16 <body>
17
18 <button type="button" id="warehousesBTN">Ajout de données à Firestore</button>
19 <div id="status"></div>
20 <script>
21
22 var config = {
23 "apiKey": "...",
24 "databaseURL": "https://myapp.firebaseio.com",
25 "storageBucket": "myapp.appspot.com",
26 "authDomain": "myapp.firebaseapp.com",
27 "projectId": "myapp"
28 };
29 firebase.initializeApp(config);
30
31
32 function waretest() {
33 let db = firebase.firestore();
34 // Add a new document in collection "cities"
35 db.collection("cities").doc("LA").set({
36 name: "Abidjan",
37 country: "CI"
38 })
39 .
.then(function() {
40 console.log("Ajout effectué avec succès!");
41 document.getElementById('status').textContent = "Ajout effectué";
42 })
43 .
.catch(function(error) {
44 console.error("Erreur: ", error);
45 document.getElementById('status').textContent = error;
46 });
47 }
48
49 document.getElementById('warehousesBTN').addEventListener('click', waretest);
50
51 </script>
52 </body>
53 </html>

Exécution du projet

Pour exécuter le projet vous pouvez ouvrir votre page html directement dans un navigateur. Mais il est conseillé
de l’héberger en local votre projet sur un serveur http tel que lite-server, http-server ou autre. Nous verrons cet
aspect dans une autre section.

7
 Initiation d'un projet Firebase avec NPM

3. Initiation d'un projet Firebase avec NPM

Prérequis

Pour créer un projet firebase sur notre ordinateur avec NPM, il faut mettre d'abord en place l'environnement
NodeJs.

Installer Nodejs

NodeJs qui est une plateforme Javascript permettant de développer, et d'exécuter des applications JS. Pour
ceux qui ont déjà installé NodeJs sur leur machine, ils n'ont pas besoin de faire les opérations ci-dessous.

- Pour installer Node Js il faut se rendre sur le site officiel de Nodejs dans l'onglet téléchargement  :
https://nodejs.org/fr/download. En fonction de votre ordinateur, vous cliquez sur le bouton de
téléchargement approprié puis vous faites l'installation sur votre ordinateur.
- Une fois l'installation effectuée, vous ouvrez l'invite de commande (cmd) appelé aussi console ou
terminal. Puis vous vérifiez l'installation en tapant dans la console : node -v ou node --version. Vous
verrez alors s'afficher dans la console la version de nodeJs installée. Si tel n'est pas le cas c'est que
nodejs n'est pas encore installé, il faut donc refaire l'installation. Sur l'image ci-dessous, on a la version
12.13.1

- L'installation de nodejs inclut aussi l'installation d'une application appelée NPM (Node Package
Manager), le gestionnaire de package de NodeJs. C'est grâce à lui qu'on va pouvoir installer des
applications NodeJs et les lancer.
- Pour vérifier si NPM est bien installé, nous allons afficher sa version en tapant aussi dans la console :
npm -v ou npm --version. Sur l'image ci-dessous, nous avons la version 6.14.4

Pour ceux qui ne sont pas familiariser à l’environnement nodejs, vous pouvez aller suivre des tutoriels sur cette
page :

>> https://nodejs.developpez.com/cours

>> https://www.youtube.com/watch?v=0PA69L88HeI&list=PLjwdMgw5TTLV7VsXd9[https://www.youtube.com
/watch?v=0PA69L88HeI&list=PLjwdMgw5TTLV7VsXd9NOeq39soYXORezN]NOeq39soYXORezN

Installez et initiez un projet Firebase à l'aide de npm

- Pour installer firebase, créez sur votre machine un dossier qui porte le nom de votre projet (n'importe quel
nom, ex : webApp)
- Placez vous avez l'invite de commande à la racine du dossier, puis tapez la commande  : npm install
firebase

8
 Initiation d'un projet Firebase avec NPM

- Placez vous dans l'invite de commande à la racine du dossier que vous avez créé. Vous pouvez utiliser la
commande cd (suivit du répertoire de votre dossier) pour vous déplacer à la racine de votre dossier, ou
bien si vous êtes sous Windows, vous pouvez sélectionner votre dossier puis vous maintenez la touche "
Shift" enfoncée, et vous faites un clique droit sur le dossier pour faire apparaître le menu contextuel de
Windows. Puis dans le menu vous cliquez sur "Ouvrir la fenetre PoweShell ici" ou "Ouvrir l'invite de
commande ici" pour ouvrir directement l'invite de commande à la racine de votre dossier créé.
- tapez la commande "npm init" pour initier un projet nodeJs. Validez en appuyant sur la touche "Entrez" à
chaque question qu'il vous pose. Vous pouvez renseigner des réponses aux questions posées ou ne rien
renseigner. Vous pouvez tapez "npm init -y" pour valider automatiquement toutes les réponses.

- Nous allons installer firebase pour notre projet en tapant dans la console à la racine de notre projet "npm
install firebase" ou "npm install firebase --save-dev"

- Dans le dossier crée nous pouvons voir la création de nouveaux fichiers et dossier

- Créons avec notepad++ ou avec notre éditeur de code préféré (ex : visual studio code) un fichier nommé
app.js à la racine de notre projet (même endroit que package.json).
- Copiez et coller le code ci-dessous dans le fichier app.js pour initialiser Firebase dans votre application
et créez un objet Firebase App.
La constante firebaseConfig doit corresponde à la valeur dans les paramètres votre application que
vous avez créé dans la console firebase.

1 import { initializeApp } from 'firebase/app';

2
3 // TODO: Replace the following with your app's Firebase project configuration
4 const firebaseConfig = {
5 apiKey: "AIzaSyBLPEJCnBv3TE6MeMtnu75Bidheb0ykFR0",
6 authDomain: "shopapp-c4189.firebaseapp.com",
7 databaseURL: "https://shopapp-c4189-default-rtdb.europe-west1.firebasedatabase.
app",
8 projectId: "shopapp-c4189",
9 storageBucket: "shopapp-c4189.appspot.com",
10 messagingSenderId: "438740915615",
11 appId: "1:438740915615:web:f23dc1028133dc264959aa",
12 measurementId: "G-D63Z6ER318"
13 };
14
15 const app = initializeApp(firebaseConfig);

9
 Initiation d'un projet Firebase avec NPM

Intégrer Firebase Access dans votre application

- Pour intégrer les services Firebase (comme Cloud Firestore, l'authentification, la base de données en
temps réel, la configuration à distance, etc.) dans votre projet, vous pouvez les importer dans des sous-
packages individuels.

- L'exemple ci-dessous montre comment vous pouvez utiliser le SDK Cloud Firestore Lite pour récupérer
une liste de données (ici on a un liste de cities qu'on récupère dans Firestore).

1 import { initializeApp } from 'firebase/app';

2 import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
3 // Follow this pattern to import other Firebase services
4 // import { } from 'firebase/<service>';
5
6 // TODO: Replace the following with your app's Firebase project configuration
7 const firebaseConfig = {
8 apiKey: "AIzaSyBLPEJCnBv3TE6MeMtnu75Bidheb0ykFR0",
9 authDomain: "shopapp-c4189.firebaseapp.com",
10 databaseURL: "https://shopapp-c4189-default-rtdb.europe-west1.firebasedatabase.
app",
11 projectId: "shopapp-c4189",
12 storageBucket: "shopapp-c4189.appspot.com",
13 messagingSenderId: "438740915615",
14 appId: "1:438740915615:web:f23dc1028133dc264959aa",
15 measurementId: "G-D63Z6ER318"
16 };
17
18 const app = initializeApp(firebaseConfig);
19 const db = getFirestore(app);
20
21 // Get a list of cities from your database
22 async function getCities(db) {
23 const citiesCol = collection(db, 'cities');
24 const citySnapshot = await getDocs(citiesCol);
25 const cityList = citySnapshot.docs.map(doc => doc.data());
26 return cityList;
27 }

Import des services de Firebase

- Pour utiliser un service de firebase dans votre projet, il faut d'abord l'importer dans le projet. La syntaxe
est : import { element } from 'module';

Ex :

- import { getFirestore } from 'firebase/firestore/lite';

- Par CDN, on a :
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.
0.1/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.
0.1/firebase-analytics.js";

1 import { initializeApp } from 'firebase/app';

2 import { getAuth, onAuthStateChanged } from "firebase/auth";
3 const firebaseConfig = {
4 apiKey: "AIzaSyBLPEJCnBv3TE6MeMtnu75Bidheb0ykFR0",

10
 Initiation d'un projet Firebase avec NPM

5 authDomain: "shopapp-c4189.firebaseapp.com",
6 databaseURL: "https://shopapp-c4189-default-rtdb.europe-west1.firebasedatabase.
app",
7 projectId: "shopapp-c4189",
8 storageBucket: "shopapp-c4189.appspot.com",
9 messagingSenderId: "438740915615",
10 appId: "1:438740915615:web:f23dc1028133dc264959aa",
11 measurementId: "G-D63Z6ER318"
12 };
13
14 const app = initializeApp(firebaseConfig);
15 const auth = getAuth(firebaseApp);
16 onAuthStateChanged(auth, user => {
17 // Check for user status
18 });

Conseil
Pour travailler aisément avec firebase (création de projet, utilisation des services firebase, build et exécution du
projet) en environnement nodeJs, nous vous conseillons d'utiliser un framework front NodeJs tel que Angular,
ReactJs, VueJs, etc.

Ce cours ne traite pas de cette partie.

11
 Exercice : Activité d'auto-évaluation 1

Exercice : Activité d'auto-

évaluation 1 II

Exercice : Les types de projet avec firebase

Les types de projet avec firebase sont :

 projet ios

 projet microservice

 projet Windows phone

 Projet web

 Projet android

 Projet desktop

Exercice : Les différentes manières d'intégrer firebase dans un projet web

On peut intégrer Firebase dans un projet web par :

 svn

 cdn

 git

 API REST

 script tag

12
 Création de projet avec Google Firebase CLI

Création de projet avec

Google Firebase CLI III

La CLI Firebase offre une variété d'outils pour la création, la gestion, la visualisation et le déploiement des
projets Firebase de façon aisée.

Dans cette section nous allons apprendre à créer de déployer des projets firebase avec.

1. Installation et configuration
Installer la CLI Firebase

- Pour installer la CLI (Commande LIne) de FireBase, il faut d'abord installer l'environnement NodeJs, c'est
ce que nous avons fait dans le chapitre précédent.
- Puis dans l'invite de commande ou la console de votre ordinateur, tapez : npm install -g firebase-tools
- Une fois l'installation terminée, vous tapez firebase --version pour voir le numéro de versionde firebase
cli installé (S'il y a erreur, c'est que votre installation est mal faite).

Connectez-vous et testez la CLI Firebase

Après avoir installé la CLI, vous devez vous authentifier. Ensuite, vous pouvez confirmer l'authentification en
répertoriant vos projets Firebase.

Connectez-vous à Firebase à l'aide de votre compte Google en exécutant la commande suivante : firebase login

Afficher la liste de votre projets

Une fois connecté dans la console de votre ordinateur à au serveur Firebase, vous pouvez afficher la liste de vos
projets créés dans Google firebase en tapant : firebase projects:list

13
 Initialiser un projet Firebase avec la CLI de Firebase

2. Initialiser un projet Firebase avec la CLI de Firebase

- Créez sur votre machine un dossier pour la création du projet (ex : Firebase App)
- Placez vous avec l'invite de commande à la racine du dossier
- Initialisez un projet Firebase en tapant : firebase init, puis repondez aux différentes questions qui sont
posées.

- Choisissez les modules que vous voulez intégrer dans votre projet à l'aide de la touche espace, puis valider
en appuyant sur "Entrée"

- Choisissez l'option "use an existing project" puis sélectionnez le nom de votre projet créé dans la
console web Firebase de votre navigateur et validez.
- Validez les différentes questions qui vous sont posées.
- La structure du projet créé ressemble à ceci :

- Lien utile : https://firebase.google.com/docs/cli#install-cli-windows

3. Servir et tester votre projet Firebase localement

Vous pouvez afficher et tester votre projet Firebase sur des URL hébergées localement avant de le déployer en
production. Si vous ne souhaitez que tester des fonctionnalités de sélection, vous pouvez utiliser une liste
séparée par des virgules dans un drapeau sur la firebase serve commande.

Exécutez la commande suivante à partir de la racine de votre répertoire de projet local si vous souhaitez
effectuer l'une des tâches suivantes :

- Affichez le contenu statique de votre application hébergée par Firebase.

- Utiliser des fonctions Cloud pour générer du contenu dynamique pour Firebase Hébergement et que vous
voulez utiliser votre production (déploiement) fonctions HTTP pour émuler l' hébergement sur une
URL locale.

Commande à exécuter : firebase serve --only hosting

- On a le message hosting: Local server: http://localhost:5000 qui s'affiche dans la console. Vous pouvez
donc accéder à votre application dans le navigateur à l'adresse : http://localhost:5000

- Vous pouvez arrêter le serveur en tapant CTRL + C

14
 Déployer un projet Firebase

Emuler votre projet en utilisant les fonctions HTTP locales

Exécutez l' une des commandes suivantes à partir de votre répertoire de projet pour émuler votre projet en
utilisant les fonctions HTTP locales.

- Pour émuler les fonctions HTTP et l'hébergement à des fins de test sur des URL locales, utilisez l'une des
commandes suivantes :

- firebase serve
- ou bien firebase serve --only functions, hosting

- Pour émuler uniquement les fonctions HTTP, utilisez la commande suivante : firebase serve --
only functions

4. Déployer un projet Firebase

La CLI Firebase gère le déploiement du code et des actifs dans votre projet Firebase, notamment :

- Nouvelles versions de vos sites d'hébergement Firebase

- Fonctions Cloud nouvelles, mises à jour ou existantes pour Firebase
- Règles pour la base de données en temps réel Firebase
- Règles pour Cloud Storage pour Firebase
- Règles pour Cloud Firestore
- Index pour Cloud Firestore

Pour déployer sur un projet Firebase, exécutez la commande suivante à partir du répertoire de votre projet :
firebase deploy

Déployer des services Firebase spécifiques : firebase deploy --only hosting,storage

Exemple de deploiement

- Déployons notre projet en tapant : firebase deploy --only hosting

- On a dans la console :

- Le hosting url est : https://shopapp-c4189.web.app . On peut donc acceder sur internet à

notre projet en tapant dans le navigateur l'adresse : https://shopapp-c4189.web.app

15
 Exercice : Activité d'auto-évaluation 2

Exercice : Activité d'auto-

évaluation 2 IV

Exercice : Les possibilités de la CLI Firebase

La CLI Firebase offre une variété d'outils pour :

 le déploiement des projets

 la visualisation des projets

 la mise en place des APIs

 L'auto-test des projets

 la dynamisation des projets

 la création des projets

Exercice : Émuler en local un projet Firebase

Pour émuler sur un serveur http en local un projet Firebase, on tape la commande :

 http-server -f

 firebase serve

 fire serve

 firebase http-serve

16