Portfolio-Website mit KI erstellen

1. Einführung

Übersicht

Wo fängt die Entwicklung mit KI heute an? Für die meisten von uns beginnt es mit einer Anfrage oder einem Prototyp. Google AI Studio bietet einen leistungsstarken Build Mode (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. Wenn 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
  • Testen Sie die Anwendung in der interaktiven Vorschau-Sandbox.
  • Die Anwendung direkt über die Google AI Studio-Benutzeroberfläche in Cloud Run bereitstellen

Lerninhalte

  • So verwenden Sie den Build-Modus von Google AI Studio, um schnell einen Front-End-Dienst in natürlicher Sprache zu prototypisieren.
  • So stellen Sie Ihre AI Studio-Anwendung als serverlosen Container in Cloud Run bereit.

2. Projekt einrichten

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

Google-Konto- und Ebeneninformationen

  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 Konten von Bildungseinrichtungen können Workspace-Richtlinien erzwungen werden, durch die experimentelle Funktionen oder Cloud-Integrationen deaktiviert werden.
  2. Abrechnungsdetails für Bereitstellungen ansehen:
    • 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 Speicherlimits, CPU-Ressourcen und APIs.

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

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

  1. Rufen Sie das Google AI Studio-Apps-Steuerfeld auf und klicken Sie auf Neue App.
  2. Geben Sie im Chat-Prompt-Feld die Beschreibung für Ihre Portfolioanwendung 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).
  3. Klicken Sie auf Erstellen, um die App-Generierung zu starten.

4. Testen und Wiederholen

Bevor Sie den Dienst live schalten, sollten Sie Validierungsprüfungen in der interaktiven Vorschau durchführen.

  1. Öffnen Sie das Vorschaufenster in Google AI Studio.
  2. Interagieren Sie mit Navigationsschaltflächen, Links oder Layouts in der Vorschau-Sandbox, um die visuelle Darstellung zu überprüfen.
    • Hinweis zum Beheben von Fehlern: 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 Fix (Beheben) angezeigt. Sie können den Agenten dann bitten, das Problem automatisch zu diagnostizieren und zu beheben.
    Ort des Buttons „Google AI Studio Fix“
  3. Wenn Sie das Styling oder Verhalten ändern möchten, geben Sie dem Agent über das Chatfenster entsprechende Anweisungen. 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 sehen Sie sich die Änderungen im Vorschau-Browser an.

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.Speicherort des Veröffentlichungsbuttons in Google AI Studio
  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.
  3. Wenn Sie die Bereitstellung zum ersten Mal vornehmen 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. Wenn die Bereitstellung abgeschlossen ist, kopieren Sie die generierte App-URL und rufen Sie den Link zur Live-Anwendung in einem Browsertab auf.
  7. Testen Sie die Live-Webanwendung in Ihrem Browser.

6. (OPTIONAL) Benutzerdefinierte Domain hinzufügen

Standardmäßig wird Ihr Dienst in Cloud Run auf einer von Google verwalteten run.app-Subdomain gehostet. Wenn Sie eine private Domain wie yourname.com oder portfolio.yourname.com verwenden möchten, 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 Cloud Run-Domainzuordnungen auf.
  2. Klicken Sie auf Zuordnung hinzufügen.
  3. Wählen Sie 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-Registrator erstellen müssen.

Schritt 2: DNS-Registrar konfigurieren

  1. Melden Sie sich im Verwaltungsbereich Ihres Domain-Registrars an, z. B. bei Squarespace, GoDaddy oder Namecheap.
  2. Öffnen Sie die Seite für die DNS-Verwaltung oder die Konfiguration der 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 Apex-Domainzuordnungen (z.B. yourname.com) die aufgeführten A- und AAAA-Einträge hinzu.
    • Fügen Sie für Subdomainzuordnungen (z.B. portfolio.yourname.com) den aufgeführten CNAME-Datensatz hinzu.
  4. Speichern Sie die Änderungen an der DNS-Konfiguration.

Schritt 3: Warten, bis das SSL-Zertifikat bereitgestellt wird

Sobald die DNS-Änderungen übernommen wurden, gilt Folgendes:

  1. Google Cloud stellt automatisch ein verwaltetes SSL/TLS-Zertifikat für Ihre sichere Verbindung bereit.
  2. Dieser Vorgang dauert in der Regel etwa 15 Minuten, kann aber je nach DNS-Weiterleitung bis zu 24 Stunden in Anspruch nehmen.
  3. Anschließend wird Ihre benutzerdefinierte Domain sicher zu Ihrer Portfolio-Website weitergeleitet.

7. Bereinigen

So vermeiden Sie unvorhergesehene Abrechnungsgebühren oder bereinigen Ihre Workspace-Ressourcen:

  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 Google Cloud Console-Projekteinstellungen 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 kannst du das Badge Builder Journey abgeschlossen erhalten.

Unter goo.gle/builders finden Sie das nächste Lab.