Erste Schritte mit Firebase Studio

1. Übersicht

In diesem Codelab erfahren Sie, wie Sie den Agenten für das Anwendungs-Prototyping in Firebase Studio verwenden, um eine App zu erstellen, mit der Sie eine neue Sprache lernen können. Anschließend optimieren Sie die App und veröffentlichen sie optional in Firebase App Hosting.

Animiertes GIF einer App zum Sprachenlernen

Lerninhalte

Best Practices für Prompts in Firebase Studio
App iterieren, um Funktionen hinzuzufügen und Fehler zu beheben
App in Firebase App Hosting veröffentlichen und für andere freigeben
Wichtige Messwerte über den Bereich „App-Übersicht“ von App Hosting verfolgen

Voraussetzungen

Ein Browser Ihrer Wahl, z. B. Google Chrome
Ein Google-Konto zum Erstellen und Verwalten Ihres Firebase-Projekts

2. App mit dem Agenten für das Anwendungs-Prototyping generieren

Der Agent für das Anwendungs-Prototyping verwendet Gemini in Firebase, um Ihre App zu erstellen. Auch wenn Sie identische Prompts verwenden, sieht Ihr Ergebnis möglicherweise nicht genau so aus wie das in diesem Codelab oder verhält sich nicht genau so. Wenn Sie nicht weiterkommen, haben wir eine Reihe von Dateien bereitgestellt, die Sie Ihrem Arbeitsbereich hinzufügen können, um das Codelab an verschiedenen Stellen fortzusetzen.

Melden Sie sich in Ihrem Google-Konto an und öffnen Sie Firebase Studio.

Geben Sie im Feld Mit KI einen Prototyp einer Anwendung erstellen eine Beschreibung der App ein, die Sie erstellen möchten. In diesem Codelab erstellen Sie eine App, mit der Sie eine neue Sprache anhand von Geschichten, Karteikarten und einem KI-Tutor lernen können. Geben Sie einen Prompt ein, z. B.:

An app to help someone learn a new language. The app should include
AI-generated stories in the target language, where users can click vocab
words or the entire story to see it in English. A different section
includes flashcards, where the user is shown a word in the chosen language
and can click it to flip the card and see the word in English. The final
section includes an AI chatbot that allows the user to have simple
conversations in the chosen language or ask questions in English about
what a word means or how to form a sentence in the chosen language. All
content should be beginner-friendly, focusing on basic greetings, common
questions/answers, and vocabulary relevant to the lessons or stories.
To start, the app should teach the user French, although we might add
additional languages in the future.

Klicken Sie auf Mit KI einen Prototyp erstellen.
Prüfen Sie den vorgeschlagenen App-Entwurf. Klicken Sie auf Anpassen, um den Entwurf zu bearbeiten:
1. Ändern Sie den App-Namen in Speak Easy.
2. Ändern Sie das Farbschema in:
```
Primary color: Asparagus green (#98BF64) for a calm and friendly feel.
Secondary color: Light parchment (#F5EBCD) to complement the primary color.
Accent: Marigold (#FFB833) for interactive elements and call-to-action buttons.
```
Wenn Sie Ihr Farbschema oder Layout lieber als Bild einreichen möchten, klicken Sie auf die Option Anhang , um während des Prompt- oder Entwurfsprozesses ein Bild hochzuladen. Bilder dürfen maximal 3 MB groß sein.
Klicken Sie auf Speichern.
Wenn der Entwurf Ihre Änderungen übernommen hat, klicken Sie auf Prototyp dieser App.
Da diese App KI-Elemente enthält, werden Sie vom Agenten nach einem Gemini-Schlüssel gefragt. Fügen Sie Ihren eigenen Gemini API-Schlüssel hinzu oder klicken Sie auf Automatisch generieren , um einen Gemini API-Schlüssel zu generieren. Wenn Sie auf Automatisch generieren klicken, erstellt Firebase Studio ein Firebase-Projekt und generiert einen Gemini API-Schlüssel für Sie.
Der Agent für das Anwendungs-Prototyping verwendet den App-Entwurf, um eine erste Version Ihrer App zu erstellen. Wenn dies abgeschlossen ist, wird die Vorschau Ihrer App zusammen mit einer Gemini-Chatoberfläche angezeigt. Nehmen Sie sich einen Moment Zeit, um Ihre App zu testen. Auch wenn sie nicht genau so aussieht, wie Sie es sich vorgestellt haben, wird im nächsten Abschnitt beschrieben, wie Sie neue Funktionen hinzufügen und das Design optimieren können.

