TP 4 : Développement Mobile

1ere année Master Pro GL

Création d’une liste de vidéo préférée avec Firebase

Partie 1 configuration :

Créer un projet FIRESTORE

Tout d'abord, vous devez vous rendre sur firebase.google.com et créer un compte. Ensuite,
créez un projet. Dans Firebase, vous aurez essentiellement un nouveau projet pour chaque
application que vous créez. Voici quelques instructions provenant directement de la
documentation Firebase :
1. Dans la console Firebase, cliquez sur Ajouter un projet ; puis sélectionnez ou entrez
un nom de projet.
2. (Facultatif) Modifiez l'ID du projet. Firebase attribue automatiquement un identifiant
unique àvotre projet Firebase. Une fois que Firebase a provisionné des ressources
pour votre projet Firebase, vous ne pouvez pas modifier l'ID de votre projet. Pour
utiliser un identifiant spécifique, vous devez modifier votre ID de projet lors de cette
étape de configuration.
3. Suivez les étapes de configuration restantes dans la console Firebase, puis cliquez sur
Créer Projet.
4. Firebase fournit automatiquement des ressources pour votre projet Firebase. Quand le
processus est terminé, vous serez redirigé vers la page de présentation de votre projet
Firebase dans la console Firebase.

Faite la configuration avec votre application flutter (suivre les

étapes du cours)

- faite un import des package dans votre code :

import 'package:firebase_core/firebase_core.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

- Afin de vérifier que la connexion avec Firebase est correctement établie ajoutez les
lignes suivante à votre main :
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(const MyApp());
}
 Ceci n’ajoutera rien à votre application, mais permettra de vérifier la connexion de votre
application avec Firebase .

Partie 2
Création d’une première base de donnes
Dans votre projet Firestore :
1. Ajouter une collection movies (équivalent d’une table ) :
2. Rajouter à votre collection des documents (des films) contenant deux champs (name
(nom du film), poster (lien network vers une image du poster du film) les deux sont de
type String.
Au niveau de votre projet Flutter :
(vous aller commencer le projet avec un homePage contenant un Scaffold avec une body vide
pour l’instant)
1. créer une StatefulWidget MoviesInformation , dans la classe State ajouter une
variable Steam qui vous permettra de récupérer les données de la base de données par
la suite :
class _MoviesInformationState extends State<MoviesInformation> {
final Stream<QuerySnapshot> _moviesStream =
FirebaseFirestore.instance.collection('Movies').snapshots();

2. Ajouter le code suivant au niveau de la méthode build de votre widget

Widget build(BuildContext context) {
return StreamBuilder<QuerySnapshot>(
stream: _moviesStream,
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot)
{
if (snapshot.hasError) {
return const Text('Something went wrong');
}

if (snapshot.connectionState == ConnectionState.waiting) {
return const Center(
child: Text("Loading"),
);
}

return ListView(
children: snapshot.data!.docs.map((DocumentSnapshot document) {
Map<String, dynamic> movie =
document.data()! as Map<String, dynamic>;
return ListTile(
title: Text(data['name']),
subtitle: Text(data['poster']),
);
}).toList(),
3. Ajouter le movieInformation() au body et faites le test .
4. Faite des changement au niveau des donnees sur la base et observez votre application
5. Ajouter un trailing avec une Image.network dans votre ListeTile qui prendra comme
paramètre (data[‘poster’]) , une image s’ajoutera a la fin de chaque ligne de données.