वेब के लिए वाइब कोडिंग से आगे

1. परिचय

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

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

चार चरणों वाला गेम प्लान

कोडिंग एजेंट को बेहतर कोड जनरेट करने के लिए, इन चार चरणों वाली प्रॉडक्ट डेवलपमेंट लाइफ़साइकल का पालन करें. इससे, आपकी ज़रूरतों के हिसाब से कोड जनरेट करने में मदद मिलेगी:

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

इस दस्तावेज़ में, एआई एजेंट को सक्रिय सहयोगी पार्टनर के तौर पर इस्तेमाल करने का तरीका बताया गया है. साथ ही, इसमें ऐसे तरीके बताए गए हैं जिनसे आपको तकनीकी कर्ज़ को कम करने और आउटपुट कोड की क्वालिटी को बेहतर बनाने में मदद मिलेगी. आपने Antigravity का इस्तेमाल किया है. इसे Modern Web Guidance और DevTools for Agents के साथ जोड़ा गया है. इससे आपको एक सामान्य शब्द गेम बनाने और उसे एआई की सुविधाओं के साथ बेहतर बनाने में मदद मिलती है. इसके बाद, इसे Google Cloud पर डिप्लॉय किया जाता है. इसके लिए, Firebase का इस्तेमाल किया जाता है, ताकि इसे अपने दोस्तों और परिवार के साथ शेयर किया जा सके.

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

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

ज़रूरी शर्तें

  • निजी Google खाता और Google Cloud या Firebase प्रोजेक्ट (निर्देश प्रोजेक्ट सेटअप में दिए गए हैं)
  • एचटीएमएल, सीएसएस, और JavaScript के बारे में कुछ जानकारी.
  • कोई वेब ब्राउज़र, जैसे कि Chrome.
  • Node.js इंस्टॉल होना चाहिए. हमारा सुझाव है कि आप एलटीएस वर्शन इंस्टॉल करें.

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

Google खाता

अगर आपके पास पहले से कोई निजी Google खाता नहीं है, तो Google खाता बनाएं.

Google Cloud Console में साइन इन करें

किसी निजी Google खाते का इस्तेमाल करके, Google Cloud Console में साइन इन करें.

बिलिंग की सुविधा चालू करें

निजी बिलिंग खाता सेट अप करने के लिए, Cloud Console में बिलिंग चालू करें पर जाएं.

Firebase प्रोजेक्ट बनाना

  1. Firebase कंसोल पर जाएं और अपने निजी Google खाते से साइन इन करें.
  2. प्रोजेक्ट जोड़ें या प्रोजेक्ट बनाएं पर क्लिक करें.
  3. प्रोजेक्ट बनाने वाले विज़र्ड में:
    • कोई प्रोजेक्ट का नाम डालें (जैसे, wordup-web-app) या प्रोजेक्ट सेटअप के दौरान सेट अप किए गए Google Cloud प्रोजेक्ट का फिर से इस्तेमाल करें.
  4. बिलिंग खाता कनेक्ट करें
    • Firebase कंसोल के साइडबार में, सबसे नीचे मौजूद प्लान बैज ढूंढें. इस पर "स्पार्क" लिखा होता है. अपग्रेड करें पर क्लिक करें.
    • इस्तेमाल के हिसाब से पैसे चुकाएं प्लान चुनें.
    • वह बिलिंग खाता चुनें जिसे आपने प्रोजेक्ट सेटअप के दौरान सेट अप किया था.
    • अपने बिलिंग खाते को प्रोजेक्ट से जोड़ने के लिए, चुने गए विकल्प की पुष्टि करें. (Firebase Hosting में, फ़्री टियर के तहत कई सुविधाएं मिलती हैं. इस ट्यूटोरियल को पूरा करने में आम तौर पर कोई शुल्क नहीं लगता).

