Gemini CLI Conductor की मदद से ऐप्लिकेशन प्लान करना और बनाना

1. परिचय

इस कोडलैब में, Gemini CLI Conductor एक्सटेंशन की मदद से, सॉफ़्टवेयर ऐप्लिकेशन को प्लान करने और बनाने का तरीका बताया गया है. आपको "ग्रीनफ़ील्ड" ऐप्लिकेशन को पूरी तरह से नए सिरे से बनाना होगा. इसके बाद, इसे "ब्राउनफ़ील्ड" प्रोजेक्ट के तौर पर माना जाएगा. इसमें पुष्टि करने और स्टोरेज की सुविधा जोड़ने के लिए, इसे बार-बार दोहराया जाएगा.

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

  • Gemini CLI और Conductor एक्सटेंशन इंस्टॉल करें
  • Conductor की प्लानिंग और लागू करने की सुविधाओं का इस्तेमाल करके, "पिकर व्हील" वेब ऐप्लिकेशन को शुरू से बनाना
  • Firebase का इस्तेमाल करके, पुष्टि करने और स्टोरेज की सुविधा जोड़कर ऐप्लिकेशन को मनमुताबिक बनाएं

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

  • "ग्रीनफ़ील्ड" ऐप्लिकेशन को प्लान करने, लागू करने, और उसकी समीक्षा करने के लिए, Conductor एक्सटेंशन का इस्तेमाल कैसे करें
  • "ब्राउनफ़ील्ड" ऐप्लिकेशन में सुविधाएं जोड़ने के लिए, Conductor एक्सटेंशन का इस्तेमाल कैसे करें

आपको किन चीज़ों की ज़रूरत होगी

  • कोई वेब ब्राउज़र, जैसे कि Chrome
  • बिलिंग की सुविधा वाला Google Cloud प्रोजेक्ट
  • Node.js इंस्टॉल होना चाहिए. हमारा सुझाव है कि आप 18 या इससे ऊपर का वर्शन इस्तेमाल करें
  • Visual Studio Code जैसा कोई लोकल कोड एडिटर

2. शुरू करने से पहले

Google Cloud प्रोजेक्ट बनाना

  1. Google Cloud Console में, प्रोजेक्ट चुनने वाले पेज पर, Google Cloud प्रोजेक्ट चुनें या बनाएं.
  2. पक्का करें कि आपके Cloud प्रोजेक्ट के लिए बिलिंग चालू हो. किसी प्रोजेक्ट के लिए बिलिंग चालू है या नहीं, यह देखने का तरीका जानें.

Cloud Shell शुरू करना

Cloud Shell, Google Cloud में चलने वाला एक कमांड-लाइन एनवायरमेंट है. इसमें ज़रूरी टूल पहले से लोड होते हैं.

  1. Google Cloud कंसोल में सबसे ऊपर मौजूद, Cloud Shell चालू करें पर क्लिक करें.
  2. Cloud Shell से कनेक्ट होने के बाद, अपने क्रेडेंशियल की पुष्टि करें:
    gcloud auth list
  3. पुष्टि करें कि आपका प्रोजेक्ट कॉन्फ़िगर किया गया है:
    gcloud config get project
  4. अगर आपका प्रोजेक्ट उम्मीद के मुताबिक सेट नहीं है, तो इसे सेट करें:
    export PROJECT_ID=<YOUR_PROJECT_ID>
gcloud config set project $PROJECT_ID

एपीआई चालू करें

अपने Google Cloud प्रोजेक्ट में Firebase Management API चालू करें.

gcloud services enable firebase.googleapis.com

अपने प्रोजेक्ट में Firebase जोड़ना

Cloud Shell में Firebase CLI पहले से इंस्टॉल होता है. Cloud Shell में, उसी Google खाते से साइन इन करें जिससे आपको Google Cloud प्रोजेक्ट का ऐक्सेस मिलता है. अगर आपको लोकल तौर पर काम करना है, तो निर्देशों का पालन करके Firebase CLI इंस्टॉल करें.

firebase login

अपने Google Cloud प्रोजेक्ट में Firebase जोड़ने के लिए, यह कमांड चलाएं:

firebase projects:addfirebase

अगर आपने पहली बार firebase CLI का इस्तेमाल किया है, तो पूछे गए सवालों के जवाब दें.

Cloud Shell से बाहर निकलना

Cloud Shell विंडो को बंद किया जा सकता है. इस सेक्शन में, हम आपके लोकल एनवायरमेंट को कॉन्फ़िगर करेंगे.

