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

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

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

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

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

  • 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 खुल जाए और उसमें जानकारी भर जाए.

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

  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. Google APIs Client Library for JavaScript को लोड करने के लिए, पेज पर मौजूद load बटन पर क्लिक करें. बटन पर क्लिक करने के बाद, डेवलपर कंसोल में एक सूचना दिखनी चाहिए. इसमें बताया गया हो कि GAPI क्लाइंट लोड हो गया है.

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

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

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

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

  2. "सामान्य इस्तेमाल के उदाहरण" सेक्शन में, टेबल में मौजूद तीसरी लिस्टिंग के लिए कोड सिंबल पर क्लिक करें. इस्तेमाल के इस उदाहरण में, "my channel" के लिए 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. Google APIs Client Library for JavaScript को लोड करने और अनुमति देने की प्रोसेस शुरू करने के लिए, पेज पर मौजूद अनुमति दें और लोड करें बटन पर क्लिक करें. आपको ऐप्लिकेशन को अपने YouTube खाते से डेटा पढ़ने की अनुमति देने के लिए कहा जाएगा.

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

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

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