टूल इंस्टॉल करना

  • Antigravity 2.0: यह एक प्राइमरी एजेंटिक कोडिंग हार्नेस है. इसका इस्तेमाल, कोडिंग के लिए किया जाता है. इसे Gemini Flash के नए मॉडल के साथ जोड़ा गया है, ताकि कोडिंग को तेज़ी से और बेहतरीन तरीके से किया जा सके.
  • मॉडर्न वेब गाइडेंस: कोडिंग एजेंट के लिए यह एक स्किल है. इससे उन्हें मॉडर्न सीएसएस, एचटीएमएल, और JavaScript लिखने में मदद मिलती है. Antigravity सेटिंग > पसंद के मुताबिक बनाएं > Google के प्लगिन की मदद से बनाएं > मॉडर्न वेब गाइडेंस के ज़रिए इंस्टॉल करें.
  • एजेंट के लिए DevTools: इससे एजेंट, Chrome को कंट्रोल कर सकते हैं, लाइव DOM की जांच कर सकते हैं, लेआउट की जांच कर सकते हैं, और रनटाइम में डीबग कर सकते हैं. Antigravity सेटिंग > पसंद के मुताबिक बनाएं > Google प्लगिन के साथ बनाएं > Chrome DevTools और Antigravity सेटिंग > पसंद के मुताबिक बनाएं > एमसीपी सर्वर जोड़ें > एजेंट के लिए Chrome DevTools के ज़रिए इंस्टॉल करें.
  • Firebase एमसीपी सर्वर: इससे प्रोजेक्ट को आसानी से सेट अप किया जा सकता है और एक ही प्रॉम्प्ट में डिप्लॉयमेंट किए जा सकते हैं. Antigravity के ज़रिए इंस्टॉल करें सेटिंग > पसंद के मुताबिक बनाएं > Google प्लगिन की मदद से बनाएं > Firebase और Antigravity की सेटिंग > पसंद के मुताबिक बनाएं > एमसीपी सर्वर जोड़ें > Firebase.

3. किसी प्लान से शुरुआत करना

एजेंटिक कोडिंग में, आम तौर पर यह कोशिश की जाती है कि ज़ीरो-शॉट प्रॉम्प्ट ("मेरे लिए एक वर्ड गेम बनाओ") सबमिट किया जाए और अच्छे नतीजे की उम्मीद की जाए. इससे अक्सर, मुश्किल मामलों को छोड़ दिया जाता है, कोडबेस बहुत बड़ा हो जाता है, और गड़बड़ियों को ठीक करने के लिए बार-बार काम करना पड़ता है.

इसके बजाय, हर टास्क को प्रॉडक्ट डेवलपमेंट की छोटी लाइफ़साइकल के तौर पर देखें. कोडिंग एजेंट के पास रिसर्च और तर्क देने वाले टूल होते हैं. इनकी मदद से, वे सहयोगी के तौर पर काम करते हैं. इससे आपको कोड लिखने से पहले अपने आइडिया को बेहतर तरीके से समझने में मदद मिलती है. अपने आइडिया के बारे में बात करने से, अक्सर आपको सवालों के जवाब मिल जाते हैं और समस्याएं हल हो जाती हैं. सॉफ़्टवेयर इंजीनियरिंग में इसे रबर डक डिबगिंग कहा जाता है. अपने प्रोजेक्ट और सुविधाओं को प्लान करने के लिए, कोडिंग एजेंट को रबर डक के तौर पर इस्तेमाल किया जा सकता है.

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

I want to make a casual word guessing game. Go do deep research on those kinds
of games, then ask me questions to help me write a PRD for the game's features.

यह प्रॉम्प्ट का बुनियादी आकार है. इसे अपनी ज़रूरतों के हिसाब से रीमिक्स करें. यहां मुख्य बात यह है कि यह सुविधा, गहराई से रिसर्च करती है और उस रिसर्च के आधार पर आपसे सवाल पूछती है, ताकि आपको अपने काम की योजना बनाने में मदद मिल सके.

