होम

Claude Code के साथ GitHub Desktop का उपयोग करें

आप AI की मदद से कोडिंग कर रहे हैं। यह आपकी फ़ाइलों में बदलाव करता है। कभी-कभी बदलाव बिल्कुल सही काम करते हैं। कभी-कभी नहीं। वर्जन कंट्रोल आपके पूरे प्रोजेक्ट के लिए एक अनडू बटन की तरह है। हर बार जब आप एक स्नैपशॉट सेव करते हैं (जिसे “commit” कहा जाता है), तो आप एक रीस्टोर पॉइंट बनाते हैं। आप हमेशा वापस जा सकते हैं।

जब आप GitHub Desktop को Claude Code के साथ जोड़ते हैं, तो आपको AI-जितनी तेज़ी से डेवलपमेंट के साथ-साथ प्रोफेशनल वर्जन कंट्रोल भी मिलता है।

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

Git आपके कंप्यूटर पर आपकी फ़ाइलों में हुए हर बदलाव को ट्रैक करता है।

GitHub आपके कोड को बैकअप के तौर पर क्लाउड में संग्रहीत करता है।

GitHub Desktop Git को विज़ुअल बनाता है - आप कमांड टाइप करने के बजाय बटन क्लिक करते हैं।

Claude Code एक AI कोडिंग सहायक है जो आपके लिए कोड लिखता है, बग ठीक करता है, और commit बनाता है।

आप क्या करेंगे

Claude Code के साथ एक सिंपल टाइमर ऐप बनाएं और GitHub Desktop से सभी बदलावों को ट्रैक करें:

• प्रोजेक्ट और टाइमर ऐप बनाएं
• टेस्ट करें और एरर ठीक करें
• बदलाव commit और push करें
• गलत बदलावों को हटाएं (discard) और फिर से कोशिश करें
• Claude से अपने आप commit करवाएं

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

• पूरा किया हुआ Installing Claude Code on Windows या Installing Claude Code on Mac ट्यूटोरियल
• पूरा किया हुआ Getting Started with Version Control ट्यूटोरियल
• 20 मिनट

चरण 1: अपना प्रोजेक्ट बनाएं

• GitHub Desktop खोलें
• File → New Repository पर क्लिक करें
• भरें:
  • Name: test_claude
  • Description: A timer app built with Claude Code
  • Local Path: Documents फ़ोल्डर
  • “Initialize this repository with a README” को चेक करें
• Create Repository पर क्लिक करें
• ऊपर Publish repository पर क्लिक करें
• Publish Repository पर क्लिक करें

अब आपके पास एक लोकल प्रोजेक्ट और GitHub पर क्लाउड बैकअप है।

चरण 2: Claude से टाइमर ऐप बनाने के लिए कहें

• अपना terminal खोलें
• अपने प्रोजेक्ट पर जाएं:

  cd ~/Documents/test_claude
  

• Claude Code शुरू करें:

  claude
  

• यह अनुरोध टाइप करें: ``` timer.html नाम की एक ही फ़ाइल में एक सिंपल काउंटडाउन टाइमर ऐप बनाओ। इसमें होना चाहिए:
  • मिनट सेट करने के लिए एक इनपुट फ़ील्ड
  • Start और Stop बटन
  • बचा हुआ समय MM:SS फॉर्मेट में दिखाने वाला डिस्प्ले
  • जब टाइमर शून्य पर पहुंचे, तो ‘Time’s up!’ दिखाओ इसे इनलाइन CSS और JavaScript के साथ सरल रखो। ```

Claude timer.html फ़ाइल बनाता है (इसमें 10-30 सेकंड लगते हैं)।

चरण 3: टाइमर टेस्ट करें

• GitHub Desktop में, Repository → Show in Finder/Explorer पर क्लिक करें
• अपने ब्राउज़र में खोलने के लिए timer.html पर डबल-क्लिक करें
• टाइमर आज़माएं:
  • इनपुट फ़ील्ड में 1 टाइप करें
  • Start पर क्लिक करें
  • काउंटडाउन देखें