3. Gemini CLI और Conductor को स्थानीय तौर पर इंस्टॉल करना

इस चरण में, आपको अपने लोकल डेवलपमेंट एनवायरमेंट को तैयार करना होगा. इसके लिए, आपको अपने लोकल कोड एडिटर और टर्मिनल का इस्तेमाल करके, Gemini CLI और Conductor एक्सटेंशन इंस्टॉल करना होगा.

Gemini CLI इंस्टॉल करना

  1. npm का इस्तेमाल करके, Gemini CLI का नया वर्शन ग्लोबल तौर पर इंस्टॉल करें:
    npm install -g @google/gemini-cli
  2. अपने टर्मिनल को रीस्टार्ट करें, ताकि gemini को आपके PATH में जोड़ा जा सके.
  3. पुष्टि करें कि इंस्टॉल किए गए नए वर्शन में ये सुविधाएं मौजूद हैं:
    gemini --version
  4. नई प्रोजेक्ट डायरेक्ट्री बनाएं और उस पर स्विच करें: बाद के सेक्शन में, हम picker-wheel डायरेक्ट्री में एक प्रोजेक्ट बनाएंगे. अब उस डायरेक्ट्री को बनाएं और इस डायरेक्ट्री पर स्विच करें:
    mkdir picker-wheel
cd picker-wheel
  5. पुष्टि करना:
    • Gemini CLI शुरू करें.
      gemini
    • जब आपसे पूछा जाए कि "क्या आपको इस फ़ोल्डर में मौजूद फ़ाइलों पर भरोसा है?", तो फ़ोल्डर पर भरोसा करें (पिकर-व्हील) को चुनें
    • जब आपसे पूछा जाए कि "आपको इस प्रोजेक्ट के लिए पुष्टि कैसे करनी है?", तो Vertex AI चुनें. Google Cloud API पासकोड पाने और GOOGLE_API_KEY एनवायरमेंट वैरिएबल सेट करने के लिए, पुष्टि करने की गाइड पढ़ें. कुछ समय निकालकर, इस्तेमाल के अलग-अलग टियर और उनसे जुड़ी एपीआई रेट लिमिट के बारे में जानें.
  6. Gemini CLI से बाहर निकलें: जारी रखने से पहले, Gemini CLI का लाइव सेशन खत्म करने के लिए, सीएलआई टर्मिनल में /quit टाइप करें.

Conductor एक्सटेंशन इंस्टॉल करना

Conductor, Google का बनाया हुआ Gemini CLI एक्सटेंशन है. यह ओपन-सोर्स है. इससे कॉन्टेक्स्ट के हिसाब से डेवलपमेंट की सुविधाएं मिलती हैं. जैसे, प्लानिंग और लागू करने की प्रोसेस को ट्रैक करना.

  1. एक्सटेंशन इंस्टॉल करें:
    gemini extensions install https://github.com/gemini-cli-extensions/conductor
  2. इंस्टॉल किए गए ऐप्लिकेशन की पुष्टि करना:
    • Gemini CLI शुरू करें. 
      gemini
    • /conductor टाइप करने पर, आपको setup, newTrack, implement वगैरह जैसे निर्देशों की सूची दिखेगी.
  3. Gemini CLI से बाहर निकलें: जारी रखने से पहले, Gemini CLI का लाइव सेशन खत्म करने के लिए, सीएलआई टर्मिनल में /quit टाइप करें.

4. ग्रीनफ़ील्ड डेवलपमेंट: पिकर व्हील

अब आपका एनवायरमेंट सेट अप हो गया है. इसलिए, आपको नए सिरे से एक नया ऐप्लिकेशन बनाना होगा. आपको "पिकर व्हील" बनाना होगा. यह एक सामान्य वेब ऐप्लिकेशन है, जो किसी विकल्प को चुनने के लिए घूमता है.

