Firebase Studio : un avis honnête avec exemples

Firebase propose une suite d’outils puissante qui couvre tout le nécessaire pour créer des applications web et mobiles modernes. Très connu dans l’écosystème développeur, il est depuis longtemps le backend de référence des startups, avec des fonctions solides comme l’authentification, le stockage cloud, les bases de données en temps réel et les fonctions serverless.

Google va désormais plus loin avec Firebase Studio, un nouvel environnement de développement boosté à l’IA, conçu pour passer de l’idée à un MVP en quelques minutes. À l’instar de Replit et Lovable, Firebase Studio permet de construire des apps full-stack à partir d’un simple prompt.

Dans cet article, nous allons voir ce qu’est Firebase Studio et comment il fonctionne. Je vous montre comment je l’ai utilisé pour créer un tableau de bord IoT de zéro et je partage mes premières impressions !

Nous tenons nos lecteurs au courant des dernières avancées en IA avec The Median, notre newsletter gratuite du vendredi qui décrypte les actus marquantes de la semaine. Abonnez-vous et restez affûté en quelques minutes par semaine :

Qu’est-ce que Firebase Studio de Google ?

Firebase Studio est le nouvel outil de développement de Google, alimenté par l’IA, qui vous permet de créer des apps full-stack à l’aide de prompts en langage naturel. 

Il s’agit en réalité de l’évolution de Project IDX, un IDE cloud que Google a lancé en 2023. Project IDX était un IDE cloud généraliste avec support IA, mais le rebranding en Firebase Studio recentre l’expérience pour l’optimiser pour les développeurs Firebase. Il reprend le meilleur d’IDX, comme l’éditeur Code OSS, l’assistant IA et l’environnement cloud, et y ajoute des intégrations aux services Firebase tels que Firestore, Auth, Hosting et Cloud Functions.

Firebase Studio a été annoncé lors du rebranding de Firebase en 2024 ; c’est la réponse de Firebase à la montée des outils de développement « nativement IA ».

Comment accéder à Firebase Studio

Vous pouvez essayer Firebase Studio dès maintenant en vous rendant sur studio.firebase.google.com. Il vous suffit d’un compte Google. Une fois connecté·e, décrivez en quelques lignes l’app que vous voulez créer : Firebase Studio générera un projet prêt à l’emploi en s’appuyant sur les outils Firebase. 

Tarification de Firebase Studio

Firebase Studio est gratuit pendant sa période d’aperçu. Par défaut, vous pouvez créer jusqu’à 3 espaces de travail sans frais. En revanche, certains services intégrés, comme Firebase App Hosting, ou le dépassement du quota gratuit de l’API Gemini, nécessiteront l’association d’un compte de facturation et pourront entraîner des coûts. Votre projet Firebase basculera automatiquement sur l’offre Blaze (paiement à l’usage) et toute consommation au-delà des quotas gratuits sera facturée.

Cela dit, si vous utilisez surtout Firebase Studio pour du prototypage et des tâches de développement, vous devriez rester dans les limites gratuites des espaces de travail et explorer l’outil sans frais.

Test 1 : une app de tableau de bord IoT à partir d’un prompt

J’ai d’abord voulu tester la génération d’application à partir d’un prompt. Quand j’évalue des outils de création d’apps dopés à l’IA, j’utilise un prompt un peu complexe pour vraiment éprouver l’outil. Une to-do list sort généralement très bien, mais une app un peu plus ambitieuse révèle vite ses points forts et ses limites.

Mon prompt était donc le suivant :

Après avoir cliqué sur « Prototype with AI » et patienté une minute environ, j’avais toujours un écran blanc sous les yeux.

Rafraîchir la page n’a rien changé, j’ai donc supprimé l’espace de travail et recommencé. Cette fois, j’ai obtenu un plan pour mon app :

J’ai été plutôt impressionné par la génération de lignes directrices de style, modifiables en un clic (je pouvais par exemple changer les couleurs en cliquant dessus). 

En revanche, dans la section fonctionnalités, on voit qu’il a laissé tomber les exigences Cloud Functions et Firestore demandées dans mon prompt. Tant pis : c’était suffisamment proche, j’ai validé le plan, curieux de voir le résultat. L’écran suivant affichait ceci :

Là, j’étais un peu mitigé. L’interface était très basique et il n’y avait en réalité aucune authentification utilisateur.

J’ai commencé à tester les différents boutons et la logique de l’écran de prototype. 

Le bouton en haut à droite de l’UI ouvre l’app dans un nouvel onglet. Celui à sa gauche permet de partager un lien de prévisualisation : pratique. Le bouton le plus à gauche ouvre un sélecteur de composants — j’y reviens juste après.

En cliquant sur le petit bouton orange en forme de gribouillis, à gauche du champ de chat, on ouvre un intéressant menu de « dessin ».

J’ai pu dessiner un rectangle autour d’une carte capteur et préciser que je voulais voir l’état du capteur. En effet, l’allumer/éteindre n’a pas grand sens si l’on ne connaît pas son état actuel. 

Il a bien ajouté une propriété d’état sur les deux cartes capteurs, mise à jour selon le bouton cliqué.

J’ai essayé d’ajouter un nouveau capteur de cuisine via l’UI, ce qui a bien fonctionné.

Mais ce nouveau capteur n’a pas été conservé après rafraîchissement, ce qui est un peu décevant.

J’ai alors voulu jeter un coup d’œil au code. J’ai cliqué sur l’icône « code » en haut à droite, à côté du bouton bleu « Publish ». Agréable surprise : un éditeur de code en ligne s’ouvre, rapide, soigné, avec Gemini intégré. L’ouverture du contrôle de source a lancé la recherche de dépôts Git.

