Institut Supérieur des Etudes Technologiques de Sousse

Département de Technologies de l’Informatique

Matière : Atelier FrameWork Côté Client Classe : DSI 2.1
A. U. : 2019/2020 – Semestre 1

Atelier 9 : Interaction avec une base de données

Firebase

Base de données avec Firebase

• Créer un compte Google ou s’authentifier si vous en avez déjà un.
• Se rendre à https://firebase.google.com .
• Accéder à la console.
• Créer un nouveau projet Firebase avec un nom de votre choix.

1
• Aller à DataBase de l’onglet Développer

2
• Créer une base de données Realtime Database

• Choisir le mode test

• Aller dans Project Overview et choisir Paramètres du projet

3
 • Ajouter une application Web </> au projet

• Une fois l’application ajoutée copier la configuration qui est donnée par
Firebase. Cette configuration sera utilisée dans le code Angular.

Intégration de Firebase à l’application Angular

• Installer Firebase avec NPM :

npm install firebase --save

• Après l’installation de Firebase, ajouter la configuration de la base de données

de Firebase dans le constructeur de votre AppComponent. Ajouter aussi
import * as firebase from 'firebase'; en haut du fichier, mettant à disposition
la méthode initializeApp()

4
Envoi de données vers le serveur
• Soit l’interface suivante :

• Lorsque l’utilisateur clique sur Ajouter User ayant rempli les deux champs Nom
et Email, le données sont envoyés vers la base de données Firebase :

• Lorsque l’utilisateur clique une autre fois sur Ajouter User ayant rempli les deux
champs Nom et Email, le données sont envoyés vers la base de données
Firebase :

5
Travail demandé 1 :

Réaliser la tâche d’envoi vers de serveur citée ci-dessus dans le composant

app.component en utilisation la documentation de Firebase :

• Accéder à la documentation

6
7
 • Suivre l’exemple :

Réception de données depuis le serveur

• Soit l’interface suivante :

• Lorsque l’utilisateur clique sur Voir User ayant rempli le Id, les données de
l’utilisateur en question s’affiche dans la console.

8
• Prévoir de faire un affichage d’erreur en cas où le Id ne correspond à aucun User

9
Travail demandé 2 :

Réaliser la tâche de réception depuis de serveur citée ci-dessus dans le composant

app.component en utilisation la documentation de Firebase :

• Suivre l’exemple de la documentation

Travail demandé 3 :

Dans notre application des films :

• Réaliser un formulaire pour ajouter un film et enregister le dans la base

de données

• En utilisant la documentation de Frirebase, changer le formulaire de

modification pour qu’il modifie dans la base de données.

• En utilisant la documentation de Frirebase, changer l’opération de

suppression pour qu’elle supprime de la base de données.

10