1. Przegląd
W tym module nauczysz się tworzyć aplikację internetową „Snake & Beats” – retro grę w węża ze zintegrowanym odtwarzaczem muzyki. Użyjesz Gemini do wygenerowania aplikacji React w jednym pliku o neonowym wyglądzie, a następnie zastosujesz kontrolę wersji i wdrożysz ją w Cloud Run.
Jakie zadania wykonasz
- Tworzenie i promptowanie: użyj trybu „Tworzenie” w Google AI Studio, aby wygenerować działającą grę na podstawie jednego promptu.
- Doprecyzuj za pomocą instrukcji systemowych: sprawdź „nastrój” AI, ustawiając trwałą personę na potrzeby przyszłych zmian.
- Zapisz w GitHubie: utwórz nowe repozytorium bezpośrednio w AI Studio.
- Wdróż w Cloud Run: jednym kliknięciem możesz przesłać grę do Google Cloud Run.
Czego się nauczysz
- Jak używać trybu tworzenia w Google AI Studio do szybkiego prototypowania aplikacji.
- Jak używać instrukcji systemowych, aby zachować spójny „styl kodowania” podczas iteracji.
- Jak połączyć Google AI Studio z GitHub i Cloud Run.
Czego potrzebujesz
- przeglądarki Chrome,
- konto Gmail,
- Projekt Cloud z włączonymi płatnościami
- Klucz interfejsu Gemini API
- Konto GitHub
2. Zanim zaczniesz
- W konsoli Google Cloud na stronie selektora projektów wybierz lub utwórz projekt Google Cloud.
- Sprawdź, czy w projekcie Cloud włączone są płatności. Dowiedz się, jak sprawdzić, czy w projekcie są włączone płatności .
3. Budowanie i promptowanie (podstawy)
Zaczniemy od zbudowania całej aplikacji za jednym razem. Zaloguj się w Google AI Studio i upewnij się, że korzystasz z interfejsu Build.
- Wpisz prompta: wklej do okna czatu ten szczegółowy prompt:
Build a React web app that is a Music Player and a Snake Game combined. Use Tailwind CSS with a dark neon aesthetic. I want to be able to play Snake in the center window while the demo music plays in the background. Add 3 dummy ai generated music. Include controls for the music (play/pause/skip) and a score counter for the game.
- Wybierz model: w panelu ustawień po prawej stronie upewnij się, że wybrano Gemini 3.0 Pro (lub najnowszy model w wersji podglądowej), aby uzyskać najszybsze generowanie kodu.
- Uruchom: kliknij Build (lub naciśnij Cmd + Enter).
- Podgląd: Gemini wygeneruje kod i zwykle wyświetli podgląd na żywo po prawej stronie (jak pokazano poniżej):
4. Dopracowywanie za pomocą adnotacji, obrazów i głosu
Czasami trudno jest opisać zmianę wizualną słowami. Tryb adnotacji umożliwia rysowanie na podglądzie aplikacji, aby natychmiast przekazać swoją wizję.
Korzystanie z trybu adnotacji
- Aktywuj tryb adnotacji: w interfejsie AI Studio (sprawdź panel po lewej stronie lub dolny pasek narzędzi w oknie podglądu) wybierz narzędzie Adnotacja lub Ulepsz.
- Oznaczanie aplikacji:
- Rysowanie: użyj narzędzia do rysowania, aby narysować prostokąt wokół licznika punktów.
- Komentarz: wpisz prompt dołączony do tego pola: „Powiększ tę czcionkę, nadaj jej cyfrowy i zniekształcony wygląd”.
- Szkic: użyj narzędzia strzałki, aby wskazać przyciski odtwarzania/wstrzymywania.
- Komentarz: typ: „Zmień te ikony na świecące neony”.
- Iteracja: kliknij „Dodaj do czatu”, a potem Wyślij prompt. Gemini zinterpretuje Twoje oznaczenia wizualne i polecenia tekstowe, aby zaktualizować kod.
- Zweryfikuj: obejrzyj aktualizację podglądu na żywo. Twoje uwagi wizualne powinny być teraz widoczne w kodzie.
Rozpoznawanie mowy (The Spoken Vibe)
Czasami „klimat” łatwiej jest opisać słowami niż napisać.
- Działanie: kliknij ikonę mikrofonu na pasku wprowadzania (obok przycisku +).
- Powiedz: „Hej, animacja węża jest zbyt wolna. Przyspiesz go i spraw, aby ogon zostawiał za sobą świecący ślad”.
- Wyślij: Gemini przekształci mowę na tekst i zastosuje zmiany.
5. Ustawianie instrukcji systemowych i ponowne tworzenie
W przeciwieństwie do zwykłego prompta instrukcja systemowa jest aktywna przez całą sesję. To najlepsze miejsce, aby zdefiniować standardy kodowania, konwencje nazewnictwa lub konkretny styl wizualny, który nie powinien się zmieniać.
- Otwórz ustawienia zaawansowane: w interfejsie Google AI Studio (tryb tworzenia) znajdź pole Instrukcje systemowe. Jeśli nie jest widoczna, kliknij Ustawienia (ikona koła zębatego) lub Ustawienia zaawansowane u góry lub z boku panelu czatu.
- Dodaj instrukcję „Vibe”: wklej poniższą instrukcję w polu tekstowym. Określa to „Glitch Art” jako osobowość naszej gry:
You are a Retro-Futurist UI Designer and Senior React Engineer. Visual Style: 'Glitch Art'. Use raw, pixelated fonts, jarring color contrasts (Cyan vs. Magenta), and CSS animations that simulate screen tearing or static noise. Tone: Cryptic and machine-like.
- Wywoływanie zmiany: zmiana instrukcji systemowej nie powoduje automatycznego ponownego napisania kodu. Musisz poprosić Gemini o zastosowanie tych nowych reguł.
- Zamknij panel ustawień.
- W polu wprowadzania czatu lub promptu wpisz: „Przebuduj interfejs aplikacji, aby ściśle przestrzegać nowych instrukcji systemowych”.
- Kliknij Uruchom / Wyślij.
- Obserwuj aktualizację: Gemini potwierdzi wprowadzenie zmiany.
6. Zapisz w GitHubie
Zamiast pobierać pliki i korzystać z wiersza poleceń, użyjemy wbudowanej integracji z GitHubem, aby natychmiast utworzyć repozytorium.
- Znajdź integrację: na pasku narzędzi w górnej części interfejsu Google AI Studio poszukaj ikony GitHub, która znajduje się między ikonami Pobierz i Wdróż.
- Połącz swoje konto: kliknij ikonę. Jeśli robisz to po raz pierwszy, pojawi się prośba o autoryzację dostępu Google AI Studio do Twojego konta GitHub.
- Utwórz repozytorium: pojawi się okno dialogowe „Wypełnij poniższe informacje, aby utworzyć repozytorium”.
- Nazwa repozytorium: wpisz nazwę, np. „Gra w węża wygenerowana przez AI przy użyciu Reacta”.
- Opis repozytorium: wpisz opis repozytorium.
- Widoczność: wybierz Publiczny (aby można było łatwo udostępniać) lub Prywatny.
- Prześlij do GitHub: kliknij przycisk „Utwórz repozytorium Git”.
7. Wdrożenie w Cloud Run
Aplikacja jest gotowa i zapisana w GitHubie, więc możemy ją wdrożyć w Cloud Run.
- Rozpocznij wdrażanie: kliknij przycisk wyróżniony poniżej. Znajduje się on w prawym górnym rogu strony AI Studio.
- Wybierz projekt: kliknij menu Wybierz projekt Cloud i wybierz projekt z menu.
- Rozwiązywanie problemów: jeśli nie możesz znaleźć projektu w menu, kliknij Importuj projekt i wybierz projekt w panelu Importuj projekt.
- Weryfikacja płatności: po wybraniu projektu sprawdzamy, czy ma on włączone płatności. Weryfikacja przebiegnie automatycznie, ponieważ w sekcji „Zanim zaczniesz” połączyliśmy konto rozliczeniowe z projektem.
- Wdróż: kliknij przycisk Wdróż aplikację i poczekaj, aż aplikacja zostanie wdrożona w Cloud Run. Uwaga: nazwa usługi Cloud Run zostanie wygenerowana automatycznie.
- Wdrożenie powinno potrwać kilka minut. Otrzymasz adres URL aplikacji. Po kliknięciu adresu URL zobaczysz wdrożoną aplikację internetową w internecie.
8. Czyszczenie danych
Aby uniknąć obciążenia konta Google Cloud opłatami za zasoby użyte w tym poście, wykonaj te czynności:
- W konsoli Google Cloud otwórz stronę Zarządzanie zasobami.
- Z listy projektów wybierz projekt do usunięcia, a potem kliknij Usuń.
- W oknie wpisz identyfikator projektu i kliknij Wyłącz, aby usunąć projekt.
9. Gratulacje
Gratulacje! Udało Ci się zakodować aplikację w AI Studio i wdrożyć ją w Cloud Run.
AI Studio to idealna platforma do tworzenia i testowania aplikacji, która umożliwia użytkownikom natychmiastowe wizualizowanie swoich projektów w działaniu.
Bezproblemowa integracja AI Studio z Cloud Run umożliwia użytkownikom łatwe wdrażanie aplikacji bezpośrednio w Google Cloud. Korzystanie z Cloud Run zapewnia wszystkie zalety środowiska bezserwerowego, eliminując złożoność i koszty zarządzania infrastrukturą.