Créer un bouton pour importer du code dans Firebase Studio

Ajoutez un bouton "Ouvrir dans Firebase Studio" à votre site Web pour permettre aux utilisateurs d'importer du code depuis votre site directement dans un espace de travail Firebase Studio, ce qui leur permet de continuer à travailler dans un environnement de développement cloud agentique.

Cette fonctionnalité est conçue pour :

• Des terrains de jeu de code, où vos utilisateurs peuvent passer d'un éditeur de base à un environnement de développement complet.

• Outils de prototypage d'applications, où votre site génère le code et le prototype visuel, et où l'utilisateur l'itère ensuite dans Firebase Studio.

Utiliser le SDK Ouvrir dans Firebase Studio

Le bouton "Ouvrir dans Firebase Studio" est optimisé par le SDK Open in Firebase Studio, une bibliothèque JavaScript qui génère les liens appropriés pour créer et remplir un nouvel espace de travail. Il propose plusieurs options pour importer le code.

Méthodes d'importation

Vous pouvez configurer le bouton pour importer du code à l'aide des méthodes suivantes :

• À partir d'un dépôt ou d'un modèle Git : créez un lien vers un dépôt ou un modèle Firebase Studio Git. Cette option est idéale pour les projets complets ou les modèles prédéfinis. Pour en savoir plus sur ces cas d'utilisation, consultez Créer un raccourci vers un espace de travail prédéfini dans Firebase Studio.

• À partir d'un ensemble de fichiers de projet : créez dynamiquement un espace de travail à partir d'un ensemble de fichiers et d'extraits de code directement depuis votre application Web. Il s'agit de l'option la plus puissante pour les bacs à sable de code et les outils de prototypage d'applications, car elle exporte le travail actuel de l'utilisateur, même s'il n'est pas enregistré ailleurs.

Ajouter le bouton "Ouvrir dans Firebase Studio" à votre site

Le SDK "Ouvrir dans Firebase Studio" : fournit tout ce dont vous avez besoin, y compris des fonctions d'assistance pour générer des images de boutons, créer des liens profonds et envoyer le contenu des fichiers pour créer des espaces de travail Firebase Studio.

Pour ajouter le bouton "Ouvrir dans Firebase Studio" à votre site Web :

1. Installez le package dans le répertoire de votre projet :

   npm install @firebase-studio/open-sdk
   

2. Ajoutez le code suivant à votre code pour importer la bibliothèque :

   import * as FirebaseStudio from '@firebase-studio/open-sdk';
   

Pour obtenir des instructions détaillées, des exemples de code et la documentation de référence complète de l'API, consultez la documentation officielle du SDK.

Comprendre les environnements d'espace de travail

Lorsqu'un utilisateur crée un espace de travail à partir de votre site, Firebase Studio configure l'environnement de développement pour lui. Le niveau d'automatisation dépend du type de projet.

Environnement optimisé

Pour les projets React, Angular et HTML simples, Firebase Studio fournit un environnement optimisé et préconfiguré, à condition que l'appelant définisse correctement la propriété baselineEnvironment dans l'objet settings. Cela signifie que lorsqu'un utilisateur ouvre le lien dans Firebase Studio, Firebase Studio crée l'espace de travail et effectue automatiquement les actions suivantes :

• Installe toutes les dépendances nécessaires.
• Configure et démarre le serveur de développement approprié.
• Configure l'environnement avec les outils et extensions appropriés.

Un environnement s'ouvre, dans lequel vos utilisateurs peuvent voir un aperçu en direct de votre application et interagir directement avec le code.

Environnement générique

Pour tous les autres types de projets, Firebase Studio utilise un importateur générique. Il importe les fichiers dans l'espace de travail, mais votre utilisateur doit effectuer la configuration initiale manuellement. Il devra peut-être :

• Installez les environnements d'exécution et les dépendances du langage.
• Configurez le fichier dev.nix.

Pour ces projets, Firebase Studio crée un environnement non personnalisé, ce qui permet à l'utilisateur de contrôler entièrement le processus de configuration.

Expérience utilisateur

Pour les deux types d'espaces de travail, lorsqu'un utilisateur clique sur le bouton "Ouvrir dans Firebase Studio", il est invité à nommer son espace de travail et à examiner la liste des fichiers à importer.

Lorsque l'utilisateur clique sur Importer, un nouvel espace de travail Firebase Studio s'ouvre. Il contient les fichiers de votre projet, un aperçu de l'application et un fichier README avec les prochaines étapes.

Concevoir un bouton "Ouvrir dans Firebase Studio"

Vous pouvez concevoir votre bouton à l'aide du SDK Ouvrir dans Firebase Studio ou utiliser l'outil suivant pour générer le code HTML d'un bouton Firebase Studio :

Si vous utilisez le SDK, vous pouvez inclure des propriétés de configuration facultatives pour le bouton :

• label : définit le libellé de texte affiché sur le bouton.
  • Valeurs autorisées : open, try, export ou continue.
• color : définit le jeu de couleurs du bouton.
  • Valeurs autorisées : dark, light, blue ou bright.
• size : spécifie la hauteur du bouton en pixels.
  • Les valeurs autorisées sont 20 ou 32.
• imageFormat : détermine le format de fichier de l'image générée.
  • Les valeurs autorisées sont svg ou png.

Exemple :

img.src = FirebaseStudio.getButtonImageUrl({
  label: 'export',
  color: 'dark',
  size: 32,
  imageFormat: 'svg'
});

Étapes suivantes

• Installer le SDK Ouvrir dans Firebase Studio
• Découvrez comment personnaliser un espace de travail Firebase Studio.