Google Maps Platform और एआई की मदद से बनाना

1. परिचय

खास जानकारी

आज एआई की मदद से डेवलपमेंट कहां से शुरू होता है? इसकी शुरुआत एक स्पार्क से होती है: एक ऐसा आइडिया जिस पर प्रोटोटाइप बनाया जा सकता है. Google AI Studio का बिल्ड मोड, "वाइब कोडिंग" की मदद से उस चिंगारी को हकीकत में बदल देता है. Gemini मॉडल का इस्तेमाल करके, फ़ुल-स्टैक वेब ऐप्लिकेशन को डिज़ाइन, टेस्ट, और डिप्लॉय किया जा सकता है. इसके लिए, आपको सिर्फ़ बातचीत करके कोड जनरेट करना होगा.

इस कोडलैब में, आपको ब्लॉक एक्सप्लोरर बनाने का तरीका बताया जाएगा. यह एक इंटरैक्टिव जियोस्पेशल गेम है. इसमें असल दुनिया के मैपिंग डेटा के साथ-साथ जनरेटिव एआई का इस्तेमाल किया जाता है. ऐप्लिकेशन जनरेट करने के लिए, AI Studio का इस्तेमाल किया जाएगा. साथ ही, इसे Google Maps Platform और Gemini API के साथ इंटिग्रेट किया जाएगा. इसके बाद, आपको तैयार किए गए ऐप्लिकेशन को सीधे Cloud Run पर डिप्लॉय करने का तरीका बताया जाएगा. इससे, दूसरे लोग भी इस ऐप्लिकेशन को आज़मा सकेंगे.

आपको क्या करना होगा

  • Google AI Studio का इस्तेमाल करके, इंटरैक्टिव जियोस्पेशल मैपिंग और सामान्य जानकारी देने वाला वेब ऐप्लिकेशन का प्रोटोटाइप बनाएं.
  • AI Studio के वर्कस्पेस में सीधे तौर पर, Google Maps Platform की डेमो कुंजी को चालू करें और उसे अपने-आप उपलब्ध कराएं.
  • नैचुरल लैंग्वेज में प्रॉम्प्ट देकर, डाइनैमिक पते की जियोकोडिंग, जगहों की खोज, और एआई से जनरेट किए गए सामान्य ज्ञान के क्विज़ लागू करें.
  • Maps Grounding Lite को इंटिग्रेट करके, सामान्य ज्ञान के क्विज़ के जवाबों को ज़्यादा सटीक बनाया जा सकता है.
  • इंटरैक्टिव प्रीव्यू सैंडबॉक्स में ऐप्लिकेशन की जांच करें और उसमें सुधार करना जारी रखें.
  • ऐप्लिकेशन को Google AI Studio के यूज़र इंटरफ़ेस (यूआई) से सीधे Cloud Run पर डिप्लॉय करें.

आपको क्या सीखने को मिलेगा

  • नैचुरल लैंग्वेज का इस्तेमाल करके, फ़ुल-स्टैक सेवा का प्रोटोटाइप तेज़ी से बनाने के लिए, Google AI Studio के बिल्ड मोड का इस्तेमाल कैसे करें.
  • जियोस्पेशल डेटा के साथ ऐप्लिकेशन बनाने के लिए, Google Maps Platform API का इस्तेमाल कैसे करें.
  • डाइनैमिक क्विज़ और स्थानीय जानकारी जनरेट करने के लिए, एलएलएम प्रॉम्प्ट को असल दुनिया के जियोस्पेशल कॉन्टेक्स्ट के साथ कैसे जोड़ा जाए.
  • AI Studio ऐप्लिकेशन को Cloud Run पर सर्वरलेस कंटेनर के तौर पर डिप्लॉय करने का तरीका.

यहां pp की झलक दी गई है:

पूरा किए गए आवेदन का उदाहरण

2. अपना प्रोजेक्ट सेट अप करना

AI Studio लॉन्च करने से पहले, अपने खाते का स्टेटस, ज़रूरी शर्तें, और एपीआई ऐक्सेस की पुष्टि करें.

Google खाता और टियर की जानकारी

  1. अगर आपके पास पहले से कोई Google खाता नहीं है, तो Google खाता बनाएं.
    • अहम जानकारी: अगर हो सके, तो इस लैब के लिए निजी Google खाते का इस्तेमाल करें. ग्रुप, कॉर्पोरेट या स्कूल खातों के लिए ऐसी नीतियां लागू की जा सकती हैं जिनसे एक्सपेरिमेंट की सुविधाएं या क्लाउड इंटिग्रेशन बंद हो जाते हैं.
  2. डप्लॉयमेंट के लिए बिलिंग की जानकारी देखें:
    • Google Cloud का स्टार्टर टियर: इसमें, बिना किसी शुल्क के किसी चुनिंदा इलाके में दो फ़ुल-स्टैक ऐप्लिकेशन पब्लिश किए जा सकते हैं. इसके लिए, Google Cloud का पूरा बिलिंग खाता सेट अप करने की ज़रूरत नहीं होती.
    • स्टैंडर्ड डिप्लॉयमेंट: यह Google Cloud के किसी मौजूदा क्लाउड प्रोजेक्ट से कनेक्ट होता है. साथ ही, स्टोरेज की सीमाएं, सीपीयू संसाधन, और एपीआई बढ़ाता है.

