JavaScript क्विकस्टार्ट

इस क्विकस्टार्ट गाइड में, एक ऐसा सामान्य पेज सेट अप करने का तरीका बताया गया है जो YouTube Data API को अनुरोध भेजता है. इस क्विकस्टार्ट गाइड में, एपीआई के दो अनुरोध करने का तरीका बताया गया है:

  1. GoogleDevelopers के YouTube चैनल के बारे में जानकारी पाने के लिए, एपीआई पासकोड का इस्तेमाल किया जाएगा. इससे आपके ऐप्लिकेशन की पहचान होती है.
  2. अपने YouTube चैनल के बारे में जानकारी पाने के लिए, OAuth 2.0 क्लाइंट आईडी का इस्तेमाल करके, अनुमति वाला अनुरोध सबमिट किया जाएगा.

ज़रूरी शर्तें

इस क्विकस्टार्ट गाइड को चलाने के लिए, आपको इनकी ज़रूरत होगी:

  • Node.js और npm (लोकल वेब सर्वर चलाने के लिए)
  • इंटरनेट का ऐक्सेस और एक वेब ब्राउज़र.
  • एक Google खाता.

पहला चरण: अपना प्रोजेक्ट और क्रेडेंशियल सेट अप करना

Cloud Console में कोई प्रोजेक्ट बनाएं या चुनें. अपने प्रोजेक्ट के लिए, Cloud Console में ये टास्क पूरे करें:

  1. लाइब्रेरी पैनल में, YouTube Data API v3 खोजें. उस एपीआई की सूची पर क्लिक करें और पक्का करें कि आपके प्रोजेक्ट के लिए एपीआई चालू हो.

  2. क्रेडेंशियल पैनल में, दो क्रेडेंशियल बनाएं:

    1. एपीआई पासकोड बनाएं एपीआई पासकोड का इस्तेमाल, एपीआई के ऐसे अनुरोध करने के लिए किया जाएगा जिनके लिए उपयोगकर्ता की अनुमति की ज़रूरत नहीं होती. उदाहरण के लिए, किसी सार्वजनिक YouTube चैनल के बारे में जानकारी पाने के लिए, उपयोगकर्ता की अनुमति की ज़रूरत नहीं होती.

    2. OAuth 2.0 क्लाइंट आईडी बनाएं ऐप्लिकेशन का टाइप वेब ऐप्लिकेशन पर सेट करें. ऐसे अनुरोधों के लिए OAuth 2.0 क्रेडेंशियल का इस्तेमाल करना ज़रूरी है जिनके लिए उपयोगकर्ता की अनुमति की ज़रूरत होती है. उदाहरण के लिए, फ़िलहाल पुष्टि किए गए उपयोगकर्ता के YouTube चैनल के बारे में जानकारी पाने के लिए, उपयोगकर्ता की अनुमति की ज़रूरत होती है.

      अनुमति वाले JavaScript ऑरिजिन फ़ील्ड में, यूआरएल http://localhost:8000 डालें. अनुमति वाले रीडायरेक्ट यूआरआई फ़ील्ड को खाली छोड़ा जा सकता है.

दूसरा चरण: सैंपल सेट अप करना और उसे चलाना

GoogleDevelopers के YouTube चैनल के बारे में जानकारी पाने के लिए, साइड पैनल में मौजूद APIs Explorer विजेट का इस्तेमाल करके सैंपल कोड पाएं. इस अनुरोध में, आपके ऐप्लिकेशन की पहचान करने के लिए एपीआई पासकोड का इस्तेमाल किया जाता है. इसके लिए, उपयोगकर्ता की अनुमति या सैंपल चलाने वाले उपयोगकर्ता से किसी खास अनुमति की ज़रूरत नहीं होती.

  1. एपीआई के channels.list तरीके के लिए दस्तावेज़ खोलें.
  2. उस पेज के "आम तौर पर इस्तेमाल होने वाले तरीके" सेक्शन में, एक टेबल होती है. इसमें, इस तरीके के इस्तेमाल के कई सामान्य तरीके बताए गए हैं. टेबल में पहली सूची, चैनल आईडी के हिसाब से नतीजे दिखाने के लिए है.

    पहली सूची के लिए, कोड के सिंबल पर क्लिक करके, फ़ुलस्क्रीन APIs Explorer खोलें और उसमें जानकारी भरें.

    इमेज में, channels.list दस्तावेज़ के इस्तेमाल के उदाहरणों की सूची वाली टेबल में, कोड सिंबल के लिंक की जगह बताई गई है. उस इमेज के लिए वैकल्पिक टेक्स्ट, इमेज को कोड सिंबल के तौर पर पहचानता है. साथ ही, उस लिंक से जुड़े इस्तेमाल के उदाहरण के बारे में बताता है.

  3. फ़ुलस्क्रीन APIs Explorer के बाईं ओर, यह जानकारी दिखती है:

    1. अनुरोध के पैरामीटर हेडर के नीचे, उन पैरामीटर की सूची होती है जिन्हें यह तरीका इस्तेमाल करता है. part और id पैरामीटर की वैल्यू सेट की जानी चाहिए. id पैरामीटर की वैल्यू, UC_x5XG1OV2P6uZZ5FSM9Ttw, GoogleDevelopers के YouTube चैनल का आईडी है.

    2. पैरामीटर के नीचे, क्रेडेंशियल नाम का एक सेक्शन होता है. उस सेक्शन के पुलडाउन मेन्यू में, एपीआई पासकोड वैल्यू दिखनी चाहिए. शुरुआत करना आसान बनाने के लिए, APIs Explorer डिफ़ॉल्ट रूप से डेमो क्रेडेंशियल का इस्तेमाल करता है. हालांकि, सैंपल को स्थानीय तौर पर चलाने के लिए, आपको अपने एपीआई पासकोड का इस्तेमाल करना होगा.

      इमेज में, फ़ुलस्क्रीन एपीआई एक्सप्लोरर में 'क्रेडेंशियल' और पुलडाउन मेन्यू में 'एपीआई पासकोड' विकल्प को चुना हुआ दिखाया गया है.

  4. फ़ुलस्क्रीन APIs Explorer के दाईं ओर, अलग-अलग भाषाओं में कोड सैंपल वाले टैब दिखते हैं. JavaScript टैब चुनें.

  5. कोड सैंपल कॉपी करें और इसे example.html नाम की फ़ाइल में सेव करें.

  6. डाउनलोड किए गए सैंपल में, YOUR_API_KEY स्ट्रिंग ढूंढें और उसे इस क्विकस्टार्ट गाइड के पहले चरण में बनाए गए एपीआई पासकोड से बदलें.

  7. अपनी वर्किंग डायरेक्ट्री से, यह कमांड इस्तेमाल करके वेब सर्वर शुरू करें:

    npx http-server -p 8000
    
  8. अपने ब्राउज़र में example.html फ़ाइल खोलें. साथ ही, ब्राउज़र के डेवलपर टूल खोलें. जैसे, Chrome ब्राउज़र में "डेवलपर टूल".

    1. JavaScript के लिए Google APIs Client Library लोड करने के लिए, पेज पर मौजूद लोड करें बटन पर क्लिक करें. बटन पर क्लिक करने के बाद, डेवलपर कंसोल में एक नोट दिखना चाहिए. इससे पता चलता है कि GAPI क्लाइंट लोड हो गया है.

    2. एपीआई अनुरोध भेजने के लिए, चलाएं बटन पर क्लिक करें. इसके बाद, डेवलपर कंसोल में एपीआई से मिली जानकारी दिखनी चाहिए.

