Google Haritalar Platformu ve yapay zeka ile geliştirme

1. Giriş

Genel Bakış

Yapay zeka ile geliştirme yolculuğu bugün nerede başlıyor? Her şey, prototip oluşturmaya değer bir fikirle başlar. Google AI Studio'nun Oluşturma Modu, "sezgisel kodlama" ile bu kıvılcımı gerçeğe dönüştürür. Gemini modellerinden yararlanarak tam yığın web uygulamalarını tamamen sohbet tabanlı kod oluşturma yoluyla tasarlayabilir, test edebilir ve dağıtabilirsiniz.

Bu codelab'de, gerçek dünya haritalama verilerini üretken yapay zekayla birleştiren etkileşimli bir coğrafi oyun olan Block Explorer'ı oluşturacaksınız. Uygulamayı oluşturmak ve Google Haritalar Platformu ile Gemini API'ye entegre etmek için AI Studio'yu kullanacaksınız. Ardından, tamamlanan uygulamayı doğrudan Cloud Run'a nasıl dağıtacağınızı öğrenecek ve diğer kullanıcıların uygulamayı denemesine olanak tanıyacaksınız.

Yapacaklarınız

  • Etkileşimli bir coğrafi haritalama ve bilgi yarışması web uygulamasının prototipini oluşturmak için Google AI Studio'yu kullanın.
  • Google Haritalar Platformu Demo Key'i doğrudan AI Studio çalışma alanında etkinleştirin ve otomatik olarak sağlayın.
  • Doğal dil istemlerini kullanarak dinamik adres coğrafi kodlama, yer keşfi ve yapay zekayla üretilmiş trivia sınavları uygulayın.
  • Maps Grounding Lite'ı entegre ederek bilgi yarışması doğruluğunu artırın.
  • Uygulamayı etkileşimli önizleme korumalı alanında test edin ve uygulamada iterasyon yapın.
  • Uygulamayı doğrudan Google AI Studio kullanıcı arayüzünden Cloud Run'a dağıtın.

Neler öğreneceksiniz?

  • Google AI Studio'nun Build (Oluştur) modunu kullanarak doğal dilde tam yığın hizmetinin hızlı prototipini oluşturma
  • Coğrafi veriler içeren uygulamalar oluşturmak için Google Haritalar Platformu API'lerini kullanma
  • Dinamik testler ve yerel analizler oluşturmak için LLM istemlerini gerçek dünyadaki coğrafi bağlamla nasıl temellendirebilirsiniz?
  • AI Studio uygulamanızı Cloud Run'da sunucusuz bir container olarak dağıtma

Gizlilik politikasının önizlemesini aşağıda bulabilirsiniz:

Tamamlanmış uygulamanın örneği

2. Projenizi oluşturma

AI Studio'yu kullanmaya başlamadan önce hesap durumunuzu, ön koşulları ve API erişiminizi doğrulayın.

Google Hesabı ve Kademe Bilgileri

  1. Google Hesabınız yoksa Google Hesabı oluşturun.
    • İpucu: Mümkünse bu laboratuvar için kişisel bir Google Hesabı kullanın. Grup, kurumsal veya okul hesapları, deneysel özellikleri ya da bulut entegrasyonlarını devre dışı bırakan politikaları zorunlu kılabilir.
  2. Dağıtımlarla ilgili fatura ayrıntılarını inceleyin:
    • Google Cloud Başlangıç Katmanı: Tam Google Cloud faturalandırma hesabı oluşturmadan, belirli bir bölgede iki adede kadar tam yığın uygulama yayınlamanıza olanak tanır.
    • Standart dağıtım: Mevcut ücretli bir Google Cloud projesine bağlanır ve depolama sınırlarını, CPU kaynaklarını ve API'leri genişletir.

Google Haritalar Platformu Demo Key

