Firebase Studio : l'outil cloud d'AI pour créer et déployer rapidement des applications complètes

Introduction générale

Firebase Studio est un outil de développement de Google basé sur le cloud, dont l'objectif principal est d'accélérer le développement et le déploiement d'applications complètes grâce à l'IA. Les utilisateurs peuvent réaliser l'ensemble du processus, du prototypage de l'application à la mise en service dans un environnement de production, dans le navigateur. Il intègre la technologie Gemini AI, prend en charge la génération de code en langage naturel, peut importer des projets à partir de référentiels tels que GitHub et est compatible avec une variété de piles technologiques, telles que Next.js et Flutter.Qu'il s'agisse de développement front-end, back-end ou mobile, Firebase Studio offre un support unique. Il est actuellement en phase de prévisualisation et offre gratuitement 3 espaces de travail, qui peuvent être portés à 10 en rejoignant le programme Google Developer, et jusqu'à 30 pris en charge par le plan payant. Cet outil convient aux développeurs individuels ou aux petites équipes qui souhaitent créer rapidement des applications d'intelligence artificielle.

Firebase Studio remplace fondamentalement Projet IDX et propose un nouveau modèle de programmation intelligent.

Mode de programmation intelligent de Firebase Studio

Mode d'édition du code de Firebase Studio

Liste des fonctions

• Prototype d'applicationLe logiciel de création de sites web : générez rapidement des applications web avec des langages naturels, des esquisses ou des modèles grâce à la prise en charge du framework Next.js.
• Éditeur de code en ligneCode OSS : éditeur basé sur le code OSS qui permet de modifier et d'importer des projets en temps réel.
• Assistant IA GeminiIl s'agit d'aider à la rédaction du code, au débogage, aux tests et à la création de documentation, et d'être en mesure de comprendre le contexte du code.
• Importation et exportation de projetsSupport pour l'importation de projets depuis GitHub, GitLab, Bitbucket, ou l'exportation vers une source externe.
• Prévisualisation et test en directLes applications de l'entreprise : générer des liens de prévisualisation des applications et des émulateurs Android pour faciliter les tests.
• Déploiement en un clicDistribuer des applications via Firebase App Hosting ou Cloud Run.
• Personnalisation de l'environnementLes fichiers de configuration Nix permettent d'adapter l'environnement de développement à différents besoins.
• Optimisation de bout en boutSupport pour les extensions Open VSX, les API de test et les fonctionnalités de back-end.

Utiliser l'aide

Comment démarrer avec Firebase Studio

Firebase Studio ne nécessite aucune installation locale et toutes les opérations sont effectuées dans le navigateur. Voici les étapes détaillées :

1. Connexion et accès
   • Ouvrez votre navigateur et allez sur https://firebase.studio/.
   • Cliquez sur "Connexion" pour vous connecter avec votre compte Google. Si vous n'avez pas de compte, commencez par vous inscrire.
2. Créer ou importer des projets
   • Nouveaux projets de construction: :
     • Après vous être connecté, cliquez sur "Créer un nouveau projet".
     • Choisissez "Prototypez cette application" pour générer un prototype à l'aide de l'IA, ou choisissez un cadre dans une bibliothèque de modèles (par exemple Next.js).
   • Importer un projet: :
     • Cliquez sur "Importer un projet" et entrez l'URL de votre dépôt GitHub, GitLab ou Bitbucket.
     • Prise en charge des fichiers compressés de moins de 50 Mo (par exemple, zip ou tar.gz), les dépôts privés nécessitent une autorisation.
3. Mise en place de l'environnement de développement
   • Après l'importation du projet, les dépendances ne sont pas automatiquement installées par défaut. Exécutez la commande manuellement :
     • Projet Flutter : dans le terminal, tapez flutter pub get.
     • Projet Node.js : entrez npm install.
   • Vous voulez l'installer automatiquement ? Modifiez le répertoire racine de l'application dev.nix ajouter le script de dépendance.

Fonctionnement des principales fonctions

Prototype d'application

• Cliquez sur "Prototypez cette application" pour passer en mode prototypage.
• Saisissez une description en langage naturel, telle que "Créer un site d'achat avec un identifiant", ou téléchargez un croquis.
• Le système génère des applications basées sur Next.js en quelques secondes. Après la génération, elle peut être ajustée par l'IA, par exemple, "ajouter une barre de recherche".
• Prise en charge de la sélection de modèles, tels que les modèles React ou Flutter, pour un démarrage rapide.