3. (Optional) Code abrufen

Wenn Sie nicht weiterkommen oder die Beispiel-App genauer nachvollziehen möchten, verwenden Sie die Beispieldateien, die an verschiedenen Stellen im Codelab bereitgestellt werden.

Laden Sie die Dateien im Ordner herunter.
Klicken Sie in Firebase Studio auf Zu Code wechseln, um die Codeansicht zu öffnen.
Ziehen Sie die heruntergeladenen Dateien in den Bereich „Explorer“ von Firebase Studio. Erlauben Sie, dass vorhandene Dateien ersetzt werden.
Klicken Sie auf Zu Prototyp wechseln, um das Codelab mit der Beispielversion der App fortzusetzen.

4. Funktionalität der App testen, iterieren und Fehler beheben

Wenn Sie sich die Vorschau der App ansehen, bemerken Sie möglicherweise Fehler oder unerwartete Funktionen. In der Beispielversion der App werden die folgenden Änderungen und Korrekturen vorgenommen:

Im KI-Geschichtengenerator sollten Nutzer auf Vokabeln klicken können, um eine Definition auf Englisch zu erhalten.
Die Karteikarten sollten auf Französisch angezeigt werden und beim Klicken auf Englisch wechseln.
Der Nutzer sollte auf eine Einstellungsseite wechseln und statt Französisch Japanisch lernen können.

Ziel 1: Vokabeln zum KI-Geschichtengenerator hinzufügen

Optional: Wenn Sie ab diesem Punkt die Beispielversion der App verwenden möchten, laden Sie diese Dateien herunter und ziehen Sie sie in der Codeansicht in den Bereich „Explorer“ von Firebase Studio.

Beschreiben Sie in der Chatoberfläche die Funktion, die Sie hinzufügen möchten:

In the AI Story Generator, users should be able to click vocab words or
phrases to get the definition in English. Words or phrases should be
underlined to indicate they can be clicked.

Testen Sie die App im Vorschaufenster. Sie aktualisieren das Erscheinungsbild der App später. Konzentrieren Sie sich jetzt erst einmal auf die Funktionalität.

Wenn Ihre App nicht wie erwartet funktioniert, fordern Sie den Agenten für das Anwendungs-Prototyping weiterhin auf, Anpassungen vorzunehmen. Beispiel:

IMPORTANT: Be sure to underline and provide a definition for most words
and phrases, and ESPECIALLY all nouns and verbs. If a word or phrase in the
story appears multiple times, only underline and define the first instance.

Klicken Sie auf Zu Code wechseln, um die Codeansicht zu öffnen. Dort sehen Sie alle Dateien Ihrer App und können den Code direkt ändern. Wenn ein Fehler auftritt, den Gemini nicht beheben kann, ist es manchmal einfacher, eine Datei manuell zu bearbeiten. Wenn Sie bereit sind, wechseln Sie in den Modus Zu Prototyp wechseln , um den Agenten für das Anwendungs-Prototyping weiter zu verwenden.

Animiertes GIF des KI-Story-Generators, der eine Geschichte auf Französisch mit unterstrichenen Wörtern erstellt

Ziel 2: Übersetzungen zu den Karteikarten hinzufügen

Folgen Sie derselben Vorgehensweise wie oben. Beschreiben Sie die Funktion über die Chatoberfläche, testen Sie sie im Vorschaufenster und fügen Sie dann entweder mit zusätzlichen Prompts oder in der Codeansicht Übersetzungen zu den Karteikarten hinzu. Versuchen Sie es mit einem Prompt wie:

 The flash cards should appear in the target language to start, then switch to
 English when clicked.

Manchmal erkennt der Agent für das Anwendungs-Prototyping nicht, wenn ein Fehler auftritt. Es kann effektiver sein, zu beschreiben, was Sie sehen und was behoben werden muss, z. B.:

 The flip button for the flash cards isn't working. Can you debug it? All flash
 cards are only showing in English.

