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

1. परिचय

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

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

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

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

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

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

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

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

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

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

Cloud Shell शुरू करें

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

  1. Google Cloud Console में सबसे ऊपर मौजूद, 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 क्लाउड प्रोजेक्ट में, Firebase Management API चालू करें.

gcloud services enable firebase.googleapis.com

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

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

firebase login

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

firebase projects:addfirebase

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

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

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

3. सीएलआई कोडिंग एजेंट इंस्टॉल और उनकी पुष्टि करना

इस चरण में, आपको लोकल डेवलपमेंट एनवायरमेंट तैयार करना होगा. इसके लिए, Google Cloud के क्रेडेंशियल का इस्तेमाल करके, अपने लोकल कोड एडिटर में Antigravity CLI या Claude Code इंस्टॉल और उनकी पुष्टि करनी होगी.

Antigravity CLI इंस्टॉल और उसकी पुष्टि करना

  1. Antigravity CLI का सबसे नया वर्शन इंस्टॉल करें.
    # MacOS and Linux
curl -fsSL https://antigravity.google/cli/install.sh | bash

# Windows Powershell
irm https://antigravity.google/cli/install.ps1 | iex

# Windows CMD
curl -fsSL https://antigravity.google/cli/install.cmd -o install.cmd && install.cmd && del install.cmd
  2. agy को अपने पाथ में जोड़ने के लिए, टर्मिनल को रीस्टार्ट करें.
  3. पुष्टि करें कि इंस्टॉल में सबसे नया वर्शन इंस्टॉल हुआ है.
    agy --version
  4. Google Cloud के क्रेडेंशियल का इस्तेमाल करके, पुष्टि करें.
    • Antigravity CLI शुरू करें.
      agy
    • लॉगिन करने का तरीका चुनें के लिए पूछे जाने पर, Google Cloud प्रोजेक्ट का इस्तेमाल करें को चुनें. वेब ब्राउज़र में, सुरक्षित अनुमति देने वाला यूआरएल खोलें. अनुमोदित क्रेडेंशियल से साइन इन करें और पुष्टि की प्रोसेस पूरी करें. ब्राउज़र, एक यूनीक अल्फ़ान्यूमेरिक ऑथराइज़ेशन कोड दिखाता है. इस कोड को कॉपी करें, अपने टर्मिनल पर वापस जाएं, और इसे प्रॉम्प्ट में चिपकाएं.
  5. Antigravity CLI से बाहर निकलें.जारी रखने से पहले, सीएलआई टर्मिनल से /exit टाइप करके, Antigravity CLI का लाइव सेशन खत्म करें.

Claude Code इंस्टॉल और उसकी पुष्टि करना

इसके अलावा, Conductor प्लग इन का इस्तेमाल Claude Code के साथ भी किया जा सकता है. यहां हम Google Cloud के क्रेडेंशियल का इस्तेमाल करके, Claude Code इंस्टॉल और उसकी पुष्टि करेंगे.

  1. Claude Code का सबसे नया वर्शन इंस्टॉल करें.
  2. Google Cloud के क्रेडेंशियल का इस्तेमाल करके, पुष्टि करें.
    • Claude Code शुरू करें.
      claude
    • लॉगिन करने का तरीका चुनने के लिए, /login टाइप करें. तीसरे पक्ष का प्लैटफ़ॉर्म · Amazon Bedrock, Microsoft Foundry या Vertex AI और Google Vertex AI विकल्प चुनें. Google Vertex AI सेट अप करने के लिए, ऐप्लिकेशन के डिफ़ॉल्ट क्रेडेंशियल (google auth) को चुनें और पूछे जाने पर, सेटअप पूरा करें.
  3. Claude Code को रीस्टार्ट करें.

4. Conductor प्लग इन इंस्टॉल करना

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

Antigravity CLI में इंस्टॉल करना

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

Claude Code में इंस्टॉल करना

  1. मार्केटप्लेस रिपॉज़िटरी रजिस्टर करें और Conductor प्लग इन को सीधे अपने Claude Code सेशन में इंस्टॉल करें.
    /plugin marketplace add gemini-cli-extensions/conductor
/plugin install conductor
/reload-plugin
  2. पुष्टि करें कि इंस्टॉल.
    • /conductor टाइप करें. इसके बाद, आपको कमांड की एक सूची दिखेगी. जैसे, /conductor-setup, conductor-new-track, conductor-implement वगैरह.
  3. सीएलआई से बाहर निकलें.जारी रखने से पहले, Claude Code टर्मिनल से /exit टाइप करके, सीएलआई का लाइव सेशन खत्म करें.