Google Maps Platform की डेमो कुंजी

प्रोटोटाइपिंग को आसान बनाने के लिए, Google AI Studio को Google Maps Platform के साथ इंटिग्रेट किया गया है. इससे, Google Maps Platform के मुख्य एपीआई (जैसे कि Maps JavaScript API, Geocoding API, Places API, और Routes API) को सीधे अपने प्रोजेक्ट में टेस्ट और बिल्ड करने का आसान तरीका मिलता है. AI Studio आपके लिए, Google Maps Platform की डेमो कुंजी अपने-आप जनरेट करेगा.

डेमो कुंजी के मुख्य फ़ायदे:

  • क्रेडिट कार्ड या बिलिंग सेटअप की ज़रूरत नहीं है: Google Cloud का बिलिंग खाता कॉन्फ़िगर किए बिना, तुरंत प्रोटोटाइप बनाया जा सकता है और उसका आकलन किया जा सकता है.
  • प्रोटोटाइपिंग के लिए ज़्यादा कोटा: इसमें टेस्टिंग और दोहराव के लिए, हर एपीआई के लिए हर दिन 100 मुफ़्त अनुरोध शामिल हैं.
  • पहले से मौजूद इंटिग्रेशन की सुविधा: आपको बाहरी पोर्टल पर जाने या क्रेडेंशियल कॉपी-पेस्ट करने की ज़रूरत नहीं है. Google AI Studio अपने-आप पता लगा लेता है कि आपके ऐप्लिकेशन को Google Maps Platform के साथ इंटिग्रेट करने की ज़रूरत कब है. साथ ही, यह आपके लिए चीज़ों को कॉन्फ़िगर करता है.

3. AI Studio के बिल्ड मोड में ऐप्लिकेशन शेल बनाना

सबसे पहले, Google AI Studio का इस्तेमाल करके ऐप्लिकेशन शेल बनाया जाएगा.

  1. Google AI Studio के ऐप्लिकेशन पैनल पर जाएं और नया ऐप्लिकेशन पर क्लिक करें. इसके अलावा, बनाएं टैब को भी चुना जा सकता है.
  2. प्रॉम्प्ट इनपुट बॉक्स में, अपने जियोस्पेशल ऐप्लिकेशन के बारे में शुरुआती जानकारी डालें. प्रॉम्प्ट के सुझावों में जाकर, Google Maps Platform डिस्कवरी चिप पर भी क्लिक किया जा सकता है:
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. ऐप्लिकेशन जनरेट करने की प्रोसेस शुरू करने के लिए, बनाएं पर क्लिक करें.

AI Studio, ऐप्लिकेशन कोड जनरेट करना शुरू कर देगा. अगर आपसे डिज़ाइन थीम चुनने के लिए कहा जाए, तो अपनी पसंद की कोई स्टाइल चुनें.

Google Maps Platform को चालू करना और डेमो कुंजी उपलब्ध कराना

Google Maps Platform, Geocoding API उपलब्ध कराता है. यह एपीआई, पते की क्वेरी को भौगोलिक निर्देशांकों (अक्षांश और देशांतर) में बदलता है. जैसे, "शिबुया" या "ब्यूनस आयर्स". इससे मैप को सेंटर में लाने और मार्कर दिखाने में मदद मिलती है.

