A Quoi sert Firebase: Une app de Chat pas à pas avec Flutter

vous devez avoir aussi lu certains des postes suivant sur flutter :

Creation pas à pas d’une application mobile avec le framework Flutter : une calculette simple en flutter

Developper les app Mobile flutter : Comprendre son ecosysteme à travers Quiz Codeur

Gestion des états (State Management ) en Flutter avec Bloc/Cubit et les Repository Pattern

Pas à Pas avec Flutter à travers la construction d'une app : Les Recettes de cuisine

A la decouverte pas à pas des Widgets de Flutter

Qu'est ce que Firebase? pourquoi est il aussi important pour les app non seulement mobile mais aussi web? allons y à sa découverte.

De nos jours, les applications constituent plutot des plateformes ou ensemble convivent et communiquent plusieurs app differentes d'un coté les app frontend (mobile, web, desktop etc..) et d'un autre coté les app backend. Le cour de la app le plus souvent se trouve du coté du backend, en quelque sorte sans backend, une plateforme logiciel  ne serait rien, le backend c'est là ou il y a la logique metier ce qu'on appelle Buisness Logic en anglais, donc en principe de nos jours, sans backend, pas de plateforme et donc pas de frontend, si vous avez une app qui doit gerer les utilisateurs, fournir des services etc.. il vous faut un point centrale ou puiser ces resources et c'est du coté du backend qu'on doit implementer cette logique et le frontend n'est que la partie visuelle ou on le presente à l'utilisateur, donc les applications Mobiles, desktop, ou web sont en fait les parties visibles d'un ecosystem plus grand et plus vaste ou le backend gere les choses et commande en maitre absolu.Dans la plupart des cas, les dev débutent leur avventure de coding par le frontend rarement par le backend car generalement en backend, il n'y a pas d'interface graphique, donc on a rien à faire voir directement à ses amis qui ne maitrisent rien du coding pour leur blueffé un peu, mais aussi l'apprentissage des technologies en backend n'est pas à la portée de tous et n'est pas immediat et il faut assez de passion et du temps pour machiner certains concepts vitaux et comme l'ecosytem depend du backend, est ce qu'on ne peut pas avoir un raccourcit qui permet de faire sa plateforme logiciel sans se soucier du backend?

La réponse est oui, il y a des plateformes cloud qui proposent ce qu'on appelle BAAS = Backend as Service et google Firebase est justement une solution cloud qui propose la BAAS, donc en tant que dev, si vous voulez ne pas casser votre tete pour mettre sous pied votre propre system de backend, alors Firebase peut etre fait pour vous, car il dispose de nombreux services qui permet de pouvoir construire une app de A-Z sans se soucier de la logique metier qu'on aurait du developper soit meme en backend, il propose la gestion de vos données sous forme de NoSQL (Json) à travers Firebase realtime database et firestore, donc si vous voulez stocker les data de votre app, ce service de firebase vous permet de le faire de manière efficace, la comunication entre votre app et firebase etant du JSON, alors ce json est du coup en un clique votre NoSQL, il contient d'autres services comme la gestions de l'authentication des utilisateurs, donc plus besoin de vous casser la tete pour faire votre propre base de données des utilisateurs, de gerer le login par google, facebook, twitter, linkeind, github etc... vous faites tout cela dans firebase à travers votre app, il a des services de notifications (FCM) pour envoyer les messages aux utilisateurs de votre app, bref il y a une panoplie de service qu'il faut explorer en allant dans la console de firebase.

Pour utiliser les api de Firebase, il faut avoir un compte developpeur google et generalement si vous avez un compte gmail, alors vous avez automatiquement un compte firebase meme si vous ne l'utilisez pas du tout. Firebase n'a pas que des avantages, mais aussi des inconvenients, s'en passé du backend custom/personalisé cela signique que vous devez dependre du bon vouloir de firebase et il serait difficile de mettre sur pied une logique qui va outre les restrictions de firebase, plus on a son propre system backend, plus on a enormement de grade de liberté, secondo, firebase n'est pas gratuit, les 90% des offres de facebook ont des versions gratuits quand les services que vous utilisez depasse une certaine limite du coup beaucoup de app fonctionne avec firebase avec le free plan sans probleme, mais quand vous depassez les limites requis, vous devez souscrire à un plan payant comem tout ce qui se passe dans le cloud.

