होम

Claude Code और Docker के साथ R में Vibe Coding

Vibe coding अपने कंप्यूटर के साथ बातचीत करने जैसा है—आप नतीजा बताते हैं, Claude Code उसे बनाता है, आप टेस्ट करके सुधारते हैं। यह कोई जादू नहीं है; यह काम करने का एक नया तरीका है जहाँ आप दिशा तय करते हैं और AI उसे लागू करता है। यह ट्यूटोरियल आपको दिखाता है कि केवल सादी भाषा में अनुरोध करके एक असली NBA स्टैट्स डैशबोर्ड कैसे बनाया जाए।

मुख्य अवधारणाएँ

• Claude Code - AI कोडिंग असिस्टेंट जो आपके सादी भाषा के अनुरोधों के आधार पर कोड लिखता, डिबग करता और रीफ़ैक्टर करता है
• hoopR - R पैकेज जो NBA खिलाड़ी आँकड़ों और गेम डेटा तक आसान पहुँच देता है
• इटरेटिव सुधार - vibe coding का मुख्य पैटर्न: बताएँ → टेस्ट करें → सुधारें → काम करने वाले वर्शन को कमिट करें

आपको क्या चाहिए

• पूरा किया हुआ R Coding in VS Code via Docker
• पूरा किया हुआ Using GitHub Desktop with Claude Code
• Docker Desktop इंस्टॉल और शुरू किया हुआ
• 25-30 मिनट

चरण 1: नई GitHub रिपॉज़िटरी बनाएँ

• GitHub Desktop खोलें
• File > New Repository पर क्लिक करें
• विवरण भरें:
  • Name: nba-dashboard
  • Description: NBA stats dashboard built with vibe coding
  • Local Path: एक स्थान चुनें (जैसे, Documents या work फ़ोल्डर)
  • Initialize this repository with a README को चेक करें
• Create Repository पर क्लिक करें
• ऊपर Publish repository पर क्लिक करें
• अगर आप इसे पब्लिक बनाना चाहते हैं तो Keep this code private को अनचेक करें (वैकल्पिक)
• Publish Repository पर क्लिक करें

अब आपके पास एक लोकल Git रिपॉज़िटरी और GitHub पर एक बैकअप है।

चरण 2: Docker कॉन्फ़िगरेशन कॉपी करें

• https://github.com/gexijin/vibe पर जाएँ
  • ARM64 उपयोगकर्ताओं के लिए नोट (Apple Silicon Macs): इसके बजाय https://github.com/gexijin/vibe/tree/ARM64 का उपयोग करें
• Code पर क्लिक करें और Zip डाउनलोड करें
• File Explorer (Windows) या Finder (Mac) खोलें
• Download फ़ोल्डर में फ़ाइल को अनज़िप करें
• अपने vibe प्रोजेक्ट फ़ोल्डर पर जाएँ (जैसे, Documents/vibe)
• .devcontainer फ़ोल्डर ढूँढें
• पूरा फ़ोल्डर कॉपी करें (इसमें Dockerfile और devcontainer.json शामिल हैं)
• अपने नए nba-dashboard फ़ोल्डर पर जाएँ
• .devcontainer फ़ोल्डर वहाँ पेस्ट करें

आपके nba-dashboard फ़ोल्डर में अब यह होना चाहिए:

• .devcontainer/ (अभी-अभी कॉपी किया गया फ़ोल्डर)
• README.md (GitHub Desktop द्वारा बनाया गया)
• .git/ (वर्शन कंट्रोल के लिए छिपा हुआ फ़ोल्डर)

चरण 3: प्रोजेक्ट को कंटेनर में खोलें

• Windows या Mac से Docker Desktop ऐप शुरू करें। इसे बैकग्राउंड में चलने दें
• VS Code खोलें
• File > Open Folder पर क्लिक करें
• nba-dashboard फ़ोल्डर पर जाएँ
• Select Folder (Windows) या Open (Mac) पर क्लिक करें
• नीचे दाईं ओर एक सूचना दिखेगी: Folder contains a Dev Container configuration file
• Reopen in Container पर क्लिक करें
• अगर आपको सूचना नहीं दिखती, तो नीचे बाईं ओर हरे आइकन पर क्लिक करें और Reopen in Container चुनें
• VS Code Docker कंटेनर बनाता है (पहली बार में 3-5 मिनट लगते हैं)
• बिल्ड के चरण दिखाती प्रगति सूचना देखें
• पूरा होने पर, हरा आइकन Dev Container: R in Docker दिखाता है

