JavaScript কুইকস্টার্ট

এই কুইকস্টার্ট গাইড থেকে কীভাবে YouTube Data API-তে অনুরোধ করে এমন একটি সাধারণ পৃষ্ঠা সেট-আপ করতে হয় তা জানতে পারবেন। এই কুইকস্টার্টে আসলে দুটি API অনুরোধ কীভাবে করতে হয় তা ব্যাখ্যা করা হয়েছে:

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

পূর্বশর্ত

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

  • Node.js এবং npm (লোকাল ওয়েব সার্ভার রান করার জন্য)
  • ইন্টারনেট ও ওয়েব ব্রাউজারে অ্যাক্সেস।
  • একটি Google অ্যাকাউন্ট।

ধাপ ১: আপনার প্রোজেক্ট ও ক্রেডেনশিয়াল সেট-আপ করুন

Cloud console-এ কোনও প্রোজেক্ট তৈরি করুন বা বেছে নিন। আপনার প্রোজেক্টের জন্য Cloud কনসোলে নিম্নলিখিত টাস্কগুলি সম্পূর্ণ করুন:

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

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

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

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

      অনুমোদিত জাভাস্ক্রিপ্ট অরিজিন ফিল্ডে URL লিখুন http://localhost:8000। আপনি অনুমোদিত রিডাইরেক্ট URI ফিল্ডটি খালি রাখতে পারেন।

ধাপ ২: স্যাম্পেল সেট-আপ ও রান করা

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

  1. API-এর channels.list পদ্ধতির জন্য ডকুমেন্টেশন খুলুন।

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

    প্রথম তালিকার জন্য কোড চিহ্নে ক্লিক করে ফুল-স্ক্রিন API এক্সপ্লোরার খুলুন ও সেটি পূরণ করুন।

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

  3. ফুলস্ক্রিন APIs Explorer-এর বাঁদিকে নিম্নলিখিত তথ্য দেখানো হয়:

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

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

      ফুলস্ক্রিন APIs Explorer-এ 'ক্রেডেনশিয়াল' এবং 'API কী' বিকল্প বেছে নেওয়া পুলডাউন মেনু দেখানো ছবি।

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

  5. কোডের নমুনা কপি করে example.html নামের ফাইলে সেভ করুন।

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

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

    npx http-server -p 8000

  8. আপনার ব্রাউজারে example.html ফাইলটি খুলুন। এছাড়াও, ব্রাউজারের ডেভেলপার টুল খুলুন, যেমন Chrome ব্রাউজারে "ডেভেলপার টুল"।

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

    2. API অনুরোধ পাঠাতে এক্সিকিউট করুন বোতামে ক্লিক করুন। ডেভেলপারের কনসোলে API-এর উত্তর দেখা যাবে।

ধাপ ৩: অনুমোদিত অনুরোধ রান করানো

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

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

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

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

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

    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 ক্লায়েন্ট লাইব্রেরি লোড করতে এবং অনুমোদনের ফ্লো শুরু করতে পৃষ্ঠায় অনুমোদন করুন এবং লোড করুন বোতামে ক্লিক করুন। আপনার YouTube অ্যাকাউন্ট থেকে ডেটা পড়তে, আপনাকে অ্যাপ্লিকেশনকে অনুমতি দেওয়ার জন্য প্রম্পট করা হবে।

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

  8. API অনুরোধ পাঠাতে এক্সিকিউট করুন বোতামে ক্লিক করুন। এরপর, ডেভেলপারের কনসোলে API রেসপন্স দেখা যাবে।

আরও পড়ুন