इस प्रॉम्प्ट से शुरुआत करें, क्योंकि कोडिंग एजेंट के साथ काम करने में बहुत ज़्यादा समीक्षा करनी पड़ती है. पूरे प्लान को छोटे-छोटे हिस्सों में बांटने से, उसकी समीक्षा करना आसान हो जाता है. इससे आपको शुरुआती दौर में ही मुश्किल मामलों का पता चल जाता है. साथ ही, एजेंट के ट्रेनिंग डेटा के अलावा अन्य स्रोतों से भी जानकारी मिल सकती है. सबसे अहम बात यह है कि इससे आपको समीक्षा के दौरान ज़्यादा ब्रेक लेने का मौका मिलता है.

  • "क्या" को "कैसे" से अलग करता है: प्रॉडक्ट की ज़रूरी शर्तों वाले दस्तावेज़ (पीआरडी) में उपयोगकर्ता अनुभव और प्रॉडक्ट के स्कोप को तय करने से, आपको यह तय करने में मदद मिलती है कि क्या करना है और कैसे करना है. इससे आपको एक बार में प्रॉडक्ट डेवलपमेंट के एक पहलू पर फ़ोकस करने में मदद मिलती है.
  • शुरुआत में ही मुश्किल मामलों की पहचान हो जाती है: सवाल-जवाब वाले इंटरैक्टिव सेशन में, डिज़ाइन या लागू करने की प्रोसेस शुरू होने से पहले ही आपको अपनी ज़रूरी शर्तों के बारे में साफ़ तौर पर बताना होता है.
  • एजेंट के लिए नई रिसर्च: एजेंट की ट्रेनिंग एक तय तारीख पर बंद हो जाती है और इसमें मौजूद जानकारी को बहुत कम शब्दों में बताया जाता है. इसलिए, लाइव रिसर्च से नई जानकारी मिल सकती है, जो आम तौर पर नहीं मिलती.

एक्सरसाइज़ 1

अब आपकी बारी है. अपना प्रोजेक्ट सेट अप करें और पीआरडी बनाएं.

  1. अपनी AGENTS.md फ़ाइल में एक निर्देश जोड़ें, ताकि वह आपके आउटपुट को docs/plans/{{YYYY-MM-DD}}-{{description}}.md में सेव कर सके.
  2. पीआरडी बनाने के लिए, रिसर्च के पिछले प्रॉम्प्ट को अपनी पसंद के मुताबिक बदलाव करके चलाएं.
  3. [स्ट्रेच गोल] AGENTS.md फ़ाइल को उन चीज़ों से अपडेट करें जो आपको एजेंट के जवाब में पसंद नहीं आईं. इसके बाद, अपना प्रॉम्प्ट फिर से चलाएं.

4. ब्राउज़र में डिज़ाइन करना

स्टैटिक यूज़र इंटरफ़ेस (यूआई) डिज़ाइन, मॉकअप पर निर्भर करता है. ये मॉकअप अक्सर बहुत अच्छे दिखते हैं, लेकिन इनमें कुछ खास मामलों, सीमाओं, और उपयोगकर्ता के असल इंटरैक्शन को ध्यान में नहीं रखा जाता. कोड की तरह ही, किसी एजेंट से अपनी साइट के ऐप्लिकेशन को "डिज़ाइन" करने के लिए कहने पर, आपको ऐसे डिज़ाइन मिलते हैं जो एक सामान्य (अक्सर बैंगनी रंग का) डिज़ाइन में बदल जाते हैं.

वेब ऐप्लिकेशन के लिए, एजेंट के लिए DevTools की मदद से, एजेंट की वेब ब्राउज़र को कंट्रोल करने की सुविधा का इस्तेमाल किया जा सकता है. इससे ब्राउज़र में डिज़ाइन किया जा सकता है. चाहे आप डिज़ाइनर हों और अपने डिज़ाइन को बेहतर बनाना चाहते हों, कोडर या बिल्डर हों और अपने प्रोजेक्ट के यूज़र इंटरफ़ेस (यूआई) और यूज़र एक्सपीरियंस (यूएक्स) को बेहतर बनाना चाहते हों या दोनों मिलकर काम कर रहे हों, जिस प्लैटफ़ॉर्म के लिए प्रॉडक्ट बनाया जा रहा है उस पर काम करने से बेहतर नतीजे मिलते हैं.

