Vorschau der Anwendung ansehen

Firebase Studio bietet verschiedene Möglichkeiten, eine Vorschau Ihrer Anwendung aufzurufen und sie während der Entwicklung zu testen. Dazu gehören die Verwendung des App Prototyping agent sowie die Nutzung des integrierten Web-Previewers sowie die Web- und Android- Previewer, die in Firebase Studio-Arbeitsbereichen verfügbar sind.

Vorschauumgebung aktivieren und konfigurieren

Wenn Sie eine Vorlage verwenden oder Ihre App mit dem App Prototyping agent generieren, sind Vorschauen oft bereits für Sie konfiguriert. Wenn in Ihrer Vorlage noch keine Vorschauen eingerichtet sind, können Sie sie in der Nix-Konfigurationsdatei des Projekts konfigurieren.

1. Öffnen Sie in Ihrem Arbeitsbereich die Datei .idx/dev.nix.

   Firebase Studio generiert diese Datei automatisch, wenn Sie einen neuen Arbeitsbereich erstellen. Sie enthält alle relevanten Vorschauumgebungen basierend auf der von Ihnen ausgewählten Vorlage. Wenn sich die Datei nicht in Ihrem Firebase Studio Code-Repository befindet, erstellen Sie sie und legen Sie das Attribut idx.previews auf true fest. Fügen Sie dann Konfigurationsattribute hinzu, wie im folgenden Beispiel gezeigt:

   { 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";
         };
       };
     };
   }
   

   Eine vollständige Liste der Nix-Attribute in Firebase Studio finden Sie unter Nix + Firebase Studio.

2. Erstellen Sie Ihre Umgebung neu:

   • Führen Sie über die Befehlspalette (Cmd+Shift+P/Ctrl+Shift+P) den Firebase Studio: Hard restart Befehl aus.
   • Klicken Sie in der Benachrichtigung Environment config updated (Umgebungskonfiguration aktualisiert) auf Rebuild environment (Umgebung neu erstellen).

   Wenn Sie die Umgebung nach dem Ändern der Datei dev.nix neu erstellen, wird der Vorschau-Bereich in Ihrem Arbeitsbereich angezeigt. Je nachdem, was Sie aktiviert haben, sehen Sie dort die Tabs Android und/oder Web.

App-Vorschauen verwenden

Firebase Studio bietet Webvorschauen auf Chrome- und Android-Emulatoren in Flutter-Arbeitsbereichen, in denen Ihre App in der Vorschauumgebung installiert wird. So können Sie Ihre App direkt in Ihrem Arbeitsbereich vollständig testen.

Vorschauen für Web und Android aktualisieren

Firebase Studio nutzt die Hot-Reload-Funktionen der zugrunde liegenden Frameworks (z. B. npm run start und flutter hot-reload), um Ihnen einen optimierten inneren Entwicklungszyklus zu ermöglichen. Firebase Studio bietet die folgenden Arten von Reloads:

• Automatische Hot-Reload: Hot-Reloads werden automatisch ausgeführt, wenn Sie eine Datei speichern. Ein Hot Reload, manchmal auch Hot Module Replacement (HMR) genannt, aktualisiert Ihre App, ohne die Seite neu zu laden (bei Web-Apps) oder die App neu zu starten oder neu zu installieren (bei Emulatoren). Dieser Ansatz ist nützlich, um den Live-Status Ihrer App beizubehalten, funktioniert aber möglicherweise nicht immer wie gewünscht.

• Manual Full Reload: Diese Option entspricht einer Seitenaktualisierung (bei Web Apps) oder einem Neustart der App (bei Emulatoren). Wir empfehlen, einen vollständigen Reload zu verwenden, um wichtige Änderungen an Ihrem Quellcode zu erfassen, z. B. wenn Sie große Teile des Codes umgestalten.

• Manual Hard Restart: Mit dieser Option wird das Vorschausystem von Firebase Studio's vollständig neu gestartet. Dazu wird auch der Webserver Ihrer App beendet und neu gestartet.

Alle Reload-Optionen sind entweder über die Vorschau-Symbolleiste oder über die Befehl palette (Cmd+Shift+P auf dem Mac oder Ctrl+Shift+P unter ChromeOS, Windows oder Linux) in der Kategorie Firebase Studio verfügbar.

So verwenden Sie die Vorschau-Symbolleiste:

1. Klicken Sie auf das Symbol Reload (Neu laden), um die Seite zu aktualisieren. Dadurch wird ein vollständiger Reload erzwungen. Wenn Sie eine andere Art von Aktualisierung wünschen, klicken Sie auf den Pfeil neben dem Symbol „Reload“, um das Menü zu maximieren.

2. Wählen Sie im Menü die gewünschte Aktualisierungsoption aus: Hot Reload, Full Reload oder Hard Restart.

Webvorschau für andere freigeben

Sie können die Webvorschau Ihrer App für andere freigeben, um Feedback zu erhalten. Aktivieren Sie dazu den Zugriff und geben Sie dann den direkten Link zur Vorschau frei:

1. Klicken Sie in der Symbolleiste der Webvorschau rechts neben der Adressleiste auf das Symbol Share Preview Link (Vorschaulink freigeben), um das Freigabemenü zu öffnen.

2. Erlauben Sie anderen den Zugriff auf Ihren Arbeitsbereich. Verwenden Sie dazu eine der folgenden Optionen:

   • Make preview public (Vorschau öffentlich machen): Machen Sie die Vorschau Ihres Arbeitsbereichs öffentlich zugänglich. So kann jeder im Internet auf den Vorschau-Server zugreifen, der in Ihrem Arbeitsbereich ausgeführt wird, solange Ihr Arbeitsbereich aktiv ist und bis Sie den öffentlichen Zugriff deaktivieren.

   • Manage workspace access (Arbeitsbereichszugriff verwalten): Geben Sie Ihren Arbeitsbereich nur für die Personen frei, denen Sie Zugriff gewähren möchten.

3. Wählen Sie Copy preview URL (Vorschau-URL kopieren) aus, um einen direkten Link zur Arbeitsbereichsvorschau zu kopieren. Sie können ihn dann an die Personen senden, von denen Sie Feedback erhalten möchten. Sie können auch den angezeigten QR-Code verwenden, um die Vorschau auf Ihrem Mobilgerät zu öffnen.

Automatisches Speichern und Hot Reload konfigurieren

Standardmäßig speichert Firebase Studio Ihre Arbeit eine Sekunde, nachdem Sie die Eingabe beendet haben, und löst automatische Hot Reloads aus. Wenn Sie möchten Firebase Studio, dass Ihre Arbeit in einem anderen Intervall gespeichert wird, ändern Sie die Einstellung für das automatische Speichern. Sie können das automatische Speichern auch deaktivieren.

Backend der Vorschau getrennt

Sie können die Meldung „Preview backend disconnected“ (Backend der Vorschau getrennt) ignorieren.

Nächste Schritte

• Mit Firebase veröffentlichen.
• App im Blick behalten.