Guide simple pour installer Firebase sur une app Flutter

Première étape : Changez votre bundle.id et le nom de votre application

Lorsque vous allez connecter votre application Flutter à votre base de données Firebase, il va vous être demandé de renseigner votre bundle.id. C’est cet « url » qui va en quelque sorte faire office de signature pour votre application. Par exemple, il vous sera aussi demandé lorsque vous allez publier votre application sur Android ou IOS.

Lorsque vous créez votre dossier d’application, un bundle.id est généré par défaut et aura la forme suivante : com.example.nom_du_fichier. Vous pouvez le laissez comme cela si vous le souhaitez, mais il reste préférable de la personnaliser. généralement, celui-ci va prendre cette forme : com.nom_de_votre_app.app. Par exemple si votre app s’appelle App Flutter, votre bundle.id sera : com.app_flutter.app.

Je vous recommande très fortement de faire cette étape AVANT de connecter votre application Flutter à Firebase. En effet, même s’il est possible de rebrancher par la suite la base de données avec un nouveau bundle.id, cela reste plus simple de mettre directement le bon nom.

Pour cela, vous pouvez utiliser le package rename qui vous permet de changer votre bundle.id, partout dans votre fichier Flutter, en une seule fois. Voici les étapes à suivre :

1. Installez le package sur votre application ;

2. Dans le terminal, utilisez ensuite cette commande :

dart pub global activate rename

3. Puis :

export PATH="$PATH":"$HOME/.pub-cache/bin"

Cette commande vous permettra d’utiliser la commande rename, dans votre console Visual Studio. Si vous passez cette étape, il est possible que vous vous retrouviez avec un message d’erreur au moment de lire ou changer votre bundle.

Le package est bien installé, vous pouvez maintenant utiliser les commandes suivantes dans le terminal :

Avoir le nom de l’application :

rename getAppName --targets ios,android,macos,windows,linux

Renommer l’application :

rename setAppName --targets ios,android,macos,windows,linux --value "YourAppName"

Avoir le package/bundleId :

rename getBundleId --targets ios,android,macos,windows,linux

Changer le package/bundleId :

rename setBundleId --targets ios,android,macos,windows,linux --value "com.mon_app.app"

Si vous souhaitez changer le bundle.id uniquement pour une plateforme, gardez uniquement celle-ci et retirez les autres. Par exemple pour le changer uniquement sur ios, rename setBundleId –targets ios, –value

Guide pour Installer Firebase à la main

Pour installer Firebase à la main sur votre application Flutter, commencez par vous rendre sur le site de Firebase. Cliquez sur « Get Started, » puis “Ajoutez un projet”. Indiquez le nom que vous voulez donner à votre projet, puis à la page suivante, décochez “Activer Google Analytics”.

GA4 vous permet de mesurer tout ce qui se passe sur votre application (nombre d’utilisateurs, cliques sur un bouton, etc). Cependant, vous n’en aurez pas besoin tant que votre application ne sera pas publiée. Autant donc en restez aux fondamentaux pour ce guide et le décocher pour le moment. Vous pourrez toujours l’installer plus tard, ne vous inquiétez pas.

Votre projet Firebase est désormais créé, ne reste plus qu’à le connecter à votre application, pour pouvoir envoyer des données et les récupérer.

Installation Firebase/Flutter IOS

Voici les étapes à suivre pour intégrer votre base de données Firebase à votre application, pour IOS :

Dans le Finder, rendez-vous dans le dossier de votre application, allez dans le sous dossier ios puis cliquez sur le fichier nommé Runner.xcodeproj ;
Une fois Xcode ouvert, cliquez sur Runner en haut à gauche. Une boite de dialogue s’ouvre alors avec un champ Bundle Identifier (dans General<Identity), qu’il faut copier-coller. Assurez-vous que cela soit bien l’id de votre application, sinon changez le ;
Retournez sur votre projet dans Firebase et là où il y a marqué “Ajoutez une application” cliquez sur IOS ;
Copiez votre Bundle Identifier dans le premier champ, donner le nom de votre application dans le deuxième. L’ID de l’App store n’a pas besoin d’être ajouté tant que l’appli n’a pas été publiée dessus ;
Une fois l’application enregistrée, un fichier info.plist va être généré, qui va pouvoir être ajouté dans le Finder. Celui-ci doit être placé dans le sous-dossier ios>Runner (PAS DANS RUNNERTEST) ;
Pour s’assurer que le fichier est bien détecté, retournez sur xCode depuis votre dossier d’application et assurez-vous qu’il se trouve bien dans Runner. S’il ne s’y trouve pas, il suffit de faire un drag&drop pour le rajouter ;
Enfin, pour que Firebase fonctionne, assurez-vous d’avoir la dernière version de cocoapods and lançant “brew install cocoapods” dans le terminal de commande de visual studio. Vous devrez aussi ajouter les packages firebase_core, firebase_auth et cloud_firestore à votre application, pour pouvoir utiliser les fonctions de Firebase.