ब्राउज़र में डिज़ाइन करने से, आपको एक साथ काम करने वाले कई एजेंटों के साथ मिलकर काम करने का मौका मिलता है, ताकि एक ही आउटपुट तैयार किया जा सके. ये सब-एजेंट, खास पर्सोना और लक्ष्यों वाले एजेंट होते हैं. इन्हें एक साथ काम करने के लिए सेट किया जा सकता है, ताकि ये अकेले काम करने वाले एजेंट की तुलना में बेहतर नतीजे दे सकें. डिज़ाइन के लिए, विज़ुअल डिज़ाइन एजेंट, उपयोगकर्ता अनुभव एजेंट, और ऐक्सेसिबिलिटी एजेंट से एक साथ काम करने का अनुरोध किया जा सकता है. इससे आपको अपने डिज़ाइन में मदद मिलेगी. साथ ही, वे आपको सीधे ब्राउज़र में डिज़ाइन दिखा पाएंगे.

डिज़ाइन एजेंट का पैनल शुरू करें, ताकि वे आपके पीआरडी के आधार पर डिज़ाइन चुनने में आपकी मदद कर सकें.

Using the PRD, start a panel of expert agents: one UX design, one web
accessibility, and one for visual design, and have them work together to design
3 different UI mockups and show them to me in-browser.

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

एक्सरसाइज़ 2

अब आपकी बारी है. अपने प्रोजेक्ट को डिज़ाइन करें.

  1. अपने डिज़ाइन को बेहतर बनाने के लिए, ऊपर दिए गए डिज़ाइन प्रॉम्प्ट को अपनी पसंद के मुताबिक बदलावों के साथ चलाएं. आपको किस तरह के डिज़ाइन चाहिए, इसके बारे में आइडिया दें. जैसे, मॉडर्न, मस्ती भरा, असली जैसा दिखने वाला वगैरह.
  2. अपनी पसंद का कोई डिज़ाइन चुनें और अपने एजेंट के साथ मिलकर उसे बेहतर बनाएं.
  3. अपने एजेंट से कहें कि वह आपके पीआरडी को अपडेट करे, ताकि वह तय किए गए डिज़ाइन के मुताबिक हो.
  4. बड़ा लक्ष्य: चुने गए डिज़ाइन के लिए, ऐक्सेसिबिलिटी टेस्ट और रिस्पॉन्सिव डिज़ाइन टेस्ट चलाएं. साथ ही, उन ऑडिट के आधार पर अपने डिज़ाइन में बदलाव करें.

5. स्पेसिफ़िकेशन लिखना

स्वीकार किए गए पीआरडी ("क्या बनाना है") और चुने गए विज़ुअल डिज़ाइन ("यह कैसा दिखता है") के साथ, अब आपको आर्किटेक्चर ("इसे कैसे बनाना है") के बारे में तकनीकी जानकारी देनी होगी.

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

Write a detailed technical design document on how to implement the game with
the chosen design.

ऐसा क्यों किया जा रहा है

  • आर्किटेक्चर की जानकारी: कॉम्पोनेंट के क्रम और स्टेट ट्रांज़िशन फ़्लो (जैसे कि Idle → InGame → EvaluatingGuess → GameOver) को तय करने से, रेस कंडीशन और स्पैग़ेट्टी कोड से बचा जा सकता है.
  • मॉडर्न स्टैंडर्ड के मुताबिक काम करना: मॉडर्न वेब गाइडेंस की सुविधा चालू होने पर, एजेंट लेगसी हैवी लाइब्रेरी से जानकारी लेने के बजाय, मॉडर्न स्टैंडर्ड (जैसे, सीएसएस @container क्वेरी, मॉडल्स या मदद के लिए ओवरले के लिए बिल्ट-इन एलिमेंट, और मॉड्यूलर ES मॉड्यूल) का इस्तेमाल करता है.
  • स्टेज की गई समीक्षाएं: फ़ंक्शनल पीआरडी की समीक्षा को टेक्निकल डिज़ाइन डॉक की समीक्षा से अलग करने पर, आपको उपयोगकर्ता अनुभव से अलग आर्किटेक्चर का आकलन करने में मदद मिलती है.

