জাভাস্ক্রিপ্ট কুইকস্টার্ট

এই কুইকস্টার্ট গাইডটি ব্যাখ্যা করে কিভাবে একটি সাধারণ পেজ সেট আপ করতে হয় যা ইউটিউব ডেটা এপিআই-তে রিকোয়েস্ট পাঠায়। এই কুইকস্টার্টটি আসলে দুটি এপিআই রিকোয়েস্ট পাঠানোর পদ্ধতি ব্যাখ্যা করে:

  1. আপনি গুগল ডেভেলপারস ইউটিউব চ্যানেল সম্পর্কিত তথ্য পুনরুদ্ধার করতে একটি এপিআই কী ব্যবহার করবেন, যা আপনার অ্যাপ্লিকেশনকে শনাক্ত করে।
  2. আপনি আপনার নিজের ইউটিউব চ্যানেল সম্পর্কিত তথ্য সংগ্রহের জন্য একটি অনুমোদিত অনুরোধ জমা দিতে একটি OAuth 2.0 ক্লায়েন্ট আইডি ব্যবহার করবেন।

পূর্বশর্ত

এই কুইকস্টার্টটি চালানোর জন্য আপনার প্রয়োজন হবে:

  • নোড.জেএস এবং এনপিএম (স্থানীয় ওয়েব সার্ভার চালানোর জন্য)
  • ইন্টারনেট ব্যবহারের সুযোগ এবং একটি ওয়েব ব্রাউজার।
  • একটি গুগল অ্যাকাউন্ট।

ধাপ ১: আপনার প্রজেক্ট এবং ক্রেডেনশিয়াল সেট আপ করুন।

ক্লাউড কনসোলে একটি প্রজেক্ট তৈরি করুন বা নির্বাচন করুন। আপনার প্রজেক্টের জন্য ক্লাউড কনসোলে নিম্নলিখিত কাজগুলো সম্পন্ন করুন:

  1. লাইব্রেরি প্যানেলে , YouTube Data API v3 অনুসন্ধান করুন। সেই API-এর তালিকায় ক্লিক করুন এবং নিশ্চিত করুন যে API-টি আপনার প্রোজেক্টের জন্য সক্রিয় করা আছে।

  2. ক্রেডেনশিয়াল প্যানেলে দুটি ক্রেডেনশিয়াল তৈরি করুন:

    1. একটি এপিআই কী তৈরি করুন। ব্যবহারকারীর অনুমোদনের প্রয়োজন নেই এমন এপিআই অনুরোধগুলি করার জন্য আপনি এপিআই কী ব্যবহার করবেন। উদাহরণস্বরূপ, একটি পাবলিক ইউটিউব চ্যানেল সম্পর্কে তথ্য পেতে আপনার ব্যবহারকারীর অনুমোদনের প্রয়োজন নেই।

    2. একটি OAuth 2.0 ক্লায়েন্ট আইডি তৈরি করুন এবং অ্যাপ্লিকেশন টাইপটি ' ওয়েব অ্যাপ্লিকেশন' হিসেবে সেট করুন। যেসব অনুরোধের জন্য ব্যবহারকারীর অনুমোদনের প্রয়োজন হয়, সেগুলোর জন্য আপনাকে OAuth 2.0 ক্রেডেনশিয়াল ব্যবহার করতে হবে। উদাহরণস্বরূপ, বর্তমানে প্রমাণীকৃত ব্যবহারকারীর ইউটিউব চ্যানেল সম্পর্কিত তথ্য পুনরুদ্ধার করতে আপনার ব্যবহারকারীর অনুমোদন প্রয়োজন।

      ‘Authorized JavaScript origins’ ফিল্ডে http://localhost:8000 ইউআরএলটি লিখুন। আপনি ‘Authorized redirect URIs’ ফিল্ডটি খালি রাখতে পারেন।

ধাপ ২: নমুনাটি সেট আপ করুন এবং চালান

