1. Başlamadan önce
Arkadaşlarınızla veya komşularınızla hafta sonu koşusu düzenlemeyi denediyseniz bu zorluğu bilirsiniz: Buluşma yerleri sonsuz grup sohbetlerinde kaybolur, insanlar sürekli olarak herkesin hangi tempoda koştuğunu sorar ve yeni gelenler kimin geleceğinden asla emin olamaz.
Bu codelab'de, yerel koşucuların en sevdikleri rotalara göz atabileceği, hafta sonu buluşmaları planlayabileceği, tek tıklamayla katılım onayı verebileceği ve diğer koşucularla sohbet edebileceği, kullanıcı dostu bir web uygulaması olan Running Club'ı oluşturarak bu günlük sorunu çözeceksiniz.
Bu uygulamanın neden veritabanına ihtiyacı var?
Topluluk uygulamalarının veritabanı olarak bilinen güvenilir bir belleğe ihtiyacı vardır. Koşucular yeni bir rota eklediğinde, cumartesi sabahı koşusuna katılacağını bildirdiğinde veya park yeriyle ilgili soru soran bir yorum yayınladığında bu bilgiler, telefonlarını kapattıklarında ya da bilgisayarlarını kapattıklarında kaybolmaz. Bir veritabanı, tüm rotaları, katılımcı listelerini ve üye mesajlarını güvenli bir şekilde saklayıp düzenler. Böylece kulüpteki herkes uygulamayı her açtığında güncel bilgileri görür.
Bu uygulamayı Google AI Studio'nun Oluşturma modunu kullanarak geliştireceksiniz. Karmaşık kodlar yazmanız veya teknik altyapıyı kendiniz kurmanız gerekmez. Sadece ne istediğinizi basit bir dille açıklamanız yeterlidir. Google AI Studio, uygulamayı oluşturur, verilerinizi hatırlamak için gerçek bir PostgreSQL İçin Cloud SQL veritabanı bağlar ve uygulamayı Cloud Run'da yayınlayarak topluluğunuzun hemen kullanmaya başlamasını sağlar.
Ne oluşturacaksınız?
Aşağıdakileri içeren bir topluluk web uygulaması olan Running Club'ı oluşturup başlatacaksınız:
- Google ile oturum açma: Mevcut bir Google Hesabı'nı kullanarak hızlı ve güvenli giriş yapın.
- Koşucu profilleri: Koşu tercihlerini ve hedef tempoyu gösteren üye profilleri.
- Rota kitaplığı: Mesafe, yokuş zorluğu ve buluşma noktaları gibi bilgilerin yer aldığı, favori mahalle rotalarının derlemesi.
- Yaklaşan koşu planı: Yaklaşan grup koşularını düzenlemek ve rotalarla ilişkilendirmek için kullanılan bir etkinlik panosu.
- Kolay LCV'ler: Üyelerin "Geliyorum" demesi ve kimlerin geleceğini görmesi için tek tıklamayla düğme.
- Tartışma yürütme: Ayrıntıları koordine etmek, soru sormak ve güncellemeleri paylaşmak için her çalıştırmada bir yorum alanı bulunur.
Neler öğreneceksiniz?
- Google AI Studio'da basit bir istem kullanarak çalışan bir web uygulaması oluşturma
- Google AI Studio'nun Google ile Oturum Açma'yı otomatik olarak ayarlama şekli.
- Google AI Studio, verilerinizi hatırlamak için nasıl gerçek bir PostgreSQL İçin Cloud SQL veritabanı oluşturup bağlar?
- Yapay zeka ile sohbet ederek kolayca yeni özellikler ekleme ve veritabanınızı genişletme
- Kulübünüzün verilerinin ziyaretler arasında güvenli bir şekilde kaydedildiğini doğrulama
- Uygulamanızı Cloud Run ile internette yayınlama
- Google Cloud Console'da canlı uygulamanızı ve veritabanınızı görüntüleme
İhtiyacınız olanlar
- Google Chrome gibi modern bir web tarayıcısı
- Google AI Studio'da oturum açmak için standart bir Google Hesabı.
Cloud SQL Starter Edition uygunluğu ve sınırları
Google AI Studio, geliştiricilerin üretken uygulamalar ve yönetilen veritabanlarıyla denemeler yapmasına yardımcı olmak için Google Cloud Başlangıç Katmanı'nı sunar:
- Uygunluk:
- Standart bir Google Hesabı kullanan kişiler tarafından kullanılabilir.
- Mevcut veya geçmiş Google Cloud faturalandırma hesaplarına sahip kullanıcılar ile Google Workspace, Google Workspace for Education veya Sivil Toplum Kuruluşları İçin Google ile ilişkili hesaplar bu tekliften yararlanamaz.
- Hesabınız Starter Katmanı için uygun değilse AI Studio'da faturalandırmanın etkin olduğu mevcut bir Google Cloud projesi seçerek bu codelab'i tamamlayabilirsiniz.
- Kaynak spesifikasyonları:
- PostgreSQL 18'in çalıştığı bir PostgreSQL İçin Cloud SQL Developer Edition örneği sağlar.
- 0, 5 vCPU, 2 GB RAM ve 1 GB depolama alanı içerir. Bu, etkinliğe bağlı olarak birkaç ay veya daha uzun süre boyunca yüzlerce günlük ziyaret gerçekleştirmeniz için yeterli olmalıdır.
- Sıfıra ölçeklendirme özelliğini destekler. Kota tasarrufu için etkin veritabanı bağlantısı olmadığında otomatik olarak bilgi işlemeyi duraklatır.
- Quota:
- Ayda 50 işlem birimi ve 10 GB depolama alanı ücretsiz kotası içerir.
2. Google AI Studio'yu açma ve yeni bir uygulama başlatma
Başlamak için tarayıcınızda Google AI Studio'yu açın. Bu, ihtiyacınızı açıklayarak uygulamalar oluşturup test edebileceğiniz geliştirme alanınızdır.
1. adım: Google AI Studio'da oturum açın
- Web tarayıcınızı (ör. Google Chrome) açıp aistudio.google.com adresine gidin.
- Başlayın'ı tıklayın ve standart Google Hesabınızla (ör. Gmail hesabınız) giriş yapın.

