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

1. Wprowadzenie

25 marca 2025 r. Google udostępniło Gemini 2.5. Jednym z najbardziej pamiętnych aspektów tego wprowadzenia było to, że każdy mógł wypróbować funkcję „Zaawansowane kodowanie” [film]:

Gemini 2.5: utwórz własną grę o dinozaurach na podstawie prompta składającego się z jednego wiersza

W tym ćwiczeniu z programowania dowiesz się, jak stworzyć prostą aplikację dla dzieci, zaczynając od typowego promptu, a następnie dostosowując ją do własnych potrzeb. Aplikację przetestujemy w p5.js. Na koniec wprowadzimy te zmiany w Hostingu Firebase. Najciekawsze jest to, że cały stos jest obecnie bezpłatny.

Czego się nauczysz

• Użyj Gemini 2.5, aby wygenerować kod wibracji dla aplikacji do gier.
• Przetestuj kod na stronie p5js.org
• Jak iterować i doprecyzowywać prompta lub aplikację.
• Jak hostować aplikację statyczną w Firebase

Uwaga: w tym laboratorium kodu używany jest kod wygenerowany przez AI. Jest on niedeterministyczny, więc to laboratorium kodu zawiera wytyczne, ponieważ autor nie zna danych wyjściowych. Nie używaj tego kodu w środowisku produkcyjnym.

2. Wymagania wstępne

Ten codelab składa się z 2 faz:

1. Programowanie tylko w internecie. To najciekawsza część, która nie wymaga umiejętności kodowania. W tym celu użyjemy interfejsu Gemini ( gemini.google.com) i p5.js.
2. Lokalne środowisko kodowania W tym przypadku potrzebne są niewielkie umiejętności programowania lub tworzenia skryptów, a także zainstalowanie i używanie npm / npx oraz lokalnego edytora, np. vscode, IntelliJ lub innego. Ta druga część jest opcjonalna i jest potrzebna tylko wtedy, gdy chcesz, aby Twoi znajomi i rodzina mogli grać w Twoją aplikację na urządzeniach mobilnych lub komputerach.

Jedynym warunkiem wstępnym w przypadku etapu 1 jest przeglądarka i komputer (duży ekran będzie pomocny). Informacje o fazie 2 znajdziesz poniżej.

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 obrazy i filmy. Jest ona wyposażona w integracje z usługami Google, takimi jak Mapy Google czy Hotele/Loty/Opinie, dzięki czemu idealnie nadaje się do 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. generować obrazy) i od razu pobierać kod w Pythonie.

p5.js

p5.js to bezpłatna biblioteka JavaScript o otwartym kodzie źródłowym, która umożliwia artystom, projektantom, nauczycielom i innym osobom kreatywne kodowanie. Opiera się na języku Processing i upraszcza proces tworzenia interaktywnych treści wizualnych i interaktywnych za pomocą kodu w przeglądarce.

Kodowanie lokalne [opcjonalne]

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

• 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 podobnej technologii);

Konto Firebase skonfigurujemy później.

Wymagamy też pewnych umiejętności kodowania, takich jak:

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

Jeśli coś Cię tu zniechęca, pamiętaj, że LLM mogą Ci pomóc. Możesz na przykład użyć modelu „Gemini 2.0 flash” lub podobnego, aby uzyskać sugestie. Jeśli to nadal za trudne, możesz całkowicie pominąć etap 2. Etap 1 powinien być wystarczająco satysfakcjonujący.

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 wyborem jest:

• Gemini 2.5 Flash (szybsze iteracje)
• Gemini 2.5 Pro (lepsze wyniki).

Więcej informacji o modelach Gemini znajdziesz tutaj.

Pierwszy prompt do gry

Jak widać na tym filmie, początkowy prompt może być tak prosty:

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 to nieco dostosować:

• Średniowiecze / przyszłość / cyberpunk
• Czy jest pełna emotikonów, czy zawiera tylko jeden konkretny emotikon?
• Lubisz kolor żółty lub różne odcienie fioletu.
• Może Twoje dziecko uwielbia jednorożce, dinozaury lub pokemony.