GoogleDevelopers ইউটিউব চ্যানেল সম্পর্কে তথ্য সংগ্রহের জন্য নমুনা কোড পেতে সাইড প্যানেলে থাকা এপিআই এক্সপ্লোরার উইজেটটি ব্যবহার করুন। এই অনুরোধটি আপনার অ্যাপ্লিকেশন শনাক্ত করতে একটি এপিআই কী ব্যবহার করে, এবং এর জন্য নমুনাটি চালনাকারী ব্যবহারকারীর অনুমোদন বা কোনো বিশেষ অনুমতির প্রয়োজন হয় না।

  1. API-এর channels.list মেথডের ডকুমেন্টেশনটি খুলুন।
  2. সেই পৃষ্ঠার "সাধারণ ব্যবহারের ক্ষেত্রসমূহ" বিভাগে একটি সারণি রয়েছে, যেখানে পদ্ধতিটি ব্যবহারের কয়েকটি সাধারণ উপায় ব্যাখ্যা করা হয়েছে। সারণির প্রথম তালিকাটি চ্যানেল আইডি অনুসারে ফলাফল তালিকাভুক্ত করার জন্য।

    পূর্ণস্ক্রিন এপিআই এক্সপ্লোরারটি খুলতে ও তাতে তথ্য যোগ করতে প্রথম তালিকার কোড প্রতীকটিতে ক্লিক করুন।

    যে ছবিটি channels.list ডকুমেন্টেশনের ব্যবহারের ক্ষেত্রগুলো তালিকাভুক্তকারী টেবিলে কোড প্রতীক লিঙ্কের অবস্থান চিহ্নিত করে। সেই ছবির alt টেক্সট ছবিটিকে একটি কোড প্রতীক হিসেবে চিহ্নিত করে এবং সেই লিঙ্কের সাথে যুক্ত ব্যবহারের ক্ষেত্রটি নির্দিষ্ট করে।

  3. ফুলস্ক্রিন এপিআই এক্সপ্লোরারের বাম দিকে নিম্নলিখিত বিষয়গুলো দেখানো হয়:

    1. রিকোয়েস্ট প্যারামিটারস হেডারের নিচে, মেথডটি যে প্যারামিটারগুলো সাপোর্ট করে তার একটি তালিকা রয়েছে। part এবং id প্যারামিটারের ভ্যালু অবশ্যই সেট করতে হবে। id প্যারামিটারের ভ্যালু, UC_x5XG1OV2P6uZZ5FSM9Ttw , হলো গুগলডেভেলপারস ইউটিউব চ্যানেলের আইডি।

    2. প্যারামিটারগুলোর নিচে ক্রেডেনশিয়ালস (Credentials ) নামে একটি সেকশন আছে। সেই সেকশনের পুলডাউন মেনুতে এপিআই কী (API key) ভ্যালুটি দেখানো উচিত। এপিআই এক্সপ্লোরার (APIs Explorer) কাজ শুরু করা সহজ করার জন্য ডিফল্টভাবে ডেমো ক্রেডেনশিয়ালস ব্যবহার করে। কিন্তু স্যাম্পলটি লোকালি চালানোর জন্য আপনাকে আপনার নিজের এপিআই কী (API key) ব্যবহার করতে হবে।

      ছবিটিতে ফুলস্ক্রিন এপিআই এক্সপ্লোরার-এর 'ক্রেডেনশিয়ালস' এবং পুলডাউন মেনুটি দেখানো হয়েছে, যেখানে 'এপিআই কী' অপশনটি নির্বাচিত রয়েছে।

  4. ফুলস্ক্রিন এপিআই এক্সপ্লোরারের ডান দিকে বিভিন্ন ভাষার কোড স্যাম্পলসহ ট্যাব দেখা যায়। জাভাস্ক্রিপ্ট ট্যাবটি নির্বাচন করুন।

  5. কোড নমুনাটি কপি করে example.html নামের ফাইলে সংরক্ষণ করুন।

  6. আপনার ডাউনলোড করা নমুনাটিতে, YOUR_API_KEY স্ট্রিংটি খুঁজুন এবং এই কুইকস্টার্টের ধাপ ১-এ আপনার তৈরি করা API কী-টি দিয়ে সেটি প্রতিস্থাপন করুন।

  7. আপনার ওয়ার্কিং ডিরেক্টরি থেকে নিম্নলিখিত কমান্ডটি ব্যবহার করে ওয়েব সার্ভারটি চালু করুন:

    npx http-server -p 8000
    
  8. আপনার ব্রাউজারে example.html ফাইলটি খুলুন। এছাড়াও ব্রাউজারের ডেভেলপার টুলস খুলুন, যেমন ক্রোম ব্রাউজারের "ডেভেলপার টুলস"।

    1. জাভাস্ক্রিপ্টের জন্য গুগল এপিআই ক্লায়েন্ট লাইব্রেরি লোড করতে পৃষ্ঠার লোড বোতামটি ক্লিক করুন। বোতামটি ক্লিক করার পর, ডেভেলপার কনসোলে একটি বার্তা প্রদর্শিত হবে যা নির্দেশ করবে যে GAPI ক্লায়েন্টটি লোড হয়েছে।

    2. এপিআই অনুরোধটি পাঠাতে এক্সিকিউট বোতামে ক্লিক করুন। এরপর ডেভেলপার কনসোলে এপিআই প্রতিক্রিয়াটি প্রদর্শিত হবে।