- İlk ziyaretinizde hizmet şartları istenirse devam etmek için bunları inceleyip kabul edin.
2. adım: Yeni bir uygulama başlatın
- Alt kısımdaki ortada yer alan panelde Start building'i (Oluşturmaya başla) veya sağdaki panelde +New App'i (+Yeni Uygulama) tıklayın.

3. Basit bir istem ve Firebase Authentication ile başlama
Başlamak için karmaşık mimari şemalarına ihtiyacınız yoktur. İlk uygulamanızı başlatabilir, Google ile oturum açma özelliğini yapılandırabilir ve veritabanınızı tek bir cümleyle bağlayabilirsiniz.
İlk istemi girin
AI Studio'nun Build (Oluştur) modundaki istem kutusuna aşağıdaki istemi girip Enter tuşuna basın:
Build a running club web app with a Cloud SQL database
where members can post upcoming runs.

Bu bağlantı, istem kutusunu sizin için otomatik olarak doldurur.
Çalışma alanınızı anlama
İsteminizi gönderdiğinizde Google AI Studio, uygulamanın tam çalışma alanını açar. Bir dakikanızı ayırarak ekranınızdaki üç ana alanı inceleyin:

- Sohbet / İstem Kutusu (Alt): Özellik eklemek, tasarımları ayarlamak veya soru sormak için yapay zeka ile basit bir dille sohbet etmeye devam ettiğiniz yerdir.
- Dosyalar ve Kod Alanı (Sol taraf): Yapay zekanın arka planda oluşturduğu dosyaları gösterir. Kodu kendiniz yazmanız veya düzenlemeniz gerekmez ancak bu panel, yapay zekanın uygulamanızın parçalarını oluşturmasını izlemenize olanak tanır.
- Canlı önizleme penceresi (sağ taraf): Bu pencerede, çalışan uygulamanız gerçek zamanlı olarak gösterilir. Oluşturulduğu anda bu pencerede doğrudan düğmeleri tıklayabilir, metin alanlarına yazabilir ve uygulamanızı test edebilirsiniz.
- Kod düzenleyici (sağ taraf): Yapay zekanın oluşturduğu gerçek kodu gösterir. İsterseniz düzenleyebilirsiniz ancak bu zorunlu değildir.
- Dağıtım ve paylaşım (Sağ üst): Uygulamanızı internete dağıtabileceğiniz ve başkalarıyla paylaşabileceğiniz yerdir.
Google AI Studio'nun otomatik olarak yaptığı işlemler
Yapay zeka isteğinizi işlerken uygulamanızı adım adım oluşturmasını izleyebilirsiniz:
- Google ile Oturum Açma'yı ayarlar: Yapay zeka, Google ile Oturum Açma'yı otomatik olarak entegre eder. Böylece koşucularınız Google Hesapları ile güvenli bir şekilde oturum açabilir. Kullanıcı şifrelerini veya güvenlik ayarlarını yönetmeniz gerekmez.
- Gerçek bir veritabanı bağlar: Yapay zeka, topluluğunuzun verilerini depolamak için yönetilen bir Cloud SQL veritabanı oluşturur. İstenirse projeniz için veritabanını etkinleştirmek üzere tıklayın.

