So erstellen Sie eine Angular-App über Google AI Studio

Sie möchten schnell einen Prototyp einer KI-gestützten Angular-App erstellen – ohne sich mit Boilerplate-Setup oder veralteten SDK-Mustern herumschlagen zu müssen. Der Build-Modus von Google AI Studio ermöglicht es Ihnen, aus einer natürlichsprachlichen Eingabe eine funktionierende Angular-Anwendung zu generieren, sie nach GitHub zu exportieren und bereitzustellen. So funktioniert der Workflow tatsächlich.

Was der Build-Modus von Google AI Studio leistet

Der Build-Modus von Google AI Studio ist nicht nur eine Chat-Oberfläche, um Gemini Fragen zu stellen. Es ist eine App-Generierungsumgebung, die vollständige Angular-Projekte aus beschreibenden Eingaben erstellt.

Der Workflow sieht typischerweise so aus:

1. Eingabe – Beschreiben Sie Ihre App in natürlicher Sprache
2. Konfiguration – Wählen Sie Angular (TypeScript) als Framework
3. Generierung – Überprüfen Sie den Blueprint und lassen Sie dann Gemini den Code erstellen
4. Export – Pushen Sie nach GitHub oder deployen Sie auf Cloud Run

Dies unterscheidet sich von der manuellen Integration der Angular + Gemini API in einem bestehenden Projekt. Der Build-Modus übernimmt automatisch das Projekt-Scaffolding, die Komponentenstruktur und die initiale Verdrahtung.

Voraussetzungen: Cloud-Projekt und API-Schlüssel

Bevor Sie Apps generieren können, benötigen Sie ein Google Cloud-Projekt, das mit AI Studio verknüpft ist. Ihr API-Schlüssel wird in AI Studio erstellt und verwaltet und ist mit diesem Cloud-Projekt verknüpft.

Navigieren Sie zu Google AI Studio, melden Sie sich mit Ihrem Google-Konto an und erstellen oder wählen Sie ein Cloud-Projekt. Die Plattform stellt einen API-Schlüssel bereit, der mit diesem Projekt verknüpft ist.

Wichtig: Dieser API-Schlüssel ist für Entwicklung und Prototyping gedacht. AI Studio bietet Zugriff auf Entwicklerebene mit niedrigeren Rate Limits als produktive Umgebungen. Für öffentlich zugängliche Anwendungen benötigen Sie eine andere Architektur (siehe unten).

Generierung Ihrer Angular-App

Öffnen Sie den Tab Build in Google AI Studio. Wählen Sie die Vorlage Angular (TypeScript) aus den verfügbaren Framework- oder Vorlagenoptionen.

Schreiben Sie nun Ihre Eingabe. Seien Sie spezifisch bezüglich Features, Datenstrukturen und UI-Anforderungen:

Create a task management dashboard with Angular. Include a table showing task name, 
assignee, due date, and status. Add filters for status and assignee. 
Use a clean, minimal design with a sidebar navigation.

Nach dem Absenden gibt der Build-Modus einen Blueprint zurück – einen übergeordneten Plan, der App-Struktur, Features und Styling abdeckt. Überprüfen Sie diesen vor der Bestätigung. Sie können den Plan im Dialog anpassen.

Nach der Bestätigung generiert Gemini das vollständige Angular-Projekt. Die Ausgabe verwendet moderne Angular-Muster: Standalone Components, durchgängig TypeScript und aktuelle Projektstruktur-Konventionen.

Verständnis des generierten Codes

Die generierte App umfasst typischerweise:

• Standalone Components (keine NgModules)
• TypeScript-Interfaces für Datenmodelle
• Basis-Routing-Konfiguration
• Service-Klassen für die Datenverarbeitung

Wenn Ihre Eingabe KI-Features anfordert (wie Textgenerierung oder Bildanalyse), kann der generierte Code eine Integration mit der Gemini API unter Verwendung des Google GenAI SDK (@google/genai) enthalten. Dies ist das aktuelle produktionsreife JavaScript/TypeScript SDK – ältere Pakete sind veraltet.

Sie finden das SDK und Details zur API-Nutzung in der offiziellen Gemini API-Dokumentation. Vermeiden Sie das Hardcoding spezifischer Modell-Identifikatoren, da sich diese mit Deprecation-Zyklen ändern.

AI Studio vs. Vertex AI: Den Unterschied kennen

Ein häufiges Missverständnis: AI Studio ist nicht Ihre produktive Laufzeitumgebung.

Verwenden Sie AI Studio zum Prototyping und zur Validierung Ihrer App. Wenn Sie für produktiven Traffic bereit sind, migrieren Sie zu Vertex AI oder implementieren Sie eine ordnungsgemäße Backend-Architektur.

Sicherheit: API-Schlüssel niemals in Angular exponieren

Hier ist die kritische Regel: API-Schlüssel dürfen nicht in Ihr Angular-Frontend eingebettet werden.

Generierte Apps, die die Gemini API aufrufen, benötigen einen Backend-Proxy. Die korrekte Architektur:

Angular Frontend → Ihr Backend-Server → Gemini API

Ihr Backend hält den API-Schlüssel und stellt authentifizierte Anfragen an Gemini. Die Angular-App ruft Ihre Backend-Endpunkte auf. Dies verhindert die Exponierung des Schlüssels in den Browser-Entwicklertools oder bei der Netzwerkinspektion.

Für lokales Prototyping können Sie vorübergehend Umgebungsvariablen verwenden. Für alles, was über persönliche Tests hinausgeht, implementieren Sie die Backend-Schicht.

Export und Deployment

Sobald Sie mit Ihrer generierten App zufrieden sind, haben Sie zwei Wege:

Export nach GitHub: Klicken Sie auf die Export-Option, um das vollständige Projekt in ein neues oder bestehendes Repository zu pushen. Von dort aus integrieren Sie es in Ihre CI/CD-Pipeline.

Deployment auf Cloud Run: AI Studio bietet integriertes Deployment auf Cloud Run für schnelles Hosting. Dies deployt einen Container, der die gebaute Angular-Anwendung bereitstellt. Es funktioniert gut für Demos und interne Tools, obwohl produktive Apps typischerweise zusätzliche Konfiguration benötigen.

Fazit

Der Build-Modus von Google AI Studio beschleunigt das Angular-Prototyping erheblich. Sie gelangen in Minuten statt Stunden von der Idee zum funktionierenden Code.

Der Schlüssel liegt darin, zu verstehen, was der Build-Modus bietet (schnelles Scaffolding und Iteration) und was nicht (produktionsreife Sicherheit und Skalierung). Verwenden Sie ihn, um Ideen schnell zu validieren, und wenden Sie dann ordnungsgemäße Architekturmuster an, bevor Sie an Benutzer ausliefern.

Beginnen Sie mit einer spezifischen Eingabe, generieren Sie Ihre App und iterieren Sie von dort aus.

FAQs

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.