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

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

Bu codelab hakkında

subjectSon güncelleme May 13, 2025
account_circleYazan: Riccardo Carlesso

1. Giriş

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

a3d1de17f9fbf428.png

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

Bu codelab'de, basit bir çocuk uygulaması için "vibe kodlama" hakkında bilgi edinecek, yaygın bir istemden başlayıp uygulamayı kendi zevkinize göre özelleştireceksiniz. Uygulamayı p5.js üzerinde test edeceğiz. Son olarak, bu değişiklikleri Firebase Hosting'e göndereceğiz. Bunun en dikkat çekici yanı, tüm paketin şu anda ücretsiz olmasıdır.

  • Gemini 2.5'i kullanarak oyun uygulaması kodlayın.
  • Kodu p5js.org adresinde test edin.
  • İsteminizi / uygulamanızı iterasyon yaparak nasıl hassaslaştırabilirsiniz?
  • Firebase'de statik uygulama barındırma

af537073e37f086a.png

Bu kod laboratuvarının yapay zeka tarafından oluşturulan kod kullandığını not edin. Bu kod, kesin değildir. Bu nedenle, bu kod laboratuvarının yazarının, çıktınızı bilmediği için bu kod laboratuvarında yönergeler yer alır. Ayrıca lütfen bu kodu üretim ortamında KULLANMAYIN.

Bu codelab'i beğendiyseniz şık ve entegre bir kodlama deneyimi sunan Firebase Studio'ya göz atmayı unutmayın.

2. Ön koşullar

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

  1. Yalnızca web geliştirme. En çok eğleneceğiniz yer burasıdır ve kodlama bilgisi gerekmez. Bunun için Gemini kullanıcı arayüzümüzden ( gemini.google.com) ve p5.js'den yararlanacağız.
  2. Yerel kodlama ortamı. Bu noktada biraz kodlama / komut dosyası yazma becerisi ve npm / npx ile vscode veya IntelliJ gibi yerel bir düzenleyicinin yüklenmesi ve kullanılması gerekir. Bu ikinci bölüm isteğe bağlıdır ve yalnızca arkadaşlarınızın ve ailenizin mobil cihazlarından veya bilgisayarlarından uygulamanızla oynaması için uygulamanızın kalıcı olmasını istiyorsanız gereklidir.

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

Gemini kullanıcı arayüzü

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

8d174c7e462cfd11.png

İpucu: Kodlama konusunda bilginiz varsa LLM etkileşiminin prototipini oluşturabileceğiniz (ör. resim oluşturma) ve Python kodunu doğrudan sayfadan alabileceğiniz benzer bir arayüz olan AI Studio'yu da deneyebilirsiniz.

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 kaynak bir JavaScript kitaplığıdır. Processing dilini temel alan bu araç, web tarayıcısında kod kullanarak etkileşimli görsel ve etkileşimli içerik oluşturma sürecini basitleştirir.

ca1f12cbbedc76b9.png

Yerel kodlama [isteğe bağlı]

Uygulamanızı devam ettirmek istiyorsanız daha fazla kurulum yapmanız gerekir:

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

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

Ayrıca aşağıdakiler gibi bazı kodlama becerilerine de sahip olmanız gerekir:

  • 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.

Bu süreçte sizi korkutan bir durum olursa LLM'lerden yardım alabilirsiniz. Örneğin, öneri almak için "Gemini 2.0 flash" veya eşdeğer modeli kullanabilirsiniz. Bu işlem hâlâ çok zorsa 2. aşamayı tamamen atlayabilirsiniz. 1. aşama yeterince ödüllendirici olacaktır.

3. İlk oyunumuzu oluşturalım.

gemini.google.com adresine gidin ve kod yükleme özelliğine sahip bir model (ör. 2.5) seçin. Bu seçenek, müsaitlik durumuna, maliyete ve tarihe göre değişiklik gösterebilir. Bu makalenin yazıldığı sırada en iyi seçenekler şunlardır:

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