तीसरी कसरत

  1. अपने AGENTS.md को निर्देश दें कि वह आपके आउटपुट को मौजूदा फ़ोल्डर में सेव करे: 
    PRDs should _always_ be written to the current project's root in `docs/plans/{{YYYY-MM-DD}}-{{description}}.md` format
  2. डिज़ाइन दस्तावेज़ का प्रॉम्प्ट चलाएं और उसकी समीक्षा करें. साथ ही, यह पक्का करें कि इसमें डायरेक्ट्री स्ट्रक्चर, इवेंट हैंडलिंग, और स्टोरेज जैसे पहलुओं को शामिल किया गया हो.
  3. स्ट्रेच गोल: अगर इसमें पहले से मर्मेड डायग्राम शामिल नहीं हैं, तो इन्हें शामिल करें. इससे ऐप्लिकेशन के ज़रिए स्टेट फ़्लो को समझने में मदद मिलेगी.

6. आखिर में, ऐप्लिकेशन बनाना

PRD, यूज़र इंटरफ़ेस (यूआई) मॉकअप, और डिज़ाइन दस्तावेज़ तैयार हो जाने के बाद, अब इसे बनाने का समय है. इन तीन आइटम से, एजेंट को साफ़ तौर पर और बिना किसी अस्पष्टता के यह जानकारी मिलती है कि उन्हें क्या बनाना चाहिए.

सब-एजेंट का इस्तेमाल करने का एक और अच्छा मौका यहां दिया गया है. कोड तैयार होने के बाद, इन टेस्ट को चलाया जा सकता है. इससे यह देखा जा सकता है कि कोड, आपके शुरुआती डिज़ाइन के मुताबिक है या नहीं. साथ ही, यह भी देखा जा सकता है कि कोड की क्वालिटी कैसी है.

Use the PRD, design doc, and mockup to implement the site, then send out 2
agents, one to check how closely you followed the requirements, and one to
review the code.

ऐसा क्यों किया जा रहा है

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

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

एक्सरसाइज़ 4

  1. बिल्ड प्रॉम्प्ट चलाएं और उन फ़ाइलों को चुनें जिनकी आपको समीक्षा करानी है.
  2. आउटपुट को चलते हुए देखें. आप इसे अपनी ज़रूरतों के हिसाब से गहराई से विश्लेषण करते हुए देखते हैं, क्योंकि यह इसे बनाने की कोशिश करता है. अगर आपको लगता है कि कोई चीज़ सही तरीके से काम नहीं कर रही है, तो उसे रोका जा सकता है और ठीक किया जा सकता है.
  3. इसे डेवलपमेंट सर्वर पर चलाकर देखें कि फ़ाइनल साइट कैसी दिखती है और यह ठीक से काम कर रही है या नहीं.
  4. स्ट्रेच गोल: अपने-आप होने वाली जांचों को जोड़ने के लिए, इस प्रोसेस को फिर से दोहराएं.
  5. स्ट्रेच गोल: कोई ऐसा फ़्रेमवर्क या टेक्नोलॉजी स्टैक चुनें जिसमें आपको साइट बनानी है. पीआरडी, मॉकअप, और डिज़ाइन डॉक अलग-अलग होने की वजह से, इन्हें अलग-अलग फ़्रेमवर्क या टेक्नोलॉजी स्टैक के हिसाब से आसानी से अडजस्ट किया जा सकता है.

7. प्रोडक्शन में डिप्लॉय करना

आपने प्लान बना लिया है, डिज़ाइन कर लिया है, और कोड कर लिया है. अब क्या बचा है? प्रोडक्शन में डिप्लॉय किया जा रहा है.

Deploy this site to my Firebase project [YOUR_PROJECT_ID] using Firebase
Hosting.