Po wklejeniu prompta do przeglądarki zobaczysz, że Gemini myśli.Tak, Gemini 2.5 to model myślowy, więc rozpocznie wykonywanie wielu zadań, których zmiany możesz obserwować z upływem czasu. Możesz kliknąć zmieniające się menu, aby zobaczyć, co się dzieje, lub po prostu poczekać na wynik:

Na koniec powinieneś mieć działający kod JavaScript.

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

Testowanie gry w p5.js

Teraz czas przetestować grę.

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

Wyświetlona strona powinna wyglądać tak:

Na koniec możesz nacisnąć przycisk ODTWARZAJ.

Teraz mogą się zdarzyć 2 rzeczy: kod może zadziałać lub nie. Postępuj zgodnie z instrukcjami w zależności od sytuacji:

1. Kod nie działa
2. Kod działa za pierwszym razem.

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

(przypadek 1) Mój kod nie działa!

Jeśli pojawi się taki błąd, możesz go skopiować i wkleić w Gemini. Niech on poprawi kod za Ciebie.

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

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

👏 Gratulacje, uruchamiasz swoją pierwszą grę AI!

Uwaga: po uzyskaniu kodu aplikacja działa tylko w przeglądarce. Jeśli chcesz udostępnić aplikację rodzinie i znajomym, potrzebujesz rozwiązania hostingowego. Na szczęście mamy dla Ciebie świetną opcję. Czytaj dalej.

Możesz teraz przejść do następnego rozdziału.

Dalsze iteracje

Teraz zapisz kod w bezpiecznym miejscu, na wypadek gdyby uległ uszkodzeniu. W razie potrzeby możesz powtórzyć ten proces. 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 dostosować wszystko, co chcesz – nie ma ograniczeń. Możesz na przykład zachować imię postaci dla wyższych wyników lub zwiększać prędkość z czasem, aby utrudnić grę. Język angielski to ograniczenie Twojego promptu.

Wskazówka: Gemini zwykle podaje tylko zmianę, którą musisz zastosować (np. to jest zmiana funkcji XYZ). Możesz ustawić prompt tak, aby zamiast tego podawał cały zaktualizowany kod, np.

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

Ułatwi Ci to wycinanie i wklejanie.

Zastrzeżenia

Ostrzeżenie: gra może działać bez zarzutu na ekranie, ale możesz nie być w stanie w nią zagrać na urządzeniu bez klawiatury, np. na telefonie komórkowym. Zobaczymy to później.

Ostrzeżenie: https://editor.p5js.org/ ma ograniczone możliwości zapisywania wielu iteracji kodu. Jeśli podoba Ci się to, co wygenerował Gemini, i nie chcesz stracić *n*-tej wersji, przejdź do następnego kroku (git to Twój przyjaciel).

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

4. Uruchommy ten kod lokalnie

W tym momencie powinny być dostępne:

• Otwarte okno przeglądarki Gemini z działającym kodem.
• otwarte okno przeglądarki p5.js z działającą grą;
• lokalne środowisko kodowania z zainstalowanym npm;

To trudniejsza część laboratorium. Wymagane jest podstawowe doświadczenie w kodowaniu.

Instalowanie zależności

Jeśli nie masz npm i node, najlepiej zainstalować npm za pomocą menedżera wersji, np. nvm. Postępuj zgodnie z instrukcjami instalacji dla swojego systemu operacyjnego.

Zakładamy też, że używasz IDE. Na zrzutach ekranu i w przykładach używamy kodu Visual Studio, ale możesz użyć dowolnego narzędzia.

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

Powinny być też widoczne tutaj.

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

• README.md ← Tutaj możesz umieścić trwały link do rozmowy z Gemini, a tutaj – stronę docelową aplikacji, gdy będzie dostępna.
• PROMPT.md ← Tutaj możesz dodać wszystkie prompty, rozdzielając je akapitami H2. Jeśli chcesz wyjaśnić, dlaczego używasz danego prompta, możesz umieścić go w 3 apostrofach zwrotnych ( przykład).
• **public/index.html** ← skopiuj tutaj kod HTML
• **public/sketch.js** ← wklej 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

Skonfiguruj Firebase (tylko za pierwszym razem)

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

