GSP1337

Übersicht

In diesem Lab erfahren Sie, wie Sie in Google AI Studio schnell Prototypen von Anwendungen erstellen. Sie entdecken vordefinierte KI-Anwendungen und erstellen eigene aus Vorlagen, Sie verwenden und optimieren Text-Prompts und lernen, eigene Kreationen zu verwalten und freizugeben. Im Rahmen eines Hackathons zur Entwicklung von Lösungen sollen Sie innerhalb kurzer Zeit mehrere Proof of Concepts von KI-Anwendungen entwickeln und freigeben.

Lerninhalte

Aufgaben in diesem Lab:

• Von Google vordefinierte Apps entdecken
• App mit einer Vorlage erstellen und mit dem Codeassistenten ändern
• Datengestützte Apps aus einem einzelnen Text-Prompt erstellen
• App-Prototypen speichern, herunterladen und ansehen

Einrichtung und Anforderungen

Vor dem Klick auf „Start Lab“ (Lab starten)

Lesen Sie diese Anleitung. Labs sind zeitlich begrenzt und können nicht pausiert werden. Der Timer beginnt zu laufen, wenn Sie auf Lab starten klicken, und zeigt Ihnen, wie lange Google Cloud-Ressourcen für das Lab verfügbar sind.

In diesem praxisorientierten Lab können Sie die Lab-Aktivitäten in einer echten Cloud-Umgebung durchführen – nicht in einer Simulations- oder Demo-Umgebung. Dazu erhalten Sie neue, temporäre Anmeldedaten, mit denen Sie für die Dauer des Labs auf Google Cloud zugreifen können.

Für dieses Lab benötigen Sie Folgendes:

• Einen Standardbrowser (empfohlen wird Chrome)

• Zeit für die Durchführung des Labs – denken Sie daran, dass Sie ein begonnenes Lab nicht unterbrechen können.

Google AI Studio öffnen

1. Klicken Sie auf Lab starten. Im Lab-Bereich werden die temporären Anmeldedaten für dieses Lab angezeigt.

   • Hinweis: Wenn es sich um ein kostenpflichtiges Lab handelt, werden Sie aufgefordert, eine Zahlungsmethode auszuwählen.

2. Öffnen Sie Google AI Studio in einem Inkognitofenster. Die Google Log-in-Seite wird angezeigt.

   • Tipp: Ordnen Sie die Tabs für das Lab und AI Studio nebeneinander in separaten Fenstern an, um leichter darauf zugreifen zu können.

3. Kopieren Sie den nachfolgenden Nutzernamen und fügen Sie ihn in das Feld E-Mail ein. Klicken Sie dann auf Weiter.

   {{{user_0.username | "Username"}}}

4. Kopieren Sie das nachfolgende Passwort und fügen Sie es in das Feld Passwort eingeben ein. Klicken Sie dann auf Weiter.

   {{{user_0.password | "Password"}}}

5. Akzeptieren Sie die Nutzungsbedingungen auf dem Bildschirm, um fortzufahren.

Sie sind jetzt mit Ihrem temporären Teilnehmerkonto in Google AI Studio angemeldet.

Aufgabe 1: Vordefinierte App entdecken

Bei einem Hackathon müssen Sie sich zuerst einen Überblick verschaffen, welche Bausteine und Beispiele verfügbar sind. Sie beginnen mit einer vordefinierten Chatbot-App.

1. Klicken Sie im linken Navigationsmenü auf Speichern aktivieren (über der Option „Erstellen“) und wählen Sie Ihren Nutzernamen aus.

2. Klicken Sie auf Erstellen.

3. Klicken Sie auf den Tab Galerie > Alle Apps und scrollen Sie durch die Galerie mit Anwendungsvorlagen.

4. Suchen Sie nach der App ChatterBots und klicken Sie darauf.

5. Klicken Sie auf Zulassen, um den Zugriff auf das Mikrofon zu gewähren.

6. Die App wird in der IDE-Ansicht geöffnet. Machen Sie sich mit der Benutzeroberfläche vertraut. Der Codeassistent befindet sich links, der Code-Editor bzw. Datei-Viewer in der Mitte und eine Live-Vorschau des ausgeführten Chatbots rechts.

