होम

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 करवाएं

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

• पूरा किया हुआ Windows पर Claude Code इंस्टॉल करें या Mac पर Claude Code इंस्टॉल करें ट्यूटोरियल
• पूरा किया हुआ वर्शन कंट्रोल के साथ शुरुआत करें ट्यूटोरियल
• 20 मिनट

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

• GitHub Desktop खोलें
• File → New Repository पर क्लिक करें
• भरें:
  • Name: test_claude
  • Description: A timer app built with Claude Code
  • Local Path: Choose… पर क्लिक करें और अपना Documents फ़ोल्डर चुनें (डिफ़ॉल्ट रूप से यहाँ Documents के अंदर का GitHub फ़ोल्डर होता है, इसलिए इसे बदलें)
  • “Initialize this repository with a README” को चेक करें
• अगर GitHub Desktop कहे कि फ़ोल्डर “appears to be a Git repository”, तो इसका मतलब है कि Git ट्यूटोरियल से आपके पास पहले से एक test_claude फ़ोल्डर है। File Explorer या Finder में उस पुराने फ़ोल्डर का नाम बदल दें (उदाहरण के लिए test_claude_old), फिर दोबारा कोशिश करें
• Create Repository पर क्लिक करें
• ऊपर Publish repository पर क्लिक करें
• Publish Repository पर क्लिक करें

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

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

• अपना टर्मिनल खोलें: Windows पर PowerShell, Mac पर Terminal
• अपने प्रोजेक्ट पर जाएं:

  cd ~/Documents/test_claude
  

  Windows पर, अगर Cannot find path दिखे, तो इसका मतलब है कि आपके Documents फ़ोल्डर का बैकअप OneDrive में होता है। इसकी जगह cd ~/OneDrive/Documents/test_claude चलाएं

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

  claude
  

• यह पूरा अनुरोध कॉपी करके पेस्ट करें (पेस्ट करने से सारी लाइनें एक साथ रहती हैं; बीच में Enter दबाने से अनुरोध अधूरा ही भेज दिया जाएगा):

  timer.html नाम की एक ही फ़ाइल में एक सिंपल काउंटडाउन टाइमर ऐप बनाओ।
  इसमें होना चाहिए:
  - मिनट सेट करने के लिए एक इनपुट फ़ील्ड
  - Start और Stop बटन, जिन पर "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 टैब)
• कोई भी लाल एरर मैसेज कॉपी करें
• अपने टर्मिनल में वापस Claude Code पर जाएं
• एरर पेस्ट करें:

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

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

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

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

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

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

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

  Create initial timer app with start/stop functionality
  

• नीचे दिए नीले commit बटन पर क्लिक करें (उस पर कुछ ऐसा लिखा होता है: Commit 1 file to main)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Claude Code में:

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

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

अगर यह काम कर रहा है: चरण 11 पर जारी रखें।

अगर नहीं: एरर Claude को पेस्ट करें या फिर से कोशिश करें।

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

• Claude Code में:

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

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

अगर Claude कहे कि push विफल हो गया (उदाहरण के लिए could not read Username, या git is not recognized): GitHub Desktop पर जाएं। अगर उसमें अब भी बदली हुई फ़ाइलें दिख रही हों, तो उन्हें खुद commit करें (जैसे चरण 6 में किया था)। फिर सबसे ऊपर Push origin पर क्लिक करें — GitHub Desktop पहले से GitHub में साइन इन है।

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

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

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

• Claude Code में:

  मेरे आखिरी commit में क्या बदला?
  

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

आज़माएं: समझाओ कि ऑडियो वाला कोड क्या करता है या मुझे आखिरी 5 commit दिखाओ

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

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

आपको दिखेगा (सबसे नया सबसे ऊपर):

• साउंड नोटिफिकेशन के लिए Claude का commit (इसके शब्द अलग-अलग हो सकते हैं)
• Create initial timer app with start/stop functionality
• Initial commit

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

चुनौतियाँ

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

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

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

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

“Authentication failed”: GitHub Desktop में File → Options → Accounts (Windows) या GitHub Desktop → Settings → Accounts (Mac) खोलें, फिर साइन आउट करें और दोबारा साइन इन करें

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।