Schaltfläche zum Importieren von Code in Firebase Studio erstellen

Fügen Sie Ihrer Website die Schaltfläche „In Firebase Studio öffnen“ hinzu, damit Nutzer Code von Ihrer Website direkt in einen Firebase Studio-Arbeitsbereich importieren und in einer agentenbasierten cloudbasierten Entwicklungsumgebung weiterarbeiten können.

Diese Funktion ist für Folgendes gedacht:

  • Code-Playgrounds, in denen Nutzer von einem einfachen Editor zu einer vollständigen Entwicklungsumgebung wechseln können.

  • Tools für das Prototyping von Apps, bei denen Ihre Website den Code und den visuellen Prototyp generiert und der Nutzer ihn dann in Firebase Studio durchläuft.

„Open in Firebase Studio“-SDK verwenden

Die Schaltfläche „In Firebase Studio öffnen“ wird vom SDK „In Firebase Studio öffnen“ unterstützt, einer JavaScript-Bibliothek, die die entsprechenden Links zum Erstellen und Einrichten eines neuen Arbeitsbereichs generiert. Es gibt mehrere Optionen für den Import des Codes.

Importmethoden

Sie können die Schaltfläche zum Importieren von Code mit den folgenden Methoden konfigurieren:

  • Aus einem Git-Repository oder einer Vorlage: Link zu einem Git-Repository oder einer Firebase Studio-Vorlage. Das ist ideal für vollständige Projekte oder vordefinierte Vorlagen. Weitere Informationen zu diesen Anwendungsfällen finden Sie unter Verknüpfung zu einem vordefinierten Arbeitsbereich in Firebase Studio erstellen.

  • Aus einer Reihe von Projektdateien: Sie können einen Arbeitsbereich dynamisch aus einer Reihe von Dateien und Code-Snippets direkt aus Ihrer Webanwendung erstellen. Dies ist die leistungsstärkste Option für Code-Playgrounds und App-Prototypen, da die aktuelle Arbeit des Nutzers exportiert wird, auch wenn sie nicht an anderer Stelle gespeichert ist.

Schaltfläche „In Firebase Studio öffnen“ auf Ihrer Website hinzufügen

Das „Open in Firebase Studio“-SDK: bietet alles, was Sie benötigen, einschließlich Hilfsfunktionen zum Generieren von Schaltflächenbildern, zum Erstellen von Deeplinks und zum Senden von Dateiinhalten zum Erstellen von Firebase Studio-Arbeitsbereichen.

So fügen Sie die Schaltfläche „In Firebase Studio öffnen“ auf Ihrer Website ein:

  1. Installieren Sie das Paket in Ihrem Projektverzeichnis:

    npm install @firebase-studio/open-sdk

  2. Fügen Sie Ihrem Code Folgendes hinzu, um die Bibliothek zu importieren:

    import * as FirebaseStudio from '@firebase-studio/open-sdk';

Eine ausführliche Anleitung, Codebeispiele und die vollständige API-Referenz finden Sie in der offiziellen SDK-Dokumentation.

Arbeitsbereichsumgebungen

Wenn ein Nutzer einen Arbeitsbereich über Ihre Website erstellt, richtet Firebase Studio die Entwicklungsumgebung für ihn ein. Der Automatisierungsgrad hängt vom Projekttyp ab.

Optimierte Umgebung

Für React-, Angular- und einfache HTML-Projekte bietet Firebase Studio eine optimierte, vorkonfigurierte Umgebung, sofern der Aufrufer die Eigenschaft baselineEnvironment im Objekt settings richtig festlegt. Wenn ein Nutzer den Link in Firebase Studio öffnet, erstellt Firebase Studio den Arbeitsbereich und führt automatisch folgende Aktionen aus:

  • Installiert alle erforderlichen Abhängigkeiten.
  • Konfiguriert und startet den richtigen Entwicklungsserver.
  • Richtet die Umgebung mit den richtigen Tools und Erweiterungen ein.

Dadurch wird eine Umgebung geöffnet, in der Ihre Nutzer eine Live-Vorschau Ihrer Anwendung sehen und direkt mit dem Code interagieren können.

Allgemeine Umgebung

Für alle anderen Projekttypen verwendet Firebase Studio einen generischen Importer. Die Dateien werden in den Arbeitsbereich hochgeladen, aber der Nutzer muss die Ersteinrichtung manuell vornehmen. Möglicherweise müssen Sie:

  • Sprachlaufzeiten und Abhängigkeiten installieren
  • Konfigurieren Sie die Datei dev.nix.

Für diese Projekte erstellt Firebase Studio eine nicht angepasste Umgebung, in der der Nutzer die volle Kontrolle über die Einrichtung hat.

User Experience

Bei beiden Arten von Arbeitsbereichen werden Nutzer nach dem Klicken auf die Schaltfläche „In Firebase Studio öffnen“ aufgefordert, ihren Arbeitsbereich zu benennen und die Liste der zu importierenden Dateien zu prüfen.

Dialogfeld „Arbeitsbereich importieren“ in Firebase Studio öffnen

Wenn der Nutzer auf Importieren klickt, wird ein neuer Firebase Studio-Arbeitsbereich geöffnet. Es enthält Ihre Projektdateien, eine App-Vorschau und eine README-Datei mit den nächsten Schritten.

Schaltfläche „In Firebase Studio öffnen“ gestalten

Sie können die Schaltfläche mit dem Open in Firebase Studio SDK gestalten oder das folgende Tool verwenden, um den HTML-Code für eine Firebase Studio-Schaltfläche zu generieren:

Wenn Sie das SDK verwenden, können Sie optionale Konfigurationseigenschaften für die Schaltfläche einfügen:

  • label: Hiermit wird das Textlabel festgelegt, das auf der Schaltfläche angezeigt wird.
    • Zulässige Werte: open, try, export oder continue.
  • color: Definiert das Farbschema der Schaltfläche.
    • Zulässige Werte: dark, light, blue oder bright.
  • size: Gibt die Höhe der Schaltfläche in Pixeln an.
    • Zulässige Werte: 20 oder 32.
  • imageFormat: Legt das Dateiformat des generierten Bildes fest.
    • Zulässige Werte: svg oder png.

Beispiel:

img.src = FirebaseStudio.getButtonImageUrl({
  label: 'export',
  color: 'dark',
  size: 32,
  imageFormat: 'svg'
});

Beispiel für die Schaltfläche „In Firebase Studio exportieren“

Nächste Schritte