प्रॉडक्ट कॉन्टेक्स्ट सेट अप करना

  1. पुष्टि करें कि आप उस picker-wheel डायरेक्ट्री में हैं जिसे आपने पिछले सेक्शन में बनाया था:
    pwd
  2. Gemini CLI शुरू करें: अपने प्रोजेक्ट डायरेक्ट्री से, Gemini CLI का नया सेशन शुरू करें.
    gemini
  3. Conductor को शुरू करना: प्रोजेक्ट को तैयार करने और Conductor एनवायरमेंट को सेट अप करने के लिए, सेटअप कमांड चलाएं.
    /conductor:setup
  4. इंटरैक्टिव प्रॉम्प्ट का पालन करें: आपको दिखने वाले इंटरैक्टिव प्रॉम्प्ट, इन उदाहरणों से पूरी तरह मेल नहीं खाएंगे. Conductor के वर्कफ़्लो के बारे में जानने के लिए, आसान डिज़ाइन पर फ़ोकस करें.
    • प्रॉडक्ट लक्ष्य: यह एक वेब ऐप्लिकेशन है. इसमें कॉन्फ़िगर किया जा सकने वाला एक स्पिनिंग व्हील दिखता है. इसकी मदद से, सूची में से कोई आइटम चुना जाता है.
      • टारगेट ऑडियंस → सामान्य लोग
      • इंटरैक्शन → घुमाने के लिए टैप/क्लिक करें
      • पसंद के मुताबिक बनाएं → बुनियादी
      • प्लैटफ़ॉर्म → डेस्कटॉप-फ़र्स्ट
    • प्रॉडक्ट के लिए दिशा-निर्देश: अपने-आप जनरेट हो जाए.
    • टेक्नोलॉजी स्टैक:
      • भाषाएं → TypeScript/JavaScript - फ़ुल-स्टैक वेब के लिए सबसे सही
      • फ़्रंटएंड → Vue.js - आसान वेब इंटरफ़ेस
      • बैकएंड → Express.js - Fast Node backend
      • डेटाबेस → कोई नहीं - किसी डेटाबेस की ज़रूरत नहीं है
    • वर्कफ़्लो: स्टैंडर्ड.
    • प्रॉडक्ट की ज़रूरी शर्तें:
      • उपयोगकर्ता की कहानियां → पसंद के मुताबिक बनाने के विकल्प, सबसे अच्छा परफ़ॉर्म करने वाले थंबनेल को साफ़ तौर पर दिखाना
      • मुख्य सुविधाएं → बदलाव की जा सकने वाली विकल्प सूची, रैंडमाइज़ किए गए रंग
      • पाबंदियां → सिर्फ़ क्लाइंट-साइड, हाई परफ़ॉर्मेंस
      • नॉन-फ़ंक्शनल → ज़्यादा टेस्ट कवरेज, TypeScript और Vue.js, रिस्पॉन्सिव डिज़ाइन
    Conductor, conductor/ डायरेक्ट्री में कॉन्टेक्स्ट फ़ाइलें जनरेट करेगा.

नया ट्रैक बनाना

Conductor में "ट्रैक" का मतलब किसी सुविधा या काम की यूनिट से होता है.

  1. /conductor:newTrack का इस्तेमाल करके, नया ट्रैक शुरू करें. कंडक्टर, प्रॉडक्ट के कॉन्टेक्स्ट के आधार पर शुरुआती ट्रैक का सुझाव दे सकता है. इसके अलावा, आपके पास अपना ट्रैक सुझाने या कंडक्टर से ट्रैक का सुझाव देने के लिए कहने का विकल्प होता है.
  2. जनरेट किए गए प्लान की समीक्षा करें: Conductor, conductor/tracks/{track-id}/ में index.md, spec.md, और plan.md जनरेट करेगा. थोड़ा समय निकालकर इन्हें पढ़ें. अगर सब कुछ ठीक लगता है, तो Conductor आपको शुरुआती सेटअप फ़ाइलों को सेव करने और कमिट करने के लिए कहेगा.

ट्रैक लागू करना

  1. लागू करना शुरू करें:
    /conductor:implement
    अब Conductor, प्लान के हिसाब से प्रोजेक्ट के लिए कोड लिखेगा.
  2. ऐप्लिकेशन की पुष्टि करना: लागू करने के चरण के दौरान, Conductor आपको ऐप्लिकेशन को मैन्युअल तरीके से टेस्ट करने के लिए कहेगा. उदाहरण के लिए, यह आपसे लोकल वेब सर्वर खोलने, ब्राउज़र में ऐप्लिकेशन की झलक देखने, और बदलावों की पुष्टि करने के लिए कहेगा. लागू करने की प्रोसेस पूरी होने के बाद, आपको एक फ़ंक्शनल पिकर व्हील दिखेगा.Picker Wheel ऐप्लिकेशन
  3. लागू करने की प्रोसेस की समीक्षा करें: आखिरी चरण के तौर पर, Conductor से लागू करने की प्रोसेस की समीक्षा करने के लिए कहा जा सकता है. इसे सोर्स कोड की समीक्षा करनी चाहिए, प्रोजेक्ट के दस्तावेज़ को सिंक करना चाहिए, और ट्रैक को संग्रहित करना चाहिए.
    /conductor:review

5. ब्राउनफ़ील्ड इटरेसन: मनमुताबिक बनाने की सुविधा जोड़ना