Installation Firebase/Flutter sur Android

Voici les étapes à suivre pour intégrer votre base de données Firebase à votre application Android.

1. Sur la page d’accueil de votre projet Firebase, cliquez sur le bouton Android (au niveau de “ajouter une application”) ;

2. Rendez-vous sur le dossier de votre application depuis Visual Studio et allez dans le dossier android>app>build.gradle pour avoir votre applicationId (il doit se trouver dans defaultConfig{}) ;

3. Vous pouvez également ajouter les certificats de signature SHA-1 et SHA-2 dès maintenant, même si on ne vous les demandera qu’au moment de publier votre application ;

4. Une fois toutes les informations ajoutées, téléchargez le fichier info.plist qui est généré. Placez-le dans votre application, dans Visual Studio en suivant ce chemin : android>app ;

5. Dans Visual Studio, retournez dans android>app>src et aller sur build.gradle pour changer la valeur de ndkVersion à « 26.1.10909125 » et celle de minSdkVersion à 23 (Cela permet d’éviter certaines erreur au moment de lancer l’application).

7. Ajoutez la ligne de code apply ‘com.google.gms.google-services’ tout en bas de votre fichier. C’est cette ligne qui va permettre de lire le fichier de config Firebase. Pensez aussi à enregistrer vos modifications si vous n’avez pas activé la sauvegarge automatique avec Visual Studio ;

8. Revenez en arrière, dans le fichier android et ouvrez le second fichier build.gradle qui se trouve dans celui-ci. Ajouter les lignes de code classpath 'com.google.gms:google-services:4.4.2' et classpath 'com.google.firebase:firebase-crashlytics-gradle:3.0.2' dans la partie dependencies** (Exemple ci-dessous).

buildscript {
 repositories {
 // ...
 }
 dependencies {
 // ...
 classpath 'com.google.gms:google-services:4.4.2'
 classpath 'com.google.firebase:firebase-crashlytics-gradle:3.0.2' 
 }
}

Si vous ne faites pas cette étape, une erreur devrait apparaitre dans Android studio lorsque vous allez lancer l’application ;

9. Une fois cela fait, ouvrez votre application dans Android studio et laissez les packages charger. Si une update vous est proposée, il est aussi conseillé de l’installer. Parfois, plusieurs updates sont à faire et vous devrez alors fermez et rouvrir Android studio jusqu’à ce que plus aucune mise à jour ne vous soit proposée ;

10. Enfin, cliquez sur le petit éléphant en haut à droite dans la barre de menu, pour tester la connexion à Firebase. Si tout se déroule bien, c’est que vous avez correctement installé Firebase sur votre projet Flutter ;

11. La dernière étape va être d’ajouter les packages firebase_core, firebase_auth et cloud_firestore à votre application, pour pouvoir utiliser les fonctions de Firebase.

Guide pour installer Firebase avec la CLI

La seconde méthode pour installer Firebase sur Flutter est de le faire grâce à un package.

Tout d’abord, rendez-vous sur le site de Firebase, cliquez sur Get Started, puis “ajoutez un projet”. Indiquez le nom que vous voulez donner à votre projet, puis à la page suivante, décochez “Activer Google Analytics”.

Une fois cela fait, vous allez devoir installer :

La Command-Line interface (CLI) Firebase ;
La Command-Line interface (CLI) Flutterfire.

Installer la CLI Firebase

Pour installer la CLI Firebase (Command-Line interface) commencez par entrer cette commande dans le terminal de Visual Studio :

curl -sL https://firebase.tools | bash

Ensuite, connectez-vous à Firebase avec votre compte Google, en lançant :

firebase login

Tapez Y pour qu’une page d’authentification s’ouvre et que vous puissiez vous connecter à votre compte Google.

Une fois authentifié, lancez la commande :

firebase projects:list

Celle-ci permet de vérifier que la CLI est bien installée et a accès à vos projets. Une liste doit s’afficher, dans laquelle apparaissent vos projets Firebase (Pas vos applications, mais les projets que vous avez créés dans Firebase).

Installer la CLI FlutterFire

Pour installer la CLI Flutter, voici les étapes à suivre :

1. Depuis Visual Studio entrez la commande :

dart pub global activate flutterfire_cli