Édition de code en ligne avec assistant IA

• Lorsque vous entrez dans l'espace de travail, vous trouverez une arborescence de fichiers sur la gauche et un éditeur sur la droite, similaire à VS Code.
• Modifier le code directement, par exemple en ajustant les styles du front-end ou la logique du back-end.
• Cliquez sur l'icône Gemini AI dans le coin inférieur droit et entrez vos exigences :
  • "Ecrire une interface API pour renvoyer les données de l'utilisateur".
  • "Expliquez ce que fait ce code.
• L'IA vous donnera des conseils précis en fonction de votre projet, et pourra également déboguer et remanier le code.

Prévisualisation et test en direct

• Cliquez sur le bouton "Aperçu" en haut pour générer un lien d'aperçu et un code QR.
• Scannez le code QR avec votre téléphone portable ou partagez le lien avec d'autres personnes pour le tester.
• Prise en charge des émulateurs Android pour simuler l'expérience mobile.
• Après avoir modifié le code, rafraîchissez l'aperçu pour voir les résultats en direct.

Déploiement en un clic

• Cliquez sur "Publier" et sélectionnez Firebase App Hosting ou Cloud Run.
• Projet Firebase non lié ? Visitez le site https://console.firebase.google.com/ Créer un projet et l'associer.
• Déployer et obtenir le nom de domaine (par ex. your-app.web.app), l'application est prête à être mise en service.
• Vous souhaitez utiliser une infrastructure personnalisée ? La configuration manuelle des méthodes de déploiement est prise en charge.

Optimisation de bout en bout

• faire passer (un projet de loi, une inspection, etc.) https://open-vsx.org/ Installez l'extension et testez l'API et le backend.
• Par exemple, ajoutez l'extension Postman pour vérifier que l'interface renvoie correctement les données.
• La prévisualisation prend en charge le Web et Android afin d'assurer la cohérence entre les plateformes.

Fonctionnalités supplémentaires et notes

• Personnalisation de l'environnement: : Editorial dev.nixajouter une version spécifique de Node.js ou de Python.
• quota libre: 3 espaces de travail disponibles dans la phase de prévisualisation. Rejoindre https://developers.google.com/program Ce nombre peut être porté à 10, avec un maximum de 30 pour les plans payants.
• Paramètres de confidentialitéPour éviter que les données ne soient utilisées pour l'entraînement de l'IA, désactivez les fonctions "Complétion du code" et "Indexation du code" dans les paramètres.

Grâce à ces étapes, vous pouvez rapidement commencer à utiliser Firebase Studio, à créer et à optimiser des applications.

scénario d'application

1. Validation rapide des idées de produits
   • Vous souhaitez créer un outil de chat AI pour le présenter à vos clients. Utilisez la fonction de génération de prototypes pour créer une démo en quelques minutes.
2. Apprendre le développement complet
   • Les débutants maîtrisent les compétences front-end et back-end en générant des modèles de code avec l'IA et en apprenant au fur et à mesure qu'ils évoluent.
3. Développement du travail d'équipe
   • Les petites équipes développent des applications web et collaborent en temps réel grâce à des espaces de travail basés sur le cloud qui ne nécessitent pas de configuration locale.
4. Mise en ligne d'une page temporaire
   • Créez une page d'inscription pour un événement, utilisez un modèle avec déploiement et faites-le en quelques heures.

QA

1. L'utilisation de Firebase Studio est-elle payante ?
   • 3 espaces de travail sont disponibles gratuitement pendant la phase de prévisualisation. D'autres exigences peuvent être ajoutées au programme des développeurs de Google ou payées.
2. Besoin de connaître la programmation ?
   • Pas nécessaire. Les utilisateurs novices génèrent du code en langage naturel, qui peut être édité directement par les utilisateurs professionnels.
3. Quelles sont les technologies prises en charge ?
   • Le prototype supporte Next.js et l'éditeur est compatible avec Flutter, Node.js et de nombreux autres frameworks.
4. Comment tester les applications mobiles ?
   • Utilisez l'émulateur Android intégré pour prévisualiser les résultats sur mobile.