चरण 4: Claude Code शुरू करें

• VS Code में, Terminal > New Terminal पर क्लिक करें
• अब आप Docker कंटेनर के अंदर हैं
• Claude Code शुरू करने के लिए यह कमांड टाइप करें:

claude

• ऑथेंटिकेशन के लिए एक ब्राउज़र विंडो खुलती है
• Continue with Google या Continue with Email पर क्लिक करें
• अपने Claude अकाउंट से लॉग इन करें (या एक बनाएँ)
• ऑथेंटिकेशन सफल होने के बाद, VS Code टर्मिनल पर वापस जाएँ
• आपको Claude का स्वागत संदेश दिखेगा

Claude Code अब चल रहा है और आपके अनुरोधों के लिए तैयार है।

चरण 5: पहला Vibe - NBA डेटा लें

अब मज़ा शुरू होता है। डॉक्यूमेंटेशन खोजने के बजाय, बस बताएँ कि आपको क्या चाहिए।

• Claude Code टर्मिनल में, टाइप करें:

hoopR पैकेज इंस्टॉल करो और मौजूदा NBA खिलाड़ी आँकड़े लोड करो। मुझे इस
सीज़न में सबसे ज़्यादा कुल अंक बनाने वाले टॉप 10 खिलाड़ी दिखाओ। इसे एक
अच्छी टेबल के रूप में दिखाओ।

• Enter दबाएँ
• देखें कि Claude:
  • hoopR पैकेज इंस्टॉल करता है
  • डेटा लोड करने के लिए R कोड लिखता है
  • टॉप स्कोरर दिखाने के लिए एक स्क्रिप्ट बनाता है
  • कोड चलाता है
• खिलाड़ियों के नाम, टीमें और अंक दिखाते आउटपुट की समीक्षा करें

आपने अभी vibe coding का उपयोग किया! कोई डॉक्यूमेंटेशन खोजना नहीं, कोई ट्रायल एंड एरर नहीं—बस बताएँ और टेस्ट करें।

अपनी प्रगति सेव करें: Claude से Git का उपयोग करके कमिट करने को कहें, या इसे खुद GitHub Desktop से करें:

इन बदलावों को कमिट करो।

चरण 6: दूसरा Vibe - डेटा एक्सप्लोर करें

डैशबोर्ड बनाने से पहले, समझें कि आपके पास कौन-सा डेटा है।

• Claude Code टर्मिनल में, टाइप करें:

मुझे दिखाओ कि इस NBA डेटा में कौन-से कॉलम उपलब्ध हैं। फिर एक सारांश बनाओ
जिसमें दिखे: खिलाड़ियों की संख्या, टीमों की संख्या, प्रति खिलाड़ी औसत
अंक, और किसके पास सबसे ज़्यादा assists और rebounds हैं।

• Enter दबाएँ
• Claude डेटासेट को एक्सप्लोर करता है और आपको दिलचस्प आँकड़े दिखाता है
• उपलब्ध कॉलम देखने के लिए आउटपुट देखें जैसे: player_name, team, points, assists, rebounds, field_goal_percentage, आदि

यह खोज आपको यह तय करने में मदद करती है कि अपने डैशबोर्ड में क्या रखना है।

अपनी प्रगति सेव करें: Claude से कमिट करने को कहें, या GitHub Desktop का उपयोग करें।

चरण 7: तीसरा Vibe - बेसिक Shiny ऐप बनाएँ

अब इंटरैक्टिव डैशबोर्ड बनाने का समय है।

• Claude Code टर्मिनल में, टाइप करें:

app.R नाम की फ़ाइल में एक Shiny ऐप बनाओ जो NBA खिलाड़ी आँकड़ों की एक
इंटरैक्टिव टेबल दिखाए। इसमें खिलाड़ी का नाम, टीम, points, assists, और
rebounds के लिए कॉलम शामिल करो। कम से कम अंकों (0 से 1000 तक) के आधार
पर खिलाड़ियों को फ़िल्टर करने के लिए एक स्लाइडर जोड़ो। इसे साफ़-सुथरा और
प्रोफ़ेशनल दिखाओ।

• Enter दबाएँ
• Claude एक पूर्ण Shiny एप्लिकेशन के साथ app.R बनाता है
• Claude के फ़ाइल लिखना खत्म करने का इंतज़ार करें

चरण 8: Shiny ऐप चलाएँ

देखने के लिए कि यह काम करता है या नहीं, अपने डैशबोर्ड को टेस्ट करें।

• VS Code एडिटर के ऊपरी दाईं ओर देखें (जहाँ app.R खुला है)
• ड्रॉपडाउन एरो वाला ▶ बटन ढूँढें
• ड्रॉपडाउन पर क्लिक करें और Run Shiny App चुनें
• ऐप शुरू होता है और एक सूचना दिखती है: Open in Browser
• Open in Browser पर क्लिक करें
• NBA डैशबोर्ड आपके वेब ब्राउज़र में खुलता है
• points स्लाइडर हिलाकर देखें—टेबल रीयल-टाइम में फ़िल्टर होती है
• खिलाड़ी डेटा में स्क्रॉल करें
• अगर ऐप काम करता है तो बदलाव कमिट करें

अगर कुछ काम नहीं करता, तो कोई भी त्रुटि संदेश कॉपी करें और उन्हें ठीक करने के लिए Claude को पेस्ट करें।

चरण 9: चौथा Vibe - विज़ुअलाइज़ेशन जोड़ें

टेबल उपयोगी होती हैं, लेकिन विज़ुअलाइज़ेशन बेहतर कहानी बताते हैं।

• फिर से Claude Code टर्मिनल में, टाइप करें:

टेबल के नीचे एक बार चार्ट जोड़ो जो सबसे ज़्यादा अंक बनाने वाले टॉप 15
खिलाड़ियों को दिखाए। हर खिलाड़ी के लिए अलग रंग का उपयोग करो। साथ ही सभी
फ़िल्टर किए गए खिलाड़ियों के लिए points और assists के बीच संबंध दिखाने
वाला एक स्कैटर प्लॉट भी जोड़ो।

• Enter दबाएँ
• Claude विज़ुअलाइज़ेशन कोड के साथ app.R को अपडेट करता है
• ऐप को फिर से लोड करने के लिए फिर से Run Shiny App पर क्लिक करें
• अपना ब्राउज़र रिफ्रेश करें
• अब आपको एक रंगीन बार चार्ट और स्कैटर प्लॉट दिखेगा
• स्लाइडर हिलाएँ—सभी विज़ुअलाइज़ेशन साथ में अपडेट होते हैं

यही vibe coding असल में काम करते हुए दिखता है: सुविधा बताएँ, टेस्ट करें, सुधारें।

चरण 10: पाँचवाँ Vibe - टीम फ़िल्टर जोड़ें

टीम चयन के साथ डैशबोर्ड को और इंटरैक्टिव बनाएँ।

• Claude Code टर्मिनल में, टाइप करें:

टीम के अनुसार खिलाड़ियों को फ़िल्टर करने के लिए एक ड्रॉपडाउन मेनू जोड़ो।
इसे सबसे ऊपर रखो। जब मैं एक टीम चुनूँ, तो केवल उस टीम के खिलाड़ी दिखाओ।
सभी को दिखाने के लिए एक "All Teams" विकल्प शामिल करो।

• Enter दबाएँ
• Claude टीम फ़िल्टर जोड़ता है
• अपना ब्राउज़र रिफ्रेश करें
• ड्रॉपडाउन टेस्ट करें—Lakers, Warriors, Celtics जैसी अलग-अलग टीमें चुनें
• देखें कि हर टीम के लिए टेबल और चार्ट कैसे अपडेट होते हैं

आप बातचीत करके एक प्रोफ़ेशनल डैशबोर्ड बना रहे हैं।

चरण 11: समीक्षा करें और कमिट करें

कमिट करने से पहले, देखें कि Claude ने क्या बनाया।

