Connecter une application Flutter à Firebase
l'environnement de développement est présenté avec flutter Doctor comme suit :
Imane-SERDANI:~ mac$ flutter doctor --version
Flutter 2.10.0-1.0.pre.118 • channel master •
https://github.com/flutter/flutter.git
Framework • revision d290763941 (1 year, 1 month ago) • 2022-01-11 18:20:14
-0800
Engine • revision 643b2787f4
Tools • Dart 2.16.0 (build 2.16.0-159.0.dev) • DevTools 2.9.2
Création de l'application
Imane-SERDANI:~ mac$ flutter create fastcoif
Creating project fastcoif...
Running "flutter pub get" in fastcoif... 1 788ms
Wrote 81 files.
All done!
In order to run your application, type:
$ cd fastcoif
$ flutter run
Your application code is in fastcoif/lib/main.dart.
Imane-SERDANI:~ Mac$
CONNEXION À FIREBASE WEB-SERVIS
Pour ce-là on suit les étapes une par une :
1/ ouvrez le lien https://console.firebase.google.com/ puis basculez vers la console (capture ci-dessous)
se connecter à un compte existant ou avec Google par exemple ou s'inscrire avec un nouveau compte
2/ Créer un nouveau projet :
3/ nommer le projet
4/ désactiver Google analytics : (TQ vous n'avez pas besoin bien sur)
5/ créer un projet :
6/ Votre nouveau projet est prêt ==> Continuer :
7/ Interface du projet : nous allons commencer la configuration des deux types d'app IOS et Android
8/ On commence par la configuration d'Android:
Entrer le paquageName ==> ou se trouve :
Dans votre projet fastcoif - Android - app - build.gradle -
puis dans la ligne de code 46 :
applicationId "com.ImaneSERDANI.fastcoif"
On colle ça dans le nomdu piquage comme suit :
puis télécharger le fichier google-services.json et le mettre dans fastcoif-android-app
retournant à la page Firebase on click suivant pour entamer l'ajout des dépendances
Depuis le fichier prposé par Firebase on copie juste la ligne de code suivante :
classpath 'com.google.gms:google-services:4.3.15'
On l'inserre dans les dependences du fichier fastcoif - android - build.gradle
Ensuite on copie la ligne :
id 'com.google.gms.google-services'
dan le app level : fastcoif - android - app - build.gradle (en fin de fichier après dependences {}
apply plugin: 'com.google.gms.google-services'
En retournant à fIREBASE suivant - retourner à la console puis on accède à Authentification - sign-in méthod puis activer l'authentification avec le mail/password comme suit :
Commencer :
Puis RealTimeDataBase : on suit les étapes suivantes :
Create Database
Activer le mode teste
Suivant : et c'est tout bon
Puis Storage : commencer :
choisissez l'emplacement :
Et puis c'est tout bon
On va maintenant ajouter Le plugin de Firebase à flutter comme suit :
depuis le Sté connu : https://pub.dev
en premier on cherche le plugin Firebase core puis installing et on copie la version :
et on la colle dans pubspec.yaml firebase_core: ^0.5.0+1
puis on cherche aussi FirebaseAuth et Firebase Database et on les colle juste en dessous la dépendance de Firebase Core
On execute Flutter pub get pour importer les plugin ajouté
flutter pub get
Running "flutter pub get" in fastcoif... 4,0s
Et c'est tout bon, parfait et c'est terminé avec la configuration android :)
9/ Configuration de l'application IOS :
Acceder à fastcoif - IOS -runner ==> ouvrir dans Finder - ouvrir ruiner.xcodeproject mettre à jours le BuildIdentifier à com.ImaneSERDANI.fastcoif
Puis dans Firebase on accède à notre projet fastcoif-app - paramètres puis bouton à droite Ajouter une application comme suit :
Mettre à jours l'Id du Bundle Apple puis enregistrer l'application :
Télécharger le fichier google-services.plist fournie par firebase et le placer dans le dossier ios
Ouvrir le fichier runner comme tout à l'heure avec Xcode puis glisser déposer le fichier google-services.plist au même niveau du runner juste en dessous comme suit :
Retournant à Firebase faire suivant suivant sans aucune modification jusqu'à la fin Accéder à la console et tout est Prêt nous pouvons à ce point là lancer l'exécution de l'application pour voir si y'a pas d'erreurs si c'est le cas parfait et félicitations votre application est désormait connectée à Firebase.
Execution de l'application :
1/ Sur Android : Lancer AndroidStudio - Configurer - AVD Manager - Lancer le simulateur;
Dans le terminal lancer Flutter run.
2/ Avec IOS-simulator Sélectionner le simulateur et le lancer puis executer Flutter run comme suit :
Imane-SERDANI:fastcoif mac$ flutter run
Launching lib/main.dart on iPhone SE (2nd generation) in debug mode...
Running pod install... 13,8s
Running Xcode build...
└─Compiling, linking and signing... 26,3s
Xcode build done. 474,7s
Syncing files to device iPhone SE (2nd generation)... 1 262ms
Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
💪 Running with sound null safety 💪
An Observatory debugger and profiler on iPhone SE (2nd generation) is available at:
http://127.0.0.1:50148/JXRIQ20M6Go=/
The Flutter DevTools debugger and profiler on iPhone SE (2nd generation) is available at:
http://127.0.0.1:9102?uri=http://127.0.0.1:50148/JXRIQ20M6Go=/
Commentaires
Enregistrer un commentaire