FlutterFlow Firebase, ou encore Flutter Firebase, un combo que l’on retrouve dans la plupart des applications. Alors, pourquoi retrouvons-nous autant ce setup ? Quel est le rôle de chacun de ces deux outils ? Comment configurer FlutterFlow avec Firebase et quelles sont les erreurs à éviter ? Je vais vous parler de tous ces sujets dans cet article !
Introduction à FlutterFlow et Firebase
C’est quoi FlutterFlow ?
FlutterFlow est une plateforme de développement d’applications qui utilise une interface de drag and drop (glisser-déposer) pour permettre aux développeurs de créer des applications mobiles sans avoir à écrire de code. Il offre une grande variété de widgets et de composants préfabriqués qui peuvent être utilisés pour construire des applications de toutes sortes. De plus, FlutterFlow offre une intégration Firebase, permettant aux développeurs de tirer parti des puissants outils de cette plateforme.
C’est quoi Firebase ?
Firebase est un SDK créé par Google qui regroupe plusieurs outils Google Cloud pour le développement d’applications. Tu peux imaginer Firebase comme une boîte à outils spécialement conçue pour les développeurs d’applications mobiles et web. Firebase te donne tout ce dont tu as besoin pour construire, améliorer et faire grandir ton application web ou mobile.
Quelques exemples des outils :
- Firestore database
- Storage
- Authentification Firebase
- Hosting
- Cloud function
- Notifications push
Pourquoi FlutterFlow et Firebase sont un combo redoutable pour ton application ?
FlutterFlow est un outil no-code / low code créé par d’anciens salariés de Google et qui permet de générer du code Flutter (outil développé par Google) qui fonctionne donc très bien avec Firebase (aussi développé par Google).
Historiquement, Firebase est nativement intégré dans FlutterFlow. Même si tu peux utiliser d’autres back-ends comme Supabase ou Xano.
FlutterFlow: le moteur créatif
FlutterFlow va te permettre de construire visuellement tes applications Flutter magnifiques. Tu vas pouvoir créer des interfaces ultra rapidement en no-code grâce à l’interface.
- Rapidité de développement : Avec FlutterFlow, tu crées des écrans, alignes des widgets et ajoutes des fonctionnalités par glisser-déposer. C’est comme assembler un Lego, mais pour les applications mobiles. Cela rend le processus de création d’applications incroyablement rapide et intuitif.
- Pas besoin d’être un expert en code : Même si tu n’es pas un maître du Dart (le langage derrière Flutter), tu peux toujours concevoir une application fonctionnelle et esthétiquement plaisante. FlutterFlow s’occupe de générer le code pour toi.
Firebase: la gestion du backend (le moteur)
Ensuite, il y a Firebase, le moteur sous le capot qui alimente ton application avec une variété de services backend sans que tu aies besoin de construire ces systèmes toi-même.
- Authentification facile : Comme on l’a dit, Firebase Auth permet de mettre en place rapidement un système d’authentification puissant pour gérer tes utilisateurs.
- Stockage et base de données en temps réel : Firebase offre des solutions de stockage de données qui sont à la fois puissantes et flexibles, te permettant de stocker et de synchroniser les données de tes utilisateurs en temps réel, parfait pour une expérience utilisateur fluide et réactive.
- Notifications push et bien plus : Pour garder tes utilisateurs engagés, les notifications push de Firebase sont indispensables.
Les outils Firebase
Le SDK Firebase offre une multitude d’outils Google Cloud et permet de développer et gérer son application web ou mobile selon 3 grandes catégories.
Créer ton application
C’est la catégorie que tu vas le plus utiliser dans le développement de ton application FlutterFlow.
Les outils built :
- Cloud Firestore (indispensable) : C’est un endroit où tu peux garder et organiser tes données. Il est très bon pour gérer beaucoup d’informations rapidement et facilement, parfait pour des apps qui ont besoin de se mettre à jour en direct.
- Realtime Database : C’est un service qui permet à ton app de partager des informations tout de suite entre tous tes utilisateurs. Si un utilisateur change quelque chose, tous les autres le voient immédiatement.
- Extensions : Ce sont des outils tout prêts qui t’aident à faire des choses comme envoyer des emails automatiquement ou accepter des paiements dans ton app, sans que tu aies à écrire beaucoup de code toi-même.
- App Check : Cela aide à protéger ton app en s’assurant que seules les parties autorisées peuvent y accéder.
- Cloud Functions (indispensable) : Cela te permet de faire des actions automatiquement en réponse à certaines choses que font tes utilisateurs, sans avoir besoin de gérer un serveur.
- Authentication (indispensable) : C’est un système pour vérifier qui sont tes utilisateurs. Ils peuvent se connecter avec leur email, Facebook, Google, et plus, pour que tu saches que c’est bien eux.
- Hosting : C’est le service qui permet à ton app d’être disponible sur internet. Il est rapide et sécurisé, et il te permet de mettre ton app en ligne facilement.
- Cloud Storage (indispensable) : C’est un espace où tu peux stocker des fichiers comme des images ou des vidéos que tes utilisateurs veulent partager ou sauvegarder dans ton app.
Les outils de monitoring et de suivi
Des outils cloud qui vont nous permettre de monitorer et suivre notre application :
- Crashlytics : C’est l’outil indispensable pour traquer les bugs et les crashs de ton app en temps réel. Il t’aide à identifier et prioriser les problèmes pour que tu puisses les régler rapidement, te fournissant des rapports précis sur chaque incident.
- Performance Monitoring : Avec cet outil, tu peux analyser et améliorer la performance de ton app. Il te montre où chercher pour résoudre les problèmes de latence ou d’utilisation des ressources, te donnant une vision claire des points à optimiser.
- Test Lab : Cet outil te permet de tester ton app sur une variété d’appareils et de configurations, assurant qu’elle fonctionne bien partout. C’est un excellent moyen de découvrir et de corriger les problèmes avant qu’ils n’affectent tes utilisateurs.
- App Distribution : Facilite le partage de ton app avec des testeurs bêta, te permettant de recueillir des retours précieux et d’apporter des améliorations avant le lancement officiel. C’est une étape clé pour peaufiner la qualité de ton app.
- Google Analytics : Cet outil t’offre des insights sur la manière dont les utilisateurs interagissent avec ton app. Il te permet d’analyser le comportement des utilisateurs, leur engagement, et bien plus, éclairant tes décisions de développement et de marketing.
- Machine Learning : Intégrer le Machine Learning peut enrichir ton app avec des fonctionnalités avancées, comme la personnalisation de contenu ou l’optimisation de l’interface utilisateur. Ce n’est pas juste un outil de suivi, mais une façon d’améliorer l’expérience utilisateur dans son ensemble.
Les outils pour piloter l’engagement
Permet d’engager l’engagement des utilisateurs :
- In-App Messaging : Imagine pouvoir chuchoter à l’oreille de tes utilisateurs pendant qu’ils naviguent dans ton app. C’est exactement ce que permet l’In-App Messaging. Tu peux leur envoyer des messages personnalisés pour les guider, leur faire découvrir des nouveautés, ou juste pour rendre leur expérience plus sympa. C’est comme avoir une conversation directe avec eux.
- A/B Testing : C’est le jeu des différences, mais version geek. Tu testes deux versions d’une même chose pour voir laquelle plaît le plus. Cela peut être deux écrans d’accueil différents, deux manières de présenter un bouton… Le but ? Comprendre ce qui fait vibrer tes utilisateurs pour leur offrir plus de ce qu’ils aiment.
- Cloud Messaging : C’est un peu le porte-voix de ton app. Ça te permet d’envoyer des notifications push à tes utilisateurs pour les tenir au courant des dernières news, des promos, ou juste pour les rappeler que ton app est là, prête à être utilisée. C’est super pour garder le contact et les ramener dans ton app.
- Remote Config : Imagine pouvoir changer le look de ton app ou activer certaines fonctionnalités sans que tes utilisateurs aient à télécharger une mise à jour. Magique, non ? Avec Remote Config, tu peux tester différentes configurations et voir en temps réel ce qui fonctionne le mieux, sans déranger tes utilisateurs avec des mises à jour constantes.
Configurer Firebase avec FlutterFlow
Les étapes pour connecter FlutterFlow à Firebase
- Créer un projet FlutterFlow
- Cochez la case Set-up firebase
- Entrez votre Firebase project ID ou cliquez sur “create project”
- Activez “Enable Authentication” et “Create User Collection” si tu souhaites avoir un système d’authentification sur ton application
Les problèmes courants lors de la configuration de FlutterFlow Firebase
Problème de connexion entre Firebase et FlutterFlow
Si vous avez déjà créé votre projet Firebase et que vous souhaitez le connecter via son, la connexion entre FlutterFlow et Firebase ne se fera pas si vous n’avez pas ajouté firebase@flutterflow.io dans les utilisateurs et autorisations de votre projet FlutterFlow.
Les règles d’accès à la base de données
Quand vous créez une base de données Firebase, vous avez deux choix : le mode test et le mode production. Si vous choisissez le mode test, Firebase va ajouter une règle qui va donner accès total à votre base de données à tous les utilisateurs jusqu’à une certaine date. Après cette date, l’accès sera totalement bloqué. Il faudra changer cette règle pour une règle plus précise.
Utiliser Firestore Database ou Realtime Database ?
Firebase te propose deux super options pour stocker et gérer tes données, mais chacune a ses spécificités. Voici le topo pour t’aider à choisir la meilleure pour ton projet :
- Cloud Firestore : C’est le choix top niveau pour les nouveaux projets. Plus de 250 000 développeurs lui font confiance, et ce n’est pas pour rien. Si ton app a besoin de gérer beaucoup d’infos complexes, avec des besoins en requêtes avancées, en évolutivité (c’est-à-dire qu’elle peut grandir avec ton succès sans souci) et en disponibilité, c’est vers Cloud Firestore que tu devrais te tourner. En bonus, il te permet de synchroniser les données super vite entre les utilisateurs et même d’accéder à tes données quand t’es hors ligne. Pratique, non ?
- Realtime Database : C’est l’option classique de Firebase. Elle est parfaite si ton app est plus simple, avec des besoins directs en termes de stockage de données. La magie de Realtime Database, c’est sa capacité à synchroniser les données entre les utilisateurs en un claquement de doigts, tout en restant un peu plus limitée côté évolutivité par rapport à Firestore.
En conclusion, nous pouvons résumer FlutterFlow comme l’outil qui va te permettre de créer une super interface rapidement pour ton application et Firebase comme le moteur (backend) qui te permet de rendre ton application vivante en gérant les données.
