एआई की मदद से, वेब पर चलने वाला वीडियो गेम लॉन्च करना

1. परिचय

खास जानकारी

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

इस कोडलैब में, Firestore डेटाबेस का इस्तेमाल करके, बारी-बारी से खेले जाने वाला वेब-आधारित वीडियो गेम बनाया जाएगा. इसमें इवेंट सोर्सिंग का इस्तेमाल किया जाएगा, ताकि गेम में की गई कार्रवाइयों को इवेंट के क्रम के तौर पर सेव किया जा सके. इससे, खिलाड़ी मैच का इतिहास देख सकेंगे और पिछली बारी पर वापस जा सकेंगे. साथ ही, उपयोगकर्ता के लॉगिन के लिए Firebase से पुष्टि करने की सुविधा का इस्तेमाल किया जाएगा. AI Studio का एजेंट, सभी बैकएंड सेवाओं को कॉन्फ़िगर करेगा. साथ ही, फ़्रंटएंड, इवेंट सोर्सिंग लॉजिक, और डेटाबेस इंटरैक्शन कोड लिखेगा. ऐप्लिकेशन को बेहतर बनाने के बाद, उसे एक क्लिक में सीधे Cloud Run पर डिप्लॉय किया जाएगा.

पोर्टफ़ोलियो वेबसाइट का फ़ाइनल वर्शन

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

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

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

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

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

AI Studio लॉन्च करने से पहले, अपने खाते की स्थिति और ज़रूरी शर्तें देखें.

Google खाते और श्रेणी की जानकारी

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

3. AI Studio के बिल्ड मोड में, बारी-बारी से खेले जाने वाला वीडियो गेम बनाना

आइए, ऐप्लिकेशन शेल बनाएं और एआई कोड असिस्टेंट को सुरक्षा, गेमप्ले लॉजिक, और इवेंट-सोर्स वाले परसिस्टेंस लेयर बनाने के लिए प्रॉम्प्ट करें.

  1. Google AI Studio ऐप्लिकेशन पैनल पर जाएं और नया ऐप्लिकेशन पर क्लिक करें.
  2. चैट प्रॉम्प्ट बॉक्स में, बारी-बारी से खेले जाने वाले वीडियो गेम ऐप्लिकेशन का ब्यौरा डालें: 
    Build a web-based, turn-based Tic-Tac-Toe game using
Firebase as a backend. Users must be able to securely sign in
using Google Sign-In, start a new game match, make moves, and play
against an AI player or another user. Any algorithm used for the
game opponent AI should use simple algorithms like min/max and the
app should not make any calls to an LLM like the Gemini API. To
support multiplayer matches, the application must generate a short
game code or share link that players can easily copy and send to a
friend to join the match. Use Firestore and an event sourcing
pattern to save a history of every move (turn) as a separate event
document in a subcollection under the game document. The
application must reconstruct the current game state by replaying
these events, and must allow users to view previous turns and opt
to restore/roll back the game to a prior turn's state.
    इस लिंक से, प्रॉम्प्ट का बॉक्स अपने-आप भर जाएगा.
  3. ऐप्लिकेशन जनरेट करने की प्रोसेस शुरू करने के लिए, बनाएं पर क्लिक करें.

जब AI Studio के एजेंट को डेटाबेस स्टोरेज और सुरक्षित तरीके से उपयोगकर्ता के लॉगिन की ज़रूरत का पता चलता है, तो वह Firebase को अपने-आप कॉन्फ़िगर करने की प्रोसेस शुरू कर देता है.

  1. करीब एक मिनट बाद, Workspace में Firebase चालू करें का इंटिग्रेशन कार्ड दिखता है.
  2. सेवा की शर्तों की पुष्टि करने और उन्हें स्वीकार करने के लिए, Firebase चालू करें बटन पर क्लिक करें.
  3. एजेंट, बैकग्राउंड में सेटअप की प्रोसेस पूरी करेगा. बारीकियों के बारे में जानें:
    • Firestore डेटाबेस का इंस्टेंस उपलब्ध कराया जाता है.
    • Firebase से पुष्टि करने की सुविधा चालू की जाती है. साथ ही, Google से साइन इन करने की सुविधा भी चालू की जाती है.
    • सेवा खाते का कॉन्फ़िगरेशन सेट अप किया जाता है. जैसे, एपीआई क्रेडेंशियल वाला src/lib/firebase.ts बनाना.
    • डिफ़ॉल्ट सुरक्षा सीमाओं (उपयोगकर्ता आइसोलेशन के नियम) वाला firestore.rules जोड़ा जाता है.