7. Sie können sich eine Vorschau der App ansehen, die ChatterBot-Voreinstellungen erkunden und Ihren eigenen ChatterBot basierend auf den von Ihnen definierten Merkmalen erstellen.

8. Sehen Sie sich den generierten Code an. Klicken Sie hierzu im Code-Editor auf den Button Dateibaumansicht anzeigen, um die Codestruktur zu sehen. Klicken Sie auf eine Datei wie App.tsx, um den Hauptanwendungscode aufzurufen, oder auf eine Datei im Ordner „Komponenten“, um zu sehen, woraus ein UI-Element besteht.

Aufgabe 2: App-Prototyp aus einer Vorlage erstellen und ändern

Als Nächstes haben Sie entschieden, dass ein einfaches Lernkartentool für Ihr Hackathon-Projekt nützlich wäre. Sie erstellen eine Lernkarte aus einer Vorlage und verwenden dann den Codeassistenten, um das Erscheinungsbild schnell an das Branding Ihres Projekts anzupassen.

App generieren

1. Klicken Sie auf Zurück zum Start und kehren Sie zur Startseite zurück, indem Sie oben links auf das Google AI Studio-Logo klicken.

2. Klicken Sie im linken Navigationsmenü auf Erstellen > Start.

3. Suchen Sie die Vorlage Flash UI und klicken Sie darauf, um die Anwendung zu generieren.

App mit dem Codeassistenten ändern

1. Interagieren Sie im Bereich Vorschau auf der rechten Seite mit den Standardlernkarten, um zu sehen, wie sie funktionieren.

2. Geben Sie Large Language Models in das Eingabefeld ein und klicken Sie auf den Pfeil, um einen themenspezifischen Satz zu generieren.

3. Richten Sie Ihre Aufmerksamkeit nun auf das Eingabefeld Codeassistent unten links. Geben Sie den folgenden Befehl ein, um Stil und Logik der App zu ändern:

4. Klicken Sie auf Prompt senden. Beobachten Sie, wie der Assistent den Anwendungscode im Editor ändert.

5. Sobald der Code aktualisiert wurde, testen Sie beide Änderungen im Bereich Vorschau. Die Lernkarten sollten hellgrün sein und Sie sollten jeweils nur eine Karte umdrehen können.

6. Als Nächstes fügen Sie ein weiteres Feature hinzu. Geben Sie im Eingabefeld Codeassistent den folgenden neuen Befehl ein:

7. Klicken Sie auf Prompt senden. Der Assistent fügt der Benutzeroberfläche einen neuen Button hinzu und ändert den Code, um die neue Logik einzubeziehen.

8. Testen Sie das neue Feature abschließend im Bereich Vorschau. Klicken Sie auf den neuen Button Ich lasse mich überraschen > 5 weitere hinzufügen und bestätigen Sie, dass Ihrem Satz fünf weitere, eindeutige Lernkarten hinzugefügt werden.

9. Klicken Sie neben dem App-Namen Flash UI auf das Stiftsymbol, benennen Sie die Anwendung in Lernkartenersteller um, behalten Sie die Beschreibung als Standardeinstellung bei und klicken Sie auf Speichern.

Klicken Sie auf Fortschritt prüfen.

Aufgabe 3: App mit einem Text-Prompt erstellen

Hier kommt die Hauptaufgabe des Hackathons: Entwickeln Sie Ihre Hauptfeatures von Grund auf. Sie erstellen einen Reiseplaner und beschreiben ihn in einfachem Deutsch. Sie bitten das Modell, eine Benutzeroberfläche zu erstellen, auf der strukturierte Daten übersichtlich dargestellt werden können.

1. Kehren Sie in der Galerie zur Seite Erstellen zurück.

2. Geben Sie oben auf der Seite in der Haupt-Promptleiste die folgende detaillierten Anfrage ein:

3. Klicken Sie auf Erstellen und warten Sie, bis der Codeassistent die gesamte Anwendung generiert hat.