अब आपको "ब्राउनफ़ील्ड" डेवलपमेंट पर स्विच करना होगा. पिछले सेक्शन में, आपने पिकर व्हील वेब ऐप्लिकेशन को बेहतर बनाया था. अब आपको इसे और बेहतर बनाना है, ताकि साइन इन किए हुए उपयोगकर्ता अपने पिकर व्हील कॉन्फ़िगरेशन को सेव और रीस्टोर कर सकें.

मनमुताबिक बनाए गए ट्रैक बनाना

  1. नीचे दिए गए "ब्राउनफ़ील्ड" उदाहरण में, हम पुष्टि करने और स्टोरेज के लिए Firebase का इस्तेमाल करेंगे. Gemini CLI का Firebase एक्सटेंशन इंस्टॉल करें, ताकि Conductor इसका इस्तेमाल कर सके.
    gemini extensions install https://github.com/gemini-cli-extensions/firebase
  2. Gemini CLI शुरू करें: अपने प्रोजेक्ट डायरेक्ट्री से, Gemini CLI का नया सेशन शुरू करें.
    gemini
  3. नया ट्रैक शुरू करें: नया ट्रैक शुरू करें.
    /conductor:newTrack "I want users to be able to log in to their accounts and
save their picker wheel configurations."
  4. इंटरैक्टिव प्रॉम्प्ट का पालन करें: आपको दिखने वाले इंटरैक्टिव प्रॉम्प्ट, इन उदाहरणों से पूरी तरह मेल नहीं खाएंगे. Conductor के वर्कफ़्लो के बारे में जानने के लिए, आसान डिज़ाइन पर फ़ोकस करें.
    • लक्ष्य ट्रैक करना:
      • पुष्टि करने की सेवा देने वाली कंपनी → Firebase Auth
      • सेव किए गए कॉन्फ़िगरेशन → पहिए के विकल्प
      • डेटा स्टोरेज → Firestore
      • Firestore Login UI → Modal Overlay
    Conductor, conductor/tracks/{track-id} में मौजूद नए ट्रैक के लिए कॉन्टेक्स्ट फ़ाइलें जनरेट करेगा.
  5. जनरेट किए गए प्लान की समीक्षा करें: conductor/tracks/{track-id}/ में मौजूद index.md, spec.md, और plan.md को पढ़ने के लिए कुछ समय निकालें.
  6. लागू करें: अगर आपको लगता है कि सब कुछ ठीक है, तो इसे लागू किया जा सकता है.
    /conductor:implement
  7. पुष्टि करें: अपने आवेदन को फिर से लोड करें. आपको अपडेट किया गया आवेदन दिखेगा. साइन इन करने की सुविधा वाला पिकर व्हील

रेफ़रंस के तौर पर लागू करने के लिए, यहां गोल्डन कोड दिया गया है. ऐप्लिकेशन को सही तरीके से शुरू करने के लिए, आपको .firebaserc में अपना Firebase प्रोजेक्ट और firebase.ts में Firebase कॉन्फ़िगरेशन देना होगा.

6. व्यवस्थित करें

अपने Google Cloud खाते से लगातार शुल्क लिए जाने से बचने के लिए, इस कोडलैब के दौरान बनाई गई संसाधन मिटाएं.

Firebase प्रोजेक्ट (और Google Cloud प्रोजेक्ट) मिटाना

प्रोजेक्ट को पूरी तरह से मिटाकर, उसे सबसे आसानी से हटाया जा सकता है.

  1. Google Cloud Console में, बनाया गया प्रोजेक्ट चुनें.
  2. मिटाएं पर क्लिक करें.

इसके अलावा, अगर आपको प्रोजेक्ट को सेव रखना है, लेकिन संसाधन मिटाने हैं, तो यह तरीका अपनाएं:

  1. Firestore डेटाबेस मिटाना: Firebase कंसोल > Firestore पर जाएं और डेटाबेस मिटाएं.
  2. पुष्टि करने की सुविधा मिटाना: Firebase कंसोल > पुष्टि करनासाइन-इन करने का तरीका पर जाएं. इसके बाद, Google को बंद करें.

7. बधाई हो

बधाई हो! आपने Gemini CLI Conductor एक्सटेंशन का इस्तेमाल करके, वेब ऐप्लिकेशन को शुरू से बनाया है. इसके बाद, आपने पुष्टि करने और डेटाबेस इंटिग्रेशन जैसी जटिल सुविधाओं को शामिल करके, उसे बेहतर बनाया है.

अगले चरण