जब जियोस्पेशल इंटेंट वाला कोई प्रॉम्प्ट भेजा जाता है (जैसे कि Google Maps, स्टोर लोकेटर या स्थानीय एक्सप्लोरेशन का अनुरोध करना), तो AI Studio अपने-आप जियोस्पेशल की ज़रूरत का पता लगा लेता है. साथ ही, मुख्य प्रावधानों में मदद करता है:

  1. कॉन्टेक्स्ट के हिसाब से चालू होने वाला कर्टन: बातचीत के दौरान, "Google Maps Platform सेट अप करें" नाम का इनलाइन कार्ड दिखता है.
  2. नियम और शर्तें स्वीकार करें और सुविधा चालू करें:
    • Maps Demo Project की सेवा की शर्तें पढ़ें और उन्हें स्वीकार करें. अगर प्रॉम्प्ट मिलता है, तो Starter Tier की सेवा की अतिरिक्त शर्तें भी पढ़ें और स्वीकार करें.
    • Google Maps चालू करें पर क्लिक करें.
  3. ऑटोमेटेड की प्रोविज़निंग और सीक्रेट इंजेक्शन: AI Studio, Google के होस्ट किए गए प्रोजेक्ट (GHP) के इन्फ़्रास्ट्रक्चर पर, Google Maps Platform की डेमो की अपने-आप उपलब्ध कराता है. साथ ही, इसे सीधे आपके प्रोजेक्ट के सीक्रेट में GOOGLE_MAPS_PLATFORM_KEY नाम से इंजेक्ट करता है.
  4. लाइव झलक: ऐप्लिकेशन की झलक दिखाने वाला सैंडबॉक्स, तुरंत रीफ़्रेश हो जाता है. इसमें लाइव और पूरी तरह से काम करने वाला इंटरैक्टिव Google मैप दिखता है.

Google Maps Platform इंटिग्रेशन की सुविधा चालू करना

नई जगह की जानकारी डालकर या पहले से सेट किए गए जगह की जानकारी वाले बटन में से कोई एक चुनकर, झलक वाले सैंडबॉक्स में ऐप्लिकेशन की जांच करें!

4. Gemini API की मदद से, स्थानीय जानकारी जोड़ना

इसके बाद, आपको Gemini API को इंटिग्रेट करना होगा, ताकि मैप एक्सप्लोर करते समय लोगों को जगहों के बारे में ज़्यादा और स्थानीय जानकारी मिल सके.

  1. चैट विंडो में मौजूद एआई असिस्टेंट को यह प्रॉम्प्ट भेजें:
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. झलक वाले पैनल में पुष्टि करें कि किसी जगह को चुनने या खोजने पर, Gemini से जनरेट की गई दिलचस्प जानकारी दिख रही है.

आपको दिखेगा कि AI Studio, ऐप्लिकेशन को अपडेट कर रहा है. इसके बाद, स्क्रीन पर सबसे नीचे "स्थानीय रुझान" सेक्शन जुड़ जाएगा.

मैप में सबसे नीचे, स्थानीय जानकारी वाला सेक्शन जोड़ा गया

5. एआई से जनरेट किए गए सामान्य ज्ञान के सवालों वाला क्विज़ बनाना

अब आपका ऐप्लिकेशन, जगह की जानकारी के कोऑर्डिनेट और स्थानीय जानकारी को फिर से हासिल कर लेता है. इन सुविधाओं को मिलाकर, चुनी गई जगह के हिसाब से इंटरैक्टिव सामान्य ज्ञान के क्विज़ जनरेट करें.

  1. क्विज़ जनरेट करने का प्रॉम्प्ट, एजेंट को भेजें:
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. जनरेट की गई क्विज़ को झलक वाली विंडो में चलाकर देखें. इससे आपको यह जांच करने में मदद मिलेगी कि स्टेट मैनेजमेंट, जवाब चुनने, और स्कोर रेंडर करने की सुविधा ठीक से काम कर रही है या नहीं.

6. Maps Grounding Lite को इंटिग्रेट करना

डिफ़ॉल्ट रूप से, Gemini अपने ट्रेनिंग डेटा से मिली जानकारी का इस्तेमाल करके तथ्य और क्विज़ जनरेट करता है. सटीक जानकारी पाने और रीयल-टाइम में जगह की जानकारी का डेटा इस्तेमाल करने के लिए, Maps Grounding Lite को इंटिग्रेट करें. यह सेवा, Gemini को Google Maps Platform से सीधे तौर पर लाइव डेटा से कनेक्ट करती है.

  1. AI Studio में यह प्रॉम्प्ट भेजें:
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. झलक विंडो में, हाइपरलोकल मोड टॉगल की जांच करें. इससे पुष्टि की जा सकेगी कि क्विज़ जनरेट करने के लिए, भरोसेमंद सोर्स से जानकारी ली गई है.

एलएलएम, कारोबार के खुले होने के समय, हाल ही में खुले कारोबार या जगह के आईडी के बारे में गलत जानकारी दे सकते हैं. Maps Grounding Lite, Google Maps पर मौजूद जगहों की असली इकाइयों और एट्रिब्यूशन के साथ जवाबों को जोड़ता है. इससे सामान्य ज्ञान के सवालों के जवाबों में तथ्यों की सटीकता काफ़ी हद तक बढ़ जाती है.

7. Cloud Run पर डिप्लॉय करना