Nous allons construire une application de chat appellé CodeurChat en utilisant Firebase et Flutter comme cela nous aurons definitivement notre petite idèe sur son utilisation, tout ce qu'on va faire dans les lignes suivantes vont vous aidez à comprendre beaucoup de code que vous rencontrez sur github et meme dans notre application QuizCodeur et vous pouvez mettre un system de messagerie dans vos propres app comme le font presque tous les app de nos jours en utilisant firebase et la technique qu'on va faire ensemble dans les lignes suivantes:

Pour aller droit au but, j'ai mit sur mon compte github ici, un projet de depart (starter project) qu'on doit utiliser pour ce tutoriel, telechargez le et ouvrez le avec android studio ou VSC e lancez l'application dans votre telephone en connectant votre telephone à votre machine/android studio ou VSC comme dans les autres posts ci haut pour le developpement de flutter, les procedures sont les memes, la app de depart nous donne ceci:

1)Image app here--

Pour travailler avec firebase, accedez à firebase console avec votre account developpeur(votre compte gmail) ici par ici https://console.firebase.google.com.

creez un projet comme en image(rouge) vous remarquez que moi dans mon compte firebase j'ai plusieurs projets.

Mon projet s'appelle CodeurChat (attention on peut appeller son projet comme on veut, je me le meme nom de projet comme mon app juste par coherence)

 

Dans la page qui suit accepter toutes les options jusquarriver ou firebase console vous creez votre projet, il n'y a rien à payer et pas de contrainte.

Une fois le projet mis sous pied, dans le menu "creation" puis successivement sur firestore creons notre base de donnée NoSql qui contiendra les messages de notre chat:

Choisissez la deuxième option qui est celle de creer une base de donnèes de test