Gemini modellerimiz hakkında daha fazla bilgiyi burada bulabilirsiniz.

8d174c7e462cfd11.png

İlk oyun istemimiz

Bu videoda göreceğ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 mesajı biraz özelleştirebilirsiniz:

  • Orta çağ / gelecek / siberpunk ortamları
  • Emoji dolu mu yoksa belirli bir emoji mi?
  • Sarı rengi veya morun çeşitli tonlarını seviyorsunuz.
  • Çocuğunuz tek boynuzlu atlara, dinozorlara veya Pokemon'lara bayılıyor olabilir.

İstemi tarayıcınıza yapıştırdıktan sonra Gemini'nin düşündüğünü göreceksiniz. Evet, Gemini 2.5 bir düşünme modelidir. Bu nedenle, zaman içinde değiştiğini gözlemleyebileceğiniz çeşitli görevler başlatır. Neler olduğunu görmek için değişen açılır menüyü tıklayabilir veya sonucu bekleyebilirsiniz:

1379f641db7b829d.png

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

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

5b3750c38378acb8.png

Oyun p5.js'de test edilir

Artık oyunu test etme zamanı.

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

bcbd2cf1ea825ae6.png

Son olarak OYNAT düğmesine basabilirsiniz.

Bu durumda iki şey olabilir: Kodunuz çalışır veya çalışmaz. Her iki duruma göre talimatları uygulayalım:

  1. Kodunuz geçersizse
  2. Kodunuz ilk denemede çalışıyor.

Sonraki iki paragrafta her iki koşulun da nasıl yönetileceğini öğrenelim.

(durum 1) Kodum başarısız oluyor.

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

366759a4baacccc7.png

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

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

👏 Tebrikler, ilk yapay zeka oyununuzu yayınladınız.

da962547fd6dc5f9.png

Not: Uygulama, kodunuzun bulunduğu süre boyunca yalnızca tarayıcınızda çalışır. Uygulamayı ailenize ve arkadaşlarınıza göstermek istiyorsanız bir barındırma çözümüne ihtiyacınız vardır. Neyse ki sizin için mükemmel bir seçenek sunuyoruz. Okumaya devam edin.

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

Daha fazla iterasyon

Bozulmaması için kodunuzu bir yere kaydetme zamanı geldi. İsterseniz bir kez yineleyebilirsiniz. Örneğin, yazar Super Mario'nun çift zıplamasını çok seviyor. Bu nedenle, şöyle 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 yoktur. Daha yüksek puanlar için karakter adını kaydetmek veya daha zor hale getirmek için hızı zaman içinde artırmak isteyebilirsiniz. İsteminiz İngilizce dilinde olmalıdır.

İpucu: Gemini, genellikle yalnızca uygulamanız gereken değişikliği gösterir (ör. XYZ işleviyle ilgili değişiklik). İsteminizi, güncellenmiş kodun tamamını size verecek şekilde ayarlayabilirsiniz.

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

. Bu, kesme ve yapıştırma deneyimini sizin için kolaylaştırır.

Uyarılar

Gemini sohbetinize yer işareti koyabilirsiniz. Dilerseniz uygulamayı "p5js ilk oyunum" olarak yeniden adlandırabilir veya Gemini'nin kalıcı bağlantısını (ör. " https://gemini.google.com/app/abcdef123456789") not alabilirsiniz.

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

Bu aşamada şunları yapmış olmanız gerekir:

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

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

Bağımlılık yükleme

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

Ayrıca bir kodlama IDE kullandığınızı varsayıyoruz. Ekran görüntülerimizde ve örneklerimizde Visual Studio Code'u kullanacağız ancak istediğiniz IDE'yi kullanabilirsiniz.

Yerel ortamı ayarlama

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

Örnek olarak bir kurulum komut dosyası 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

