Diese Seite wurde von der Cloud Translation API übersetzt.

Erste Schritte mit Firebase Studio

1. Übersicht

In diesem Codelab lernen Sie, wie Sie den App Prototyping-Agenten in Firebase Studio verwenden, um eine App zu erstellen, die Ihnen beim Erlernen einer neuen Sprache helfen soll. Anschließend können Sie die App optimieren und verbessern und sie optional in Firebase App Hosting veröffentlichen.

Animiertes GIF einer App zum Sprachenlernen

Lerninhalte

Best Practices für Prompts in Firebase Studio
App iterativ weiterentwickeln, um Funktionen hinzuzufügen und Fehler zu beheben
Eine App in Firebase App Hosting veröffentlichen und mit anderen teilen
Wichtige Messwerte über den Bereich „App-Übersicht“ der App Hosting App im Blick behalten

Voraussetzungen

Einen 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 App Prototyping-Agent 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 und verhält sich auch nicht genau so. Wenn Sie nicht weiterkommen, haben wir eine Reihe von Dateien bereitgestellt, die Sie Ihrem Arbeitsbereich hinzufügen können, um das Lab an verschiedenen Checkpoints in diesem Codelab fortzusetzen.

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

Geben Sie im Feld App mit KI prototypisieren eine Beschreibung der App ein, die Sie erstellen möchten. In diesem Codelab entwickeln Sie eine App, mit der Sie mithilfe von Geschichten, Karteikarten und einem KI-Tutor eine neue Sprache 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 Prototypen erstellen.
Sehen Sie sich den vorgeschlagenen App-Blueprint an. Klicken Sie auf Anpassen, um den Entwurf zu bearbeiten:
1. Ändern Sie den App-Namen in Speak Easy.
2. Ändern Sie das Farbschema so:
```
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 Blueprint-Prozesses ein Bild hochzuladen. Bilder dürfen maximal 3 MiB 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 Agent aufgefordert, einen Gemini-Schlüssel anzugeben. 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, wird in Firebase Studio ein Firebase-Projekt erstellt und ein Gemini API-Schlüssel für Sie generiert.
Der App Prototyping-Agent verwendet den App-Blueprint, um eine erste Version Ihrer App zu erstellen. Wenn er fertig 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 das Beispiel genauer nachvollziehen möchten, können Sie die Beispieldateien verwenden, die an mehreren Checkpoints 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 Explorer-Bereich von Firebase Studio. Erlauben Sie, dass die Dateien vorhandene Dateien ersetzen.
Klicken Sie auf Zu Prototyper wechseln, um das Codelab mit der Beispielversion der App fortzusetzen.

4. Funktionen der App testen, iterieren und debuggen

Bei der Vorschau der App können Fehler oder unerwartete Funktionen auftreten. In der Beispielversion der App werden die folgenden Änderungen und Korrekturen vorgenommen:

Im KI-Storygenerator sollten Nutzer auf Vokabeln klicken können, um eine Definition auf Englisch zu erhalten.
Die Karteikarten sollten auf Französisch angezeigt werden und dann bei einem Klick auf Englisch wechseln.
Der Nutzer sollte auf einer Einstellungsseite die Möglichkeit haben, statt Französisch Japanisch zu lernen.

Ziel 1: Vokabeln zum KI-Storygenerator 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 werden das Erscheinungsbild der App später aktualisieren. Konzentrieren Sie sich daher vorerst nur auf die Funktionalität.

Wenn Ihre App nicht wie erwartet funktioniert, fordern Sie den App Prototyping-Agenten 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 Zum Code wechseln, um die Codeansicht zu öffnen. Dort können Sie alle Dateien Ihrer App aufrufen und den Code direkt bearbeiten. Wenn Gemini einen Fehler nicht beheben kann, ist es manchmal einfacher, eine Datei manuell zu bearbeiten. Wenn Sie bereit sind, wechseln Sie in den Prototyper-Modus, um den App-Prototyping-Agenten 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

Gehen Sie wie oben beschrieben vor. 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 Lernkarten 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 App Prototyping-Agent nicht, wenn ein Fehler vorliegt. 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. App-Design optimieren

Nachdem Ihre App nun alle gewünschten Funktionen hat, ist es an der Zeit, sich um das Design zu kümmern.

Farbschema der App ändern

Sie können genau angeben, welche Farben Sie verwenden möchten, oder die App Prototyping-KI die Führung übernehmen lassen. In der Chat-Oberflä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 Folgendes:

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

Die Benutzeroberfläche der App anpassen, um sie intuitiver zu gestalten

Anstatt dass der Nutzer beispielsweise eine Schaltfläche drücken muss, um Text zu senden, können Sie ihm erlauben, die Return-Taste auf seiner 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 für Nutzer hinzufügen, zwischen hellem und dunklem Modus zu wählen

Viele Nutzer bevorzugen es, zwischen einem hellen und einem dunklen Design für die App wählen zu können. Überlegen Sie, wo sich ein logischer Ort für diesen Schalter befindet:

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

Tipps zum Verfassen von Prompts und zur Fehlerbehebung

Hilfe bei Prompts erhalten:Wenn Sie Schwierigkeiten haben, dem App Prototyping-Agent zu erklären, was Sie möchten, können Sie Gemini für Google bitten, den Prompt zu optimieren. Weitere Informationen zu effektiven Prompts
Auf anderen Geräten testen:Klicken Sie im Prototypmodus auf Vorschaulink freigeben, um Ihre App auf anderen Geräten zu testen.
Integrierte Tools verwenden:Verwenden Sie in der Codeansicht die integrierten Fehlerbehebungs- und Berichtsfunktionen von Firebase Studio, um Ihre App zu prüfen, Fehler zu beheben und sie zu analysieren.
Einfach anfangen:Arbeiten Sie jeweils an einer Funktion. Beginnen Sie mit einem grundlegenden Funktionsumfang in Ihrem Prototyp und erweitern Sie ihn, sobald die Funktionen wie erwartet funktionieren.
Bugs beschreiben:Wenn etwas nicht funktioniert, beschreiben Sie dem App Prototyping-Agenten das aktuelle Verhalten und anschließend das gewünschte Verhalten.
Bei Bedarf Rollback durchführen:Wenn der App Prototyping-Agent einen Prompt falsch versteht oder ein schwer zu lösendes Problem einführt, klicken Sie auf die Schaltfläche Wiederherstellen, um ein Rollback auf eine frühere Version der App durchzuführen und es mit einem anderen Prompt noch einmal zu versuchen.

6. (Optional) App veröffentlichen

Nachdem Sie die App getestet haben und damit 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 mit der Einrichtung von App Hosting zu beginnen. Der Bereich App veröffentlichen wird angezeigt.
Notieren Sie sich im Schritt Firebase-Projekt den Namen des Firebase-Projekts, das für Sie erstellt wurde, 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 Billing-Konto haben oder ein neues erstellen möchten, klicken Sie auf Cloud Billing-Konto 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. Es wurde entweder beim automatischen Generieren eines Gemini API-Schlüssels oder beim Klicken auf Veröffentlichen erstellt. Anschließend wird mit App Hosting eine vollständig verwaltete Umgebung für Ihre App in Google Cloud eingerichtet.
Klicken Sie auf Ersten Roll-out erstellen. In Firebase Studio wird die Einführung von App Hosting gestartet. Dies kann bis zu zehn Minuten dauern. Weitere Informationen zum Build-Prozess für App-Hosting
Wenn die Einführung abgeschlossen ist, wird die App-Übersicht mit einer URL und App-Statistiken angezeigt, die auf der App-Hosting-Beobachtbarkeit basieren. Wenn Sie anstelle der von Firebase generierten Domain eine benutzerdefinierte Domain wie „beispiel.de“ oder „app.beispiel.de“ verwenden möchten, können Sie im Firebase-Text eine benutzerdefinierte Domain hinzufügen.

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

7. Optional: App überwachen

Im Bereich App-Übersicht von App Hosting finden Sie wichtige Messwerte und Informationen zu Ihrer App. So können Sie die Leistung Ihrer Web-App mit den integrierten Observability-Tools von App Hosting im Blick behalten. Nachdem Ihre Website eingeführt wurde, 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.
Teilen Sie den Link zu Ihrer App oder öffnen Sie Ihre App direkt unter App aufrufen.
Hier finden Sie eine Zusammenfassung der Leistung Ihrer App in den letzten 7 Tagen, einschließlich der Gesamtzahl der Anfragen und des Status Ihres letzten Roll-outs. Klicken Sie auf Details ansehen, um noch mehr Informationen im Firebase-Text aufzurufen.
Sehen Sie sich ein Diagramm mit der Anzahl der Anfragen an, die Ihre App in den letzten 24 Stunden erhalten hat, aufgeschlüsselt nach HTTP-Statuscode.

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

Weitere Informationen zum Verwalten und Überwachen von App-Hosting-Roll-outs

8. Fazit

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