अगर यह काम कर रहा है: चरण 5 पर जाएं। अगर कुछ खराब है: चरण 4 पर जारी रखें।

चरण 4: एरर ठीक करें (अगर ज़रूरत हो)

• ब्राउज़र कंसोल खोलें (पेज पर राइट-क्लिक करें → Inspect → Console टैब)
• कोई भी लाल एरर मैसेज कॉपी करें
• अपने terminal में वापस Claude Code पर जाएं
• एरर पेस्ट करें:

  मुझे यह एरर दिख रहा है: [एरर पेस्ट करें]। क्या तुम इसे ठीक कर सकते हो?
  

• ब्राउज़र रीफ्रेश करें (रीलोड बटन पर क्लिक करें या राइट-क्लिक → Reload) और फिर से टेस्ट करें

चरण 5: बदलावों की समीक्षा करें

• GitHub Desktop पर स्विच करें
• बायां पैनल: बदली गई फ़ाइलें दिखाता है (timer.html)
• दायां पैनल: कोड दिखाता है (हरा = जोड़ा गया)
• यह समझने के लिए पढ़ें कि Claude ने क्या बनाया है

commit करने से पहले हमेशा AI-जनरेटेड कोड की समीक्षा करें।

चरण 6: मैन्युअल रूप से Commit करें

• नीचे बाईं ओर, Summary field में टाइप करें:

  Create initial timer app with start/stop functionality
  

• Commit to main पर क्लिक करें

आपने एक सेव पॉइंट बना लिया है!

अच्छे मैसेज: “Create initial timer app”, “Fix start button” खराब मैसेज: “changes”, “update”, “asdf”

चरण 7: GitHub पर Push करें

• ऊपर Push origin बटन पर क्लिक करें
• सत्यापित करें: अपना कोड ऑनलाइन देखने के लिए Repository → View on GitHub

अब आपका कोड क्लाउड में बैकअप हो चुका है।

चरण 8: साउंड नोटिफिकेशन जोड़ें

• Claude Code टर्मिनल में:

  जब टाइमर शून्य पर पहुंचे तब एक साउंड नोटिफिकेशन जोड़ो। ब्राउज़र की बिल्ट-इन बीप
  साउंड का इस्तेमाल करो या एक सिंपल ऑडियो अलर्ट बनाओ।
  

• टेस्ट करें: ब्राउज़र रीफ्रेश करें, टाइमर को 0.1 मिनट पर सेट करें, Start पर क्लिक करें

इस ट्यूटोरियल के लिए: मान लीजिए कि साउंड ठीक से काम नहीं कर रहा। अभी commit न करें!

चरण 9: गलत बदलावों को हटाएं (Discard)

कभी-कभी AI हमें गलत रास्ते पर ले जाता है और हमें अपने आखिरी commit (सेव पॉइंट) से फिर से शुरू करना पड़ता है।

• GitHub Desktop खोलें
• Branch मेनू → Discard All Changes पर क्लिक करें
• पुष्टि करने के लिए Discard Changes पर क्लिक करें
• ब्राउज़र रीफ्रेश करें - टाइमर बिना साउंड के काम करता है!

आपने अभी खराब कोड को हटाकर अपने आखिरी सेव पॉइंट पर वापस जा लिया।

चरण 10: फिर से शुरू से बनाएं

• Claude Code में:

  जब टाइमर शून्य पर पहुंचे तब एक साउंड नोटिफिकेशन जोड़ो। इस बार, Web Audio API से
  बनाई गई एक सिंपल बीप साउंड के साथ एक HTML5 audio एलिमेंट का इस्तेमाल करो। यह
  सुनिश्चित करो कि यह ब्राउज़र की autoplay पाबंदियों को ठीक से संभाले।
  

• तुरंत टेस्ट करें (ब्राउज़र रीफ्रेश करें, 0.1 मिनट सेट करें, Start)