5. ग्रीनफ़ील्ड डेवलपमेंट: Picker Wheel

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

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

  1. एक नई प्रोजेक्ट डायरेक्ट्री बनाएं और उसमें बदलाव करें.अब हम picker-wheel डायरेक्ट्री में किसी प्रोजेक्ट पर काम करेंगे. यह डायरेक्ट्री बनाएं और इसमें बदलाव करें.
    mkdir picker-wheel
cd picker-wheel
  2. Antigravity CLI शुरू करें.Antigravity CLI या Claude Code की मदद से, अपने प्रोजेक्ट डायरेक्ट्री से एक नया सीएलआई सेशन शुरू करें.
    # Antigravity CLI
agy

# Claude Code
claude
    • "क्या आपको इस फ़ोल्डर में मौजूद फ़ाइलों पर भरोसा है?" पूछे जाने पर, फ़ोल्डर पर भरोसा करें (picker-wheel) को चुनें
  3. Conductor को शुरू करें.प्रोजेक्ट को तैयार करने और Conductor एनवायरमेंट सेट अप करने के लिए, सेटअप कमांड चलाएं.
    # Antigravity CLI
/conductor:conductor-setup

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

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

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

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

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

  1. लागू करने की प्रोसेस शुरू करें.
    # Antigravity CLI
/conductor:conductor-implement

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

# Claude Code
/conductor-review

6. ब्राउनफ़ील्ड में बदलाव करना: अपने हिसाब से बनाने की सुविधा जोड़ना

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

अपने हिसाब से बनाने की सुविधा का ट्रैक बनाना

  1. यहां "ब्राउनफ़ील्ड" के उदाहरण में, हम पुष्टि करने और स्टोरेज के लिए Firebase का इस्तेमाल करेंगे. Firebase की सुविधाएं इंस्टॉल करें, ताकि Conductor इसका इस्तेमाल कर सके.
  2. अपना सीएलआई एजेंट शुरू करें.एक नया सीएलआई सेशन शुरू करें.
    # Antigravity CLI
/new

# Claude Code
/new
  3. नया ट्रैक शुरू करें.एक नया ट्रैक शुरू करें.
    # Antigravity CLI
/conductor:conductor-new-track "I want users to be able to log in to their
accounts and save their picker wheel configurations."

# Claude Code
/conductor-new-track "I want users to be able to log in to their accounts
and save their picker wheel configurations."
  4. इंटरैक्टिव प्रॉम्प्ट का पालन करें.आपको दिखने वाले इंटरैक्टिव प्रॉम्प्ट, इन उदाहरणों से पूरी तरह मेल नहीं खाएंगे. Conductor के वर्कफ़्लो से खुद को परिचित कराने के लिए, सामान्य डिज़ाइन पर फ़ोकस करें.
    • ट्रैक का लक्ष्य:
      • पुष्टि करने की सुविधा देने वाला प्लैटफ़ॉर्म → Firebase पुष्टिकरण
      • सेव किए गए कॉन्फ़िगरेशन → व्हील के विकल्प
      • डेटा स्टोरेज → Firestore
      • Firestore लॉगिन यूआई → मोडल ओवरले
    Conductor, conductor/tracks/{track-id} में नए ट्रैक के लिए कॉन्टेक्स्ट फ़ाइलें जनरेट करेगा.
  5. जनरेट किए गए प्लान की समीक्षा करें.कुछ समय निकालकर, conductor/tracks/{track-id}/ में मौजूद index.md, spec.md, और plan.md पढ़ें.
  6. लागू करें.अगर आपको लगता है कि सब कुछ ठीक है, तो लागू करने की प्रोसेस शुरू की जा सकती है.
    # Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement
  7. पुष्टि करें.अपने ऐप्लिकेशन को फिर से लोड करें. आपको अपडेट किया गया ऐप्लिकेशन दिखेगा. साइन इन करने की सुविधा वाला पिकर व्हील

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

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

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

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

व्यवस्थित करने का सबसे आसान तरीका है कि प्रोजेक्ट को पूरी तरह से मिटा दिया जाए.

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

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

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

8. बधाई हो

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

अगले चरण