Uruchom witrynę portfolio z pomocą AI

1. Wprowadzenie

Przegląd

Od czego zaczyna się dziś tworzenie aplikacji z wykorzystaniem AI? Większość z nas zaczyna od zapytania lub prototypu. Google AI Studio oferuje zaawansowany Tryb tworzenia (często nazywany „vibe coding”), który umożliwia projektowanie, testowanie i tworzenie aplikacji internetowych za pomocą generowania kodu opartego na modelach Gemini.

W tych ćwiczeniach z programowania utworzysz osobistą witrynę portfolio. Agent AI Studio napisze kod frontendu. Gdy aplikacja będzie gotowa, wdrożysz ją jednym kliknięciem bezpośrednio w Cloud Run.

gotowa wersja strony portfolio,

Jakie zadania wykonasz

  • Poprosisz Google AI Studio o utworzenie prototypu osobistej witryny portfolio.
  • Przetestujesz aplikację w interaktywnej piaskownicy podglądu.
  • Wdrożysz aplikację w Cloud Run bezpośrednio z interfejsu Google AI Studio.

Czego się nauczysz

  • Jak używać trybu tworzenia w Google AI Studio do szybkiego tworzenia prototypów usługi frontendowej za pomocą języka naturalnego.
  • Jak wdrożyć aplikację AI Studio jako kontener bezserwerowy w Cloud Run.

2. Konfiguracja projektu

Zanim uruchomisz AI Studio, sprawdź stan konta i wymagania wstępne.

Konto Google i informacje o poziomie

  1. Jeśli nie masz jeszcze konta Google, utwórz je.
    • Wskazówka: jeśli to możliwe, w tych ćwiczeniach użyj osobistego konta Google. Konta grupowe, firmowe lub szkolne mogą wymuszać stosowanie zasad Workspace, które wyłączają funkcje eksperymentalne lub integracje z chmurą.
  2. Sprawdź szczegóły płatności za wdrożenia:
    • Poziom startowy Google Cloud: umożliwia bezpłatne opublikowanie maksymalnie 2 aplikacji full stack w wybranym regionie bez konieczności tworzenia pełnego konta rozliczeniowego Google Cloud.
    • Wdrożenie standardowe: łączy się z istniejącym płatnym projektem w chmurze Google Cloud i zwiększa limity miejsca na dane, zasobów procesora i interfejsów API.

3. Tworzenie witryny portfolio w trybie tworzenia AI Studio

Utwórz powłokę aplikacji i poproś asystenta kodu AI o utworzenie układu frontendu.

  1. Otwórz panel Aplikacje w Google AI Studio i kliknij Nowa aplikacja.
  2. W polu prompta na czacie wpisz opis aplikacji portfolio: 
    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).
    Ten link automatycznie wypełni pole prompta.
  3. Aby rozpocząć proces generowania aplikacji, kliknij Utwórz.

4. Testowanie i wdrożenie

Zanim uruchomisz usługę, przeprowadź testy weryfikacyjne w interaktywnym podglądzie.

  1. Otwórz okienko podglądu w Google AI Studio.
  2. Aby sprawdzić wygląd, kliknij dowolne przyciski nawigacyjne, linki lub układy w piaskownicy podglądu.
    • Uwaga na temat naprawiania błędów: podczas generowania lub testowania mogą czasami wystąpić problemy z czasem działania lub błędy kompilacji. W takim przypadku AI Studio wyświetli na czacie przycisk Napraw , który umożliwia poproszenie agenta o automatyczne zdiagnozowanie i naprawienie problemu.
    Lokalizacja przycisku Popraw w Google AI Studio
  3. Jeśli chcesz zmienić styl lub zachowanie, poinstruuj agenta w oknie czatu. Na przykład:
    • "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. Poczekaj, aż agent zaktualizuje bazę kodu, i sprawdź aktualizacje w przeglądarce podglądu.

5. Wdrożenie w Cloud Run

