Uruchamianie internetowej gry wideo za pomocą AI

1. Wprowadzenie

Przegląd

Od czego zaczyna się dziś tworzenie z użyciem AI? Większość z nas zaczyna od prostego zapytania lub prototypu. Google AI Studio oferuje zaawansowany tryb tworzenia (często nazywany „vibe coding”), który umożliwia projektowanie, testowanie i tworzenie pełnych aplikacji internetowych przy użyciu generowania kodu opartego na modelach Gemini.

W tych ćwiczeniach z programowania utworzysz internetową grę wideo z rozgrywką turową, która będzie korzystać z bazy danych Firestore z źródłem zdarzeń (aby utrwalać działania w grze jako sekwencję zdarzeń, dzięki czemu gracze mogą wyświetlać historię meczów i wracać do poprzednich tur) oraz z uwierzytelniania Firebase do logowania użytkowników. Agent AI Studio skonfiguruje wszystkie usługi backendu i napisze kod frontendu, logikę źródła zdarzeń oraz kod interakcji z bazą danych. Gdy aplikacja będzie gotowa, wdrożysz ją bezpośrednio w Cloud Run jednym kliknięciem.

gotowa wersja strony portfolio,

Jakie zadania wykonasz

  • Poproś Google AI Studio o utworzenie prototypu aplikacji internetowej z turową grą wieloosobową.
  • Zaimplementuj obsługę udostępnianego, krótkiego kodu gry lub linku do dołączenia, aby umożliwić znajomym połączenie się z tym samym meczem.
  • Zaimplementuj przechowywanie w bazie danych Firestore za pomocą wzorca źródła zdarzeń, aby śledzić historię meczów i umożliwiać podróżowanie w czasie w grze (cofanie lub powtarzanie tur).
  • Skonfiguruj i włącz integrację z Firebase, aby udostępnić bazę danych Firestore i skonfigurować uwierzytelnianie za pomocą logowania przez Google.
  • Przetestuj aplikację w interaktywnej piaskownicy podglądu.
  • Wdróż aplikację w Cloud Run bezpośrednio z interfejsu Google AI Studio.

Czego się nauczysz

  • Jak używać trybu tworzenia w Google AI Studio, aby szybko tworzyć prototypy pełnych usług gier za pomocą języka naturalnego.
  • Jak zaimplementować wzorzec architektury źródła zdarzeń za pomocą Cloud Firestore do przechowywania historii gry.
  • Jak Google AI Studio automatycznie konfiguruje integracje z Firebase Firestore i uwierzytelnianiem.
  • Jak wdrożyć aplikację AI Studio jako kontener bezserwerowy w Cloud Run.
  • Jak sprawdzać rekordy bazy danych i stan bezpieczeństwa w konsoli Firebase.

2. Konfiguracja projektu

Zanim uruchomisz 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 tych ćwiczeniach 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 publikowanie maksymalnie 2 aplikacji full stack w wybranym regionie bez 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, zasoby procesora i interfejsy API.

3. Tworzenie turowej gry wideo w trybie tworzenia AI Studio

Utwórzmy powłokę aplikacji i poprośmy asystenta kodu AI o utworzenie warstw zabezpieczeń, logiki rozgrywki i utrwalania źródła zdarzeń.

  1. Otwórz panel Aplikacje w Google AI Studio i kliknij Nowa aplikacja.
  2. W polu promptu na czacie wpisz opis aplikacji z turową grą wideo: 
    Build a web-based, turn-based Tic-Tac-Toe game using
Firebase as a backend. Users must be able to securely sign in
using Google Sign-In, start a new game match, make moves, and play
against an AI player or another user. Any algorithm used for the
game opponent AI should use simple algorithms like min/max and the
app should not make any calls to an LLM like the Gemini API. To
support multiplayer matches, the application must generate a short
game code or share link that players can easily copy and send to a
friend to join the match. Use Firestore and an event sourcing
pattern to save a history of every move (turn) as a separate event
document in a subcollection under the game document. The
application must reconstruct the current game state by replaying
these events, and must allow users to view previous turns and opt
to restore/roll back the game to a prior turn's state.
    Ten link automatycznie wypełni pole promptu.
  3. Aby rozpocząć proces generowania aplikacji, kliknij Utwórz.