- Veri tablolarınızı düzenler (
schema.ts): Veritabanı şemasını, düzenlenmiş e-tabloların bir koleksiyonu olarak düşünebilirsiniz. Yapay zeka, uygulamanızın depolama yapısını otomatik olarak oluşturur:userstablosu: Üye profillerini, adlarını, avatarlarını ve koşu hızını saklar.runstablosu: Planlanmış etkinlikleri başlık, mesafe, hedef hız, konum ve tarihleriyle birlikte saklar.commentstablosu: Koşucuların her koşu altında bıraktığı mesajları ve soruları saklar.
(Not: Bu kodu asla manuel olarak yazmanız veya düzenlemeniz gerekmez. Yapay zeka, yeni özellikler istediğinizde kodu sizin için günceller.) - Görsel arayüzü oluşturur: Yapay zeka, ekranda gördüğünüz web sayfalarını (ör. başlık, yaklaşan koşular listesi, etkinlik oluşturma formu ve yorum bölümü) oluşturur.
Kimlik doğrulamayı onaylayın ve yayınlama işlemini çalıştırın
Oluşturma işlemi tamamlandıktan sonra yeni uygulamanızı Önizleme bölmesinde test edin:
- Önizleme penceresinde Üye Girişi'ni tıklayın (veya kimlik doğrulama işlemini tetikleyecek olan Yaklaşan Koşuyu Yayınla düğmesini tıklayın).
- Firebase Auth iletişim kutusunu kullanarak Google Hesabınızla kimlik doğrulayın.
- Oturum açtıktan sonra Google profilinizin adı ve avatarı gezinme çubuğunda görünür. Ayrıca, temponuzla ilgili tercihleriniz otomatik olarak yönetilir.
- "Post Upcoming Run" (Yaklaşan Koşuyu Yayınla) formuna bir başlık girin (ör.
Morning 5K Shakeout). - Tarih ve saat seçin ve toplantı yeri girin (ör.
Central Park West Entrance). - PublishRun'ı (Yayınla ve Çalıştır) tıklayın.

- Yeni koşunun, yaklaşan koşular feed'inde hemen göründüğünü ve düzenleyici olarak kimliği doğrulanmış profil adınız ile hız rozetinizin gösterildiğini onaylayın.

- Koşunun tartışma bölümüne kısa bir mesaj (ör.
Bringing extra water bottles!) gönderin ve yorum dizisinde göründüğünü doğrulayın.
4. Rota kitaplığı oluşturma
Koşu kulüpleri genellikle popüler yerel rotaları yeniden kullanır. Aynı rota bilgilerini tekrar tekrar yazmak yerine, üyelerin favori rotaları bir katalogda kaydetmesine ve koşu planladıklarında bu rotaları eklemesine izin verebilirsiniz.
Yapay zekadan Rota Kitaplığı'nı eklemesini isteyin.
Sohbet istemi kutusuna aşağıdaki isteği yazıp Enter tuşuna basın:
Add a route library where members can save favorite
running routes with atitle, distance in km, difficulty,
and start location. When scheduling a run, allow the
organizer to select a route from this library.

