Portfolio-Website mit KI erstellen

1. Einführung

Übersicht

Wo beginnt die Entwicklung mit KI heute? Für die meisten von uns mit einer Abfrage oder einem Prototyp. Google AI Studio bietet einen leistungsstarken Build-Modus (oft als „Vibe-Coding“ bezeichnet), mit dem Sie Webanwendungen mithilfe der von Gemini-Modellen gesteuerten Codeerstellung entwerfen, testen und erstellen können.

In diesem Codelab erstellen Sie eine persönliche Portfolio-Website. Der AI Studio-Agent schreibt den Frontend-Code. Sobald die App fertig ist, können Sie sie mit einem einzigen Klick direkt in Cloud Run bereitstellen.

Aufgaben

• Google AI Studio auffordern, einen Prototyp für eine persönliche Portfolio-Website zu erstellen
• Anwendung in der interaktiven Vorschau-Sandbox testen
• Anwendung direkt über die Google AI Studio-UI in Cloud Run bereitstellen

Lerninhalte

• Verwendung des Build-Modus von Google AI Studio, um schnell einen Prototyp für einen Frontend-Dienst in natürlicher Sprache zu erstellen
• Bereitstellung Ihrer AI Studio-Anwendung als serverloser Container in Cloud Run

2. Projekt einrichten

Prüfen Sie vor dem Start von AI Studio Ihren Kontostatus und die Voraussetzungen.

Google-Konto und Informationen zur Ebene

1. Wenn Sie noch kein Google-Konto haben, erstellen Sie ein Google-Konto.
   • Tipp: Verwenden Sie für dieses Lab nach Möglichkeit ein privates Google-Konto. Bei Gruppen-, Unternehmens- oder Schulkonten können Workspace-Richtlinien erzwungen werden, die experimentelle Funktionen oder Cloud-Integrationen deaktivieren.
2. Abrechnungsdetails für Bereitstellungen prüfen:
   • Google Cloud Starter-Stufe: Ermöglicht die kostenlose Veröffentlichung von bis zu zwei Full-Stack-Anwendungen in einer ausgewählten Region, ohne dass ein vollständiges Google Cloud-Rechnungskonto eingerichtet werden muss.
   • Standardbereitstellung: Stellt eine Verbindung zu einem vorhandenen kostenpflichtigen Google Cloud-Projekt her und erweitert die Speicherlimits, CPU-Ressourcen und APIs.

3. Portfolio-Website im Build-Modus von AI Studio erstellen

Erstellen Sie die Anwendungsshell und fordern Sie den KI-Codeassistenten auf, das Frontend-Layout zu erstellen.

1. Rufen Sie das Google AI Studio-Apps-Panel auf und klicken Sie auf Neue App.
2. Geben Sie im Chat-Prompt-Feld die Beschreibung für Ihre Portfolio-Anwendung ein:

   Build a professional personal portfolio website. The site should
   have a modern, responsive design and sections for my biography,
   projects showcase, skills, and links to my professional profiles
   (e.g., GitHub, LinkedIn).
   

   Über diesen Link wird das Prompt-Feld automatisch ausgefüllt.
3. Klicken Sie auf Erstellen , um den Prozess zur Anwendungsgenerierung zu starten.

4. Testen und Wiederholen

Führen Sie vor dem Start des Dienstes Validierungsprüfungen in der interaktiven Vorschau aus.

1. Öffnen Sie das Vorschaufenster in Google AI Studio.
2. Interagieren Sie in der Vorschau-Sandbox mit Navigationsschaltflächen, Links oder Layouts, um die visuelle Darstellung zu prüfen.
   • Hinweis zur Fehlerbehebung: Während der Generierung oder des Tests können gelegentlich Laufzeitprobleme oder Kompilierungsfehler auftreten. In diesem Fall wird in AI Studio im Chat die Schaltfläche Beheben angezeigt, über die Sie den Agenten auffordern können, das Problem automatisch zu diagnostizieren und zu beheben.
   
3. Wenn Sie das Styling oder Verhalten ändern möchten, weisen Sie den Agenten über das Chatfenster an. Beispiel:
   • "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
   • "Include a new section to showcase my recent presentations and talks."
4. Warten Sie, bis der Agent die Codebasis aktualisiert hat, und prüfen Sie die Änderungen im Vorschau-Browser.

5. In Cloud Run bereitstellen

Sobald Ihr Prototyp voll funktionsfähig ist, stellen Sie ihn als öffentlichen Dienst in Cloud Run bereit.

1. Klicken Sie rechts oben in Google AI Studio auf die Schaltfläche Veröffentlichen, um den Bereitstellungsassistenten zu starten.
2. Klicken Sie auf Jetzt starten , um Ihr Google Cloud-Projekt zu konfigurieren.
   • Prüfen Sie, ob das Drop-down-Menü Google Cloud-Projekt mit dem Projekt übereinstimmt, das Sie Ihrem Arbeitsbereich zugeordnet haben.
   • AI Studio generiert automatisch eine eindeutige Dienst-ID für die Cloud Run-Instanz.
   • Optional können Sie im Rahmen Ihrer Bereitstellungskonfiguration ein benutzerdefiniertes .ai.studio-URL-Präfix angeben, z.B. your-portfolio-name.ai.studio.
