Getting Started Practice: एक खाली डायरेक्टरी से लेकर पूर्ण प्रोजेक्ट तक
📚 सीरीज़ नेविगेशन: यह लेख "Claude Code: Zero to Agent" ट्यूटोरियल सीरीज़ का अंतिम अभ्यास (Final Practice) है। पिछले 38 लेखों में, हमने इंटरफ़ेस, अनुमतियों, स्किल्स, एजेंटों, कॉन्फ़िगरेशन और कमांड्स को पूरी तरह से कवर किया है। अब, उन सभी टुकड़ों (pieces) को एक साथ जोड़ने और एक वास्तविक प्रोजेक्ट बनाने का समय आ गया है।
बधाई हो! यदि आपने इस सीरीज़ के सभी पिछले लेखों का अनुसरण किया है, तो आप अब "शुरुआती (beginner)" नहीं हैं। आप जानते हैं कि Shift+Tab के साथ अनुमति मोड कैसे स्विच करें, आप समझते हैं कि CLAUDE.md प्रोजेक्ट मेमोरी को कैसे आकार देता है, आप जानते हैं कि भारी कार्यों को Subagents को कैसे सौंपना है, और आप अपने स्वयं के Slash Commands और Skills भी लिख सकते हैं।
लेकिन ज्ञान (knowledge) को कौशल (skill) में बदलने के लिए अभ्यास (practice) की आवश्यकता होती है। यह लेख एक एंड-टू-एंड (end-to-end) वर्कफ़्लो (workflow) प्रदर्शित करेगा। हम एक खाली फ़ोल्डर से शुरू करेंगे, एक कार्य को परिभाषित करेंगे, प्रोजेक्ट शुरू करेंगे, कोड लिखेंगे, समस्याओं को डिबग करेंगे (चेकपॉइंट्स का उपयोग करके), और अंत में परिणाम को गिट (git) में कमिट (commit) करेंगे।
आप बस पढ़ सकते हैं, या आप टर्मिनल खोलकर साथ-साथ चल सकते हैं। (हैंड्स-ऑन दृष्टिकोण अत्यधिक अनुशंसित है।)
01 कार्य (The Task): एक CLI मौसम (Weather) ऐप
आइए कुछ ऐसा बनाएं जो बहुत तुच्छ (trivial) न हो लेकिन इतना जटिल भी न हो कि इसे पूरा होने में घंटों लगें: एक कमांड-लाइन मौसम (weather) एप्लिकेशन (Node.js में)।
आवश्यकताएं (Requirements):
- यह एक शहर का नाम इनपुट के रूप में लेगा (उदा.,
weather London). - यह उस शहर का वर्तमान मौसम प्राप्त करने के लिए सार्वजनिक मौसम API (जैसे Open-Meteo, जिसके लिए API कुंजी की आवश्यकता नहीं है) को कॉल करेगा।
- यह आउटपुट को टर्मिनल में अच्छी तरह से स्वरूपित (format) करेगा (संभवतः रंगों या ASCII कला के साथ)।
- हम चाहते हैं कि कोड साफ़ (clean) हो, अच्छी तरह से टिप्पणी (commented) किया गया हो, और इसमें एक बुनियादी README हो।
02 चरण 1: मंच सेट करना (Setting the Stage)
पहले, आइए अपने प्रोजेक्ट के लिए एक खाली फ़ोल्डर बनाएं और Git को इनिशियलाइज़ (initialize) करें।
mkdir cli-weather-app
cd cli-weather-app
git initअब, Claude Code प्रारंभ करें:
claude(अनुशंसित: सुनिश्चित करें कि आप default अनुमति मोड में हैं, इसलिए यह बड़े बदलाव करने से पहले आपसे पूछेगा। जांचने के लिए Shift+Tab का उपयोग करें।)
03 चरण 2: /init के साथ प्रोजेक्ट को इनिशियलाइज़ (Initialize) करना
हम चाहते हैं कि Claude शुरू से ही हमारे कोडिंग मानकों (standards) को जाने। हम CLAUDE.md फ़ाइल उत्पन्न करने के लिए /init कमांड का उपयोग करेंगे, और फिर इसे अपनी आवश्यकताओं के अनुरूप थोड़ा सा संशोधित करेंगे।
Claude प्रॉम्प्ट में, टाइप करें:
/initClaude चारों ओर देखेगा (देखेगा कि यह एक खाली प्रोजेक्ट है) और एक बुनियादी CLAUDE.md बनाएगा।
अब, आइए इसे अपनी विशिष्ट (specific) प्राथमिकताओं के साथ अपडेट करें। प्रॉम्प्ट में, टाइप करें:
CLAUDE.md को अपडेट करें:
1. "Build Commands" के अंतर्गत, जोड़ें: `npm start <city>` मौसम ऐप चलाने के लिए।
2. "Code Style" के अंतर्गत, जोड़ें: "सभी कोड को ES6+ सिंटैक्स (ES modules) का उपयोग करना चाहिए और हिंदी टिप्पणियों (Hindi comments) को शामिल करना चाहिए।"Claude CLAUDE.md फ़ाइल को संशोधित करेगा। आप जाँचने के लिए cat CLAUDE.md (या Claude में !cat CLAUDE.md) चला सकते हैं।
04 चरण 3: Plan Mode में प्रवेश करना (The "Rehearsal")
सीधे कोड जनरेट करने के लिए कहने के बजाय (जो अक्सर एक गड़बड़ की ओर जाता है), हम Plan Mode का उपयोग करेंगे। हम Claude को यह सोचने के लिए कहेंगे कि इसे कैसे बनाया जाए बिना कोई कोड लिखे।
प्रॉम्प्ट में, टाइप करें (या Shift+Tab का उपयोग करके plan मोड पर स्विच करें):
/plan एक Node.js CLI मौसम (weather) ऐप बनाएं।
- इसे `npm start <city>` के माध्यम से चलाया जाना चाहिए।
- मौसम का डेटा प्राप्त करने के लिए Open-Meteo API (जिसे API कुंजी की आवश्यकता नहीं है) का उपयोग करें।
- रंगीन आउटपुट (colored output) के लिए `chalk` लाइब्रेरी का उपयोग करें।
मुझे बताएं कि आप कौन सी फाइलें बनाएंगे और समग्र संरचना (overall structure) क्या होगी।Claude "प्लानिंग मोड" में प्रवेश करेगा। यह (संभवतः) प्रस्ताव देगा:
- Node.js प्रोजेक्ट को इनिशियलाइज़ करने के लिए
npm init -yचलाएँ। chalkऔरnode-fetch(या बिल्ट-इनfetch) स्थापित करें।- API लॉजिक के साथ
index.js(याapp.js) बनाएँ। package.jsonकोtype: "module"औरstartस्क्रिप्ट का उपयोग करने के लिए अपडेट करें।
यह फिर आपसे पूछेगा: "योजना को अप्रूव करें (Approve plan)?"
मेनू से Approve and auto-approve edits (या यदि आप इसे लाइन-दर-लाइन जांचना चाहते हैं तो मैन्युअल समीक्षा) चुनें।
05 चरण 4: निष्पादन (Execution) और (शायद) डिबगिंग
आपके द्वारा योजना को अप्रूव करने के बाद, Claude वास्तव में काम करना शुरू कर देगा। यह फाइलें बनाएगा, npm संकुल स्थापित करेगा (यह ऐसा करने के लिए अनुमति मांग सकता है), और कोड लिखेगा।
जब यह समाप्त हो जाए, तो आइए इसे आज़माएं। टर्मिनल में (आप Claude से बाहर निकले बिना सीधे यह आदेश दे सकते हैं, या आप इसे चलाने के लिए Claude को कह सकते हैं):
इसे चलाकर (run) देखें: npm start Mumbaiपरिदृश्य A: यह पूरी तरह से काम करता है। आपको टर्मिनल में मुंबई का मौसम रंगीन टेक्स्ट (colored text) में प्रिंट किया हुआ दिखाई देगा।
परिदृश्य B: एक त्रुटि (Error) है। शायद इसने fetch का उपयोग किया लेकिन Node.js संस्करण (version) का ठीक से हिसाब नहीं लगाया, या API प्रतिक्रिया (response) संरचना (structure) बदल गई है।
यदि कोई त्रुटि होती है, तो यह डिबग करने का समय है। आप बस कह सकते हैं:
उपरोक्त त्रुटि (error) को ठीक करें।Claude त्रुटि संदेश का विश्लेषण करेगा और कोड को ठीक करने का प्रयास करेगा।
06 चरण 5: चेकपॉइंट्स (Checkpoints) के साथ खेलना (पछतावे की दवा)
मान लीजिए कि ऐप काम कर रहा है, लेकिन अब आप एक बड़ी नई सुविधा जोड़ना चाहते हैं, और आपको डर है कि यह चीजों को तोड़ सकता है।
प्रॉम्प्ट:
कोड को पूरी तरह से फिर से लिखें (Refactor) ताकि यह 3-दिन का पूर्वानुमान (3-day forecast) दिखाए, न कि केवल वर्तमान मौसम। API कॉल और UI रेंडरिंग को अलग-अलग फ़ाइलों में विभाजित करें।Claude फाइलों को पुनर्गठित (reorganize) करेगा।
मान लीजिए आपको नया संस्करण पसंद नहीं है। आप मूल, सरल संस्करण को प्राथमिकता देते हैं। आपको इसे मैन्युअल रूप से पूर्ववत (undo) करने की आवश्यकता नहीं है।
रिवाइंड मेनू (Rewind menu) खोलें: (सुनिश्चित करें कि इनपुट बॉक्स खाली है, फिर Esc Esc दबाएं, या /rewind टाइप करें)।
उस बिंदु को चुनें जहाँ आपने कहा था (इसे चलाकर देखें: npm start Mumbai), और Restore code and conversation चुनें।
जादू की तरह, आपका कोड जटिल 3-दिन के पूर्वानुमान संस्करण (forecast version) से वापस साफ, सिंगल-फ़ाइल वर्तमान मौसम संस्करण पर वापस आ जाएगा।
07 चरण 6: README जनरेट करना और सब-एजेंट्स (Subagents)
ऐप लगभग पूरा हो गया है, लेकिन इसमें एक अच्छा README.md नहीं है। यदि हम चाहें, तो हम इस कार्य को एक Subagent को सौंप सकते हैं ताकि हमारा मुख्य कार्यक्षेत्र (workspace) अव्यवस्थित (cluttered) न हो।
प्रॉम्प्ट:
एक "Tech Writer" सब-एजेंट (subagent) शुरू करें।
कार्य (Task): प्रोजेक्ट फाइलों को पढ़ें और उपयोग (usage), स्थापना (installation), और उदाहरणों (examples) को समझाते हुए एक विस्तृत `README.md` लिखें।Claude एक सब-एजेंट को स्पॉन (spawn) करेगा। आप पृष्ठभूमि (background) में काम करते हुए सब-एजेंट का UI संकेत देखेंगे। जब यह समाप्त हो जाएगा, तो यह वापस रिपोर्ट करेगा कि README.md बन गया है।
आप /diff चलाकर इसके द्वारा किए गए परिवर्तनों की समीक्षा कर सकते हैं।
08 चरण 7: गिट कमिट (Git Commit)
हमने एक मील का पत्थर (milestone) पूरा कर लिया है। अब काम को सुरक्षित करने का समय आ गया है।
आप स्वयं (yourself) टर्मिनल में git add . और git commit टाइप कर सकते हैं, या आप Claude से इसे करने के लिए कह सकते हैं:
सभी फ़ाइलों को स्टेज (stage) करें और एक वर्णनात्मक (descriptive) गिट कमिट (git commit) संदेश (हिंदी में) लिखें।Claude git add . चलाएगा, आपके परिवर्तनों का विश्लेषण करेगा, और एक अच्छा कमिट संदेश (उदा., "feat: प्रारंभिक मौसम ऐप लॉन्च, Open-Meteo API के साथ एकीकृत") के साथ git commit चलाएगा।
09 निष्कर्ष: आप अब एक Agent Commander हैं
इस संक्षिप्त अभ्यास के माध्यम से, आपने क्या किया है:
- प्रोजेक्ट के नियमों (
CLAUDE.md) को सेट किया। - काम शुरू करने से पहले एक योजना बनाने के लिए
planमोड का उपयोग किया। - कोड उत्पन्न करने और आदेशों (commands) को चलाने के लिए Claude की स्वायत्तता (autonomy) का उपयोग किया।
- सुरक्षित रूप से प्रयोग करने (experiment) और वापस रोल करने (rollback) के लिए
/rewindका लाभ उठाया। - दस्तावेज़ीकरण (documentation) लिखने के लिए एक Subagent को आउटसोर्स किया।
- कार्य को एक Git कमिट (commit) के साथ समाप्त किया।
यह "टाइप और प्रतीक्षा (type and wait)" के दिनों से बहुत दूर है। अब आप केवल एक कोडर नहीं हैं; आप AI एजेंटों के कमांडर हैं।
Claude Code कोई जादुई छड़ी (magic wand) नहीं है जो आपके लिए आपकी सभी समस्याओं का समाधान कर देगी, लेकिन यह एक असाधारण रूप से शक्तिशाली एक्सोस्केलेटन (exoskeleton) है। जब आप इसके नियंत्रणों (controls), इसकी सीमाओं (limitations), और इसके पैटर्न (patterns) को समझते हैं — जैसा कि आपने इस सीरीज़ के माध्यम से किया है — तो आप अपने काम की गति (speed) और गुणवत्ता (quality) को कई गुना बढ़ा सकते हैं।
"Claude Code: Zero to Agent" सीरीज़ पढ़ने के लिए धन्यवाद। अब, अपने प्रोजेक्ट्स में जाएं और कुछ अद्भुत बनाएं!
शुभ कोडिंग! (Happy Coding!)