Gdy prototyp będzie w pełni funkcjonalny, wdróż go jako usługę publiczną w Cloud Run.

  1. W prawym górnym rogu Google AI Studio kliknij przycisk Opublikuj, aby uruchomić kreatora wdrożenia.Lokalizacja przycisku publikowania w Google AI Studio
  2. Aby skonfigurować projekt Google Cloud, kliknij Rozpocznij.
    • Sprawdź, czy menu Projekt Google Cloud odpowiada projektowi powiązanemu z Twoim obszarem roboczym.
    • AI Studio automatycznie wygeneruje unikalny identyfikator usługi dla instancji Cloud Run.
    • Opcjonalnie możesz określić niestandardowy prefiks adresu URL .ai.studio (np. your-portfolio-name.ai.studio) w ramach konfiguracji wdrożenia.
  3. Jeśli wdrażasz aplikację po raz pierwszy i używasz standardowych parametrów Google Cloud, może pojawić się prośba o określenie typu organizacji i podanie danych rozliczeniowych.
  4. Kliknij Opublikuj aplikację.
  5. Kroki tworzenia kontenera, rejestracji kontenera i wdrożenia usługi są wykonywane w tle. Ten proces zwykle trwa 2–4 minuty.
  6. Po zakończeniu wdrożenia skopiuj wygenerowany adres URL aplikacji i otwórz link do aplikacji w karcie przeglądarki.
  7. Przetestuj aplikację internetową w przeglądarce.

6. (OPCJONALNIE) Dodawanie domeny niestandardowej

Domyślnie Cloud Run hostuje Twoją usługę w zarządzanej przez Google subdomenie run.app. Jeśli chcesz używać domeny osobistej (np. yourname.com lub portfolio.yourname.com), możesz zmapować domenę niestandardową na swoją usługę.

Krok 1. Dodaj mapowanie domeny w Cloud Run

  1. W konsoli Google Cloud otwórz stronę Mapowania domen w Cloud Run.
  2. Kliknij Dodaj mapowanie.
  3. W menu wybierz usługę Cloud Run, którą chcesz zmapować.
  4. Wpisz nazwę domeny niestandardowej (np. yourname.com lub portfolio.yourname.com).
  5. Kliknij Dalej lub Kontynuuj. Cloud Run wyświetli rekordy DNS (np. A/AAAA lub CNAME rekordy), które musisz utworzyć u rejestratora domeny.

Krok 2. Skonfiguruj rejestratora DNS

  1. Zaloguj się w panelu administracyjnym rejestratora domeny (np. Squarespace, GoDaddy lub Namecheap).
  2. Otwórz stronę konfiguracji zarządzania DNS lub ustawień DNS domeny.
  3. Utwórz rekordy DNS odpowiadające wartościom wyświetlanym w kreatorze mapowania Cloud Run:
    • W przypadku mapowań domeny głównej (np. yourname.com) dodaj wymienione rekordy A i AAAA.
    • W przypadku mapowań subdomeny (np. portfolio.yourname.com) dodaj wymieniony rekord CNAME.
  4. Zapisz zmiany konfiguracji DNS.

Krok 3. Poczekaj na udostępnienie certyfikatu SSL

Gdy zmiany DNS zostaną zastosowane:

  1. Google Cloud automatycznie udostępni zarządzany certyfikat SSL/TLS na potrzeby bezpiecznego połączenia.
  2. Ten proces zwykle trwa około 15 minut, ale w zależności od propagacji DNS może potrwać do 24 godzin.
  3. Po zakończeniu domena niestandardowa będzie bezpiecznie przekierowywać do Twojej witryny portfolio.

7. Czyszczenie

Aby uniknąć nieprzewidzianych opłat lub zwolnić miejsce w zasobach obszaru roboczego:

  1. W Google AI Studio otwórz stronę Aplikacje.
  2. Znajdź swoją aplikację w siatce lub na liście.
  3. Kliknij ikonę kosza, aby usunąć stan aplikacji i cofnąć publikację usługi w Cloud Run.
  4. Jeśli wdrożono aplikację za pomocą projektu standardowego i chcesz całkowicie wyłączyć wszystkie zasoby, otwórz Ustawienia projektu w konsoli Google Cloud i usuń projekt.

8. Podsumowanie

Gratulacje! Zaprojektowałeś(-aś), utworzyłeś(-aś) i wdrożyłeś(-aś) witrynę portfolio bezpośrednio z Google AI Studio.

Więcej informacji

Kliknij ten link, aby odebrać odznakę Ukończono ścieżkę dla twórców.

Aby kontynuować, otwórz goo.gle/builders i wybierz kolejne ćwiczenia.