Uruchom witrynę portfolio z pomocą AI

1. Wprowadzenie

Przegląd

Od czego zacząć tworzenie z wykorzystaniem AI? W większości przypadków zaczyna się 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 tym ćwiczeniu utworzysz osobistą witrynę portfolio. Agent AI Studio napisze kod interfejsu. Gdy aplikacja będzie gotowa, możesz wdrożyć ją bezpośrednio w Cloud Run jednym kliknięciem.

Jakie zadania wykonasz

• Poproś Google AI Studio o utworzenie prototypu osobistej witryny portfolio.
• Przetestuj aplikację w piaskownicy interaktywnego podglądu.
• wdrażać 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 prototypowania usługi front-end za pomocą języka naturalnego.
• Jak wdrożyć aplikację AI Studio jako bezserwerowy kontener w Cloud Run.

2. Konfiguracja projektu

Przed uruchomieniem AI Studio sprawdź stan konta i wymagania wstępne.

Informacje o koncie Google i poziomie

1. Jeśli nie masz jeszcze konta Google, utwórz je.
   • Wskazówka: jeśli to możliwe, użyj w tym module osobistego konta Google. Konta grupowe, firmowe lub szkolne mogą wymuszać stosowanie zasad Google Workspace, które wyłączają funkcje eksperymentalne lub integracje z chmurą.
2. Sprawdź szczegóły płatności za wdrożenia:
   • Google Cloud Starter Tier: umożliwia publikowanie maksymalnie 2 aplikacji pełnostosowych w wybranym regionie bezpłatnie i bez zakładania 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, zasoby procesora i interfejsy API.

3. Tworzenie witryny portfolio w trybie budowania AI Studio

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

1. Otwórz panel Aplikacje w Google AI Studio i kliknij Nowa aplikacja.
2. W polu prompta czatu 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).
   

3. Kliknij Build (Skompiluj), aby rozpocząć proces generowania aplikacji.

4. Testowanie i wdrożenie

Zanim uruchomisz usługę na żywo, przeprowadź weryfikację w interaktywnym podglądzie.

1. Otwórz okienko podglądu w Google AI Studio.
2. Aby sprawdzić wygląd, kliknij w piaskownicy podglądu przyciski nawigacyjne, linki lub układy.
   • Uwaga na temat naprawiania błędów: podczas generowania lub testowania możesz czasami napotkać problemy z czasem działania lub błędy kompilacji. W takim przypadku w czacie AI Studio pojawi się przycisk Napraw, który umożliwia poproszenie agenta o automatyczne zdiagnozowanie i rozwiązanie problemu.
   
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, a potem sprawdź zmiany 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ć kreator wdrażania.
2. Aby skonfigurować projekt Google Cloud, kliknij Rozpocznij.
   • Sprawdź, czy menu Projekt Google Cloud zawiera projekt powiązany z Twoim obszarem roboczym.
   • AI Studio automatycznie wygeneruje unikalny identyfikator usługi dla instancji Cloud Run.
3. Jeśli wdrażasz usługę po raz pierwszy i używasz standardowych parametrów Google Cloud, może pojawić się prośba o określenie typu organizacji i podanie szczegółów rozliczeniowych.
4. Kliknij Opublikuj aplikację.
5. Kroki tworzenia kontenera, rejestracji kontenera i wdrażania usługi są wykonywane w tle. Zwykle trwa to 2–4 minuty.
6. Po zakończeniu wdrażania skopiuj wygenerowany adres URL aplikacji i otwórz link do aplikacji w karcie przeglądarki.
7. Przetestuj działającą aplikację internetową w przeglądarce.

6. (OPCJONALNIE) Dodaj domenę niestandardową

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 Cloud Run.
2. Kliknij Dodaj mapowanie.
3. W menu wybierz usługę Cloud Run, którą chcesz zmapować.
4. Wpisz niestandardową nazwę domeny (np. yourname.com lub portfolio.yourname.com).
5. Kliknij Dalej lub Kontynuuj. Cloud Run wyświetli rekordy DNS (np. rekordy A/AAAA lub CNAME), 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ę zarządzania DNS lub stronę konfiguracji ustawień DNS domeny.
3. Utwórz rekordy DNS zgodne z wartościami wyświetlanymi w kreatorze mapowania Cloud Run:
   • W przypadku mapowań domeny głównej (np. yourname.com) dodaj wymienione rekordy A i AAAA.
   • W przypadku mapowań subdomen (np. portfolio.yourname.com) dodaj wymieniony rekord CNAME.
4. Zapisz zmiany w konfiguracji DNS.

Krok 3. Poczekaj na udostępnienie certyfikatu SSL

Po rozpowszechnieniu zmian w DNS:

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

Uwaga: mapowania domen Cloud Run są dostępne w wersji testowej i tylko w określonych regionach. Jeśli Twoja usługa Cloud Run znajduje się w regionie, który nie obsługuje mapowań domen, możesz zmapować domenę za pomocą globalnego zewnętrznego systemu równoważenia obciążenia aplikacji lub Hostingu Firebase.

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ź 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 usługę za pomocą standardowego projektu i chcesz całkowicie wyłączyć wszystkie zasoby, otwórz ustawienia projektu w konsoli Google Cloud i usuń projekt bazowy.

8. Podsumowanie

Gratulacje! Masz zaprojektowaną, opracowaną i wdrożoną 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ć, przejdź do goo.gle/builders i wybierz kolejne ćwiczenie.

• Dokumentacja Cloud Run
• Tworzenie aplikacji w Google AI Studio