एक्सरसाइज़ 5

  1. अपने प्रोजेक्ट आईडी की जगह डिप्लॉयमेंट प्रॉम्प्ट डालें.
  2. एजेंट से मिले लाइव होस्टिंग के यूआरएल को कॉपी करें.
  3. लाइव यूआरएल खोलकर देखें कि वह डिप्लॉय हो गया है और काम कर रहा है.
  4. स्ट्रेच गोल: एजेंट के लिए DevTools का इस्तेमाल करके, अपनी प्रोडक्शन साइट का Lighthouse ऑडिट करें. साथ ही, Lighthouse स्कोर को बेहतर बनाने के लिए बदलाव करें और अपडेट पब्लिश करें.

8. [वैकल्पिक] एआई की मदद से बेहतर बनाना

अब आपका वर्ड गेम, स्टैटिक डिक्शनरी का इस्तेमाल करके पूरी तरह से काम कर रहा है. स्टैटिक डिक्शनरी को डाइनैमिक शब्द में बदलने के लिए, Prompt API से छोटे, स्थानीय लैंग्वेज मॉडल का इस्तेमाल करके, हर बार एक प्रॉम्प्ट दिया जा सकता है.

यह सुविधा सभी डिवाइसों पर उपलब्ध नहीं है. इसलिए, एपीआई और मॉडल उपलब्ध हैं या नहीं, यह देखने के लिए प्रोग्रेसिव एन्हांसमेंट का इस्तेमाल करें. अगर ऐसा है, तो उनका इस्तेमाल करें. अगर ऐसा नहीं है, तो अपनी स्टैटिक सूची पर वापस जाएं.

एक्सरसाइज़ 6

आपने जो कुछ भी सीखा है उसे एक साथ इस्तेमाल करें.

  1. अपने एजेंट के साथ मिलकर एक पीआरडी लिखें, ताकि प्रॉम्प्ट एपीआई का इस्तेमाल करके एक मान्य छिपा हुआ शब्द जनरेट किया जा सके.
  2. ब्राउज़र में, डाउनलोड होने की प्रोसेस बताने वाला प्रोग्रेस बार और एआई को इंटिग्रेट करने वाला यूज़र इंटरफ़ेस (यूआई) डिज़ाइन करें.
  3. लागू करने के लिए स्पेसिफ़िकेशन लिखो. (सलाह: एजेंट को चलाकर पक्का करें कि यहां सही एपीआई सिंटैक्स का इस्तेमाल किया गया हो.)
  4. नई सुविधा डेवलप करें.
  5. इसे प्रोडक्शन में डिप्लॉय करें.

9. आखिर में खास जानकारी

बधाई हो। आपने एजेंटिक कोडिंग के सबसे सही तरीकों का इस्तेमाल करके, एक आधुनिक, सुलभ, और एआई की सुविधाओं से लैस वेब ऐप्लिकेशन को बनाया, बेहतर बनाया, और डिप्लॉय किया है.

आपने क्या सीखा

  • प्रॉडक्ट के हिसाब से एजेंट के वर्कफ़्लो: टास्क को मिनी प्रॉडक्ट लाइफ़साइकल (पीआरडी → डिज़ाइन → स्पेसिफ़िकेशन → बिल्ड) के तौर पर ट्रीट करने से, कर्ज़, समीक्षा के ओवरहेड, और बार-बार होने वाली समस्याओं को कैसे कम किया जा सकता है.
  • कई एजेंट वाले विशेषज्ञ पैनल: एआई के कई सब-एजेंट को चलाने से, आपके काम की क्वालिटी और विश्वसनीयता को बेहतर बनाने में कैसे मदद मिल सकती है.
  • पीआरडी बनाम डिज़ाइन दस्तावेज़: फ़ंक्शनल स्कोप (प्लान) को टेक्निकल आर्किटेक्चर (स्पेसिफ़िकेशन) से अलग करना, ज़ीरो-शॉट फ़ीचर प्रॉम्प्टिंग की तुलना में ज़्यादा सटीक और बढ़ाने लायक प्रोसेस क्यों है.
  • आसानी से डिप्लॉयमेंट: अपनी साइट डिप्लॉय करने जैसे तीसरे पक्ष के सिस्टम का ऐक्सेस पाने की प्रोसेस को आसान बनाने के लिए, एमसीपी सर्वर (जैसे, Firebase MCP) का इस्तेमाल कैसे करें.