Vous devez choisir une region ou sera localisé votre base de données NoSql (il s'agit ici d'un offre cloud qui justement est repartit dans les datacenter de part le globe terrestre donc dans ce cas il faut choisir la region ou la plupart des utilisateurs ou du moins les utilisateurs de votre app reside ici moi je choisit un datacenter dans  europe de l'ouest )

Eh voilà on a crée notre base de données NoSql sur firebase avec Firestore qui va contenire nos messages

Ajoutons android à present dans notre projet, pour cela rendez vous dans  dans parametrage projet (dans le menu en haut de firebase dans l'immage suivante en italien vous avez une idee, italien parceque automatiquement mon navigateur est italien chez vous ça sera le franòais, l'anglais etc..)

 

 

 

Juste en bas de cette page, cliqué sur l'icone de android pour associer un nouveau projet android dans votre projet firebase(on peut associer un ou plusieurs projets android, web, ios etc.. dans le meme projet firebase)

la page qui s'ouvre vous demande le nom complet du package de la app android (chaque application sur google play dispose de nom de package unique et deux applications sur playstore ne peuvent pas avoir le meme nom de package) pour la app de la chat codeurchat, si vous avez pris du compte github, ça se trouve ici en image dans le projet:

vous obtenez ceci dans firebase:

 

enregistrer la app android et pour faire simple aller en avant dans les autres pages jusqu'à ce que vous revenez sur la console de firebase comme ici en image:

il ne vous reste qu'à telecharger le json en 2 dans l'image pour l'associer au projet android de votre projet flutter, telecharger le et metter ce fichier json qui contient les parametres donc votre app android aura besoin pour interagir avec firebase et mettez le dans le repertoire Android/app de votre projet android

Maintenant comme nous devons utiliser Firebase, il nous faut un plugin, pour cela rendez vous dans "android/build.gradle" et ajoutez la ligne suivante dans les dependances de votre build.grade qui sert d'automatisation pour la compilation de la app android

classpath 'com.google.gms:google-services:4.3.10'

 

Dans "Android/app/build.gradle"

Voilà, notre projet est maintenant pret à supporter flutter et son Firestore pour nos message en NoSql(json), nous devons utiliser la bibliothèque FlutterFire mis à disposition des developpeurs par google pour manipuler firestore directement dans nos app android, vous l'avez compris, il nous faut des packages qu'on doit mettre dans pubspec.yaml et refaire un pub get pour les telecharger d'internet des repository officiel de google. allez donc dans pubspec.yaml et ajouter les dependances suivantes:

firebase_core: ^1.6.0
cloud_firestore: ^2.5.3

Un peu de code à present: de quoi sera fait notre message? du moins de quel champs avions nous besoin?

creez un repertoire "data" dans le repertoire lib (rappellez vous que dans tout projet flutter, le code dart va toujours dans le sous repertoire lib du projet)et dans le dossier data, creer un fichier "message.dart" et ajouter le code suivant:

https://gist.github.com/Defcoq/1f2c6f8dc3de50892888a6236f68e615

 ce code est hyper simple à comprendre, c'est juste une classe que nous avons crée pour representer les messages de notre chat, nous sommes quand meme dans la POO(programmation à objet) et du coup mieux vaut avoir une classe pour representer nos objets qu'on va lire de Firebase ou ecrire dans notre database NoSql de firebase, nous avons dans la classe deux methodes static (factory) qui nous permettent la première (Message.fromJson(Map<dynamic, dynamic> json)) de transformer un document firebase en un objet Message qui represente le model de notre message dans notre code dart, puis l'autre methode (Message.fromSnapshot(DocumentSnapshot snapshot)) qui fait la chose inverse, à savoir lire un objet dart contenant notre message et le transforme un document NoSql de firebase. On utilise ici la structure de donnée Map de dart car le json comme vous le savez est un dictionnaire de type clé/valeur donc la map qui est une structure clé/valeur est la structure adequoite pour transformer notre json venat de firebase et le serialisé c'est à dire le convertir en notre objet message, c'est la tout l'avantage de la programmation à objet.

On va un peu faire pro, organiser notre code de manière a respecter tous les bienfait de la OOP/POO et de ce qu'on appelle SOLID principle fouiller dans mes pages j'ai longuement parlé de la necessitè de bien structuré son code en respectant le principe solid qui nous permet d'organiser très très bien notre code autour des concept que nous propose la OOP, pour cela dans le meme repertoire data, crée un fichier "message_dao.dart" avec le code suivant:

https://gist.github.com/Defcoq/56d7db089ed1ac82f456384362dd6799

c'est aussi une autre classe dart, donc le but est de nous permettre de manipuler(ecrire et lire) les messages dans firebase comem une boite noir du point de vue du code qui l'appellera, c'est ça la beauté de la OOP, justement DAO(Data Access Object) c'est un pattern, c'est à dire une methodologie ou mieux un design pattern qui permet d'encapsuler toute la logique d'accès aux données dans votre projet dans une et une seule classe et quand il est question quelque part dans votre app à acceder aux données, alors vous faite recourt à un objet de cette classe, saveMessage(Message message) nous sert à ecrire un message dans Firebase, et Stream<QuerySnapshot> getMessageStream() nous permet de recuperer toute la collection des messages dans firebase.

Nous allons utiliser Provider pour la gestion des etats, j'ai parlé du concepts des états dans presque tous mes posts de flutter et meme de Provider et Bloc dans ce post ci, ajoutons donc provider à pubspec.yaml comme package et refaisons pub get comme on a fait avec les autres package ci dessus:

provider: ^6.0.0

Ouvrons à present le fichier main.dart et importons provider, firebase et notre classe mesage avec le code suivant (vous devez mettre ce bout de code en haut la ou il y a tous les import je penses que vous l'aurez devinez.):

import 'package:firebase_core/firebase_core.dart';
import 'package:provider/provider.dart';
import '../data/message_dao.dart';

Modifier votre fichier main.dart de manière qu'il puisse etre comme dans le listing suivant:

https://gist.github.com/Defcoq/57208ffa8e245ce77ffd7e40b513d1bc

la première chose à faire quand on travaille avec firebase c'est de l'instancié ou mieux de l'initialisé et on le fait dès le lancement de la app, c'est la raison d'etre de ce bout de code dans notre fonction principale main comme dans l'image suivante:

Nous utilisons un MultiProvider qui av nous permettre de recuper des instances de notre objet DAO par provider, Provider est ainsi le seul point centrale pour gerer les etats de notre app.

Moidifier egalement le fichier "ui/message_list.dart" pour qu'il ressemble à ceci:

https://gist.github.com/Defcoq/43f09025177e0056dcabadfccc410133

Si nous compilons et lançons la app à présent et essayons de creer un message, automatiquement on le trouvera dans notre  base de donnèes NoSql De Firebase comme dans l'image suivante, le code est simple et l'envois du message se fait dans la methode privée (_sendMessage(MessageDao messageDao)) ou on envois effectivement nos data sur firebase en utilisant notre abstraction avec l'objet DAO, dans Flutter et dart, tout ce qui commence par underscore (caractère _) est privé et non public (rappellez vous de l'encapsulation en POO). dans l'image je reçoit ce que j'ai tappé ("bonjpoy") de ma app android dans la chat sur mon Firestore

maintenant nous allons affiché de manière reactive le message que nous venons d'envoyer sur firebase, nous allons à cet effet utilisé la methode la classe StreamBuilder de flutter pour afficher pour le faire car la methode getMessageStream() de notre MessageDAO retourne un Stream(un fluxtout ce qui est flux/stream dans flutter est reactif), dans le fichier "message_list.dart" cherchez l'endroit ou c'est ecrit "// TODO: Add _buildListItem" et remplacer le par le code suivant:

https://gist.github.com/Defcoq/f2de7256ed7bb4d34ac535529ae8dab4

vous devez ajouter les imports suivant dans ce meme fichier pour corriger es erreurs:

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

Remplacez à présent ou c'est écrit "// TODO: Add _buildList:" par le code suivant:

https://gist.github.com/Defcoq/195fdca76133b5b26fb7b10b1c9ad756

Ce code tout simplement nous permet de construire une listview qui contient la liste de messages lu à partir de firebase, chaue message lu de la collection de firebase est utilisé pour construire un objet de type "MessageWidget" en utilisant la methode precedente pour creer un widget de la liste, le code de depart de ce tutoriel contenait deja cette classe dans l'optique de se foclaiser uniquement de firebase qui est l'objet de ce tutoriel, dans els autres tutoriels sur ce blog, on a largement parlé des widgets de flutter parmis lesquels les Listview et leur fonctionnement.

A present remplacer la ou c'est ecrit "// TODO: Replace _getMessageList" par le snippet de code suivant:

https://gist.github.com/Defcoq/894a04ab90485da7f18a81a7e35c71f3

on utilise en fait un StreamBuilder pour rendre notre list reactive, ceci veut dire que chaque fois que la collection de Firebase va changé, immediatement notre liste sera mis à jour sans que l'utilisateur ne fasse une action quelquonque, c'est ça la programmation reactive, qui reagit quand il y a un flux de nouveau donnée et notre application reagit à cette reaction pour se mettre automatiquement à jour, voyez le un peu de cette manière. Cherchez et remplacer "// TODO: Add Message DAO to _getMessageList" per le code suivant:

_getMessageList(messageDao),

relancez l'application maintenant et vous verrez vos listes de messages inserrés sur firebase et si vous inserrez de nouveaux messages tout sera affiché de manière instantanée et si vous etes nombreux à le faire à partir de plusieurs telefones et chacun ecrit son message, chaque app affichera tous les messages ecrit par chacun des acteurs.

Nous allons à présent ajouter une couche d'authentification à notre chat pour permettre seulement aux utilisateurs enregistrés dans notre chat à pouvoir utiliser la app, pour cela firebase dispose d'un service pret à l'utilisation, retourner dans votre projet sous firebase console et dans le menu creation, cliquer sur Authentification puis sur initié comme dans l'image suivante:

dans la page suivante chosissez l'option email/pawword, vous remarquez là que firebase dispose d'une panoplie de methode d'authentification (facebook, google twitter meme par sms avec le system OTP (OnTime Password)) donc on a presque tous les moyens pour authetifier les utilisateurs, les enregistrer sur notre plateforme sans mettre sur pied nous meme tout un system de login.

vous devez l'activer biensure c'est evident

eh voilà on est maintenant pret à ecrire du code pour mettre sur pieds un system d'enregistrement et de login en utilisant ce service de firebase.

Eliminons la collection de firestore(notre database NoSql) qui jusque la contenait nos messages dans firebase,  dans les trois barres verticales(trois points) à droite dans Firestore cliquer sur eliminer (pour eliminer vous devz mettre le nom de la collection)

Allez à present dans l'onglet "Regle"(regole en image), puis modifier les règles du document de firestore des collections de manière que ça contienne le code en image(Firebase donne la possiblité de mettre des controles sur nos collections json/NoSql que l'on crée dans Firestore, ces controles sont appellés "rule" en anglais et permettent de donner la visibilité de la collection ou des élement de la collection en fonction de certaines conditions comme dans notre cas, nous imposons que la collection est visible et accessible en ecriture et en lecture seulement aux utilisateurs enregistrés et identifier juste par cette petite ligne : allow read, write: if request.auth != null;):