W terminalu wpisz jedno z tych poleceń (oba działają):

# 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 możesz wywołać polecenie firebase. Jeśli masz problemy, zapoznaj się z publicznymi dokumentami.

Uwaga: interfejs wiersza poleceń Firebase wymaga Node.js w wersji 18.0.0 lub nowszej. Jeśli nie masz możliwości zaktualizowania węzła (np. nie masz uprawnień administratora), rozważ użycie nvm do kontrolowania wersji węzła i npm.

Inicjowanie Firebase

W tej sekcji skonfigurujemy Hosting Firebase. To bardzo prosty proces, ale za pierwszym razem 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] W konsoli wpisz: firebase init

• Za pomocą kursora przejdź w dół do opcji „Hosting: ..”, a następnie naciśnij SPACJĘ i ENTER. (Dlaczego? Ponieważ jest to pytanie wielokrotnego wyboru, musisz wybrać odpowiedź i przejść do następnej strony.
• [Krok 2] Możesz teraz 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 w Firebase. Projekty Firebase to podzbiór projektów GCP. Aby przekształcić je w projekt w Firebase, musisz wykonać dodatkowe czynności. Właśnie do tego służy opcja 3.
• Jeśli nie masz pewności, użyj opcji „Utwórz nowy projekt” i dodaj nazwę, np. „p5js-TWOJANAZWA-TWOJAAPLIKACJA” (np. „p5js-riccardo-tetris”).

Ostrzeżenie: identyfikatory projektów są unikalne w całym Google Cloud. Wybieraj je rozważnie, ponieważ nie będzie można ich później zmienić.

• [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 (celowo ustawiliśmy public/).

• [krok 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 ENTER (nie).
• OSTRZEŻENIE Może to być podatne na błędy. Jeśli zastąpisz plik, nowy plik index.html będzie niezgodny z p5js.

Jeśli wszystko działa prawidłowo, zobaczysz:

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

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

W szczególności w miejscu .firebaserc powinien znajdować się identyfikator projektu, który możesz pobrać programowo za pomocą tego kodu: 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 edytora p5js.

Testowanie lokalne

Aby skrócić czas oczekiwania na informacje zwrotne, możesz najpierw wypróbować różne rozwiązania lokalnie.

W tym celu możesz wypróbować zaawansowany pakiet CLI od zespołu Firebase. Na przykład:

$ firebase emulators:start

powinien uruchomić serwer internetowy na porcie 5000 ( http://127.0.0.1:5000/ ), aby umożliwić lokalne testowanie przed przesłaniem.

Wdrażanie w Firebase

Teraz czas na ostatnie polecenie:

$ firebase deploy

Powinno to wywołać szereg działań. Ostatnie wiersze powinny 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

Powinien pojawić się adres URL hostingu. Spróbuj!

Uwaga: jeśli wdrożenie nie powiedzie się z powodu błędu uwierzytelniania (np. „Nie udało się utworzyć projektu”), może to oznaczać, że nigdy nie udało Ci się połączyć z Firebase. Musisz przejść do konsoli Firebase i zaakceptować Warunki korzystania z usługi. Trzeba to zrobić tylko raz w przypadku każdego konta e-mail.

Jeśli wdrożenie się powiedzie, ale zauważysz pustą stronę lub inne problemy z wdrożeniem, możesz wykonać kilka czynności:

• Otwórz „Narzędzia dla programistów” w przeglądarce i znajdź błąd. Następnie poproś Gemini o pomoc w jego naprawieniu, używając prompta podobnego do tego:

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

[ paste detailed JS console error ]

Uwaga: błąd powinien zawierać wiersz kodu JavaScript z pliku sketch.js, który jest dobrze znany Gemini. Oznacza to, że Gemini ma cały kontekst potrzebny do naprawienia problemu. Użyj tego samego czatu, na którym wygenerowano kod.

♾️ Iteruj!

Możesz powtarzać te kroki dowolną liczbę razy. Możesz kontynuować wpisywanie promptów, aż uzyskasz zadowalające wyniki.

Pamiętaj o kilku ważnych kwestiach:

1. Pętla iteracji jest znacznie szybsza w przypadku pętli Gemini > p5.js > Gemini niż w przypadku pętli Gemini > host lokalny > wdrożenie w Cloud Run > testowanie aplikacji w przeglądarce (odświeżanie).
2. Używaj Gita do obsługi wersji promptu i kodu. Możesz chcieć wrócić do promptu N i kodu N. Szczególnie ważne jest, aby zatwierdzać każdą zmianę sketch.js, ponieważ mogą się w niej kryć błędy.

Pamiętaj, że niektóre gry dobrze działają z klawiaturą, ale nie działają dobrze z myszą lub dotykiem na telefonie komórkowym. To świetny moment na ulepszenie kodu.

6. Wskazówki dotyczące promptów

Kilka wskazówek od osoby, która stworzyła już sporo gier.

Wersjonowanie prompta

W oryginalnym promcie prawdopodobnie znajdziesz błędy. mającą wersję git. Istnieje kilka ścieżek kodu:

1. Jeśli podoba Ci się to, co widzisz, i chcesz dalej pracować z Gemini, używając kolejnych promptów, warto je wszystkie śledzić (prompt 1, 2, 3 – przykład 1 – example2).
2. Jeśli nie zależy Ci na aplikacji utworzonej na podstawie prompta1, możesz udoskonalić prompta, odrzucić kod i zacząć od nowa ze zmodyfikowanym kodem (prompt1 v1, prompt1 v2, prompt1 v3 itd.).

Oczywiście możesz połączyć te 2 podejścia.

Mobilne funkcje

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ć, po prostu dotykając ekranu (np. na urządzeniu mobilnym)? Wyraźnie zaznacz to w prompcie. Może być konieczne utworzenie niektórych przycisków na klawiaturze (zobacz mój przykład Tetris 3D). Zobacz też dungemoji, aby dowiedzieć się więcej o problemach ze zgodnością z urządzeniami mobilnymi.

Przesyłanie opinii o błędach JavaScriptu i zrzutów ekranu bezpośrednio do Gemini

Gemini nie widzi Twoich interakcji z p5js, więc wklej do Gemini wszelkie błędy JavaScript. Pamiętaj, że Gemini jest modelem multimodalnym, więc jeśli wprowadzasz zmiany w interfejsie (np. zmniejszasz tytuł lub obniżasz wynik), możesz też dołączyć zrzuty ekranu z gry. Sprawdzanie kodu nigdy nie było tak przyjemne.

7. Gratulacje!

🎉 Gratulujemy ukończenia laboratorium.

Widzieliśmy, jak łatwo jest stworzyć grę za pomocą Gemini i jak Firebase zapewnia proste rozwiązanie hostingowe do przechowywania i udostępniania gry innym osobom.

Omówione zagadnienia

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

Teraz czas, aby 👥 się tym pochwalić. Dlaczego nie udostępnisz swojej najnowszej gry (your-project.web.app) na LinkedInie lub Twitterze z hashtagiem #VibeCodeAGameWithGemini (i może oznaczysz autora na LinkedInie)? Dzięki temu będziemy wiedzieć, jak atrakcyjne jest to ćwiczenie z programowania, i być może przygotujemy więcej podobnych materiałów.

Chcę więcej!

Jeśli szukasz dodatkowych materiałów, zapoznaj się z tymi grami i wskazówkami:

• W jeden weekend napisz 5 gier dla dzieci za pomocą Gemini 2.5 i p5.js W tym artykule znajdziesz 6 przykładów, które pomogą Ci zrozumieć proces kodowania wibracji w grze.
• palladius/genai-googlecloud-scripts (repozytorium GitHub z ok. 10 aplikacjami – kod i prompt): Tetris, Pacman, Connect 4, a nawet klon Rogue dla nostalgików. Zawiera prompty wszystkich tych gier. Wybierz ulubiony, dostosuj prompt i baw się dobrze!

Przykładowe gry, które możesz utworzyć:

Ostateczna wersja gry może wyglądać tak:

• A 3D tetris
• gra językowa,
• Nieuczciwy klon
• Klon Pac-Mana.

Pamiętaj, że ograniczeniem jest język angielski.

🎉 Miłego kodowania!