Za pomocą Gemini zaprogramuj grę dla dzieci i opublikuj ją w Firebase.

Pozostało minut: 29

Informacje o tym ćwiczeniu (w Codelabs)

Ostatnia aktualizacja: maj 13, 2025

Autorzy: Riccardo Carlesso

1. Wprowadzenie

25 marca 2025 r. Google wprowadził Gemini 2.5. Jedną z najbardziej zapadających w pamięć cech tej premiery było to, że wszyscy mogli wypróbować funkcję „Kodowanie zaawansowane” [wideo]:

Gemini 2.5: tworzenie własnej gry o dinozaurach na podstawie promptu jednowierszowego

W tym ćwiczeniu poznasz technikę „kodowania nastroju” w przypadku prostej aplikacji dla dzieci. Zaczniesz od wspólnego promptu, a potem dostosujesz aplikację do własnych potrzeb. Aplikację przetestujemy w wersji p5.js. Wprowadzimy te zmiany w Hostingu Firebase. Najważniejsze jest to, że cały ten zestaw jest obecnie bezpłatny.

Czego się nauczysz

Użyj Gemini 2.5, aby utworzyć kod wibracyjny dla aplikacji z grą.
Testowanie kodu na stronie p5js.org
Jak poprawiać i ulepszać prompty i aplikacje.
Jak hostować aplikację statyczną w Firebase

Uwaga: ten warsztat używa kodu wygenerowanego przez AI. Jest on niedeterministyczny, dlatego zawiera wskazówki, ponieważ autor nie zna wyników. Nie używaj tego kodu w środowisku produkcyjnym.

Jeśli spodobało Ci się to ćwiczenie, sprawdź 🔥 Firebase Studio, które oferuje płynne i zintegrowane środowisko kodowania.

2. Wymagania wstępne

Ten warsztat składa się z 2 etapów:

Tylko programowanie stron internetowych. To najprzyjemniejsza część, która nie wymaga znajomości kodowania. W tym celu użyjemy interfejsu Gemini ( gemini.google.com) i p5.js.
Lokalne środowisko kodowania. W tym przypadku potrzebne są pewne umiejętności kodowania/tworzenia skryptów, a także zainstalowanie i użycie npm lub npx oraz lokalnego edytora, np. vscode lub IntelliJ. Ta druga część jest opcjonalna i potrzebna tylko wtedy, gdy chcesz, aby Twoi znajomi i rodzina mogli grać w Twoją aplikację na komórkach lub komputerach.

Jedynym wymogiem w etapie 1 jest przeglądarka i komputer (przyda się duży ekran). Aby dowiedzieć się więcej o fazie 2, czytaj dalej.

Interfejs Gemini

gemini.google.com to świetna platforma, na której możesz wypróbować wszystkie najnowsze modele Gemini, a także tworzyć własne zdjęcia i filmy. Aplikacja jest wyposażona w integracje z usługami Google, takimi jak Mapy Google czy Hotele/Loty/Opinie, dzięki czemu stanowi idealnego towarzysza podczas planowania kolejnych wakacji.

Wskazówka: jeśli interesuje Cię kodowanie, wypróbuj też AI Studio, czyli podobny interfejs, w którym możesz tworzyć prototypy interakcji z LLM (np. tworzyć obrazy) i od razu pobierać kod Pythona bezpośrednio ze strony.

p5.js

p5.js to bezpłatna biblioteka JavaScript open source, która ułatwia tworzenie kreatywnych kodów i ułatwia dostęp do nich artystom, projektantom, nauczycielom i wszystkim innym. Jest oparty na języku Processing i upraszcza proces tworzenia interaktywnych treści wizualnych i interakcyjnych za pomocą kodu w przeglądarce.

Kodowanie lokalne (opcjonalne)

Jeśli chcesz zachować aplikację, musisz wykonać dodatkowe czynności konfiguracyjne:

Lokalny edytor kodu ( Visual Studio Code, IntelliJ itp.).
Konto git ( github / gitlab / bitbucket), na którym będzie przechowywany kod.
npm zainstalowany lokalnie, najlepiej w przestrzeni użytkownika (za pomocą npx lub równoważnej technologii).

Dodatkowo później skonfigurujemy konto Firebase.

