Firebase Studio vous permet de créer et de lancer des applications web riches en fonctionnalités sans écrire une seule ligne de code. Vous pouvez rapidement transformer vos idées en applications fonctionnelles et les mettre en ligne grâce à des outils basés sur l'IA. Non seulement il gère tous les aspects techniques en arrière-plan, mais il vous fait aussi gagner du temps pour vous concentrer sur la conception des fonctionnalités et de l'apparence de votre application.

Ce tutoriel explique comment utiliser Firebase Studio pour créer une application web. Il vous guide étape par étape pour accéder à Firebase, décrire votre application, examiner et personnaliser le plan, puis tester et publier votre application.

À la fin de ce tutoriel, vous serez capable de :

• Access Firebase
• Describe your application
• Review and customize the blueprint
• Test and publish an application

Commençons sans plus attendre !

Étape 1 - Accéder à Firebase

Accédez à la console Firebase Studio. Connectez-vous à votre compte. Acceptez les conditions et cliquez sur 'Continue.'

Vous serez accueilli par une interface familière : un tableau de bord vous demandant "What do you want to build?" dans la section 'Prototype an app with AI'.

Avant de passer à la rédaction du prompt, notons quelques points importants. Comme vous pouvez le voir, vous avez la possibilité de créer un nouvel espace de travail ou d'importer des dépôts depuis diverses sources. Si vous avez du code stocké dans d'autres dépôts, vous pouvez l'importer en utilisant les liens sous 'Start coding an app'.

Étape 2 - Décrire votre application

Voici la meilleure partie. Commencez à décrire votre application dans un prompt. Vous pouvez utiliser les techniques CoT pour rédiger un prompt, cependant, nous vous conseillons de rester simple et concis. Soyez précis concernant les fonctionnalités pour obtenir les meilleurs résultats. Utilisez le prompt suivant :

Prompt:

Crée une application de rappel de médicaments et de pilules. Inclure les rappels, le suivi et les alertes. Crée une interface épurée mais visuellement agréable avec des informations essentielles sur le régime de prise de médicaments.

Cliquez sur 'Prototype with AI.'

Astuce rapide : Si vous souhaitez ajouter des images d'applications que l'IA doit reproduire ou utiliser comme référence de design, vous pouvez télécharger des images ou des croquis du design de l'application pour aider l'IA à comprendre votre vision et vos attentes.

Étape 3 - Examiner et personnaliser le blueprint

Firebase créera un blueprint de l'application. Vous pourrez le modifier ou le personnaliser selon vos besoins.

Cliquez sur l'icône en forme de crayon dans le coin supérieur droit de l'écran du blueprint. Cela vous mènera à un module d'édition où vous pourrez modifier le blueprint, changer les couleurs, la mise en page, l'iconographie et les animations.

Cliquez sur 'Save.' et retournez à l'écran du blueprint.

Une fois le blueprint finalisé, cliquez sur 'prototype this app.'

En moins d'une minute, Firebase créera l'application pour vous.

Firebase vous demandera de fournir une clé API Gemini pour finaliser l'application. Rendez-vous sur Google AI studio et cliquez sur 'Get API key.'

Créez une clé API pour votre projet Firebase et copiez-la.

Retournez sur votre écran Firebase. Collez la clé et cliquez sur 'Continue.'

Firebase finalisera votre application en envoyant le code vers un serveur.

Vous pouvez écrire des prompts complémentaires pour personnaliser l'application selon vos préférences. Imaginons que vous souhaitiez ajouter un onglet d'alertes à votre application. L'application liste toutes les alertes de la semaine.

Prompt:

Crée un onglet pour les alertes. L'onglet affichera toutes les alertes survenues pendant une semaine. Ajoute également des options pour effacer toutes les alertes. Crée aussi une section Alertes séparée sous le module des médicaments.

Étape 4 - Tester et publier une application

Firebase Studio construit le prototype de votre application pour vous, en créant tous les fichiers nécessaires. Vous pourrez voir votre application en action avec des graphiques, des formulaires et des éléments de navigation fonctionnels. Si quelque chose ne va pas, il suffit d'appuyer sur le bouton "Fix the code" et l'IA résoudra automatiquement tous les problèmes.

Lorsque vous souhaitez apporter des modifications plus détaillées à votre application, cliquez simplement sur "Switch to code" en haut à droite. Cela ouvre un éditeur de code similaire à Visual Studio Code, où vous pouvez modifier directement n'importe quel fichier de votre projet.

L'écran de code est facile à naviguer. Tous les fichiers sont regroupés au même endroit. Pas besoin d'écrire du code vous-même. Il suffit de demander à Gemini de modifier le code pour vous.

Une fois que vous avez terminé de construire votre application et que vous en êtes satisfait, cliquez sur le bouton "Publish" en haut à droite. Cela déploiera immédiatement votre application en ligne, permettant aux utilisateurs de commencer à l'utiliser sans délai.

Voilà qui conclut ce tutoriel. Firebase est un outil formidable pour prototyper une application. Le code est propre et facile à modifier. Vous pouvez l'utiliser comme prototype initial de votre application et développer les détails en utilisant le prototype Firebase comme base. N'oubliez pas d'expérimenter avec Firebase. Continuez à modifier l'application jusqu'à ce que vous soyez pleinement satisfait.