Prévisualiser votre application

Firebase Studio propose plusieurs façons de prévisualiser et de tester votre application pendant son développement. Cela inclut l'utilisation de App Prototyping agent, l'exploitation du lecteur d'aperçu Web intégré, ainsi que les lecteurs d'aperçu Web et Android disponibles dans les espaces de travail Firebase Studio.

Activer et configurer votre environnement d'aperçu

Si vous utilisez un modèle ou générez votre application à l'aide de App Prototyping agent, 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 de prévisualisation applicables en fonction du modèle que vous sélectionnez. Si le fichier ne se trouve 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 indiqué 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. Reconstruisez 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 Reconstruire l'environnement.

    Lorsque vous recréez l'environnement après avoir modifié votre fichier dev.nix, le panneau d'aperçu s'affiche dans votre espace de travail et présente les onglets Android et/ou Web, selon 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. Cela vous permet de tester entièrement votre application, de bout en bout, directement depuis votre espace de travail.

Actualiser les aperçus pour le Web et Android

Les hooks Firebase Studio s'intègrent 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 propose les types de rechargement suivants :

  • Hot reload automatique : les hot reloads sont automatiquement effectués lorsque vous enregistrez un fichier. Parfois appelée Hot Module Replacement (ou HMR), l'actualisation à chaud 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 actif 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 lors du refactoring de grands blocs de code.

  • Redémarrage manuel : cette option redémarre complètement le système d'aperçu 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 dans la barre d'outils d'aperçu ou dans la palette de commandes (Cmd+Shift+P sur Mac ou Ctrl+Shift+P sur ChromeOS, Windows ou Linux), dans la catégorie Firebase Studio.

Pour utiliser la barre d'outils de prévisualisation, 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 d'actualisation pour développer le menu.

  2. Sélectionnez l'option d'actualisation de votre choix dans le menu : Actualisation à chaud, Actualisation complète ou 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. Pour cela, activez l'accès, puis partagez le lien direct vers l'aperçu :

  1. Dans la barre d'outils de l'aperçu Web, cliquez sur l'icône Image d'une icône de lien 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 procédant de l'une des manières suivantes :

    • Rendre l'aperçu public : rendez l'aperçu de votre espace de travail accessible au public. Cela permet à toute personne sur Internet d'accéder au serveur d'aperçu exécuté dans votre espace de travail tant que votre espace de travail 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 donner 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. Vous pourrez ensuite l'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 que vous avez cessé de taper, ce qui déclenche des rechargements à chaud automatiques. Si vous souhaitez que Firebase Studio enregistre votre travail à un intervalle différent, modifiez le paramètre d'enregistrement automatique. Vous pouvez également désactiver l'enregistrement automatique.

Configurer l'enregistrement automatique

  1. Ouvrez Firebase Studio.
  2. Cliquez sur l'icône Paramètres.
  3. Recherchez Fichiers : enregistrement automatique et vérifiez que le champ est défini sur `afterDelay`.
  4. Recherchez Fichiers : délai d'enregistrement automatique.
  5. Saisissez un nouvel intervalle de délai d'enregistrement automatique, exprimé en millisecondes. Les modifications apportées à votre travail sont désormais enregistrées automatiquement en fonction du nouveau paramètre de délai d'enregistrement automatique.

Désactiver l'enregistrement automatique

  1. Ouvrez Firebase Studio.
  2. Cliquez sur l'icône Paramètres.
  3. Recherchez Fichiers : enregistrement automatique.
  4. Cliquez sur le menu déroulant et sélectionnez Désactivé.

Backend de l'aperçu déconnecté

Vous pouvez ignorer le message "Backend de prévisualisation déconnecté".

Étapes suivantes