3. Wenn Sie zum ersten Mal bereitstellen und Standardparameter von Google Cloud verwenden, werden Sie möglicherweise aufgefordert, einen Organisationstyp anzugeben und Abrechnungsdetails anzugeben.
4. Klicken Sie auf App veröffentlichen.
5. Die Schritte zum Erstellen des Containers, zur Containerregistrierung und zur Dienstbereitstellung erfolgen im Hintergrund. Dieser Vorgang dauert normalerweise 2 bis 4 Minuten.
6. Kopieren Sie nach Abschluss der Bereitstellung die generierte App-URL und rufen Sie den Link zur Live-Anwendung auf einem Browsertab auf.
7. Testen Sie die Live-Webanwendung in Ihrem Browser.

6. (OPTIONAL) Benutzerdefinierte Domain hinzufügen

Standardmäßig hostet Cloud Run Ihren Dienst auf einer von Google verwalteten run.app-Subdomain. Wenn Sie eine persönliche Domain verwenden möchten (z. B. yourname.com oder portfolio.yourname.com), können Sie Ihrem Dienst eine benutzerdefinierte Domain zuordnen.

Schritt 1: Domainzuordnung in Cloud Run hinzufügen

1. Rufen Sie in der Google Cloud Console die Seite „Domainzuordnungen für Cloud Run“ auf.
2. Klicken Sie auf Zuordnung hinzufügen.
3. Wählen Sie im Drop-down-Menü den Cloud Run-Dienst aus, den Sie zuordnen möchten.
4. Geben Sie Ihren benutzerdefinierten Domainnamen ein, z. B. yourname.com oder portfolio.yourname.com.
5. Klicken Sie auf Weiter oder Fortfahren. In Cloud Run werden die DNS-Einträge (z. B. A/AAAA- oder CNAME-Einträge) angezeigt, die Sie bei Ihrem Domain-Registrar erstellen müssen.

Schritt 2: DNS-Registrar konfigurieren

1. Melden Sie sich im Verwaltungsbereich Ihres Domain-Registrars an (z. B. Squarespace, GoDaddy oder Namecheap).
2. Öffnen Sie die Konfigurationsseite für die DNS-Verwaltung oder die DNS-Einstellungen für Ihre Domain.
3. Erstellen Sie die DNS-Einträge, die den Werten im Cloud Run-Zuordnungsassistenten entsprechen:
   • Fügen Sie für Zuordnungen der Apex-Domain (z.B. yourname.com) die aufgeführten A und AAAA Einträge hinzu.
   • Fügen Sie für Zuordnungen der Subdomain (z.B. portfolio.yourname.com) den aufgeführten CNAME Eintrag hinzu.
4. Speichern Sie die Änderungen an der DNS-Konfiguration.

Schritt 3: Auf die Bereitstellung des SSL-Zertifikats warten

Sobald die DNS-Änderungen übernommen wurden:

1. Google Cloud stellt automatisch ein verwaltetes SSL/TLS-Zertifikat für Ihre sichere Verbindung bereit.
2. Dieser Vorgang dauert normalerweise etwa 15 Minuten, kann aber je nach DNS-Übertragung bis zu 24 Stunden dauern.
3. Nach Abschluss des Vorgangs wird Ihre benutzerdefinierte Domain sicher zu Ihrer Portfolio-Website weitergeleitet.

7. Bereinigen

So vermeiden Sie unvorhergesehene Abrechnungsgebühren oder bereinigen Ihre Arbeitsbereichsressourcen:

1. Rufen Sie in Google AI Studio die Seite „Apps“ auf.
2. Suchen Sie Ihre Anwendung im Raster oder in der Liste.
3. Klicken Sie auf das Papierkorbsymbol, um den App-Status zu löschen und die Veröffentlichung des Dienstes in Cloud Run aufzuheben.
4. Wenn Sie die Bereitstellung mit einem Standardprojekt vorgenommen haben und alle Ressourcen vollständig herunterfahren möchten, rufen Sie die Projekteinstellungen in der Google Cloud Console auf und löschen Sie das zugrunde liegende Projekt.

8. Fazit

Glückwunsch! Sie haben eine Portfolio-Website direkt in Google AI Studio entworfen, entwickelt und bereitgestellt.

Weitere Informationen

Über diesen Link können Sie das Badge Completed Builder Journey (Builder-Reise abgeschlossen) anfordern.

Wenn Sie fortfahren möchten, rufen Sie goo.gle/builders auf, um das nächste Lab zu finden.

• Cloud Run-Dokumentation
• Apps in Google AI Studio erstellen