Animiertes GIF mit Lernkarten, die zwischen Französisch und Englisch wechseln

Ziel 3: Neue Sprache hinzufügen

Versuchen Sie es mit einem Prompt wie:

 Add a settings section to the app, where users can swap to a new language
 to learn. Add Japanese to the list of languages the user can pick from. If
 the user selects Japanese, the AI-generated stories, flash cards, and chatbot
 tutor should all use Japanese instead of French.

Animiertes GIF, das zeigt, wie die App auf Japanisch umgestellt wird

5. Design der App iterieren

Nachdem Ihre App alle gewünschten Funktionen enthält, ist es an der Zeit, am Stil zu arbeiten.

Farbschema der App ändern

Sie können genau angeben, welche Farben Sie verwenden möchten, oder Sie können den Agenten für das Anwendungs-Prototyping die Führung übernehmen lassen. In der Chatoberfläche können Sie auch auf die Option Symbol für Anhang Anhang klicken, um ein Bild der gewünschten Farben oder des gewünschten Stils hochzuladen. Wenn Sie lieber einen Prompt verwenden möchten, versuchen Sie es mit:

 Add color to the design of the app. Use modern, clean colors that adhere
 to accessibility standards and have a calming feel.

Text in der App aktualisieren

Anstelle von „KI-Chatbot-Tutor“ soll beispielsweise nur „Chat“ angezeigt werden:

 Change the text "AI Chatbot Tutor" to "Chat".

UI der App anpassen, um sie intuitiver zu gestalten

Anstatt dass der Nutzer beispielsweise auf eine Schaltfläche klicken muss, um Text zu senden, können Sie ihm erlauben, Return auf der Tastatur zu drücken:

 In the story generator section, allow the user to press the return key on
 the keyboard to submit the text.

Option hinzufügen, mit der der Nutzer zwischen hellem und dunklem Modus wählen kann

Viele Nutzer bevorzugen die Möglichkeit, zwischen einem hellen und einem dunklen Design für die App zu wählen. Überlegen Sie, wo diese Option logischerweise zu finden wäre:

 Add an icon in the upper right corner to dynamically switch the color theme of
 the app between dark mode and light mode.

Tipps für Prompts und Fehlerbehebung

Hilfe bei Prompts erhalten:Wenn Sie dem Agenten für das Anwendungs-Prototyping nicht erklären können, was Sie möchten, bitten Sie Gemini für Google, Ihnen bei der Optimierung des Prompts zu helfen. Weitere Informationen zu effektiven Prompts.
Auf anderen Geräten testen: Klicken Sie im Prototypmodus auf Link zur Vorschau freigeben, um Ihre App auf anderen Geräten zu testen.
Integrierte Tools verwenden: Verwenden Sie in der Codeansicht die integrierten Funktionen zur Fehlerbehebung und Berichterstellung von Firebase Studio, um Ihre App zu prüfen, Fehler zu beheben und zu auditieren.
Einfach anfangen:Arbeiten Sie jeweils an einer Funktion. Beginnen Sie mit einer grundlegenden Reihe von Funktionen in Ihrem Prototyp und erweitern Sie ihn, sobald diese wie erwartet funktionieren.
Fehler beschreiben:Wenn etwas nicht funktioniert, beschreiben Sie dem Agenten für das Anwendungs-Prototyping das aktuelle Verhalten und dann das gewünschte Verhalten.
Bei Bedarf wiederherstellen:Wenn der Agent für das Anwendungs-Prototyping einen Prompt falsch versteht oder ein schwer zu behebendes Problem einführt, klicken Sie auf die Schaltfläche Wiederherstellen , um zu einer früheren Version der App zurückzukehren und es mit einem anderen Prompt noch einmal zu versuchen.

6. (Optional) App veröffentlichen

Nachdem Sie die App getestet haben und zufrieden sind, können Sie sie mit Firebase App Hosting im Web veröffentlichen.