Yapay zekanın rotaları arka planda nasıl çalıştırmayla bağladığı
Bunun çalışması için yapay zeka, routes için otomatik olarak yeni bir depolama tablosu oluşturur ve bunu doğrudan runs tablosuna bağlar. Bu bağlantı, düzenleyen bir rota seçtiğinde uygulamanızın mesafe ve konum ayrıntılarını otomatik olarak çekmesine olanak tanır.
(Bu koda tekrar dokunmanız gerekmez. Yapay zeka, veritabanı yapısını sizin için günceller.)
Yeni rota kitaplığınızı önizleme sürümünde test etme
Yapay zeka, uygulamanızı güncellemeyi tamamladıktan sonra canlı önizleme penceresinde yeni rota özelliğini deneyin:
- Uygulama gezinme bölümünde Rota Kitaplığı sekmesini tıklayın. Böyle bir sekme yoksa canlı önizlemenin alt kısmını kontrol edin. Önizlemeyi yenilemek için Kaydet düğmesine basmanız istenebilir. Bu işe yaramazsa sohbet penceresinde yapay zeka ile etkileşime geçmeyi deneyin ve rotalar kitaplığınızın nerede olduğunu sorun.
- Yeni Rotayı Kaydet'i (veya Rota Ekle) tıklayın ve bazı örnek ayrıntıları girin:
- Rota Başlığı:
Riverfront Trail Loop - Mesafe:
8.5 km - Zorluk:
Moderate - Başlangıç Konumu:
Waterfront Pier 4
- Rota Başlığı:
- Kitaplığa kaydet'i tıklayın.
- Şimdi, yeni rota kartınızda doğrudan Koşu Planla düğmesini tıklayarak bu rotayı kullanarak bir koşu planlayın.

- Mesafe, zorluk ve konum ayrıntılarının sizin için otomatik olarak doldurulduğunu fark edin.
- Yayınla'yı tıklayın ve yeni grup çalıştırmanızın Ana Sayfa özet akışında göründüğünü doğrulayın.
5. LCV'leri ve üye davetlerini uygulama
Topluluk uygulamaları, katılım sayesinde gelişir. Koşucuların yaklaşan bir koşuya kimlerin katılacağını görmesine, tek bir tıklamayla kaydolmasına ve arkadaşlarıyla davet bağlantısı paylaşmasına izin verebilirsiniz.
Yapay zekadan LCV yanıtları ve davetler eklemesini isteme
Sohbet istemi kutusuna aşağıdaki isteği yazıp Enter tuşuna basın:
Allow registered members to RSVP ("Join Run") to any upcoming run.
Show the list of attending runners on each run card, display an
attendee counter, and add a copyable invite link.
Yapay zeka, katılımcıları kamera arkasında nasıl izler?
Hangi koşucuların her koşuya katıldığını takip etmek için yapay zeka, veritabanınızda otomatik olarak bir rsvps tablosu oluşturur. Bunu, koşucunun adını belirli bir etkinliğe bağlayan dijital bir kayıt formu gibi düşünebilirsiniz.
(Bu kodu yazmanız veya düzenlemeniz gerekmez. Yapay zeka, veritabanınızdaki bu kayıt sayfasını otomatik olarak yönetir.)
Önizleme'de LCV yanıtlarını ve davetiyeleri test etme
Yapay zeka, uygulamanızı güncellemeyi tamamladıktan sonra canlı önizleme penceresinde yeni RSVP özelliklerini test edin:
- Önizleme penceresinde, ana feed'inizde yaklaşan bir koşu etkinliği bulun.
- Join Run (Koşuya Katıl) veya RSVP düğmesini tıklayın.
- Adınızın ve avatarınızın Katılan Koşucular bölümünde göründüğünü ve katılımcı sayacının 1 arttığını onaylayın.
- Davet bağlantısını kopyala'yı tıklayın ve paylaşılabilir bir bağlantının oluşturulduğunu doğrulayın.

