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 agentischen Cloud-Entwicklungsumgebung weiterarbeiten können.

Diese Funktion ist für folgende Anwendungsfälle gedacht:

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

  • App-Prototyping-Tools, bei denen Ihre Website den Code und den visuellen Prototyp generiert und der Nutzer dann in Firebase Studio daran weiterarbeitet.

Open in Firebase Studio SDK verwenden

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

Importmethoden

Sie können die Schaltfläche so konfigurieren, dass Code mit den folgenden Methoden importiert wird:

  • Aus einem Git-Repository oder einer Vorlage: Link zu einem Git-Repository oder Firebase Studio Vorlage. Dies 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: Erstellen Sie dynamisch einen Arbeitsbereich aus einer Reihe von Dateien und Code-Snippets direkt aus Ihrer Webanwendung. Dies ist die leistungsstärkste Option für Code-Playgrounds und App-Prototypen, da sie die aktuelle Arbeit des Nutzers exportiert, auch wenn sie nicht an anderer Stelle gespeichert ist.

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

Das Open in Firebase Studio SDK: bietet alles, was Sie brauchen, 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 Ihrer Website die Schaltfläche „In Firebase Studio öffnen“ hinzu:

  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 detaillierte Anleitung, Codebeispiele und die vollständige API-Referenz finden Sie in der offiziellen SDK-Dokumentation.

Arbeitsbereichsumgebungen

Wenn ein Nutzer einen Arbeitsbereich auf Ihrer Website erstellt, richtet Firebase Studio die Entwicklungsumgebung für ihn ein. Der Grad der Automatisierung 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 baselineEnvironment Eigenschaft im settings Objekt korrekt festlegt. Wenn ein Nutzer den Link in Firebase Studio, Firebase Studio öffnet, erstellt Firebase Studio den Arbeitsbereich und führt automatisch folgende Schritte aus:

  • Alle erforderlichen Abhängigkeiten installieren.
  • Den richtigen Entwicklungsserver konfigurieren und starten.
  • Die Umgebung mit den richtigen Tools und Erweiterungen einrichten.

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

Generische Umgebung

Für alle anderen Projekttypen verwendet Firebase Studio einen generischen Importer. Die Dateien werden in den Arbeitsbereich hochgeladen, aber der Nutzer muss die erste Einrichtung manuell vornehmen. Dazu sind möglicherweise folgende Schritte erforderlich:

  • Sprachlaufzeiten und Abhängigkeiten installieren.
  • Die Datei dev.nix konfigurieren.

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

User Experience

Bei beiden Arten von Arbeitsbereichen werden Nutzer nach dem Klicken auf die Schaltfläche „In Firebase Studio“ 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. Er enthält Ihre Projektdateien, eine App-Vorschau und eine README-Datei mit den nächsten Schritten.

Schaltfläche „In Firebase Studio öffnen“ entwerfen

Sie können die Schaltfläche mit dem Open in Firebase Studio SDK entwerfen 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: Legt die Textlabel fest, die auf der Schaltfläche angezeigt werden.
    • 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: Bestimmt das Dateiformat des generierten Bildes.
    • 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