API से बातचीत करना
कृत्रिम बुद्धिमत्ता की सहायता से वेब से डेटा प्राप्त करें।
API से बातचीत करना, CoddyKit पर वाइब कोडिंग का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह वाइब कोडिंग सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। वाइब कोडिंग पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
ऐप दूसरे ऐप से बात करते हैं
वास्तविक ऐप शायद ही कभी अकेले काम करते हैं। मौसम का ऐप मौसम सेवा से डेटा माँगता है। क्रिप्टो ट्रैकर कीमतों की सेवा से पूछता है। ऐप एक-दूसरे से डेटा माँगने के तरीके को एपीआई — एप्लिकेशन प्रोग्रामिंग इंटरफ़ेस — कहा जाता है।
एपीआई को वेटर जैसा समझिए: आप रसोई में नहीं जाते, बस अपनी ज़रूरत बताते हैं और वेटर उसे लाकर देता है। वाइब कोडर के रूप में आप अधिकतर यह बताते हैं कि आपको कौन-सा डेटा चाहिए, और AI आपके लिए एपीआई से बात करने वाला कोड लिख देता है।
'डेटा प्राप्त करने' का अर्थ
जब आपका ऐप इंटरनेट से डेटा लेता है, तो हम कहते हैं कि वह डेटा प्राप्त करता है। ऐप किसी URL पर अनुरोध भेजता है और सेवा डेटा वापस भेजती है — आम तौर पर JSON के रूप में, जो एक सरल पाठ प्रारूप है और लेबल लगे मानों वाले डिब्बों जैसा दिखता है।
आपको यह याद रखने की ज़रूरत नहीं है कि यह कैसे काम करता है। आपको बस इतने शब्द जानने हैं कि आप AI से कह सकें: 'डेटा प्राप्त करके उसे पृष्ठ पर दिखाइए।'
{
"city": "Tokyo",
"temperature": 21,
"condition": "Sunny"
}आपका पहला एपीआई निर्देश
आइए AI से वास्तविक डेटा प्राप्त करने के लिए कहें। तरकीब यह है कि आप बताएँ कि कौन-सा डेटा चाहिए और उसे कहाँ दिखाना है। यह एक ऐसा निर्देश है जिसे आप कर्सर, क्लॉड कोड, बोल्ट या वी0 में चिपका सकते हैं।
ध्यान दीजिए कि निर्देश में एक खास मुफ़्त एपीआई और ठीक-ठीक दिखाया जाने वाला डेटा बताया गया है। स्पष्ट निर्देश पहली कोशिश में काम करने वाला कोड दिलाते हैं।
Create a single HTML page that fetches a random
activity from the Bored API
(https://www.boredapi.com/api/activity) when the
page loads, and displays the activity text in a
big centered card. Add a "Give me another" button
that fetches a new one. Use plain JavaScript, no
frameworks.fetch() कैसा दिखता है
जब AI कोड लिखता है, तो आपको अक्सर fetch() कॉल दिखाई देगी। आपको इसे हाथ से लिखने की ज़रूरत नहीं है, लेकिन इसे पहचानना AI द्वारा दिए गए कोड को पढ़ने में मदद करता है।
यह छोटा उदाहरण एक नकली उपयोगकर्ता का डेटा प्राप्त करता है और उसका नाम लॉग करता है। इसे चलाकर देखिए कि इंटरनेट से डेटा वापस कैसे आता है।
fetch('https://jsonplaceholder.typicode.com/users/1')
.then(response => response.json())
.then(user => {
console.log('Name:', user.name);
console.log('Email:', user.email);
});JSON प्रतिक्रियाएँ पढ़ना
एपीआई डेटा JSON के रूप में वापस आता है। किसी मान का उपयोग करने के लिए आप उसे नाम से, बिंदु लगाकर प्राप्त करते हैं, जैसे user.name। अंदर मौजूद डेटा के लिए और बिंदुओं का उपयोग होता है: user.address.city।
जब आपको पता न हो कि किसी प्रतिक्रिया के अंदर क्या है, तो AI से पूछिए: 'पूरी प्रतिक्रिया लॉग कीजिए ताकि मैं उसकी संरचना देख सकूँ, फिर मुझे वे फ़ील्ड पढ़ने का तरीका दिखाइए जिनकी मुझे ज़रूरत है।'
const user = {
name: 'Ada',
address: { city: 'London' }
};
console.log(user.name);
console.log(user.address.city);धीमे या विफल अनुरोधों को संभालना
इंटरनेट हमेशा भरोसेमंद नहीं होता। कोई अनुरोध धीमा हो सकता है या सेवा बंद हो सकती है। अच्छे ऐप प्रतीक्षा के दौरान लोड हो रहा है संदेश और कुछ खराब होने पर मित्रवत त्रुटि संदेश दिखाते हैं।
AI को इन्हें संभालने के लिए हमेशा कहिए। नीचे दिए गए निर्देश जैसा निर्देश केवल 'डेटा प्राप्त करो' कहने की तुलना में कहीं अधिक मजबूत ऐप बनाता है।
Add a loading spinner while the data is being
fetched, and if the request fails, show a friendly
message like "Couldn't load data, try again" with
a retry button. Don't let the app crash on errors.अभ्यास के लिए मुफ़्त एपीआई
मुफ़्त, बिना साइन-अप वाली एपीआई से आप बहुत कुछ बना सकते हैं। सीखने के लिए कुछ बेहतरीन विकल्प:
- JSONPlaceholder — नकली उपयोगकर्ता, पोस्ट और कार्य-सूचियाँ
- Open-Meteo — असली मौसम की जानकारी, किसी कुंजी की ज़रूरत नहीं
- REST Countries — देशों की जानकारी और झंडे
- The Cat / Dog API — पालतू जानवरों की बेतरतीब तस्वीरें
एआई को बताइए कि इनमें से किसका उपयोग करना है और क्या दिखाना है, और कुछ ही मिनटों में आपका ऐप काम करने लगेगा।
Build a country explorer page using the REST
Countries API (https://restcountries.com/v3.1/all).
Show each country's flag, name, and population in a
grid of cards. Add a search box that filters
countries by name as I type.एपीआई कुंजियाँ: कुछ एपीआई को इनकी ज़रूरत क्यों होती है
कुछ सेवाओं को यह जानना होता है कि अनुरोध कौन कर रहा है, इसलिए वे आपको एक एपीआई कुंजी देती हैं — आपके ऐप के लिए एक गुप्त पासवर्ड। आप इसे हर अनुरोध के साथ भेजते हैं।
कुंजियाँ सेवाओं के दुरुपयोग को रोकती हैं, लेकिन उन्हें गुप्त रखना ज़रूरी है। अभी बस इतना समझिए कि 'इस एपीआई के लिए कुंजी चाहिए' का मतलब है कि एक अतिरिक्त सेटअप चरण होगा। कुंजियों को सुरक्षित रखने के बारे में हम आगे के पाठ में बताएँगे।
एआई से एपीआई जोड़ने का अनुरोध करना
जब आपके पास किसी एपीआई का दस्तावेज़ हो, तो आप उसे सीधे एआई को दे सकते हैं। उदाहरण यूआरएल और नमूना उत्तर चिपकाइए, और एआई से उसे अपनी स्क्रीन पर दिखाने के लिए व्यवस्थित करने को कहिए।
यह वाइब-कोडिंग की सबसे बड़ी शक्तियों में से एक है: आपको दस्तावेज़ों को गहराई से पढ़ने की ज़रूरत नहीं होती; आप एआई से उन्हें काम करने वाले कोड में बदलवा सकते हैं।
Here is an example API response from the weather
service:
{"current":{"temperature_2m":18.4,"wind_speed_10m":7}}
Fetch from
https://api.open-meteo.com/v1/forecast?latitude=52.5&longitude=13.4¤t=temperature_2m,wind_speed_10m
and display the temperature and wind speed in two
labeled boxes on the page.कई एपीआई को एक साथ जोड़ना
शक्तिशाली ऐप कई स्रोतों से मिले डेटा को मिलाते हैं। कोई यात्रा ऐप तथ्यों के लिए देश की एपीआई, पूर्वानुमान के लिए मौसम की एपीआई और तस्वीरों के लिए छवि एपीआई को मिला सकता है।
आप एआई से इन्हें चरण-दर-चरण जोड़ने को कह सकते हैं। पहले एक एपीआई बनाइए और उसके काम करने की पुष्टि कीजिए, फिर कहिए, 'अब उस देश का मौसम भी जोड़िए।' छोटे चरण एआई को सटीक बनाए रखते हैं।
Now extend the country page: when I click a
country card, fetch that country's current weather
from Open-Meteo using its capital coordinates and
show it in a popup. Keep the existing search
feature working.आपको एपीआई याद रखने की ज़रूरत नहीं है
हज़ारों एपीआई मौजूद हैं और आप उन्हें कभी याद नहीं रख पाएँगे। वाइब-कोडिंग का कौशल शब्दावली समझना है — डेटा लाना, अनुरोध, उत्तर, JSON, कुंजी — ताकि आप अपनी ज़रूरत स्पष्ट रूप से बता सकें।
जब भी आपको कोई नई एपीआई मिले, उसका दस्तावेज़ एआई को चिपकाइए और बताइए कि आपको कौन-सा डेटा चाहिए और उसे कहाँ दिखाना है। यह एक आदत वेब पर उपलब्ध लगभग हर डेटा स्रोत का रास्ता खोल देती है।
त्वरित जाँच
कोई एपीआई आपके ऐप को डेटा वापस भेजती है, आमतौर पर लेबल किए गए मानों वाले सरल पाठ प्रारूप में। उस प्रारूप को सबसे आम तौर पर क्या कहा जाता है?
पुनरावृत्ति: एपीआई से संवाद करना
आपने सीखा कि ऐप एपीआई के ज़रिए दूसरी सेवाओं से डेटा लाते हैं और आमतौर पर JSON प्राप्त करते हैं। आपने fetch() को काम करते देखा, बिंदुओं की मदद से उत्तर के फ़ील्ड पढ़ना सीखा और समझा कि ऐप में लोड होने तथा त्रुटि की स्थितियाँ क्यों ज़रूरी होती हैं।
सबसे महत्वपूर्ण बात: आपको एपीआई याद रखने की ज़रूरत नहीं है — आप अपने इच्छित डेटा का वर्णन करते हैं और एआई से उसे जोड़ने को कहते हैं; ज़रूरत पड़ने पर दस्तावेज़ और उदाहरण उत्तर चिपका देते हैं। अगले पाठ में एआई आपके ऐप के लिए फ़ाइलें पढ़ेगा और सहेजेगा।
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 25
- पाठ
- 100
अक्सर पूछे जाने वाले प्रश्न
क्या “API से बातचीत करना” पाठ निःशुल्क है?
हाँ — वाइब कोडिंग अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “API से बातचीत करना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। वाइब कोडिंग पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“API से बातचीत करना” में मैं क्या सीखूँगा?
कृत्रिम बुद्धिमत्ता की सहायता से वेब से डेटा प्राप्त करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ वाइब कोडिंग का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या वाइब कोडिंग शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर वाइब कोडिंग शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“API से बातचीत करना” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस वाइब कोडिंग पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर वाइब कोडिंग पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।