4. टेस्ट करना और बार-बार एक्सपेरिमेंट करके ऐनिमेशन को बेहतर बनाना

सेवा को लाइव करने से पहले, इंटरैक्टिव झलक में पुष्टि करने की प्रोसेस पूरी करें.

  1. Google AI Studio में, झलक वाला पैनल खोलें.
  2. सैंडबॉक्स में, Google साइन-इन की पुष्टि करने की प्रोसेस शुरू करने के लिए, लॉगिन बटन पर क्लिक करें.
    • गड़बड़ियां ठीक करने के बारे में नोट: जनरेट करने या टेस्ट करने के दौरान, आपको कभी-कभी रनटाइम की समस्याएं, कंपाइलेशन की गड़बड़ियां या Firestore की अनुमति से जुड़ी समस्याएं आ सकती हैं. ऐसा सुरक्षा के नियमों में गड़बड़ी की वजह से हो सकता है. ऐसा होने पर, AI Studio चैट में ठीक करें बटन दिखाता है. इसकी मदद से, एजेंट से समस्या की अपने-आप जांच करने और उसे ठीक करने के लिए कहा जा सकता है.
    Google AI Studio में 'ठीक करें' बटन की जगह
  3. लॉग इन करने के बाद, नया गेम मैच शुरू करें. इसके बाद, जनरेट किया गया छोटा गेम कोड या शेयर करने का लिंक कॉपी करें. साथ ही, पुष्टि करें कि इसका इस्तेमाल मैच में शामिल होने के लिए किया जा सकता है.
  4. कई चालें चलें और पुष्टि करें कि मैच का इतिहास सही तरीके से दिख रहा है.
  5. मैच की पिछली बारी पर वापस जाने की कोशिश करें. पक्का करें कि बोर्ड या स्थिति अपडेट हो जाए, ताकि गेमप्ले के इतिहास में वह पिछली बारी दिखे. साथ ही, पुष्टि करें कि उस स्थिति को वापस लाया जा सकता है या उसे रोल बैक किया जा सकता है.
  6. अगर आपको स्टाइल या व्यवहार में बदलाव करना है, तो चैट विंडो के ज़रिए एजेंट को निर्देश दें. उदाहरण के लिए:
    • "Could you style the game board interface using Tailwind CSS and add a retro pixel-art theme?"
    • "Add a 'Turn History' sidebar matching the current state replay that shows when each move was made and by whom."
  7. एजेंट के कोडबेस को अपडेट करने का इंतज़ार करें. इसके बाद, अपडेट देखने के लिए, झलक वाला ब्राउज़र देखें.

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

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

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

6. Firebase कंसोल में जांच करना

बारीकियों के बारे में जानने के लिए, देखें कि डेटा स्कीमा और उपयोगकर्ताओं को कैसे ट्रैक किया जाता है.

  1. Firebase कंसोल पर जाएं.
  2. अपना प्रोजेक्ट चुनें. इसमें AI Studio लेबल या मैन्युअल तरीके से बाइंड किया गया प्रोजेक्ट आईडी होना चाहिए.
  3. बाईं ओर मौजूद नेविगेशन पैनल में, बनाएं > Firestore डेटाबेस चुनें:
    • अपने ऐप्लिकेशन से बनाए गए डेटाबेस कलेक्शन और दस्तावेज़ देखें.
    • पक्का करें कि हर दस्तावेज़ का कोई मालिक आईडी हो. यह आईडी, चालू उपयोगकर्ता के पुष्टि करने के क्रेडेंशियल से मेल खाता हो.
  4. Firestore पैनल में, सुरक्षा टैब चुनें. इससे, अपने-आप जनरेट हुए सुरक्षा निर्देशों की समीक्षा की जा सकती है. इन निर्देशों में, पुष्टि किए गए दस्तावेज़ के मालिकों के लिए, पढ़ने और लिखने की अनुमतियां सीमित की जाती हैं.
  5. लॉगिन टेस्ट के दौरान, चालू उपयोगकर्ता के क्रेडेंशियल की सूची देखने के लिए, सुरक्षा > पुष्टि करने की सुविधा पर जाएं.

7. स्टोरेज में जगह बनाएं

बिलिंग के अनचाहे शुल्क से बचने या अपने Workspace के संसाधनों को मिटाने के लिए:

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

8. नतीजा

बधाई हो! आपने Google AI Studio से सीधे, बारी-बारी से खेले जाने वाला वीडियो गेम डिज़ाइन, डेवलप, और डिप्लॉय किया है.

इस लिंक पर जाएं और बिल्डर जर्नी पूरी हुई बैज पाएं!

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

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