4. Sobald die App angezeigt wird, können Sie ihre Funktionen im Bereich Vorschau testen. Geben Sie im Eingabefeld für die Stadt Rom ein und drücken Sie die Eingabetaste.

5. Sehen Sie sich die Ausgabe an. In der App sollte ein strukturierter 3‑Tages-Reiseplan für Rom angezeigt werden. Das zeigt, dass die KI aus Ihrem Text-Prompt erfolgreich eine datengesteuerte Benutzeroberfläche erstellt hat.

6. Klicken Sie oben im Bereich neben dem App-Namen auf das Stiftsymbol, benennen Sie die Anwendung in KI-Reiseplan-Generator um, behalten Sie die Beschreibung als Standardeinstellung bei und klicken Sie auf Speichern.

7. Optional: Verwenden Sie den Codeassistenten, um beliebige Teile der Anwendung zu ändern.

Klicken Sie auf Fortschritt prüfen.

Aufgabe 4: Apps speichern, herunterladen und ansehen

Ihr Prototyp für den Reiseplaner funktioniert. Im letzten Schritt des Hackathons laden Sie Ihren Fortschritt herunter und teilen das Projekt mit Ihrem Team.

Ihre App wird jetzt im Bereich „Meine Apps“ auf der Seite „Erstellen“ gespeichert.

1. Klicken Sie in derselben Symbolleiste auf das Symbol Herunterladen. Eine ZIP-Datei mit dem vollständigen Quellcode Ihrer Anwendung wird auf Ihren Computer heruntergeladen.

   • Hinweis: Sie können diesen Code verwenden, um die Entwicklung lokal in Ihrem eigenen Editor fortzusetzen.

2. Sehen Sie sich an, wie Sie Ihre App veröffentlichen können. Klicken Sie in derselben Symbolleiste auf den Button App bereitstellen.

   • Hinweis: In diesem Lab schließen Sie nicht die vollständige Bereitstellung ab. Dieser Schritt zeigt Ihnen jedoch den integrierten Pfad zum Veröffentlichen Ihrer Anwendung in Google Cloud.

Anwendungsprototypen ansehen

1. Rufen Sie die Startseite auf und klicken Sie oben links auf das Google AI Studio-Logo.

2. Klicken Sie im linken Navigationsmenü auf Erstellen.

3. Klicken Sie auf den Tab Meine Apps > Von mir erstellt, um die Prototypen aufzurufen, die Sie geändert und erstellt haben. Sie sollten die beiden Anwendungen Lernkartenersteller und KI-Reiseplan-Generator sehen.

Glückwunsch!

Glückwunsch! Sie haben Google AI Studio erfolgreich genutzt, um schnell funktionale Anwendungsprototypen zu erstellen, anzupassen und zu testen. Sie haben gelernt, wie Sie vordefinierte Vorlagen nutzen, Code mit natürlicher Sprache ändern und eine vollständige datengesteuerte Anwendung aus einem einzelnen Text-Prompt generieren können. Sie sind jetzt bestens gerüstet, um Ihre eigenen KI-basierten Ideen zu verwirklichen.

Google Cloud-Schulungen und -Zertifizierungen

In unseren Schulungen erfahren Sie alles zum optimalen Einsatz unserer Google Cloud-Technologien und können sich entsprechend zertifizieren lassen. Unsere Kurse vermitteln technische Fähigkeiten und Best Practices, damit Sie möglichst schnell mit Google Cloud loslegen und Ihr Wissen fortlaufend erweitern können. Wir bieten On-Demand-, Präsenz- und virtuelle Schulungen für Anfänger wie Fortgeschrittene an, die Sie individuell in Ihrem eigenen Zeitplan absolvieren können. Mit unseren Zertifizierungen weisen Sie nach, dass Sie Experte im Bereich Google Cloud-Technologien sind.

Anleitung zuletzt am 12. März 2026 aktualisiert

Lab zuletzt am 12. März 2026 getestet

© 2026 Google LLC. Alle Rechte vorbehalten. Google und das Google-Logo sind Marken von Google LLC. Alle anderen Unternehmens- und Produktnamen können Marken der jeweils mit ihnen verbundenen Unternehmen sein.