Google AI Studio, prototip oluşturma sürecini kolaylaştırmak için Google Haritalar Platformu ile yerel olarak entegre olur. Bu sayede, temel Google Haritalar Platformu API'lerini (ör. Maps JavaScript API, Geocoding API, Places API ve Routes API) doğrudan projenizde sorunsuz bir şekilde test edip kullanabilirsiniz. AI Studio, sizin için otomatik olarak bir Google Haritalar Platformu Demo Key oluşturur.

Demo anahtarının temel avantajları:

  • Kredi kartı veya faturalandırma ayarı gerekmez: Google Cloud faturalandırma hesabı yapılandırmadan hemen prototip oluşturup değerlendirebilirsiniz.
  • Yüksek Prototip Oluşturma Kotası: Test ve yineleme için API başına günde 100'e kadar ücretsiz istek içerir.
  • Sorunsuz Yerleşik Entegrasyon: Harici portallara gitmeniz veya kimlik bilgilerini kopyalayıp yapıştırmanız gerekmez. Google AI Studio, uygulamanızın Google Haritalar Platformu ile entegre olması gerektiğinde bunu otomatik olarak algılar ve gerekli yapılandırmaları sizin için yapar.

3. AI Studio'nun Build Mode'unda uygulama kabuğu oluşturma

Google AI Studio'yu kullanarak uygulama kabuğunu oluşturarak başlayacaksınız.

  1. Google AI Studio Uygulamaları paneline gidin ve Yeni Uygulama'yı tıklayın (veya Oluştur sekmesini seçin).
  2. İstem giriş kutusuna, coğrafi uygulama için ilk açıklamayı girin. İstem önerileri bölümünde Google Haritalar Platformu keşif çipini de tıklayabilirsiniz:
Build a highly polished, responsive, split-screen application. This application should be called "Block Explorer". It is meant to be a geospatial exploration app. It will use Google Maps Platform.

Key Features & Functionality:

-   Split-Screen Layout: On desktop, a 1/3-width left-side editorial control panel and a 2/3-width right-side full-height map.
-   Include a search bar where users can type a location such as a city or neighborhood. Submitting should issue a Geocoding request to the Google Geocoding V4 API REST endpoint (https://geocode.googleapis.com/v4/geocode/address/). Then pan the map to the geocoded location.
-   Interactive Google Map: Render the Map inside an interactive container allowing users to pan, drag, and zoom freely. Place customized markers representing the currently selected/geocoded location.
-   Also include five buttons for presets the users can click on: Buenos Aires, Shibuya, Copacabana, Cologne, and Lima. Clicking on this should geocode the location and pan the map there.
-   Make sure to also include a mechanism to clearly show error messages when they occur so users can easily troubleshoot.
  1. Uygulama oluşturma sürecini başlatmak için Oluştur'u tıklayın.

AI Studio, uygulama kodunu oluşturmaya başlar. Tasarım teması seçmeniz istenirse istediğiniz stili seçin.

Google Haritalar Platformu'nu etkinleştirme ve demo anahtarı sağlama

Google Haritalar Platformu, haritaları ortalamak ve işaretçileri görüntülemek için okunabilir adres sorgularını (ör. "Shibuya" veya "Buenos Aires") coğrafi koordinatlara (enlem ve boylam) dönüştüren Geocoding API'yi sağlar.

Coğrafi alanla ilgili bir amaç içeren istem gönderdiğinizde (ör. Google Haritalar, mağaza bulucu veya yerel keşif isteğinde bulunduğunuzda) AI Studio, coğrafi alanla ilgili gereksinimi otomatik olarak algılar ve temel hazırlık konusunda yardımcı olur:

  1. Bağlam İçi Etkinleştirme Perdesi: Görüşme adımında "Google Haritalar Platformu'nu ayarlayın" başlıklı bir satır içi kart gösterilir.
  2. Şartları Kabul Et ve Etkinleştir:
    • Haritalar Demo Projesi Hizmet Şartları'nı (ve istenirse Başlangıç Katmanı Ek Hizmet Şartları'nı) inceleyip kabul edin.
    • Google Haritalar'ı etkinleştir'i tıklayın.
  3. Otomatik Anahtar Sağlama ve Gizli Anahtar Ekleme: AI Studio, Google tarafından barındırılan proje (GHP) altyapısında otomatik olarak bir Google Haritalar Platformu Demo Anahtarı sağlar ve bunu doğrudan projenizin gizli anahtarlarına GOOGLE_MAPS_PLATFORM_KEY adıyla ekler.
  4. Anında Canlı Önizleme: Uygulama önizleme sanal alanı, canlı ve tam işlevsel etkileşimli bir Google Harita ile anında yenilenir.

