Atelier 4
Créer Une applica on Firebase
1. Connectez-vous avec votre compte google à h ps://console.fi[Link]/
2. Cliquez sur « Ajouter un projet »
3. Saisissez le nom du projet comme suit : « Atelier4 P Nom IIR5GX » où p : première le re de
votre prénom, nom : votre nom, x : votre groupe (Remarque : uniquement les le res,
chiffres, « - » , « ! » et l’espace sont autorisés dans le nom du projet et il ne doit pas dépasser
30 caractères).
4. Désac vez « Google Analy cs pour ce projet » et cliquez sur « Créer un projet ».
5. Après avoir cliqué sur « Con nuer » la page d’accueil du projet, doit s’afficher.
Configurer Firebase avec Flu er
1. Installez firebase cli (Installa on globale avec npm )
2. Ajoutez le dossier C:\Users\UserName\AppData\Roaming\npm dans la variable
d’environnement path, UserName représente le nom d’u lisateur de session Windows.
3. Exécutez firebase login à par r de la ligne de commande, il vous sera demandé de vous
connecter à votre compte google
4. Une fois connecté, vous avez la possibilité d’exécuter les commandes firebase et npm à par r
de ce e console, vous pouvez par exemple exécuter la commande firebase projects :list pour
voir les projets déjà créés
5. Installez Flu erfire_cli (Installa on globale)
Si un Warning est affiché, ajoutez le chemin suggéré dans le path.
Créer une nouvelle applica on Flu er
1. A par r de VS Code Créez une nouvelle applica on (Empty Applica on)
Nom de l’applica on (atelier4_P_Nom_iir5gx) (P : première le re de votre prénom, Nom :
votre nom, x : votre groupe).
2. Ajoutez les dépendances : firebase_core et firebase_auth
3. A par r du dossier de votre applica on (il est possible que la commande ne fonc onne pas
avec le terminal intégré dans VS Code), exécutez la commande : flu erfire configure.
4. Sélec onnez le projet que vous souhaitez u liser et tappez sur « Entree ».
5. Sélec onnez la (les) plateforme(s) à configurer par exemple Android, ios macos et web, et
tappez sur « Entree » (la sélec on désélec on se fait par la touche « Espace »).
Ce e commande a créé une applica on pour chaque plateforme dans le projet Firebase
Ini alisa on de Firebase
1. Dans la fonc on main(), ajoutez await [Link] alizeApp(…)
Les imports ajoutés sont :
Configurer l’auten fica on dans la console Firebase
1. A par r de la page d’accueil du projet Firebase, cliquez sur la carte « Authen ca on » , puis
cliquez sur « Commencer ».
2. Dans l’onglet « Sign-in method» cliquez sur l’op on « Adresse email/Mot de pass » de la
catégorie « Fournisseurs ac fs ».
3. Cochez la case « Adresse email/mot de passe », puis cliquez sur « Enregistrer ».
Configura on de la page d’authen fica on
1. Ajoutez la dépendance firebase_ui_auth
2. Ajoutez le fournisseur d’authen fica on : EmailAuthProvider dans la fonc on main().
Package importé :
LoginEcran
1. Ajoutez le widget LoginEcran (StatelessWidget) dans un fichier nommé login_ecran.dart
2. Dans la méthode build du widget retournez un StreamBuilder de type User (nullable)
3. Propriété stream : [Link](),
4. Propriété builder : (context, snapshot) => Container()
5. Dans le widget Container affichez ([Link] con ent les informa ons de l’u lisateur en
cours :
a. L’email (email)
b. Un bouton pour se déconnecter ([Link]())
6. Ajoutez le code qui affiche le formulaire de connexion au cas où l’u lisateur n’est pas
connecté.