• VS Code Explorer में, app.R खोलने के लिए उस पर क्लिक करें
• कोड को सरसरी तौर पर देखें—UI लेआउट, सर्वर लॉजिक और प्लॉटिंग कोड पर ध्यान दें
• आपको हर लाइन समझने की ज़रूरत नहीं, बस संरचना का अंदाज़ा लगाएँ
• GitHub Desktop खोलें
• आपको app.R एक नई फ़ाइल के रूप में सूचीबद्ध दिखेगी
• दायाँ पैनल सारा कोड हरे रंग में दिखाता है (नए जोड़े गए हिस्से)
• नीचे बाईं ओर Summary फ़ील्ड में, टाइप करें:

टीम फ़िल्टर और विज़ुअलाइज़ेशन के साथ NBA डैशबोर्ड बनाया

• Commit to main पर क्लिक करें
• GitHub पर बैकअप लेने के लिए Push origin पर क्लिक करें

आपने अपना पहला काम करने वाला वर्शन सेव कर लिया है!

चरण 12: सुधारें और बेहतर बनाएँ

Vibe coding तब चमकता है जब आप सुधार करते जाते हैं। सुविधाओं का वर्णन करके उन्हें जोड़ने की कोशिश करें:

Claude से किए जाने वाले उदाहरण अनुरोध:

• “एक player search box जोड़ो ताकि मैं किसी खिलाड़ी का नाम टाइप करके उस तक जा सकूँ”
• “ड्रॉपडाउन में टीम के नामों के बगल में टीम के लोगो दिखाओ”
• “चुनी हुई टीम के लिए points per game के ट्रेंड को दिखाने वाला एक लाइन चार्ट जोड़ो”
• “कॉलम हेडर पर क्लिक करके बार चार्ट को सॉर्ट करने योग्य बनाओ”
• “स्कैटर प्लॉट में hover करने पर खिलाड़ी के नाम दिखाने के लिए tooltips जोड़ो”

हर सफल सुविधा के बाद:

• इसे ब्राउज़र में टेस्ट करें
• अगर यह काम करता है, तो GitHub Desktop से कमिट करें
• अगर यह टूट जाता है, तो Claude को त्रुटि बताएँ और उसे ठीक करने के लिए कहें
• ठीक होने के बाद, काम करने वाले वर्शन को कमिट करें

मुख्य सिद्धांत:

• नतीजे बताएँ, तरीका नहीं - “टॉप स्कोरर दिखाओ” कहें, “arrange() और head() का उपयोग करो” नहीं
• तेज़ी से सुधार करें - टेस्ट → सुधारें → टेस्ट → सुधारें
• काम करने वाले वर्शन कमिट करें - नई सुविधाएँ आज़माने से पहले हर सफलता को सेव करें
• असफलताओं को स्वीकार करें - अगर Claude का कोड टूट जाए, तो बस त्रुटि बताएँ और उसे ठीक करने के लिए कहें
• नियंत्रण अपने पास रखें - सुविधाएँ, प्राथमिकताएँ और यह कब पर्याप्त है, यह आप तय करते हैं

हर बार, इस पैटर्न का पालन करें: बताएँ → टेस्ट करें → सुधारें → कमिट करें।

अगले कदम

• अपने क्षेत्र में लागू करें - अपने खुद के डेटा (रिसर्च, बिज़नेस, शौक) के लिए vibe coding का उपयोग करें
• अन्य पैकेज आज़माएँ - फ़ुटबॉल के लिए Claude से nflfastR या सॉकर के लिए worldfootballR का उपयोग करने के लिए कहें
• पूछकर सीखें - जब Claude कोड लिखे, तो R सीखने के लिए पूछें “समझाओ कि यह फ़ंक्शन क्या करता है”
• अपना डैशबोर्ड शेयर करें - shinyapps.io पर डिप्लॉय करें (कैसे करना है यह Claude से पूछें)
• vibe coding के बारे में पढ़ें - इस कोडिंग शैली के बारे में और जानने के लिए IBM की गाइड देखें

समस्या निवारण