6. Veri Kalıcılığı ve Cloud SQL Sıfıra Ölçeklendirme Testi
Uygulama geliştirirken en önemli şey, topluluğunuzun bilgilerinin güvende olduğunu bilmektir. Tarayıcınızı yenilediğinizde, sekmeyi kapattığınızda veya bilgisayarınızı kapattığınızda, geri döndüğünüzde tüm kayıtlı rotalarınızın, RSVP'lerinizin ve tartışmalarınızın yerinde olmasını istersiniz.
Bu adımda, verilerinizin Cloud SQL veritabanınıza güvenli bir şekilde kaydedildiğini test edecek ve uygulamanız sessizken Google Cloud'un nasıl enerji ve maliyet tasarrufu sağladığını öğreneceksiniz.
Uygulamanızı yenilemeyi test etme
- AI Studio önizleme penceresinde Yeniden yükle düğmesini tıklayın (veya tarayıcı sekmenizi yenileyin).

- Uygulamanızı önizlemede inceleyin: Üye profiliniz, kayıtlı rotalarınız, planlanmış koşularınız, RSVP'leriniz ve yorumlarınız gibi oluşturduğunuz her şeyin kaldığı yerde durduğunu göreceksiniz.
- Uygulamanız, bilgileri yalnızca ekranınızda geçici olarak depolamakla kalmaz, aynı zamanda Cloud SQL veritabanınızda güvenli bir şekilde depolar.
Cloud SQL'in enerji ve maliyetten nasıl tasarruf sağladığı ("sıfıra ölçeklendirme")
Gece yarısı koşu kulübü uygulamanızı kimse kullanmadığında ne olur?
- Otomatik uyku ("sıfıra ölçeklendirme"): Uygulamayı ziyaret eden veya koşulara kaydolan kimse olmadığında kaynakları korumak için veritabanı otomatik olarak duraklatılır.
- Anında uyandırma: Koşucu uygulamayı açar veya davet bağlantısını tıkladığı anda veritabanı anında uyanır ve tüm kayıtlı bilgileriniz kullanıma hazır hale gelir.
- Boşta kalma maliyeti yok: Etkin olmadığında uyku moduna geçtiği için uygulama sessizken işlem kaynaklarını kullanmazsınız.
7. Cloud Run'da yayınlama ve dağıtma
Koşu Kulübü uygulamanız önizlemede oluşturulup test edildiğine göre artık topluluğunuzla paylaşabilirsiniz. Web barındırma hizmeti satın almanız veya sunucuları yapılandırmanız gerekmez. Tek bir tıklamayla uygulamanızı internette kullanıma sunabilirsiniz.
Uygulamanızı web'de canlı olarak yayınlama
- Google AI Studio'nun sağ üst köşesinde Yayınla düğmesini tıklayın.
- Ayrıntıları onaylayan bir özet penceresi gösterilir:
- Barındırma: Google Cloud Run'da barındırılır ve dağıtılır.

- Bağlı hizmetler: Google ile oturum açma ve Cloud SQL veritabanınız.

- Barındırma: Google Cloud Run'da barındırılır ve dağıtılır.
- Uygulamanızı başlatmak için Yayınla'yı tıklayın.

Canlı uygulamanızı açma ve paylaşma
- Yayınlama işlemi tamamlandığında Google AI Studio, canlı web adresinizi ve bir QR kodunu sağlar.