Musisz też mieć pewne umiejętności programowania, takie jak:

możliwość zainstalowania pakietu npm,
Możliwość interakcji z systemem plików (tworzenie folderów i plików)
Możliwość interakcji z elementem git (git add, git commit, git push).

Jeśli coś Cię przeraża, pamiętaj, że LLMs chętnie Ci pomogą. Aby uzyskać sugestie, możesz użyć modelu „Gemini 2.0 flash” lub innego modelu o podobnych właściwościach. Jeśli to nadal jest za trudne, możesz całkowicie pominąć fazę 2. Faza 1 powinna być wystarczająco satysfakcjonująca.

3. Utwórzmy pierwszą grę.

Otwórz gemini.google.com i wybierz model obsługujący kod, np. 2.5. Ten wybór może się różnić w zależności od dostępności, kosztu i daty. W momencie pisania tego artykułu najlepszym rozwiązaniem byłoby:

Gemini 2.5 Flash (szybsze iteracje)
Gemini 2.5 Pro (lepsza jakość wyjściowa).

Więcej informacji o modelach Gemini znajdziesz tutaj.

Nasz pierwszy prompt dotyczący gry

Jak widać w tym filmie, pierwsze prompty mogą być bardzo proste:

Make me a captivating endless runner game. Key instructions on the screen.
p5js scene, no HTML. I like pixelated dinosaurs and interesting backgrounds.

Możesz go trochę dostosować:

Średniowieczne / futurystyczne / cyberpunkowe ustawienia
Czy chodzi o emotikony, czy o jeden konkretny emotikon?
Uwielbiasz kolor żółty lub różne odcienie fioletu.
Może Twoje dziecko uwielbia jednorożce, dinozaury lub pokemony.

Po wklejeniu promptu do przeglądarki możesz obserwować, jak Gemini myśli.Gemini 2.5 to model myślący, więc rozpocznie on wykonywanie pewnych zadań, których przebieg możesz obserwować w czasie. Możesz kliknąć menu, aby zobaczyć, co się dzieje, lub poczekać na wynik:

W efekcie powinieneś mieć działający kod JavaScript.

Teraz możesz kliknąć przycisk kopiowania u góry:

Testowanie gry w p5.js

Czas na testowanie gry.

Otwórz edytor p5.js tutaj: https://editor.p5js.org/
Wybierz i usuń istniejący kod sketch.js.
Wklej kod

Twoja strona powinna wyglądać tak:

Na koniec naciśnij przycisk ODTWÓRZ.

Teraz mogą się zdarzyć 2 sytuacje: kod zadziała lub nie. Postępuj zgodnie z instrukcjami w zależności od tego, który przypadek dotyczy:

Twój kod nie działa
Twój kod działa za pierwszym razem.

W następnych 2 akapitach dowiesz się, jak zarządzać tymi warunkami.

(przypadek 1) Mój kod się nie uruchamia

Jeśli pojawi się taki błąd, możesz go skopiować i wkleić do Gemini. Pozwól mu naprawić kod.

(przypadek 2) Mój kod działa!

Jeśli kod działa, po prawej stronie strony powinna pojawić się gra wizualna.

👏 Gratulacje! Prowadzisz pierwszą grę z AI.

Uwaga: dopóki masz kod, aplikacja działa tylko w Twojej przeglądarce. Jeśli chcesz pokazać aplikację rodzinie i znajomym, musisz skorzystać z usługi hostingu. Mamy dla Ciebie dobrą wiadomość. Czytaj dalej.

Teraz możesz przejść do następnego rozdziału.

Kolejne iteracje

Teraz zapisz kod w bezpiecznym miejscu, na wypadek gdyby się zepsuł. Jeśli chcesz, możesz wykonać jedną iterację. Na przykład autor bardzo lubi podwójny skok w Super Mario, więc możesz dodać coś takiego:

The game is great, thanks! Please allow for my character to double jump.

Możesz zmienić wszystko, co chcesz – nie ma żadnych ograniczeń. Możesz na przykład zapisać nazwę postaci, aby uzyskać wyższy wynik, lub zwiększyć prędkość, aby utrudnić grę. Prompt może być w języku angielskim.