L'authentification avec Firebase necessite d'une bibliothèque dediée, pour cela dans votre fichier pubspec.yaml inserrez la dependance de ce package puis n'oubliez pas de faire un pub get comme toujours.

firebase_auth: ^3.1.1

Creons une classe pour gerer nos utilisateurs, bref une classe qui va contenir les metadonnées ou mieux les champs de nos utilisateurs, creer un fichier "user_dao.dart" dans le repertaoire data avec le code suivant:

https://gist.github.com/Defcoq/ba89aca00ab7b917aac3213d199c7440

Ce code nous permet de gerer de manière complete notre utilisateur, on parle du CRUD dans le jargon du coding, les points saillants sont les suivants: cette classe herite (on est en OOP) de la classe "ChangeNotifier" de flutter qui nous permet de notifier les autres parties de la app quand l'utilisateur fait un login/logout. Pour enregistrer un utilisateur, on utilise la methode "void signup(String email, String password)", si vous reguardez bien en ligne 5, on a recuperer une instance de  "final auth = FirebaseAuth.instance;" qui va nous permettre d'accdere au CRUD pour la gestion des utilisateurs par firebase du coup on l'utilise dans cette methode signup pour creer un utilisateur, la fonction "void login(String email, String password)" est analogue et est utilisé pour identifier un utilisateur en utilisant la meme instance qi nous fournit deja des methodes pour l'authentification, le code est assez explicif et parle de lui meme.On a dans la meme lancée, une methode pour le logout au cas ou l'utilisateur veut quitter la app.