- Bağlantıyı tıklayarak canlı web uygulamanızı yeni bir tarayıcı sekmesinde açın veya QR kodunu telefonunuzun kamerasıyla tarayın.
- Telefonunuzda deneyin: Telefonunuzda oturum açın, bilgisayarınızda daha önce planladığınız koşulardan birine LCV yapın ve katılımcı sayısının paylaşılan Cloud SQL veritabanınız tarafından desteklenen gerçek zamanlı olarak güncellenmesini izleyin.
8. (Bonus) Kaynaklarınızı Google Cloud Console'da İnceleme
Google AI Studio, uygulamanızı oluşturup dağıtırken özel bir kara kutunun içine kilitlemez. Bunun yerine, sizin adınıza gerçek ve üretime hazır Google Cloud hizmetleri oluşturur. Google Cloud Console'u, yayındaki uygulamanızı ve veritabanınızı görüntüleyebileceğiniz kontrol merkezi olarak düşünebilirsiniz.
1. adım: Google Cloud Console'u açın
- Yeni bir tarayıcı sekmesinde Google Cloud Console'u açın.
- Ekranın üst kısmında proje açılır menüsünü tıklayın ve AI Studio uygulamanız için oluşturulan projeyi seçin (adı genellikle
continual-run-ile başlar).
2. adım: Web uygulamanızın nerede çalıştığını görün (Cloud Run)
- Üstteki arama çubuğuna
Cloud Runyazıp sonuçlardan bu karakteri seçin.
- Uygulama adınızı (ör.
running-club) tıklayın.
- Burada, web sitenizi barındıran motoru keşfedebilirsiniz:
- Metrikler: Web sitenizi kaç kişinin ziyaret ettiğini gösteren faydalı grafikler.
- Günlükler: Ziyaretçiler uygulamanızla etkileşim kurduğunda neler olduğunu gösteren canlı etkinlik kaydı.
3. adım: Veritabanınızı çalışırken görün (Cloud SQL)
- Üstteki arama çubuğuna
Cloud SQLyazın ve sonuçlardan bu karakteri seçin. - PostgreSQL veritabanı örneğinizi tıklayın.

- Burada, canlı veritabanı ayrıntılarınızı görebilir, veritabanınızın etkin olduğunu ve koşu kulübünüzün verilerini depolamaya hazır olduğunu onaylayabilirsiniz.

9. Kaynakları temizleme
Bu uygulamayı deneme projesi olarak oluşturduysanız kolayca silebilirsiniz. Koşu Kulübü uygulamanızı topluluğunuzla birlikte kullanmaya devam etmeyi planlıyorsanız uygulamayı çalışır durumda bırakabilirsiniz.
- Google AI Studio'da, sol kenar çubuğunda Uygulamalarım'ı tıklayın.
- Koşu Kulübü uygulamanızı bulun.
- Uygulamayı Sil'i (veya çöp kutusu simgesini) tıklayın. Bu işlem, canlı web sayfanızı kapatır ve test veritabanını tek adımda sizin için kaldırır.

10. Tebrikler
Google AI Studio ve Cloud SQL'i kullanarak ilk veritabanı destekli web uygulamanızı oluşturup özelleştirdiniz ve yayınladınız.
Tamamlanan Oluşturucu Yolculuğu rozetini almak için bu bağlantıyı ziyaret edin.
Yolculuğunuza devam etmek için bir sonraki laboratuvarınız olan goo.gle/builders adresine gidin.
Başarılarınız
- Basit bir dille uygulama oluşturma: Basit istemlerle eksiksiz bir topluluk koşu kulübü uygulaması oluşturdu.
- Google ile oturum açma etkinleştirildi: Google Hesapları ile güvenli oturum açmayı otomatik olarak ayarlayın.
- Gerçek bir veritabanı bağlandı: Rotalar, planlanmış koşular, RSVP'ler ve tartışmalar Cloud SQL'de güvenli bir şekilde depolandı.
- Sohbet ederek özellik ekleme: Yapay zeka ile sohbet ederek rota kitaplığı oluşturun ve LCV takibi yapın.
- Web'de canlı olarak yayınlandı: Uygulamanızı tek bir tıklamayla internete dağıttınız ve cihazlarda test ettiniz.
- İçeriği incelediniz: Google Cloud'un canlı web uygulamanızı ve veritabanınızı nasıl barındırdığını keşfettiniz.
Sırada ne var?
Uygulamanızı yeni özelliklerle genişletmek için Google AI Studio'da yapay zekayla sohbet etmeye devam edebilirsiniz:
- Etkileşimli Haritalar: Yapay zekadan harita önizlemeleri ve GPS rotaları eklemesini isteyin.
- Koşu arkadaşı eşleştirme: Yapay zekadan, benzer hız hedeflerine sahip koşu arkadaşları önermesini isteyin.
- Hava durumu tahminleri: Yapay zekadan, yaklaşan koşu kartlarında hafta sonu hava durumu tahminlerini göstermesini isteyin.
- Fotoğraf paylaşımı: Yapay zekadan, koşucuların grup koşusundan sonra fotoğraf paylaşmasına izin vermesini isteyin.