Prévisualiser votre application

Firebase Studio fournit un aperçu qui affiche une vue en direct de votre application à côté de votre éditeur de code.

Activer et configurer votre environnement preview

Si vous utilisez un modèle, les aperçus sont souvent déjà configurés pour vous. Si les aperçus ne sont pas déjà configurés 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 espace de travail et inclut tous les environnements d'aperçu applicables en fonction du modèle que vous sélectionnez. Si le fichier ne figure pas dans votre dépôt de code Firebase Studio, créez-le, puis définissez l'attribut idx.previews sur true. Ajoutez ensuite 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. Recréez votre environnement:

   • Dans la palette de commandes (Cmd+Shift+P/Ctrl+Shift+P), exécutez la commande Firebase Studio: Redémarrage forcé.
   • Dans la notification Configuration de l'environnement mise à jour, cliquez sur Recompiler l'environnement.

   Lorsque vous reconstruisez l'environnement après avoir modifié votre fichier dev.nix, le panneau d'aperçu s'affiche dans votre espace de travail et affiche l'un ou les deux onglets Android et Web, en fonction de ce que vous avez activé.

Utiliser les aperçus d'applications

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 d'aperçu. Vous pouvez ainsi tester entièrement 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 rechargement à chaud 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 fournit les types de rechargements suivants:

• Hot reload automatique: les hot reloads sont automatiquement effectués lorsque vous enregistrez un fichier. Parfois appelé Hot Module Replacement (ou HMR), une actualisation à chaud met à jour votre application sans recharger la page (pour les applications Web) ni redémarrer ni 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.

• Actualisation complète manuelle: 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 lors du refactoring de grands blocs de code.

• Redémarrage manuel: cette option redémarre complètement le 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 d'aperçu 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 d'aperçu, procédez comme suit:

1. Cliquez sur l'icône Actualiser 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: Actualisation à chaud, Actualisation complète ou Redémarrage à froid.

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 leurs commentaires. Pour ce faire, activez l'accès, puis partagez le lien direct vers l'aperçu:

1. Dans la barre d'outils d'aperçu Web, cliquez sur l'icône Partager le lien d'aperçu à droite de la barre d'adresse pour ouvrir le menu de partage.

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

   • 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 Preview exécuté sur votre espace de travail tant qu'il est actif et jusqu'à ce que vous désactiviez l'accès public.

   • 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 Copier l'URL de l'aperçu pour copier un lien direct vers l'aperçu de l'espace de travail, que vous pourrez ensuite envoyer aux personnes auprès desquelles vous souhaitez obtenir des commentaires. Vous pouvez également utiliser le code QR qui s'affiche pour ouvrir l'aperçu sur votre appareil mobile.

Configurer l'enregistrement automatique et le rechargement à chaud

Par défaut, Firebase Studio enregistre automatiquement votre travail une seconde après avoir cessé de taper, ce qui déclenche des rechargements à chaud automatiques. Si vous souhaitez que Firebase Studio enregistre votre travail à un autre intervalle, modifiez le paramètre d'enregistrement automatique. Vous pouvez également désactiver l'enregistrement automatique.

Étapes suivantes

• Publier avec Firebase
• Surveillez votre application.