Gdy agent AI Studio rozpozna potrzebę przechowywania w bazie danych i bezpiecznego logowania użytkowników, uruchomi automatyczny proces konfiguracji Firebase.

  1. Po około minucie w obszarze roboczym pojawi się karta integracji Włącz Firebase.
  2. Aby potwierdzić i zaakceptować warunki usługi, kliknij przycisk Włącz Firebase.
  3. Agent przeprowadzi konfigurację w tle. Dla zaawansowanych:
    • Udostępniana jest instancja bazy danych Firestore.
    • Włączone jest uwierzytelnianie Firebase z włączonym logowaniem przez Google.
    • Ustanawiana jest konfiguracja konta usługi (np. tworzenie pliku src/lib/firebase.ts zawierającego dane logowania do interfejsu API).
    • Dodawany jest plik firestore.rules zawierający domyślne granice bezpieczeństwa (reguły izolacji użytkowników).

4. Testowanie i wdrożenie

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

  1. Otwórz okienko podglądu w Google AI Studio.
  2. Aby uruchomić uwierzytelnianie za pomocą logowania przez Google w piaskownicy, kliknij przycisk Zaloguj się.
    • Uwaga na temat naprawiania błędów: podczas generowania lub testowania mogą czasami wystąpić problemy z czasem działania, błędy kompilacji lub błędy uprawnień Firestore spowodowane niezgodnością reguł bezpieczeństwa. W takim przypadku AI Studio wyświetli na czacie przycisk Napraw , który pozwoli Ci poprosić agenta o automatyczne zdiagnozowanie i naprawienie problemu.
    Lokalizacja przycisku Popraw w Google AI Studio
  3. Po zalogowaniu rozpocznij nowy mecz, skopiuj wygenerowany krótki kod gry lub link do udostępniania i sprawdź, czy można go użyć do dołączenia do meczu.
  4. Wykonaj kilka ruchów i sprawdź, czy historia meczu jest prawidłowo renderowana.
  5. Spróbuj wrócić do poprzednich tur meczu. Upewnij się, że plansza lub stan aktualizują się, aby odzwierciedlać ten punkt w historii rozgrywki, i sprawdź, czy możesz przywrócić ten stan lub wycofać zmiany do niego.
  6. Jeśli chcesz zmienić styl lub zachowanie, poinstruuj agenta w oknie czatu. Na przykład:
    • "Could you style the game board interface using Tailwind CSS and add a retro pixel-art theme?"
    • "Add a 'Turn History' sidebar matching the current state replay that shows when each move was made and by whom."
  7. 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 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 na żywo w karcie przeglądarki.
  7. Przetestuj aplikację internetową na żywo w przeglądarce.

6. Sprawdzanie w konsoli Firebase

Sprawdź, jak śledzone są schematy danych i użytkownicy.

  1. Otwórz konsolę Firebase.
  2. Wybierz projekt (z etykietą AI Studio lub ręcznie powiązanym identyfikatorem projektu).
  3. W panelu nawigacji po lewej stronie kliknij Utwórz > Baza danych Firestore:
    • Wyświetl kolekcje i dokumenty bazy danych utworzone przez aplikację.
    • Sprawdź, czy każdy dokument ma identyfikator właściciela zgodny z aktywnymi danymi logowania użytkownika.
  4. Aby sprawdzić automatycznie wygenerowane dyrektywy bezpieczeństwa ograniczające uprawnienia do odczytu i zapisu do zweryfikowanych właścicieli dokumentów, kliknij kartę Bezpieczeństwo w panelu Firestore.
  5. Otwórz Bezpieczeństwo > Uwierzytelnianie , aby zobaczyć listę aktywnych danych logowania użytkowników wypełnioną podczas testów logowania.

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. Aby usunąć stan aplikacji i cofnąć publikację usługi w Cloud Run, kliknij ikonę kosza.
  4. Jeśli wdrożono aplikację 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! Zaprojektowałeś(-aś), utworzyłeś(-aś) i wdrożyłeś(-aś) turową grę wideo bezpośrednio z Google AI Studio.

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.

Więcej informacji