2. Il faudra aussi peut-être aussi entrer la commande :

export PATH="$PATH":"$HOME/.pub-cache/bin"

3. Enfin, pour s’assurer encore une fois que que la cli a été installée, lancez la commande :

flutterfire --help

Si vous avez correctement installé la cli, un menu d’aide devrait alors s’afficher

Connecter Firebase à votre application Flutter

Il est possible à FlutterFire de générer le code Dart nécessaire pour utiliser Firebase dans son application Flutter en lançant la commande :

flutterfire configure

On est ensuite invité à choisir le projet Firebase qui nous intéresse, ainsi que les plateformes sur lesquels on souhaite l’installer (Android, IOS, Mac ou Web).

Une fois les plateformes choisies, les dossiers d’installation se créent et Firebase peut alors communiquer avec votre application. Il ne reste alors plus qu’à ajouter les packages dont vous avez besoin pour utiliser Firebase avec Flutter. La plupart du temps cela va être :

flutter pub add firebase_core
flutter pub add firebase_auth
flutter pub add firebase_ui_auth
Parfois il faudra aussi ajouter flutter pub add cloud_firestore

Gérer certains messages d’erreur

En lançant mon projet après avoir suivi toutes ces manips, je me suis retrouvé un message d’erreur

ERROR:D8: Cannot fit requested classes in a single dex file (# methods: 65717 > 65536)com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives:The number of method references in a .dex file cannot exceed 64K.

La manière de régler ce problème est d’aller dans le fichier build.gradle et de faire les changements suivants : Remplacer minSdkVersion flutter.minSdkVersion par minSdkVersion 23 et juste en dessous, ajouter la ligne -> multiDexEnabled true
Vous pouvez aussi remplacer la valeur de ndkVersion par « 26.1.10909125 ».

FAILURE: Build failed with an exception. * What went wrong:Execution failed for task ':app:mapDebugSourceSetPaths'.> Error while evaluating property 'extraGeneratedResDir' of task ':app:mapDebugSourceSetPaths' > Failed to calculate the value of task ':app:mapDebugSourceSetPaths' property 'extraGeneratedResDir'. > Querying the mapped value of provider(java.util.Set) before task ':app:processDebugGoogleServices' has completed is not supported

Si cette erreur apparait, il suffit de retirer la ligne apply plugin: ‘com.google.gms.google-services’ dans le fichier build.gradle (si vous l’aviez ajoutée).

PlatformException (PlatformException(null-error, Host platform returned null value for non-null return value., null, null))

Je ne suis pas du tout sûr de la solution, mais je crois que j’ai réussi à le régler en changeant :

void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
}
runApp(MyApp());

par

void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(MyApp());

(il faut ajouter le “options”, avec la plateforme par defaut)

Trouver le SHA-1 et SHA-2 pour Android

Pour trouver le SHA-1 et le SHA-2 qui sont nécessaires pour enregistrer votre application Android, voici la marche à suivre :

1. Dans le Terminal de Visual Studio, allez dans le fichier Android avec la commande :

cd android

2. Puis entrez :

gradlew signingReport

3. Si le terminal renvoit un message d’erreur zsh: command not found: gradlew , écrivez à la place :

./gradlew signingReport

S’il y a récemment eu une mise à jour d’Android studio, il est possible que le gradle ne soit plus compatible avec la dernière version de Java. Un message d’erreur va alors apparaitre :

Execution failed for task ':gradle:compileGroovy'.
> BUG! exception in phase 'semantic analysis' in source unit '/Users/xxxxx/development/flutter/packages/flutter_tools/gradle/src/main/groovy/app_plugin_loader.groovy' Unsupported class file major version 64

Dans ce cas, ouvrez le dossier Android de votre application dans android studio et regardez si une MAJ du gradle est proposée. Si c’est le cas, mettez le à jour dans sa toute dernière version, lancez flutter run dans Visual Studio, puis refaite les étapes décrites au début.

Si la même erreur continue d’apparaître, c’est peut être qu’une autre mise à jour est encore disponible. Dans ce cas, fermez Android Studio, puis rouvrez le. Si c’est bien le cas, la nouvelle mise à jour du Gradle devrait vous être proposée.

Sinon, cela veut dire que vous devez changer le gradle manuellement dans Visual Studio, dans vos dossiers :

android>gradle/wrapper>gradle-wrapper.properties
android>build.gradle

Conclusion

Maintenant que vous avez installé Firebase sur votre application Flutter, vous allez pouvoir commencer à stocker des données et les réutiliser dans votre application. Je vous montre comment faire dans mon prochain tuto.

Comment créer sa base de données Firebase pour Flutter ? →