Nihai 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 bilgileri burada da bulabilirsiniz.

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

  • README.md ← Gemini sohbetinin kalıcı bağlantısını buraya, uygulama kullanıma sunulduğunda da uygulamanın açılış sayfasını buraya yerleştirebilirsiniz.
  • PROMPT.md ← Tüm istemlerinizi H2 paragrafıyla ayırarak buraya ekleyebilirsiniz. Belirli bir istemi neden verdiğinizi açıklamak istiyorsanız isteminizi 3 ters tırnak içine alabilirsiniz ( örnek).
  • **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ör, özel PNG gibi ek öğeler barındırabilir.

5. Kurulum ve Firebase'e dağıtma

Firebase'i ayarlama (yalnızca ilk kez)

Makinenize npm'ü yüklediğinizden emin olun.

Terminalde aşağıdakilerden birini yazın (her ikisi de işe yarar):

# 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ümanları inceleyin.

Firebase başlatma

Bu bölümde Firebase Hosting'i ayarlayacağız. Bu çok basit bir akıştır ancak ilk kez kullanırken bu akışla ilgili bilgi edinmeniz biraz zaman alabilir.

Dosyalarınızı içeren public/ dizininin hemen üstündeki dizinde olduğunuzdan emin olun. Giriş (ls -al veya dir) şu şekilde görünmelidir:

$ ls 
PROMPT.md
README.md
public/
  • [1. adım] Konsolda şunu yazın: firebase init

dc4baa436d63efac.png

  • İmleçleri kullanarak "Barındırma: .." bölümüne gidin ve BOŞLUK tuşuna, ardından ENTER tuşuna basın. (Neden? Bu çoklu bir seçim 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):

955ab96f94b97b28.png

  • Not: Mevcut bir Cloud projeniz varsa bu bir Firebase projesi olmayabilir. Firebase projeleri, GCP projelerinin bir alt kümesidir. Bunları Firebase projesi haline getirmek için ek işlem yapmanız gerekir. 3. seçenek bu işlem içindir.
  • Karar veremiyorsanız "Yeni proje oluştur"u kullanın ve "p5js-ADINIZ-UYGULAMANIZ" gibi bir ad ekleyin (ör. "p5js-riccardo-tetris").

9fb1e7c9f7d68f25.png

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