अगर यह काम कर रहा है: चरण 11 पर जारी रखें। अगर नहीं: एरर Claude को पेस्ट करें या फिर से कोशिश करें।

चरण 11: Claude को Commit और Push करने दें

• Claude Code में:

  मेरे बदलाव commit और push कर दो
  

Claude बदलावों की जांच करेगा, एक commit मैसेज लिखेगा, commit करेगा, और push करेगा (10-20 सेकंड)।

कब इस्तेमाल करें:

• मैन्युअल commit: जब आप सीख रहे हों या नियंत्रण चाहते हों
• Claude commit: जब आप तेज़ी से काम कर रहे हों और अच्छे मैसेज चाहते हों

चरण 12: Claude से बदलावों का सारांश मांगें

• Claude Code में:

  मैंने कौन सी फ़ाइलें बदली हैं?
  

Claude आपके बदलावों को सरल भाषा में समझाता है।

आज़माएं: explain what the audio code does या show me the last 5 commits

चरण 13: इतिहास (History) देखें

• GitHub Desktop में, History टैब पर क्लिक करें

आपको दिखेगा:

• Initial commit (README)
• Create initial timer app
• Add improved sound notification

ध्यान दें कि पहला असफल साउंड प्रयास वहां नहीं है - आपने उसे हटा दिया था! केवल काम करने वाला कोड ही आपके commit में पहुंचा।

चुनौतियाँ

• कस्टम साउंड: freesound.org से एक मुफ़्त .mp3 डाउनलोड करें, इसे अपने प्रोजेक्ट फ़ोल्डर में रखें, Claude से इसका इस्तेमाल करने के लिए कहें
• कई टाइमर: यूज़र्स को एक साथ कई टाइमर बनाने और चलाने की सुविधा दो
• प्रोग्रेस बार: एक प्रोग्रेस बार जोड़ो जो विज़ुअल रूप से दिखाए कि कितना समय बचा है

याद रखें: हर फीचर के बाद टेस्ट करें, हर सफलता के बाद commit करें, असफलताओं को हटा दें।

GitHub.com पर अपना प्रोजेक्ट देखें: अपना पूरा commit इतिहास और कोड ऑनलाइन देखने के लिए GitHub Desktop में Repository → View on GitHub पर क्लिक करें।

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

“Authentication failed”: GitHub Desktop → File/Preferences → Accounts → साइन आउट करें और फिर से साइन इन करें

Claude कहता है “not a git repository”: सुनिश्चित करें कि आप सही फ़ोल्डर में हैं (cd ~/Documents/test_claude)

टाइमर काम नहीं कर रहा: ब्राउज़र कंसोल खोलें (राइट-क्लिक → Inspect → Console), एरर कॉपी करें, Claude को पेस्ट करें

मदद चाहिए? GitHub Desktop docs • Claude Code docs

पूरा वर्कफ़्लो

• Claude से बदलाव करने के लिए कहें
• ब्राउज़र में टेस्ट करें
• अगर यह काम करे → समीक्षा करें और commit करें
• अगर यह असफल हो → हटाएं और फिर से कोशिश करें
• GitHub पर push करें
• दोहराएं

नियंत्रण चाहिए तो मैन्युअल commit करें। रफ़्तार चाहिए तो Claude से commit करवाएं। बेझिझक हटाएं - केवल काम करने वाला कोड ही commit करें!

अगले कदम

अपने टाइमर में फीचर जोड़ने की कोशिश करें:

झटपट जीत (Quick wins):

• 5, 10, 15 मिनट के लिए प्रीसेट बटन: तीन प्रीसेट बटन जोड़ो: "5 min", "10 min", और "15 min"
• Pause बटन: एक Pause/Resume बटन जोड़ो जो टाइमर की स्थिति को टॉगल करे
• बेहतर स्टाइलिंग: एक आधुनिक रंग योजना के साथ विज़ुअल डिज़ाइन सुधारो

निर्माता Steven Ge, 7 दिसंबर, 2025।