Gemini ile çocuklara yönelik bir oyun kodlayın ve Firebase ile yayınlayın.

1. Giriş

Google, 25 Mart 2025'te Gemini 2.5'i kullanıma sundu. Bu lansmanın en unutulmaz yönlerinden biri, herkesin "Gelişmiş Kodlama" özelliğini denemesine olanak tanımasıydı [video]:

Gemini 2.5: Tek satırlık bir istemle kendi dinozor oyununuzu oluşturun

Bu codelab'de, yaygın bir istemle başlayıp kendi tercihinize göre özelleştirerek basit bir çocuk uygulaması olan "sezgisel kodlama" hakkında bilgi edineceksiniz. Uygulamayı p5.js üzerinde test edeceğiz. Son olarak, bu değişiklikleri Firebase Hosting'e göndereceğiz. Bu değişikliğin en dikkat çekici yanı, tüm yığının şu anda ücretsiz olmasıdır.

Neler öğreneceksiniz?

• Bir oyun uygulamasının vibe kodunu oluşturmak için Gemini 2.5'i kullanın.
• Kodu p5js.org adresinde test edin.
• İstemlerinizi / uygulamanızı nasıl yineleyip iyileştireceğinizi öğrenin.
• Firebase'de statik uygulama barındırma

Bu codelab'de yapay zekayla üretilen kod kullanıldığını unutmayın. Bu kod deterministik olmadığından, yazar çıktınızı bilmediği için bu codelab'de yönergeler yer almaktadır. Ayrıca lütfen bu kodu üretimde KULLANMAYIN.

2. Ön koşullar

Bu kod laboratuvarı iki aşamadan oluşur:

1. Yalnızca web'e yönelik geliştirme. En çok eğleneceğiniz yer burasıdır ve kodlama bilgisi gerekmez. Bu amaçla Gemini kullanıcı arayüzümüzü ( gemini.google.com) ve p5.js'yi kullanacağız.
2. Yerel kodlama ortamı. Bu işlem için biraz kodlama / komut dosyası oluşturma becerisi, npm / npx'nin yüklenip kullanılması ve vscode veya IntelliJ gibi yerel bir düzenleyici gerekir. Bu ikinci bölüm isteğe bağlıdır ve yalnızca uygulamanızın kalıcı olmasını istiyorsanız, arkadaşlarınızın ve ailenizin uygulamayı mobil cihazlarından veya bilgisayarlarından oynaması için gereklidir.

1. aşama için tek ön koşul bir tarayıcı ve bilgisayardır (büyük ekran yardımcı olur). 2. aşama için okumaya devam edin.

Gemini kullanıcı arayüzü

gemini.google.com, en yeni Gemini modellerinizi deneyebileceğiniz ve kendi resimlerinizi ve videolarınızı oluşturabileceğiniz harika bir platformdur. Google Haritalar ve Oteller/Uçuşlar/Yorumlar gibi Google entegrasyonlarıyla desteklenen bu uygulama, bir sonraki tatilinizi planlamak için ideal bir yardımcıdır.

İpucu: Kodlamayla ilgileniyorsanız benzer bir arayüz olan AI Studio'yu da deneyebilirsiniz. Bu arayüzde bir LLM etkileşiminin prototipini oluşturabilir (ör. resim oluşturma) ve Python kodunu doğrudan sayfadan alabilirsiniz.

p5.js

p5.js, sanatçılar, tasarımcılar, eğitimciler ve diğer herkes için yaratıcı kodlamayı erişilebilir ve kapsayıcı hale getiren ücretsiz, açık kaynaklı bir JavaScript kitaplığıdır. Processing diline dayalıdır ve web tarayıcısında kod kullanarak etkileşimli görsel ve etkileşimli içerik oluşturma sürecini basitleştirir.

Yerel kodlama [isteğe bağlı]

Uygulamanızı kalıcı hale getirmek istiyorsanız daha fazla kurulum yapmanız gerekir:

• Yerel bir kod düzenleyici ( Visual Studio Code, IntelliJ vb.)
• Kodunuzu kalıcı olarak saklayabileceğiniz bir Git hesabı ( github / gitlab / bitbucket).
• npm Yerel olarak yüklenmiş olmalıdır. Kullanıcı alanında (npx veya eşdeğer bir teknoloji aracılığıyla) olması daha iyidir.

Ayrıca, daha sonra bir Firebase hesabı oluşturacağız.

Ayrıca aşağıdaki gibi bazı kodlama becerileri de gereklidir:

• npm paketi yükleme
• Dosya sistemiyle etkileşim kurma (klasör ve dosya oluşturma)
• git (git add, git commit, git push) ile etkileşim kurma

Burada zorlayıcı bir şey olursa LLM'lerin bu konuda size yardımcı olabileceğini unutmayın. Örneğin, öneri almak için "Gemini 2.0 flash" veya eşdeğer bir modeli kullanabilirsiniz. Bu yine de çok zor geliyorsa 2. aşamayı tamamen atlayabilirsiniz. 1. aşama yeterince ödüllendirici olmalıdır.

3. İlk oyunumuzu oluşturalım.

gemini.google.com adresini açın ve kod oluşturabilen bir model seçin (ör. 2.5). Bu seçenek; kullanılabilirliğe, maliyete ve tarihe göre değişebilir. Bu makalenin yazıldığı sırada en iyi seçenekler şunlardır:

• Gemini 2.5 Flash (daha hızlı yineleme)
• Gemini 2.5 Pro (daha iyi çıkış).

Gemini modellerimiz hakkında daha fazla bilgiyi burada bulabilirsiniz.

İlk oyun istemimiz

Bu videodan da görebileceğiniz gibi, ilk istem şu kadar basit olabilir:

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

Bu yanıtı istediğiniz gibi özelleştirebilirsiniz:

• Orta çağ / gelecek / cyberpunk ortamları
• Emoji dolu mu yoksa belirli bir emoji mi var?
• Sarı rengi veya morun çeşitli tonlarını seviyorsunuz.
• Çocuğunuz tek boynuzlu atları, dinozorları veya Pokémon'ları seviyor olabilir.

İstemi tarayıcınıza yapıştırdıktan sonra Gemini'ın düşündüğünü göreceksiniz. Gemini 2.5 bir düşünme modelidir. Bu nedenle, zaman içinde değiştiğini görebileceğiniz bir dizi göreve başlar. Ne olduğunu görmek için değişen açılır listeyi tıklayabilir veya sonucu bekleyebilirsiniz:

Sonunda çalışan bir JavaScript'iniz olmalıdır.

Artık üstteki kopyalama düğmesini tıklayabilirsiniz:

Oyunu p5.js'de test etme

Şimdi oyunu test etme zamanı.

• p5.js düzenleyicisini buradan açın: https://editor.p5js.org/
• Mevcut sketch.js kodunu seçip silin.
• Kodunuzu yapıştırın

Sayfanız aşağıdaki gibi görünmelidir:

Son olarak OYNA düğmesine basabilirsiniz.

Artık iki şey olabilir: Kodunuz çalışır veya başarısız olur. Her iki duruma bağlı olarak talimatları uygulayalım:

1. Kodunuz başarısız oluyor
2. Kodunuz ilk denemede çalışır.

Sonraki iki paragrafta bu iki koşulun nasıl yönetileceğini görelim.

(1. durum) Kodum çalışmıyor.

Bu tür bir hata alırsanız hatayı kopyalayıp Gemini'a yapıştırabilirsiniz. Kodunuzu sizin için düzeltmesine izin verin.

(2. durum) Kodum çalışıyor.

Kodunuz çalışıyorsa sayfanın sağ tarafında görsel bir oyun görürsünüz.

👏 Tebrikler, ilk yapay zeka oyununuzu oynuyorsunuz.

Not: Kodunuz olduğu sürece uygulama yalnızca tarayıcınızda çalışır. Uygulamayı ailenize ve arkadaşlarınıza göstermek istiyorsanız barındırma çözümüne ihtiyacınız vardır. Neyse ki sizin için harika bir seçeneğimiz var. Okumaya devam edin.

Artık sonraki bölüme geçebilirsiniz.

Diğer yinelemeler

Kodunuzu bozma ihtimaline karşı bir yere kaydetme zamanı geldi. İsterseniz bir kez daha deneyebilirsiniz. Örneğin, yazar Super Mario'nun çift zıplamasını çok seviyor. Bu nedenle, aşağıdaki gibi bir şey ekleyebilirsiniz:

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

İstediğiniz her şeyi değiştirebilirsiniz. Sınır yok! Belki de daha yüksek puanlar için karakter adını saklamak veya zorlaştırmak için zaman içinde hızı artırmak istiyorsunuz. İsteminizde yalnızca İngilizce dilini kullanabilirsiniz.

İpucu: Gemini, genellikle yalnızca uygulamanız gereken değişikliği (ör. XYZ işlevi için değişiklik budur) verir. İstemi, tüm güncellenmiş kodu verecek şekilde ayarlayabilirsiniz. Örneğin:

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

Bu sayede kesme ve yapıştırma deneyiminiz kolaylaşır.

Uyarılar

Uyarı: Oyun ekranda sorunsuz çalışabilir ancak klavyesi olmayan bir cihazda (ör. cep telefonu) oynayamayabilirsiniz. Bu konuya daha sonra değineceğiz.

Uyarı: https://editor.p5js.org/, kodunuzun birden fazla yinelemesini kaydetme konusunda sınırlı bir yeteneğe sahiptir. Gemini'ın oluşturduğu yanıtı beğendiyseniz ve *n-*inci yinelemenizi kaybetmek istemiyorsanız bir sonraki adıma geçin (git tuşunu kullanabilirsiniz).

Gemini ile etkileşiminizi yer işaretlerine ekleyebilirsiniz. Belki de "p5js ilk oyunum" olarak yeniden adlandırmak veya daha sonra kullanmak üzere Gemini'ın kalıcı bağlantısını (ör. " https://gemini.google.com/app/abcdef123456789") not etmek istersiniz.

4. Bu kodu yerel olarak çalıştıralım

Bu noktada şunlara sahip olmanız gerekir:

• Çalışan kod içeren açık bir Gemini tarayıcı penceresi.
• Çalışan bir oyunun bulunduğu açık bir p5.js tarayıcı penceresi
• npm yüklü bir yerel kodlama ortamı.

Bu, codelab'in daha zor kısmıdır. Temel düzeyde kodlama deneyimi gerekir.

Bağımlılıkları yükleme

npm ve node eksikse nvm gibi bir sürüm yöneticisi aracılığıyla npm yüklemeniz en iyi seçenektir . İşletim sisteminizle ilgili yükleme talimatlarını uygulayın.

Ayrıca bir kodlama IDE'si kullandığınızı varsayıyoruz. Ekran görüntülerimizde ve örneklerimizde Visual Studio Code'u kullanacağız ancak diğer araçlar da işe yarar.

Yerel ortamı ayarlama

Bu aşamada kendi dosya yapınızı oluşturabilirsiniz.

Kurulum komut dosyası, açıklama amaçlı olarak verilmiştir. Klasör ve dosya oluşturarak bu işlemi manuel olarak yapabilirsiniz:

# 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

Son klasör yapısı şu şekilde görünmelidir:

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

Bu bilgiyi burada da bulabilirsiniz.

Şimdi en sevdiğiniz kod düzenleyiciyi (ör. code my-first-vibecoding-project/) açın ve editor.p5js.org adresindeki içeriği public/ altındaki 3 dosyaya yapıştırmaya başlayın:

• README.md ← Buraya Gemini ile etkileşim sabit bağlantısını, buraya da uygulama kullanıma sunulduğunda uygulamanın açılış sayfasını ekleyebilirsiniz.
• PROMPT.md ← Burada, tüm istemlerinizi H2 paragrafıyla ayırarak ekleyebilirsiniz. Belirli bir istemi neden verdiğinizi açıklamak istiyorsanız isteminizi 3 ters tırnak işareti ( örnek) içine alabilirsiniz.
• **public/index.html** ← HTML kodunuzu buraya kopyalayın
• **public/sketch.js** ← JS kodunuzu buraya kopyalayın
• **public/style.css** ← CSS kodunuzu buraya kopyalayın

Herkese açık klasörde özel bir PNG gibi ek öğeler bulunabilir.

5. Firebase'i ayarlama ve Firebase'e dağıtma

Firebase'i kurun (yalnızca ilk kez)

Makinenizde npm'nın yüklü olduğundan emin olun.

Terminalde aşağıdakilerden birini yazın (ikisi de çalışır):

# 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

Artık firebase komutunu çağırabilirsiniz. Sorun yaşarsanız herkese açık dokümanlardaki adımları uygulayın.

Not: Firebase CLI için Node.js 18.0.0 veya sonraki bir sürüm gereklidir. Düğümü güncelleme olanağınız yoksa (ör. yönetici ayrıcalığınız yoksa) hem düğüm hem de npm sürümlerini kontrol etmek için nvm kullanmayı düşünebilirsiniz.

Firebase başlatma

Bu bölümde Firebase Hosting'i ayarlayacağız. Bu akış çok basittir ancak ilk kez kullanırken alışmanız biraz zaman alabilir.

Dosyalarınızı içeren public/ dizininin hemen üstündeki dizinde olduğunuzdan emin olun. Listelemede (ls -al veya dir) aşağıdakine benzer bir ifade yer almalıdır:

$ ls 
PROMPT.md
README.md
public/

• [1. adım] Konsolda şunu yazın: firebase init

• İmleçleri kullanarak "Barındırma: .." seçeneğine gidin, BOŞLUK ve ardından ENTER tuşuna basın. (Neden? Çoktan seçmeli bir soru olduğundan hem seçmeniz hem de sonraki sayfaya gitmeniz gerekir.)
• [2. adım] Artık mevcut bir projeyi seçebilir (1. seçenek) veya yeni bir proje oluşturabilirsiniz (2. seçenek):

• Not: Mevcut bir Cloud projeniz varsa bu proje bir Firebase projesi olmayabilir. Firebase projeleri, GCP projelerinin bir alt kümesidir. Bunları Firebase projesi yapmak için ek işlemler yapmanız gerekir. Bu nedenle 3. seçeneği kullanabilirsiniz.
• Kararsızsanız "Yeni proje oluştur"u kullanın ve "p5js-ADINIZ-UYGULAMANIZ" gibi bir ad ekleyin (ör. "p5js-riccardo-tetris").

Dikkat: Proje kimlikleri, Google Cloud genelinde benzersizdir. Bu ayarları daha sonra değiştiremeyeceğiniz için dikkatli bir şekilde seçin.

• [3. adım] What would you like to call your project? (defaults to your project ID) (p5js-riccardo-tetris)
• ENTER tuşuna basın.

• [4. adım] ? What do you want to use as your public directory? (public)
• ENTER tuşuna basın (public/ sembolünü bilerek ekledik)

• [5. adım] ? Configure as a single-page app (rewrite all urls to /index.html)? No
• ENTER tuşuna basın (hayır).

• [6. adım] ? Set up automatic builds and deploys with GitHub? No
• ENTER tuşuna basın - HAYIR