तीसरा चरण: अनुमति वाला अनुरोध चलाना

इस चरण में, आपको अपने कोड सैंपल में बदलाव करना होगा, ताकि वह GoogleDevelopers के YouTube चैनल के बारे में जानकारी पाने के बजाय, आपके YouTube चैनल के बारे में जानकारी पाए. इस अनुरोध के लिए, उपयोगकर्ता की अनुमति की ज़रूरत होती है.

  1. एपीआई के channels.list तरीके के लिए दस्तावेज़ पर वापस जाएं.

  2. "आम तौर पर इस्तेमाल होने वाले तरीके" सेक्शन में, टेबल में मौजूद तीसरी सूची के लिए, कोड के सिंबल पर क्लिक करें. यह यूज़ केस, "मेरा चैनल" के लिए list तरीका कॉल करने से जुड़ा है.

  3. फिर से, फ़ुलस्क्रीन APIs Explorer के बाईं ओर, आपको पैरामीटर की सूची दिखेगी. इसके बाद, क्रेडेंशियल सेक्शन दिखेगा. हालांकि, उस उदाहरण से दो बदलाव हैं जिसमें आपने GoogleDevelopers चैनल के बारे में जानकारी पाई थी:

    1. पैरामीटर सेक्शन में, id पैरामीटर की वैल्यू सेट करने के बजाय, mine पैरामीटर की वैल्यू true पर सेट की जानी चाहिए. इससे एपीआई सर्वर को, फ़िलहाल पुष्टि किए गए उपयोगकर्ता के चैनल के बारे में जानकारी पाने का निर्देश मिलता है.

    2. क्रेडेंशियल सेक्शन में, पुलडाउन मेन्यू में Google OAuth 2.0 का विकल्प चुना जाना चाहिए.

      इसके अलावा, अगर स्कोप दिखाएं लिंक पर क्लिक किया जाता है, तो https://www.googleapis.com/auth/youtube.readonly स्कोप चुना जाना चाहिए.

      इस इमेज में, फ़ुलस्क्रीन APIs Explorer में स्कोप दिखाए गए हैं. साथ ही, 'Google OAuth 2.0' क्रेडेंशियल इस्तेमाल करने का विकल्प चुना गया है.

  4. पिछले उदाहरण की तरह, JavaScript टैब चुनें, कोड सैंपल कॉपी करें, और इसे example.html में सेव करें.

    कोड में, YOUR_CLIENT_ID स्ट्रिंग ढूंढें और उसे इस क्विकस्टार्ट गाइड के पहले चरण में बनाए गए क्लाइंट आईडी से बदलें.

  5. अपनी वर्किंग डायरेक्ट्री से, यह कमांड इस्तेमाल करके वेब सर्वर शुरू करें:

    npx http-server -p 8000
    
  6. अपने ब्राउज़र में http://localhost:8000/example.html फ़ाइल पर जाएं. ब्राउज़र के डेवलपर टूल खोलें. जैसे, Chrome ब्राउज़र में "डेवलपर टूल".

  7. JavaScript के लिए Google APIs Client Library लोड करने और अनुमति देने की प्रोसेस शुरू करने के लिए, पेज पर मौजूद अनुमति दें और लोड करें बटन पर क्लिक करें. आपको अपने YouTube खाते से डेटा पढ़ने के लिए, ऐप्लिकेशन को अनुमति देने के लिए कहा जाएगा.

    अगर अनुमति दी जाती है, तो डेवलपर कंसोल में ऐसे मैसेज दिखेंगे जिनसे पता चलेगा कि साइन-इन हो गया है और एपीआई क्लाइंट लोड हो गया है.

  8. एपीआई अनुरोध भेजने के लिए, चलाएं बटन पर क्लिक करें. इसके बाद, डेवलपर कंसोल में एपीआई से मिली जानकारी दिखनी चाहिए.

इस बारे में और पढ़ें