Creons à présent l'interface utilisateur pour l'enregistrement et le login, pour cela dans le dossier UI, créez un fichier "login.dart" avec le code suivant:

https://gist.github.com/Defcoq/ee352981a16cf2c47e1d8fa030e13537

Le code est simple, en fait on utilise juste l'objet DAO créer precedement pour l'abiner à notre interface gratuit et appelle les differentes methodes qu'on a exposé pour faire les operations necessaires pour l'enregistrement et pour le login

dans le fichier main cherchez ou c'est écrit : "// TODO: Add ChangeNotifierProvider<UserDao>" et remplacez le par le code suivant:

ChangeNotifierProvider<UserDao>(
  lazy: false,
  create: (_) => UserDao(),
),

vous devez importer le fichier user_dao precedement fait pour corriger l'erreur d'ailleur android studio vous fait des suggestions et le fait tout seul. dans le meme fichier remplacer la ou c'est ecrit "// TODO: Add Consumer<UserDao>" par le clode suivant:

  home: Consumer<UserDao>(
// 2
        builder: (context, userDao, child) {
// 3
          if (userDao.isLoggedIn()) {
            return const MessageList();
          } else {
            return const Login();
          }
        },
      ),

Eh voilà relancer l'application et enregistrer un utilisateur en remplissant les champs et en cliquant sur signup..comme en image:

 et si vous allez maintenant dans firebase vous allez voir l'utilisateur enregistré

Nous allons maintenant affiché l'utilisateur authentifié dans la app une fois qu'il a effctué le login,  pour cela Retournez dans "message_list.dart" remplacez la ou c'est ecrit "// TODO: Add Email String" par la ligne suivante:

String? email;

et la ligne ou il y a "// TODO: Add UserDao :" par le code suivant (vous devez importer les fichiers dart correspondantes android studio vous le fait en vous faisant des suggestions):

final userDao = Provider.of<UserDao>(context, listen: false);
email = userDao.email();

Dans _sendMessage, remplacez la ou c'est ecrit "// TODO: add email" par le code suivant et relancez la app, vous verrez que pour chaque message inserré, on affiche l'email de l'utilisateur qui a ecrit la chat en bas:

email: email,

Ajoutons un bouton de logout dans la app, toujours dans "message_list.dart" remplacez la ou c'est écrit " TODO: Replace with actions" avec le code suivant: 

actions: [
IconButton(
onPressed: () {
userDao.logout();
},
icon: const Icon(Icons.logout),
),
],

Relancez l'application et hop , vous pouvez à present faire un logout et retourner à la page de login c'est à dire sortir de la app.

Le code source complet se trouve dans le meme repos git du projet de depart de ce tutoriel mais dans une autre branche appellé codeurChat-dev donc il suffit de switcher sur cette branche pour le cloner

Commentez, posez des questions, partagez et aurevoir pour le prochain topic sur flutter.

 

 

---

---

Share

Comments (0)

Leave A Comment

Your Name:
Comment: