Prévisualiser votre application

Firebase Studio offre plusieurs façons de prévisualiser et de tester votre application pendant le développement. Vous pouvez utiliser le App Prototyping agent et le prévisualiseur Web intégré, ainsi que les prévisualiseurs Web et Android disponibles dans les espaces de travail Firebase Studio.

Activer et configurer votre environnement de prévisualisation

Si vous utilisez un modèle ou générez votre application à l'aide du App Prototyping agent, les aperçus sont souvent déjà configurés. S'ils ne le sont pas dans votre modèle, vous pouvez les configurer dans le fichier de configuration Nix du projet.

1. Dans votre espace de travail, ouvrez .idx/dev.nix.

   Firebase Studio génère automatiquement ce fichier lorsque vous créez un nouvel espace de travail et inclut tous les environnements de prévisualisation applicables en fonction du modèle que vous sélectionnez. Si le fichier ne se trouve pas dans votre Firebase Studio dépôt de code, créez-le, puis définissez l'attribut idx.previews sur true. Ensuite, ajoutez des attributs de configuration, comme illustré dans l'exemple suivant :

   { pkgs, ... }: {
   
     # NOTE: This is an excerpt of a complete Nix configuration example.
     # For more information about the dev.nix file in Firebase Studio, see
     # https://firebase.google.com/docs/studio/customize-workspace
   
     # Enable previews and customize configuration
     idx.previews = {
       enable = true;
       previews = {
         # The following object sets web previews
         web = {
           command = [
             "npm"
             "run"
             "start"
             "--"
             "--port"
             "$PORT"
             "--host"
             "0.0.0.0"
             "--disable-host-check"
           ];
           manager = "web";
           # Optionally, specify a directory that contains your web app
           # cwd = "app/client";
         };
         # The following object sets Android previews
         # Note that this is supported only on Flutter workspaces
         android = {
           manager = "flutter";
         };
       };
     };
   }
   

   Pour obtenir la liste complète des attributs Nix dans Firebase Studio, consultez Nix + Firebase Studio.

2. Recompilez votre environnement :

   • Dans la palette de commandes (Cmd+Shift+P/Ctrl+Shift+P), exécutez la Firebase Studio: Hard restart commande.
   • Dans la notification Environment config updated (Configuration de l'environnement mise à jour), cliquez sur Rebuild environment (Recompiler l'environnement).

   Lorsque vous recompilez l'environnement après avoir modifié votre fichier dev.nix, le panneau de prévisualisation s'affiche dans votre espace de travail. Il contient l'onglet Android , l'onglet Web , ou les deux, selon ce que vous avez activé.

Utiliser les aperçus d'application

Firebase Studio propose des aperçus Web sur les émulateurs Chrome et Android dans les espaces de travail Flutter qui installent votre application dans l'environnement de prévisualisation. Vous pouvez ainsi tester votre application de bout en bout directement depuis votre espace de travail.

Actualiser les aperçus pour le Web et Android

Firebase Studio s'intègre aux fonctionnalités de hot reload des frameworks sous-jacents (comme npm run start et flutter hot-reload) pour vous offrir une boucle de développement interne simplifiée. Firebase Studio propose les types de rechargement suivants :

• Hot reload automatique : les hot reloads sont effectués automatiquement lorsque vous enregistrez un fichier. Parfois appelé Hot Module Replacement (ou HMR), un hot reload met à jour votre application sans recharger la page (pour les applications Web) ni redémarrer ou réinstaller l'application (pour les émulateurs). Cette approche est utile pour préserver l'état en direct de votre application, mais elle ne fonctionne pas toujours comme prévu.

• Rechargement complet manuel : cette option équivaut à une actualisation de la page (pour les applications Web ) ou à un redémarrage de l'application (pour les émulateurs). Nous vous recommandons d'utiliser un rechargement complet pour capturer les modifications importantes apportées à votre code source, par exemple lorsque vous refactorisez de grands blocs de code.

• Redémarrage forcé manuel : cette option effectue un redémarrage complet du système de prévisualisation de Firebase Studio, ce qui inclut l'arrêt et le redémarrage du serveur Web de votre application.

Toutes les options de rechargement sont disponibles à l'aide de la barre d'outils de prévisualisation ou de la palette de commandes (Cmd+Shift+P sur Mac ou Ctrl+Shift+P sur ChromeOS, Windows ou Linux), sous la catégorie Firebase Studio.

Pour utiliser la barre d'outils de prévisualisation, procédez comme suit :

1. Cliquez sur l'icône Reload (Recharger) pour actualiser la page. Cela force un rechargement complet. Pour un autre type d'actualisation, cliquez sur la flèche à côté de l'icône de rechargement pour développer le menu.

2. Sélectionnez l'option d'actualisation souhaitée dans le menu : Hot Reload (Hot reload), Full Reload (Rechargement complet) ou Hard Restart (Redémarrage forcé).

Partager votre aperçu Web avec d'autres utilisateurs

Vous pouvez partager l'aperçu Web de votre application avec d'autres utilisateurs pour obtenir des commentaires en activant l'accès, puis en partageant le lien direct vers l'aperçu :

1. Dans la barre d'outils de prévisualisation Web, cliquez sur l'icône Share Preview Link (Partager le lien de prévisualisation), à droite de la barre d'adresse, pour ouvrir le menu de partage.

2. Autorisez d'autres utilisateurs à accéder à votre espace de travail à l'aide de l'une des options suivantes :

   • Make preview public (Rendre l'aperçu public) : rendez l'aperçu de votre espace de travail accessible au public. Cela permet à n'importe qui sur Internet d'accéder au serveur de prévisualisation exécuté sur votre espace de travail pendant que votre espace de travail est actif et jusqu'à ce que vous désactiviez l'accès public.

   • Manage workspace access (Gérer l'accès à l'espace de travail). Partagez votre espace de travail uniquement avec les personnes auxquelles vous souhaitez accorder l'accès.

3. Sélectionnez Copy preview URL (Copier l'URL de prévisualisation) pour copier un lien direct vers l'aperçu de l'espace de travail, que vous pouvez ensuite envoyer aux personnes auprès desquelles vous souhaitez obtenir des commentaires. Vous pouvez également utiliser le code QR qui s'affiche pour ouvrir votre aperçu sur votre appareil mobile.

Configurer l'enregistrement automatique et le hot reload

Par défaut, Firebase Studio enregistre automatiquement votre travail une seconde après que vous avez arrêté de taper, ce qui déclenche des hot reloads automatiques. Si vous souhaitez Firebase Studio enregistrer votre travail à un intervalle différent, modifiez le paramètre d'enregistrement automatique. Vous pouvez également désactiver l'enregistrement automatique.

Backend de prévisualisation déconnecté

Vous pouvez ignorer le message "Preview backend disconnected" (Backend de prévisualisation déconnecté).

Étapes suivantes

• Publier avec Firebase.
• Surveiller votre application.