जब आपका प्रोटोटाइप पूरी तरह से काम करने लगे, तब उसे सीधे AI Studio से Cloud Run पर, सार्वजनिक सर्वरलेस कंटेनर के तौर पर डिप्लॉय करें.

  1. Google AI Studio के सबसे ऊपर दाएं कोने में मौजूद, पब्लिश करें बटन पर क्लिक करके, डिप्लॉयमेंट विज़र्ड शुरू करें.Google AI Studio में पब्लिश करने वाले बटन की जगह
  2. अपने Google Cloud प्रोजेक्ट को कॉन्फ़िगर करने के लिए, शुरू करें पर क्लिक करें.
    • पुष्टि करें कि टारगेट Google Cloud प्रोजेक्ट ड्रॉप-डाउन, आपके डिप्लॉयमेंट प्रोजेक्ट से मेल खाता हो.
    • AI Studio, Cloud Run इंस्टेंस के लिए यूनीक सेवा आइडेंटिफ़ायर अपने-आप जनरेट करेगा.
  3. ऐप्लिकेशन पब्लिश करें पर क्लिक करें.
  4. कंटेनर बनाने, रजिस्टर करने, और सेवा को डिप्लॉय करने की प्रोसेस, बैकग्राउंड में पूरी होगी. आम तौर पर, यह प्रोसेस दो से चार मिनट में पूरी हो जाती है.
  5. डप्लॉयमेंट पूरा होने के बाद, जनरेट किया गया ऐप्लिकेशन का यूआरएल कॉपी करें. इसके बाद, ब्राउज़र टैब में लाइव ऐप्लिकेशन के लिंक पर जाएं!

8. सुरक्षा और प्रोडक्शन के सबसे सही तरीके देखें

इस ऐप्लिकेशन को प्रोटोटाइप से प्रोडक्शन एनवायरमेंट में बदलते समय, सुरक्षा से जुड़े इन सिद्धांतों को ध्यान में रखें:

1. Google Maps API कुंजी से जुड़ी पाबंदियां

Google Maps API के प्रोडक्शन पासकोड को कभी भी बिना किसी पाबंदी के न छोड़ें. Google Cloud Console में जाकर:

  • एपीआई से जुड़ी पाबंदियां: कुंजी को इस तरह से प्रतिबंधित करें कि वह सिर्फ़ कुछ एपीआई (Maps JavaScript API, Geocoding API, Places API) को कॉल कर सके.
  • ऐप्लिकेशन से जुड़ी पाबंदियां: तीसरे पक्ष की साइटों पर बिना अनुमति के इस्तेमाल को रोकने के लिए, एचटीटीपी रेफ़रर (जैसे, https://yourgame.com/*) का इस्तेमाल करके, कुंजी को प्रतिबंधित करें.

2. Gemini API पासकोड को सुरक्षित रखना

Gemini API के पासकोड को क्लाइंट-साइड JavaScript में कभी नहीं दिखाना चाहिए.

  • प्रोडक्शन आर्किटेक्चर: प्रॉक्सी के तौर पर काम करने के लिए, हल्की बैकएंड सेवा (जैसे, Cloud Run या Cloud Functions) बनाएं. आपका फ़्रंटएंड, आपके बैकएंड (/api/get-fun-facts) को कॉल करता है. इसके बाद, बैकएंड एनवायरमेंट वैरिएबल (GEMINI_API_KEY) का इस्तेमाल करके, Google AI Studio के साथ सुरक्षित तरीके से कम्यूनिकेट करता है.

9. संसाधन मिटाना

बिलिंग से जुड़े किसी भी अनचाहे शुल्क से बचने या अपने वर्कस्पेस के संसाधनों को हटाने के लिए:

  1. Google AI Studio में, ऐप्लिकेशन पेज पर जाएं.
  2. ग्रिड या सूची में अपना आवेदन ढूंढें.
  3. ऐप्लिकेशन की स्थिति मिटाने और Cloud Run से सेवा को अनपब्लिश करने के लिए, ट्रैश आइकॉन पर क्लिक करें.
  4. अगर आपने स्टैंडर्ड प्रोजेक्ट का इस्तेमाल करके डिप्लॉय किया है और आपको सभी संसाधनों को पूरी तरह से बंद करना है, तो Google Cloud Console की प्रोजेक्ट सेटिंग पर जाएं और प्रोजेक्ट मिटाएं.

10. नतीजा

बधाई हो! आपने Google AI Studio की मदद से, एआई की मदद से काम करने वाला जियोस्पेशल वेब ऐप्लिकेशन डिज़ाइन, डेवलप, और डिप्लॉय किया हो. आपने Google Maps Platform API का इस्तेमाल करके, एक इंटरैक्टिव गेम बनाया है. यह गेम, असल दुनिया के डेटा पर आधारित है.

बिल्डर जर्नी पूरी की बैज पर दावा करने के लिए, इस लिंक पर जाएं!

अपनी यात्रा जारी रखने के लिए, अगले लैब के लिए goo.gle/builders पर जाएं.

ज़्यादा जानें