Il semblait en avoir trouvé un, en attendant que je publie la branche en cours.

Cela m’a paru étrange, j’ai donc cliqué sur « Publish Branch ».

Sans surprise, je n’étais pas connecté·e : un petit caprice de l’éditeur. Quoi qu’il en soit, l’intégration GitHub directement depuis l’éditeur est appréciable.

Ce que je voulais vraiment tester, c’était l’intégration à la suite Firebase. Je suis revenu·e sur l’onglet prototype et j’ai demandé dans le chat d’intégrer Auth et Cloud Functions pour simuler des données de capteurs.

Il a accepté et m’a proposé un écran Login, mais a immédiatement échoué avec des erreurs.

L’une des erreurs, visible ci-dessus, venait du fait que le code tentait d’appeler une Cloud Function inexistante, puisqu’elle n’avait pas été créée. Cliquer plusieurs fois sur « Fix Error » n’a rien donné.

Je suis retourn·e dans l’onglet code et j’ai dû guider l’assistant Gemini plusieurs fois pour qu’il génère bien du code de Cloud Function, et pas seulement une fonction classique. Il a ensuite indiqué qu’il ne pouvait pas la déployer lui-même, mais pouvait m’aider à suivre les étapes. Acceptable.

Comme l’interface de chat ne semblait pas très efficace pour les problèmes de logique, je me suis demandé s’elle gérait mieux l’UI. Je lui ai demandé de rendre la page de connexion plus attractive en ajoutant des visuels sur le thème des données et de l’analytique. Aucun changement, malgré des messages indiquant des modifications de fichiers.

La dernière fonctionnalité que je voulais essayer était la publication. Un clic sur le grand bouton « Publish » en haut à droite ouvre un panneau latéral avec les étapes à suivre.

J’ai décidé de créer un compte de facturation et de passer automatiquement au plan Blaze pour publier via Firebase App Hosting. Le lien du panneau m’a redirigé vers la console Google Cloud, où j’ai créé un profil de facturation. Après validation, j’ai été redirigé vers une page « URL introuvable » sur GCP. 

De retour sur l’onglet Firebase Studio, un message « Waiting for billing account from Cloud Console » s’affichait. Après quelques minutes et rafraîchissements, j’ai pu sélectionner mon compte de facturation et publier l’app.

Ainsi s’achève mon test « génération d’app à partir d’un prompt ». Ma première impression : l’expérience est peut-être un peu plus laborieuse avec Firebase Studio qu’avec d’autres outils que j’ai utilisés.

Passons au deuxième test.

Test 2 : générer un projet à partir d’un modèle

Firebase Studio permet la génération à partir d’un prompt, mais aussi à partir de modèles.

Sur la page d’accueil, cliquer sur l’une des petites icônes de framework ou de langage sous « Start coding an app » ouvre un nouvel écran. J’ai choisi de créer un serveur API Node Express appelé « My Node App » en TypeScript.

Après quelques secondes, le serveur généré s’affiche dans l’éditeur de code en ligne. Pas d’onglet prototype cette fois, ce qui est logique pour du backend.

Cette fois, l’onglet contrôle de source m’a permis d’initialiser un nouveau dépôt Git.

Ce modèle expose seulement un endpoint « hello world », mais fournit tout le code et le boilerplate pour démarrer une API Node.js + Express. 

Premières impressions et avis sur Firebase Studio

Dans l’ensemble, Firebase Studio est une bonne entrée dans le développement assisté par IA, mais l’outil paraît encore très beta.

L’idée de passer d’un simple prompt à une app fonctionnelle avec prototype visuel, prévisualisation live, composants éditables et contrôles de style est très enthousiasmante. Quelques détails bien pensés aussi, comme changer les couleurs en cliquant sur une palette ou dessiner sur le prototype pour demander des modifications.

L’éditeur de code intégré est une bonne surprise : il est agréable, fluide, avec Gemini et GitHub prêts à l’emploi, ce qui facilite l’expérimentation. Il rivalise clairement avec d’autres éditeurs de code en ligne que j’ai testés.

En revanche, j’ai rencontré plusieurs irritants. La génération par prompt est inégale : des fonctionnalités explicitement demandées (Cloud Functions, Auth, Firestore) ont été écartées, et lorsqu’elles ont été redemandées, l’implémentation était partielle, avec des erreurs non résolues.

L’UI générée était assez basique, et mes requêtes d’images d’arrière-plan ont été ignorées. À force d’insister, je n’ai obtenu qu’un simple dégradé en fond. J’ai aussi rencontré quelques bizarreries côté publication et facturation, rendant le parcours un peu heurté.

La création via modèle s’est mieux passée. Le modèle backend Node.js m’a donné une base de code propre et bien structurée, prête à l’emploi. Beaucoup plus fiable et « developer-friendly ».

Pour être honnête, je n’ai pas tout testé, et l’outil évolue encore. D’autres mentionnent de meilleurs résultats avec des cas plus simples ou des prompts plus structurés ; à retenter.

Aujourd’hui, Firebase Studio ressemble à un avant-goût de ce que le développement « IA-first » pourrait devenir. Pas encore tout à fait prêt pour la production, surtout face à des outils comme Replit, Lovable, Bolt ou v0, mais un espace à suivre de très près.

Conclusion

Firebase Studio porte des idées vraiment prometteuses, mais n’est pas encore, à lui seul, prêt à produire des apps de niveau production. Si vous êtes curieux du développement assisté par IA ou souhaitez explorer la prochaine vague, ça vaut clairement le coup d’essayer !