30d2cda68c45befc.png

  • [step 4] ? What do you want to use as your public directory? (public)
  • ENTER tuşuna basın (public/'yi bilerek oluşturduk)

54bcc6fe2dd0e14e.png

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

af930401d3775c.png

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

81e017d4e3a5f7e6.png

  • [step 7] ? File public/index.html already exists. Overwrite? (y/N)
  • ENTER tuşuna basın (hayır).
  • UYARI Bu işlem hatalara yol açabilir. Üzerine yazarsanız yeni index.html dosyası p5js ile uyumlu olmaz.

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

98ff444361607aae.png

Bu işlemler birkaç dosya oluşturmuştur:

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

Özellikle .firebaserc, proje kimliğinizi içerir. Bu kimliği şu şekilde programatik olarak alabilirsiniz: 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 yazdınız. Sorun değil. Eski index.html dosyasını git'ten veya p5js düzenleyicisinden geri yüklemeyi 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

5000 bağlantı noktasında ( http://127.0.0.1:5000/) bir web sunucusu başlatır. Böylece, itmeden önce yerel olarak test edebilirsiniz.

Firebase'e dağıtma

Şimdi son komutu verme zamanı:

$ firebase deploy

be5c455df84ac20.png

Bu işlem, bir dizi işlemi tetikler. Son birkaç satırda aşağıdaki gibi bir ifade yer alı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.

Dağıtım başarılı olsa da boş bir sayfa veya başka bir şekilde bozuk bir dağıtım görürseniz birkaç şey yapabilirsiniz:

  • Tarayıcınızın "Geliştirici Araçları"nı açıp hatayı bulun ve Gemini'den hatayı düzeltmenize yardımcı olmasını isteyin. Bunun için aşağıdaki gibi bir istem kullanabilirsiniz:
I've deployed the script correctly with Firebase, but I now see a blank page with this error:

[ paste detailed JS console error ]

♾️ İterasyon yapın.

Bu adımları istediğiniz kadar tekrarlayabilirsiniz. Sonuçlardan memnun olana kadar istem göndermeye devam edebilirsiniz.

99420f90bf14d04d.png

Dikkat edilmesi gereken birkaç nokta vardır:

  1. Gemini > p5.js > Gemini döngüsü, Gemini > yerel ana makine > bulutta çalıştırmaya dağıt > uygulamayı tarayıcıda test et (yenile'ye basın) döngüsüne kıyasla çok daha hızlıdır.
  2. Hem istemi hem de kodu sürümlendirmek için git'i kullanın. N isteminde geri dönüp N kodunu yazabilirsiniz. Özellikle, git commit işlemini, gönderdiğiniz her sketch.js için yapmanız gerekir. Aksi takdirde, tespit edilmeyen hatalar olabilir.

Bazı oyunların klavyeyle iyi çalıştığını ancak fareyle veya cep telefonunda dokunarak oynandığında iyi çalışmadığını unutmayın. Bu, kodu iyileştirmek için mükemmel bir zamandır.

6. İstemlerle İlgili İpuçları

Şimdiye kadar birçok oyun oluşturmuş biri olarak bazı ipuçlarını paylaşmak isterim.

İsteminize sürüm oluşturma

Orijinal isteminizde muhtemelen hatalar göreceksiniz. git sürümü olmalıdır. Burada birkaç kod yolu vardır:

  1. Gördüklerinizi beğendiyseniz ve sonraki alt istemlerle Gemini ile iterasyon yapmak istiyorsanız hepsini bir yerde takip etmek ilginç olabilir (istem 1,2,3 - 3 çekimli örnek1 - example2).
  2. prompt1 tarafından oluşturulan uygulama sizin için çok önemli değilse istemi mükemmelleştirmek, kodu atmak ve değiştirilmiş kodla (prompt1 sürüm 1, prompt1 sürüm 2, prompt1 sürüm 3 vb.) yeniden başlamak isteyebilirsiniz.

Elbette bu iki yaklaşımı birlikte kullanabilirsiniz.

Mobile işlevselliği

Oluşturduğunuz oyuna bağlı olarak kullanıcıyla etkileşime geçmeniz gerekebilir. Bu etkileşim için klavye gerekir mi? Yoksa ekrana dokunarak (ör. mobil cihazla) kullanılabilir mi? İstemde bu konuda net bir şekilde bilgi verin. Klavyeniz üzerinde bazı düğmeler oluşturmanız gerekebilir (Tetris 3D örneğime bakın). Mobil uyumluluk için dungemoji sorununa da göz atın.

JavaScript hatalarını / ekran görüntülerini doğrudan Gemini'ye geri bildirin

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

b0bacf73c058c4e5.png

7. Tebrikler!

🎉 Kod laboratuvarını tamamladığınız için tebrikler.

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

b730ed7192ac3d1c.png

Ele aldığımız konular

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

Şimdi 👥 bu başarınızla övünme zamanı. En son oyununuzu (your-project.web.app) LinkedIn veya Twitter'da #VibeCodeAGameWithGemini hashtag'iyle paylaşın (ve belki de LinkedIn'de yazarı etiketleyin). Bu sayede, bu codelab'in ne kadar ilgi çekici olduğunu öğrenebilir ve bu türden daha fazla codelab yazabiliriz.

Daha fazlasını istiyorum!

Daha fazla kaynağa ihtiyacınız varsa şu oyunlara ve istemlere göz atın:

Bugün yaptığınız işlemler çok zahmetli geldiyse Firebase Studio'yu da deneyebilirsiniz. Burada fikir > istem > kod > uygulama döngüsünün tamamı tek bir tarayıcı penceresinde yer alır.

Oluşturabileceğiniz bazı örnek oyunlar:

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

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

Yine de İngilizce sınırdır.

🎉 Keyifli kodlamalar dileriz.

bug_report Hata bildir