Google Haritalar Platformu entegrasyonunu etkinleştirme

Yeni bir konum girerek veya önceden ayarlanmış konum düğmelerinden birini seçerek uygulamayı önizleme özel korumalı alanında test edin.

4. Gemini API ile yerel analizler ekleme

Ardından, kullanıcılar haritayı keşfederken yerler hakkında zengin ve yerelleştirilmiş analizler oluşturmak için Gemini API'yi entegre edeceksiniz.

  1. Sohbet penceresindeki yapay zeka asistanına aşağıdaki istemi gönderin:
Now, let's bring in the AI using the Gemini API.
1.  Once geocoding successfully identifies the City and State (e.g., "Miami, Florida"), trigger a call to the Gemini API (using the gemini-3.8-flash model).
2.  Use the following prompt template for the AI:
   "You are a local tour guide for [City, State]. Give me exactly 3 short, highly engaging, and unusual or surprising fun facts about this place. Keep each fact under 2 sentences. Format the response as a clean HTML unordered list (<ul>) so I can inject it directly."
3.  Display these fun facts in a beautiful "Local Insights" banner on the bottom portion of the map screen. Add a subtle loading spinner while the AI is thinking.
4.  Make sure to make this handling robust. If an API request fails, display a user-friendly error notification in the UI.
  1. Önizleme bölmesinde, bir konum seçildiğinde veya arandığında Gemini tarafından oluşturulan dinamik eğlenceli bilgilerin gösterildiğini doğrulayın.

AI Studio'nun uygulamayı güncellediğini görmelisiniz. Bu işlem sonucunda ekranın alt kısmına "Yerel Analizler" bölümü eklenir.

Haritanın en altına yerel bilgiler bölümü eklendi

5. Yapay zekayla üretilmiş bilgi yarışması oluşturma

Uygulamanız artık konum koordinatlarını ve yerelleştirilmiş analizleri alabiliyor. Bu özellikleri birleştirerek seçilen hedefe göre etkileşimli bilgi yarışması testleri oluşturun.

  1. Test oluşturma istemini aracıya gönderin:
Now let's build the actual game! We will have Gemini generate a 3-question quiz based on the real places we just got information about.

After the local insights are generated, show the user a button to "Test their local knowledge". Once clicked, offer them 3 options to choose from:
-   Local cuisine
-   Art and culture
-   Local history

Once selected, generate a 3-question quiz based on the category and the place. The quiz should be multiple choice. Once the user submits the quiz show them their score and the correct answer.
  1. Durum yönetimi, yanıt seçimi ve puan oluşturmayı test etmek için önizleme penceresinde oluşturulan testi oynayın.

6. Haritalar Grounding Lite'ı entegre etme

Gemini, varsayılan olarak eğitim verilerindeki bilgilerden yararlanarak gerçekler ve testler üretir. Doğruluğu artırmak ve anlık uzamsal verilerden yararlanmak için Maps Grounding Lite'ı entegre edin. Bu hizmet, Gemini'ı doğrudan Google Haritalar Platformu'ndan alınan canlı verilerle bağlar.

  1. AI Studio'da aşağıdaki istemi gönderin:
Add a toggle to make the quiz more difficult. Call this "Hyperlocal mode". When enabled, use the Google Maps Grounding Lite service with the Gemini API to fetch more local data, making the quiz more difficult.

Add information for the user so they know that Hyperlocal Mode is more difficult and how it works.
  1. Temellendirilmiş test oluşturmayı doğrulamak için önizleme penceresinde Yakın çevreye özel mod açma/kapatma düğmesini test edin.