Wskazówka: Gemini zwykle podaje tylko zmiany, które należy wprowadzić (np. zmiana funkcji XYZ). Możesz ustawić prompt, aby zamiast tego wyświetlał cały zaktualizowany kod, np.

"Please give me the entire updated code, not just the changed function"

. Dzięki temu łatwiej będzie Ci kopiować i wklejać.

Zastrzeżenia

Możesz dodać do zakładek czat z Gemini. Możesz zmienić nazwę na „p5js my first game” lub zapisać link bezpośredni do Gemini, np. " https://gemini.google.com/app/abcdef123456789" na później.

4. Uruchom kod lokalnie

W tym momencie powinieneś mieć:

Otwarte okno przeglądarki Gemini z działającym kodem.
Otwarte okno przeglądarki p5.js z działającą grą
Lokalne środowisko programowania z zainstalowanym npm.

To trudniejsza część tego ćwiczenia. Wymagane jest podstawowe doświadczenie w programowaniu.

Instalowanie zależności

Jeśli brakuje Ci pakietów npm i node, najlepiej zainstalować pakiet npm za pomocą menedżera wersji, np. nvm. Postępuj zgodnie z instrukcjami instalacji dla danego systemu operacyjnego.

Zakładamy też, że używasz IDE do programowania. Na zrzutach ekranu i w przykładach użyjemy kodu Visual Studio, ale możesz użyć dowolnego kodu.

Skonfiguruj środowisko lokalne

W tym momencie możesz utworzyć własną strukturę plików.

Przykładowy skrypt konfiguracji Możesz to zrobić ręcznie, tworząc foldery i pliki:

# This works for Mac and Linux. For Windows, please use other tools.
mkdir my-first-vibecoding-project/
cd my-first-vibecoding-project/
git init 
touch README.md PROMPT.md 
mkdir public/
cd public/ 
touch index.html sketch.js style.css
git add .
# Skipping quotes which can be tricky
git commit -a -m committing_empty_skeleton

Ostateczna struktura folderów powinna wyglądać tak:

my-first-vibecoding-project/
├── PROMPT.md
├── README.md
└── public
    ├── index.html
    ├── sketch.js
    └── style.css

Te informacje powinny być też dostępne tutaj.

Teraz otwórz ulubiony edytor kodu (np. code my-first-vibecoding-project/) i zacznij wklejać zawartość pliku editor.p5js.org do 3 plików w folderze public/:

README.md ← Tutaj możesz umieścić link do czatu Gemini i tutaj umieścisz stronę docelową aplikacji, gdy się pojawi.
PROMPT.md ← Tutaj możesz dodać wszystkie prompty, rozdzielone akapitem H2. Jeśli chcesz wyjaśnić, dlaczego podano dany prompt, możesz go umieścić w 3 cudzysłowach ( przykład).
**public/index.html** ← kopiuj tutaj kod HTML
**public/sketch.js** ← skopiuj tutaj kod JS
**public/style.css** ← skopiuj tutaj kod CSS

Folder publiczny może zawierać dodatkowe komponenty, np. niestandardowy plik PNG.

5. Konfigurowanie i wdrażanie w Firebase

Konfigurowanie Firebase (tylko po raz pierwszy)

Upewnij się, że na komputerze jest zainstalowany pakiet npm.

W terminalu wpisz jedną z tych opcji:

# to install on the machine (requires privilege)
npm install -g firebase-tools
# to install locally (low privilege needed but might need to repeat a few times)
npm install firebase-tools

Teraz powinieneś/powinnaś móc wywołać polecenie firebase. Jeśli wystąpią problemy, postępuj zgodnie z dokumentami publicznymi.

Inicjowanie Firebase

W tej sekcji skonfigurujemy hosting Firebase. To bardzo prosty proces, ale zapoznanie się z nim po raz pierwszy może zająć trochę czasu.

Upewnij się, że jesteś w katalogu bezpośrednio nad katalogiem public/, który zawiera Twoje pliki. Informacje (ls -al lub dir) powinny wyglądać mniej więcej tak:

$ ls 
PROMPT.md
README.md
public/

[Krok 1] Na konsoli wpisz: firebase init