• hoopR इंस्टॉलेशन विफल होना - अपना इंटरनेट कनेक्शन जाँचें; यह पैकेज वेब से डेटा डाउनलोड करता है। विस्तृत त्रुटि संदेश देखने के लिए एक R टर्मिनल में install.packages("hoopR") चलाने की कोशिश करें।
• Shiny ऐप शुरू नहीं हो रहा - सत्यापित करें कि Shiny एक्सटेंशन इंस्टॉल है (VS Code Extensions में “Posit.shiny” खोजें)। त्रुटि संदेशों के लिए टर्मिनल जाँचें और उन्हें Claude को पेस्ट करें।
• कोई डेटा नहीं दिख रहा - hoopR पैकेज लाइव डेटा खींचता है; अगर NBA सीज़न शुरू नहीं हुआ है, तो डेटा सीमित हो सकता है। Claude से सैंपल डेटा या पिछले सीज़न का उपयोग करने के लिए कहें।
• Claude गलतियाँ करता है - सामान्य बात है! त्रुटि संदेश कॉपी करें, इसे Claude को पेस्ट करें, और कहें “इस त्रुटि को ठीक करो।” Vibe coding में सुधार और डिबगिंग शामिल है।
• GitHub पर push नहीं हो पा रहा - सुनिश्चित करें कि आप GitHub Desktop में लॉग इन हैं और रिपॉज़िटरी पब्लिश की है (चरण 1)। अपना इंटरनेट कनेक्शन जाँचें।

वर्कफ़्लो का अवलोकन

इस ट्यूटोरियल ने कई तकनीकों को एक वर्कफ़्लो में जोड़ा:

• GitHub Desktop - विज़ुअल इंटरफ़ेस के साथ वर्शन कंट्रोल (रिपॉज़िटरी बनाना, कमिट करना, पुश करना)
• Docker कंटेनर - सभी डिपेंडेंसी के साथ पहले से इंस्टॉल किया गया आइसोलेटेड R एनवायरनमेंट
• VS Code - कोड एडिटर जो Docker कंटेनर से जुड़ता है
• Claude Code - AI असिस्टेंट जो आपके विवरणों से R और Shiny कोड लिखता है
• hoopR पैकेज - सरल API के साथ NBA डेटा स्रोत
• Shiny फ्रेमवर्क - R में इंटरैक्टिव वेब ऐप्स

जादू किसी एक टूल में नहीं है—यह इसमें है कि vibe coding आपको यह बताने देता है कि आपको क्या चाहिए और तेज़ी से सुधार करने देता है। आप बिना खुद एक भी लाइन कोड लिखे, 30 मिनट से कम समय में एक खाली प्रोजेक्ट से काम करने वाले स्पोर्ट्स डैशबोर्ड तक पहुँच गए।

रोज़मर्रा का वर्कफ़्लो

इस शुरुआती सेटअप के बाद, आपकी दैनिक vibe coding दिनचर्या यह बन जाती है:

1. Docker Desktop शुरू करें - ऐप लॉन्च करें, हरे स्टेटस का इंतज़ार करें
2. VS Code खोलें - अपना प्रोजेक्ट खोलें, ज़रूरत पड़ने पर कंटेनर में फिर से खोलें
3. Claude Code शुरू करें - टर्मिनल में claude टाइप करें
4. अपना लक्ष्य बताएँ - “एक सुविधा जोड़ो जो…” या “उस बग को ठीक करो जहाँ…”
5. बदलावों को टेस्ट करें - अपना ऐप चलाएँ, जाँचें कि यह काम करता है
6. सुधारें या कमिट करें - अगर टूटा है, तो सुधार बताएँ; अगर काम कर रहा है, तो GitHub Desktop से कमिट करें
7. नियमित रूप से पुश करें - GitHub पर बैकअप लेने के लिए Push origin पर क्लिक करें

आप जितना अभ्यास करेंगे, उतना ही बेहतर बताना सीखेंगे कि आपको क्या चाहिए। Vibe coding एक कौशल है—आप सीखते हैं कि किस तरह के विवरण सबसे अच्छे काम करते हैं और बड़े विचारों को टेस्ट करने योग्य हिस्सों में कैसे बाँटा जाए।

निर्माता Steven Ge, 7 दिसंबर, 2025. </content>