• [7. adım] ? File public/index.html already exists. Overwrite? (y/N)
• ENTER tuşuna basın (hayır).
• UYARI Bu işlem hataya neden olabilir. Üzerine yazarsanız yeni index.html dosyası p5js ile uyumlu olmaz.

Her şey yolunda olduğunda aşağıdaki mesajı görürsünüz:

Bu işlemler sonucunda birkaç dosya oluşturulmuş olmalıdır:

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

Özellikle .firebaserc, proje kimliğinizi içermelidir. Proje kimliğinizi şu komutla programatik olarak çekebilirsiniz: cat .firebaserc | jq .projects.default -r

Uyarı: index.html dosyasını kontrol edin. 16 satırdan uzunsa ve/veya içinde firebase kelimesi varsa p5js dosyalarının üzerine yanlışlıkla yazmışsınızdır. Sorun değil. Eski index.html dosyasını git'ten veya p5js düzenleyicisinden geri almayı unutmayın.

Yerel test

Geri bildirim döngüsü gecikmesini azaltmak için önce yerel olarak denemeler yapabilirsiniz.

Bunu yapmak için Firebase ekibinin güçlü CLI paketini deneyebilirsiniz. Örneğin:

$ firebase emulators:start

Yayınlamadan önce yerel olarak test edebilmeniz için 5000 bağlantı noktasında ( http://127.0.0.1:5000/ ) bir web sunucusu başlatmalıdır.

Firebase'e dağıtma

Şimdi son komutu girme zamanı:

$ firebase deploy

Bu işlem, bir dizi işlemi tetiklemelidir. Son birkaç satır aşağıdaki gibi olmalıdır:

$ 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

Bu işlem, barındırma URL'sini gösterir. Yenilikleri inceleyin.

Dikkat: Dağıtım, bir tür kimlik doğrulama hatasıyla (ör. "proje oluşturulamadı") başarısız olursa bu, Firebase'e hiç bağlanmadığınız anlamına gelebilir. Firebase Console'a gidip Hizmet Şartları'nı kabul etmeniz gerekir. Bu işlem, e-posta hesabı başına yalnızca bir kez yapılmalıdır.

Dağıtım başarılı olursa ancak boş sayfa veya başka bir şekilde bozuk dağıtım görürseniz yapabileceğiniz birkaç şey vardır:

• Tarayıcınızın "Geliştirici Araçları"nı açıp hatayı bulun ve Gemini'a şu gibi bir istemle hatayı düzeltmenize yardımcı olmasını isteyin:

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

[ paste detailed JS console error ]

Not: Hata, Gemini'ın iyi bildiği sketch.js için JavaScript satırını içermelidir. Bu durumda Gemini, sorunu düzeltmek için gereken tüm bağlama sahiptir. Kodu oluşturan sohbeti kullandığınızdan emin olun.

♾️ Yineleme

Bu adımları istediğiniz kadar tekrarlayabilirsiniz. Sonuçlardan memnun kalana kadar istem girmeye devam edebilirsiniz.

Unutulmaması gereken birkaç nokta vardır:

1. Gemini > p5.js > Gemini döngüsündeki yineleme döngüsü, Gemini > yerel ana makine > Cloud Run'a dağıtma > tarayıcıda uygulamayı test etme (yenileme) döngüsüne kıyasla çok daha hızlıdır.
2. Hem istem hem de kod için sürüm oluşturma amacıyla Git'i kullanın. İstem N'ye ve kod N'ye geri dönmek isteyebilirsiniz. Özellikle, hatalar fark edilmeden gizlenebileceğinden, gönderdiğiniz her bir sketch.js için git commit işlemi yapmak istersiniz.

Bazı oyunların klavye ile iyi çalıştığını ancak fare ile veya mobil telefonda dokunarak iyi çalışmadığını unutmayın. Bu, kodu iyileştirmek için harika bir fırsattır.

6. İstem İpuçları

Daha önce oluşturduğumuz oyunlardan edindiğimiz bazı ipuçlarını sizinle paylaşmak istiyoruz.

İsteminize sürüm oluşturma

Orijinal isteminizde hatalar olabilir. git sürümüne sahip olmak Burada birkaç kod yolu vardır:

1. Gördüklerinizi beğendiyseniz ve Gemini ile sonraki alt istemlerle yineleme yapmak istiyorsanız hepsini bir yerde takip etmek ilginç olabilir (istem 1, 2, 3 - 3 görevli örnek1 - example2).
2. İstem1 tarafından oluşturulan uygulamayı kullanmak istemiyorsanız bunun yerine istemi mükemmelleştirebilir, kodu silebilir ve değiştirilmiş kodla yeniden başlayabilirsiniz (istem1 v1, istem1 v2, istem1 v3 vb.).

Elbette bu iki yaklaşımı birleştirebilirsiniz.

Mobil işlevsellik

Oluşturduğunuz oyuna bağlı olarak kullanıcıyla etkileşimde bulunmanız gerekebilir. Bu etkileşim için klavye gerekiyor mu? Yoksa yalnızca ekrana dokunarak mı kullanılabilir (ör. mobil cihazla)? İstemde bu konuda net olduğunuzdan emin olun. Klavyenizde bazı düğmeler oluşturmanız gerekebilir (Tetris 3D örneğime bakın). Mobil uyumluluk için dungemoji ile ilgili sorunlar başlıklı makaleyi de inceleyin.

JavaScript hataları / ekran görüntüleri hakkında doğrudan Gemini'a geri bildirim gönderme

Gemini, p5js ile etkileşiminizi göremediğinden JavaScript hatalarını Gemini'a yapıştırdığınızdan emin olun. Gemini'ın çok formatlı olduğunu unutmayın. Bu nedenle, kullanıcı arayüzünde değişiklikler (ör. başlığı küçültme veya puanı düşürme) yaparsanız oyunun ekran görüntülerini de ekleyebilirsiniz. Kodlama geri bildirimi görünümü hiç bu kadar eğlenceli olmamıştı.

7. Tebrikler!

🎉 Codelab'i tamamladığınız için tebrik ederiz.

Gemini ile oyun oluşturmanın ne kadar kolay olduğunu ve Firebase'in, oyununuzu kalıcı hale getirip başkalarıyla paylaşmak için nasıl kolay bir barındırma çözümü sunduğunu gördük.

İşlediğimiz konular

• Gemini 2.5 ile oyun oluşturun.
• Firebase'e dağıtma

Şimdi 👥 övünme zamanı! En son oyununuzu (your-project.web.app) LinkedIn veya Twitter'da #VibeCodeAGameWithGemini hashtag'iyle paylaşmıyor musunuz? (LinkedIn'de yazarı da etiketleyebilirsiniz.) Bu sayede, bu codelab'in ne kadar ilgi çekici olduğunu öğrenebilir ve bu türde daha fazla içerik yazabiliriz.

Daha fazla bilgi istiyorum.

Daha fazla kaynak arıyorsanız şu oyunlara ve istemlere göz atın:

• Bir hafta sonunda Gemini 2.5 ve p5.js ile beş çocuk oyunu kodlayın! Bu makale, 6 örnekle birlikte bir oyuna sezgisel kodlama ekleme sürecinde size yol gösterecektir.
• palladius/genai-googlecloud-scripts (~10 uygulama içeren GitHub deposu - kod ve istem): Tetris, Pacman, Connect 4 ve hatta nostalji sevenler için Rogue klonu! Bu, tüm bu oyunların istemlerini içerir. Favorinizi seçin, istemi uyarlayın ve keyfini çıkarın.

Oluşturabileceğiniz örnek oyunlar:

Son oyun şu şekilde görünebilir:

• 3D Tetris
• Dil oyunu
• Kötü amaçlı klon
• Pac-Man klonu.

Yine İngilizce sınırına takılıyoruz.

🎉 Keyifli kodlamalar!