LLM'ler, belirli çalışma saatleri, son açılışlar veya tam yer kimlikleri hakkında halüsinasyon üretebilir. Maps Grounding Lite, yanıtları gerçek Google Haritalar Yerleri varlıkları ve ilişkilendirmeleriyle temellendirerek bilgi yarışması sorularının doğruluğunu önemli ölçüde artırır.

7. Cloud Run'a dağıt

Prototipiniz tamamen işlevsel hale geldiğinde, doğrudan AI Studio'dan Cloud Run'da herkese açık sunucusuz bir kapsayıcı olarak dağıtın.

  1. Dağıtım sihirbazını başlatmak için Google AI Studio'nun sağ üst köşesindeki Yayınla düğmesini tıklayın.Google AI Studio'da yayınlama düğmesinin konumu
  2. Google Cloud projenizi yapılandırmak için Başlayın'ı tıklayın.
    • Hedef Google Cloud projesi açılır listesinin, amaçladığınız dağıtım projesiyle eşleştiğini doğrulayın.
    • AI Studio, Cloud Run örneği için otomatik olarak benzersiz bir hizmet tanımlayıcısı oluşturur.
  3. Uygulamayı Yayınla'yı tıklayın.
  4. Container oluşturma, kaydetme ve hizmet dağıtımı işlemleri arka planda yürütülür. Bu işlem genellikle 2-4 dakika içinde tamamlanır.
  5. Dağıtım tamamlandığında oluşturulan Uygulama URL'sini kopyalayın ve bir tarayıcı sekmesinde canlı uygulama bağlantısını ziyaret edin.

8. Güvenlik ve üretimle ilgili en iyi uygulamaları inceleme

Bu uygulamayı prototipten üretim ortamına geçirirken aşağıdaki güvenlik sütunlarını göz önünde bulundurun:

1. Google Maps API Anahtarı Kısıtlamaları

Üretim Google Haritalar API anahtarlarını hiçbir zaman kısıtlanmamış olarak bırakmayın. Google Cloud Console'da:

  • API Kısıtlamaları: Anahtarı yalnızca belirli API'leri (Maps JavaScript API, Geocoding API, Places API) çağırabilecek şekilde kısıtlayın.
  • Uygulama Kısıtlamaları: Üçüncü taraf sitelerde yetkisiz kullanımı önlemek için HTTP yönlendirenlerini (ör. https://yourgame.com/*) kullanarak anahtarı kısıtlayın.

2. Gemini API anahtarının güvenliğini sağlama

Gemini API anahtarı hiçbir zaman istemci tarafı JavaScript'te gösterilmemelidir.

  • Üretim Mimarisi: Proxy görevi görecek hafif bir arka uç hizmeti (ör. Cloud Run veya Cloud Functions) oluşturun. Ön uç, arka ucunuzu çağırır (/api/get-fun-facts) ve arka uç, bir ortam değişkeni (GEMINI_API_KEY) kullanarak Google AI Studio ile güvenli bir şekilde iletişim kurar.

9. Kaynakları temizleme

Öngörülemeyen faturalandırma ücretlerinden kaçınmak veya Workspace kaynaklarınızı temizlemek için:

  1. Google AI Studio'da Uygulamalar sayfasına gidin.
  2. Uygulamanızı ızgarada veya listede bulun.
  3. Uygulama durumunu silmek ve hizmetin Cloud Run'da yayınını kaldırmak için çöp kutusu simgesini tıklayın.
  4. Standart bir proje kullanarak dağıtım yaptıysanız ve tüm kaynakları tamamen kapatmak istiyorsanız Google Cloud Console Proje Ayarları'na gidip temel alınan projeyi silin.

10. Sonuç

Tebrikler! Google AI Studio'da yapay zeka destekli bir coğrafi web uygulaması tasarladınız, geliştirdiniz ve dağıttınız. Google Haritalar Platformu API'lerini kullanarak gerçek dünya verileriyle desteklenen etkileşimli bir oyun geliştirdiniz.

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.

Daha Fazla Bilgi