Vorschau der Anwendung ansehen

Firebase Studio bietet verschiedene Möglichkeiten, eine Vorschau Ihrer Anwendung anzuzeigen 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 erstellen, 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 anwendbaren 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 Web-Vorschauen 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-Reloads: Hot-Reloads werden automatisch ausgeführt, wenn Sie eine Datei speichern. Bei einem Hot-Reload wird Ihre App aktualisiert, ohne dass die Seite neu geladen (bei Web-Apps) oder die App neu gestartet oder neu installiert (bei Emulatoren) werden muss. Dieser Ansatz ist nützlich, um den Live-Status Ihrer App beizubehalten, funktioniert aber möglicherweise nicht immer wie gewünscht.

• Manuelle vollständige Reloads: 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 Codeblöcke umgestalten.

• Manuelle Hard-Restarts: Mit dieser Option wird das Vorschausystem von Firebase Studio's vollständig neu gestartet. Dazu wird 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 , 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, Vollständiger Reload oder Hard-Restart.

Web-Vorschau für andere freigeben

Sie können die Web-Vorschau 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 Web-Vorschau rechts neben der Adressleiste auf das Symbol Vorschaulink freigeben , um das Freigabemenü zu öffnen.

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

   • 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.

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

3. Wählen Sie Vorschau-URL kopieren aus, um einen direkten Link zur Vorschau des Arbeitsbereichs 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 nach dem Beenden der Eingabe 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.

Vorschau-Back-End getrennt

Sie können die Meldung „Preview backend disconnected“ (Vorschau-Back-End getrennt) ignorieren.

Nächste Schritte

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