Przejdź kursorem w dół do sekcji „Hosting: ..”, a następnie naciśnij spację, a potem Enter. (Dlaczego? Ponieważ jest to pytanie wielokrotnego wyboru, musisz wybrać odpowiedź i przejść do następnej strony.
[Krok 2] Teraz możesz wybrać istniejący projekt (opcja 1) lub utworzyć nowy (opcja 2):

Uwaga: jeśli masz już projekt w chmurze, może on nie być projektem Firebase. Projekty Firebase są podzbiorem projektów GCP. Aby stały się one projektem Firebase, musisz wykonać dodatkowe czynności, co jest możliwe w opcji 3.
Jeśli nie masz jeszcze pomysłu na nazwę, użyj opcji „Utwórz nowy projekt” i dodaj nazwę, np. „p5js-TwojeImięiNazwisko-TwojaAplikacja” (np. „p5js-riccardo-tetris”).

[step 3] What would you like to call your project? (defaults to your project ID) (p5js-riccardo-tetris)
Naciśnij Enter.

[step 4] ? What do you want to use as your public directory? (public)
Naciśnij ENTER (umyślnie skonfigurowaliśmy public/).

[step 5] ? Configure as a single-page app (rewrite all urls to /index.html)? No
naciśnij ENTER (nie).

[step 6] ? Set up automatic builds and deploys with GitHub? No
Naciśnij ENTER – NIE

[step 7] ? File public/index.html already exists. Overwrite? (y/N)
Naciśnij klawisz Enter (nie).
OSTRZEŻENIE Może to powodować błędy. Jeśli zapiszesz nowy plik index.html, stanie się on niezgodny z p5js.

Jeśli wszystko działa prawidłowo, powinieneś zobaczyć to:

W wyniku tych działań powinno zostać utworzonych kilka plików:

.firebaserc
.gitignore
firebase.json
public/404.html

W szczególności .firebaserc powinien zawierać identyfikator projektu, który możesz pobrać programowo za pomocą tego polecenia: cat .firebaserc | jq .projects.default -r

Ostrzeżenie: sprawdź plik index.html. Jeśli jest dłuższy niż 16 wierszy lub zawiera słowo firebase, oznacza to, że przez pomyłkę zastąpiono pliki p5js. Nie ma problemu. Pamiętaj tylko, aby przywrócić stary plik index.html z gita lub z edytora p5js.

Testowanie lokalne

Aby skrócić czas oczekiwania na informacje zwrotne, możesz najpierw spróbować wykonać te czynności lokalnie.

W tym celu możesz wypróbować potężny pakiet narzędzi wiersza poleceń opracowany przez zespół Firebase. Na przykład:

$ firebase emulators:start

powinien uruchomić serwer WWW na porcie 5000 ( http://127.0.0.1:5000/), aby można było przetestować go lokalnie przed przesłaniem.

Wdrażanie w Firebase

Czas na ostatnie polecenie:

$ firebase deploy

Powinna ona wywołać kilka działań. Ostatnie kilka linii powinno wyglądać mniej więcej tak:

$ firebase deploy
[...]
✔  hosting[YOUR_PROJECT]: release complete 
✔  Deploy complete! 

Project Console: https://console.firebase.google.com/project/YOUR_PROJECT/overview
Hosting URL: https://YOUR_PROJECT.web.app

Powinieneś zobaczyć adres URL hostingu. Spróbuj!

Jeśli wdrożono z sukcesem, ale widzisz pustą stronę lub wdrożenie nie działa, możesz wykonać kilka czynności:

Otwórz „Narzędzia programistyczne” w przeglądarce, znajdź błąd i poproś Gemini o pomoc w jego naprawieniu, używając promptu takiego jak ten:

I've deployed the script correctly with Firebase, but I now see a blank page with this error:

[ paste detailed JS console error ]

♾️ Powtarzaj

Możesz powtarzać te czynności dowolną liczbę razy. Możesz wyświetlać kolejne prompty, aż uzyskasz zadowalające wyniki.

Pamiętaj o kilku ważnych kwestiach:

Pętla iteracji jest znacznie szybsza w pętli Gemini > p5.js > Gemini niż w pętli Gemini > host lokalny > wdrożenie w Cloud Run > testowanie aplikacji w przeglądarce (kliknij odśwież).
Używaj git do zarządzania wersjami promptów i kodu. Możesz chcieć wrócić do prompta N i kodu N. W szczególności warto użyć git commit dla każdego sketch.js, który przesyłasz, ponieważ mogą się w nim znajdować niezauważone błędy.

Pamiętaj, że niektóre gry działają dobrze z klawiaturą, ale nie z myszką ani dotykiem na telefonie. To dobry moment na ulepszenie kodu.

6. Wskazówki dotyczące promptów

Kilka wskazówek, które znam, ponieważ stworzyłem już kilka gier.

Wersje prompta

Prawdopodobnie znajdziesz błędy w pierwotnym promptzie. mieć wersję git. Tutaj jest kilka ścieżek kodu:

Jeśli podoba Ci się to, co widzisz, i chcesz użyć gemini z kolejną serią promptów, warto je gdzieś zapisać (prompt 1,2,3 – 3-shot example1 – example2).
Jeśli nie zależy Ci na aplikacji utworzonej przez prompt1, możesz ją ulepszyć, wyrzucić kod i rozpocząć od nowa z zmodyfikowanym kodem (prompt1 v1, prompt1 v2, prompt1 v3 itd.).

Możesz oczywiście łączyć te 2 metody.

Funkcje mobilne

W zależności od tworzonej gry możesz potrzebować interakcji z użytkownikiem. Czy ta interakcja wymaga klawiatury? Czy można go używać, dotykając ekranu (np. na telefonie komórkowym)? Pamiętaj, aby wyraźnie to zaznaczyć w prośbie. Może być konieczne utworzenie niektórych przycisków na klawiaturze (patrz przykład Tetrisa 3D). Zobacz też dungemoji, aby sprawdzić zgodność z urządzeniami mobilnymi.

Informacje o błędach JavaScriptu lub zrzuty ekranu bezpośrednio w Gemini

Gemini nie może zobaczyć Twojej interakcji z p5js, dlatego wklej do Gemini wszelkie błędy JavaScriptu. Pamiętaj, że Gemini jest multimodalny, więc jeśli wprowadzisz zmiany w interfejsie (np. zmniejszysz tytuł lub obniżysz wynik), możesz też załączyć zrzuty ekranu z gry. Kodowanie nigdy nie było tak przyjemne!

7. Gratulacje!

🎉 Gratulacje! Zakończyłeś/zakończyłaś pracę z tym ćwiczeniem.

Widzimy, jak łatwo jest tworzyć gry za pomocą Gemini i jak Firebase zapewnia łatwe rozwiązanie do hostowania, które pozwala przechowywać i udostępniać gry innym.

Omówione zagadnienia

Utwórz grę za pomocą Gemini 2.5.
Wdrażanie w Firebase

Teraz czas się szczycić. Udostępnij swoją najnowszą grę (your-project.web.app) na LinkedIn lub Twitterze, używając hashtaga #VibeCodeAGameWithGemini (i może oznaczyć autora na LinkedIn). Dzięki temu dowiemy się, jak atrakcyjne jest to ćwiczenie i czy warto tworzyć więcej tego typu.

Chcę więcej!

Jeśli szukasz dodatkowych materiałów, sprawdź te gry i prompty:

Za pomocą Gemini 2.5 i p5.js możesz w jeden weekend napisać 5 gier dla dzieci Z tego artykułu dowiesz się, jak za pomocą 6 przykładów zastosować kodowanie nastroju w grze.
palladius/genai-googlecloud-scripts (repozytorium na GitHubie z około 10 aplikacji – kod i prompt): Tetris, Pacman, Connect 4, a nawet Rogue klon dla tych, którzy tęsknią za starymi czasami. Zawiera prompty ze wszystkich tych gier. Wybierz ulubioną, dostosuj prompt i słuchaj.

Jeśli uważasz, że to zbyt dużo pracy, możesz też spróbować 🔥 Firebase Studio, gdzie pętla idea > prompt > kod > aplikacja jest zawarta w jednym oknie przeglądarki.

Oto przykładowe gry, które możesz tworzyć:

Gotowa gra może wyglądać tak:

Tetris 3D
gra językowa
nieuprawniony klon,
Klon Pac-Mana.

Jeszcze raz: tylko angielski.

🎉 Życzymy owocnej pracy!

Zgłoś pomyłkę