Klicken Sie auf Veröffentlichen , um ein neues Firebase-Projekt zu erstellen und die Einrichtung von App Hosting zu starten. Der Bereich App veröffentlichen wird angezeigt.
Notieren Sie sich im Schritt Firebase-Projekt den Namen des für Sie erstellten Firebase-Projekts und klicken Sie dann auf Weiter.
Wählen Sie im Schritt Cloud-Rechnungskonto verknüpfen eine der folgenden Optionen aus:
1. Wählen Sie das Cloud-Rechnungskonto aus, das Sie mit Ihrem Firebase-Projekt verknüpfen möchten.
2. Wenn Sie kein Cloud-Rechnungskonto haben oder ein neues erstellen möchten, klicken Sie auf Cloud-Rechnungskonto erstellen. Dadurch wird der Google Cloud-Text geöffnet, in dem Sie ein neues Selfservice-Cloud-Rechnungskonto erstellen können. Kehren Sie nach dem Erstellen des Kontos zu Firebase Studio zurück und wählen Sie das Konto aus der Liste „Cloud-Rechnungskonto verknüpfen“ aus.
Klicken Sie auf Weiter. Firebase Studio verknüpft das Rechnungskonto mit dem Projekt, das mit Ihrem Arbeitsbereich verknüpft ist. Dieses wurde entweder erstellt, als Sie automatisch einen Gemini API-Schlüssel generiert haben, oder als Sie auf Veröffentlichen geklickt haben. Anschließend richtet App Hosting eine vollständig verwaltete Umgebung für Ihre App in Google Cloud ein.
Klicken Sie auf Ersten Roll-out erstellen. Firebase Studio startet den App Hosting-Roll-out. Dies kann bis zu zehn Minuten dauern. Weitere Informationen zu den Vorgängen im Hintergrund finden Sie unter App Hosting-Buildprozess.
Nach Abschluss des Roll-outs wird die App-Übersicht mit einer URL und App-Analysen angezeigt, die auf der Beobachtbarkeit von App Hosting basieren. Wenn Sie anstelle der von Firebase generierten Domain eine benutzerdefinierte Domain verwenden möchten (z. B. „example.com“ oder „app.example.com“), können Sie im Firebase-Text eine benutzerdefinierte Domain hinzufügen.

Weitere Informationen zu App Hosting finden Sie unter App Hosting und Funktionsweise.

7. (Optional) App überwachen

Der Bereich App-Übersicht von App Hosting enthält wichtige Messwerte und Informationen zu Ihrer App. So können Sie die Leistung Ihrer Webanwendung mit den integrierten Beobachtbarkeitstools von App Hosting überwachen. Nach dem Roll-out Ihrer Website können Sie auf die Übersicht zugreifen, indem Sie auf Veröffentlichen klicken. Dieses Steuerfeld bietet Ihnen folgende Möglichkeiten:

Klicken Sie auf Roll-out erstellen , um eine neue Version Ihrer App zu veröffentlichen.
Geben Sie den Link zu Ihrer App frei oder öffnen Sie Ihre App direkt unter App aufrufen.
Sehen Sie sich eine Zusammenfassung der Leistung Ihrer App in den letzten 7 Tagen an, einschließlich der Gesamtzahl der Anfragen und des Status Ihres letzten Roll-outs. Klicken Sie auf Details ansehen , um im Firebase-Text auf weitere Informationen zuzugreifen.
Sehen Sie sich ein Diagramm der Anzahl der Anfragen an, die Ihre App in den letzten 24 Stunden erhalten hat, aufgeschlüsselt nach HTTP-Statuscode.

Wenn Sie den Bereich „App-Übersicht“ schließen, können Sie ihn jederzeit wieder öffnen, indem Sie auf Veröffentlichen klicken.

Weitere Informationen zum Verwalten und Überwachen von App Hosting-Roll-outs finden Sie unter Roll-outs und Releases verwalten.

8. Fazit

Glückwunsch! Sie haben erfolgreich eine App mit Firebase Studio erstellt. Sie können der App noch viel mehr hinzufügen, z. B. ein erweitertes Wörterbuch, weitere Sprachen, Audio, Animationen oder eine Auswahl des Schwierigkeitsgrads. Sie können Ihre App weiter verwenden oder etwas Neues erstellen.