ধাপ ৩: একটি অনুমোদিত অনুরোধ চালান

এই ধাপে, আপনি আপনার কোডের নমুনাটি এমনভাবে পরিবর্তন করবেন যাতে এটি GoogleDevelopers ইউটিউব চ্যানেলের তথ্য সংগ্রহের পরিবর্তে আপনার নিজের ইউটিউব চ্যানেলের তথ্য সংগ্রহ করে। এই অনুরোধটির জন্য ব্যবহারকারীর অনুমোদনের প্রয়োজন হবে।

  1. API-এর channels.list মেথডের ডকুমেন্টেশনে ফিরে যান।

  2. "সাধারণ ব্যবহারের ক্ষেত্র" বিভাগে, টেবিলের তৃতীয় তালিকার কোড প্রতীকটিতে ক্লিক করুন। সেই ব্যবহারের ক্ষেত্রটি হলো "আমার চ্যানেল"-এর জন্য list মেথডটি কল করা।

  3. আবার, ফুলস্ক্রিন এপিআই এক্সপ্লোরারের বাম দিকে, আপনি প্যারামিটারগুলির একটি তালিকার পরে ক্রেডেনশিয়ালস বিভাগটি দেখতে পাবেন। তবে, যে উদাহরণে আপনি গুগলডেভেলপারস চ্যানেল সম্পর্কে তথ্য সংগ্রহ করেছিলেন, তার থেকে দুটি পরিবর্তন রয়েছে:

    1. প্যারামিটার সেকশনে, id প্যারামিটারের মান সেট করার পরিবর্তে mine প্যারামিটারের মান true সেট করতে হবে। এটি এপিআই সার্ভারকে বর্তমানে অথেনটিকেটেড ব্যবহারকারীর চ্যানেল সম্পর্কে তথ্য সংগ্রহ করতে নির্দেশ দেয়।

    2. ক্রেডেনশিয়ালস সেকশনে, পুলডাউন মেনু থেকে গুগল ওঅথ ২.০ (Google OAuth 2.0 ) অপশনটি সিলেক্ট করতে হবে।

      এছাড়াও, আপনি যদি 'Show scopes' লিঙ্কে ক্লিক করেন, তাহলে https://www.googleapis.com/auth/youtube.readonly স্কোপটি চেক করা উচিত।

      ছবিটিতে ফুলস্ক্রিন এপিআই এক্সপ্লোরারে স্কোপগুলো দেখানো হয়েছে এবং 'Google OAuth 2.0' ক্রেডেনশিয়াল ব্যবহারের অপশনটি নির্বাচিত রয়েছে।

  4. আগের উদাহরণের মতোই, জাভাস্ক্রিপ্ট ট্যাবটি নির্বাচন করুন, কোডের নমুনাটি কপি করুন এবং example.html নামে সংরক্ষণ করুন।

    কোডে, YOUR_CLIENT_ID স্ট্রিংটি খুঁজুন এবং এই কুইকস্টার্টের ধাপ ১-এ আপনার তৈরি করা ক্লায়েন্ট আইডি দিয়ে এটি প্রতিস্থাপন করুন।

  5. আপনার ওয়ার্কিং ডিরেক্টরি থেকে নিম্নলিখিত কমান্ডটি ব্যবহার করে ওয়েব সার্ভারটি চালু করুন:

    npx http-server -p 8000
    
  6. আপনার ব্রাউজারে http://localhost:8000/example.html ফাইলটিতে যান। ব্রাউজারের ডেভেলপার টুলস খুলুন, যেমন ক্রোম ব্রাউজারের "ডেভেলপার টুলস"।

  7. জাভাস্ক্রিপ্টের জন্য গুগল এপিআই ক্লায়েন্ট লাইব্রেরি লোড করতে এবং অনুমোদন প্রক্রিয়াটি শুরু করতে, পৃষ্ঠার ' authorize and load' বোতামটিতে ক্লিক করুন। আপনার ইউটিউব অ্যাকাউন্ট থেকে ডেটা পড়ার জন্য অ্যাপ্লিকেশনটিকে অনুমতি দিতে আপনাকে অনুরোধ করা হবে।

    আপনি অনুমতি দিলে, ডেভেলপার কনসোলে সাইন-ইন সফল হয়েছে এবং এপিআই ক্লায়েন্ট লোড হয়েছে এমন বার্তা প্রদর্শিত হবে।

  8. এপিআই অনুরোধটি পাঠাতে এক্সিকিউট বোতামে ক্লিক করুন। এরপর ডেভেলপার কনসোলে এপিআই প্রতিক্রিয়াটি প্রদর্শিত হবে।

আরও পড়ুন