ওয়েব অ্যাপের ওভারভিউ

গুগল পিকার ডায়ালগ।

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

গুগল পিকার ড্রাইভে সংরক্ষিত তথ্যের জন্য একটি 'ফাইল ওপেন' ডায়ালগ হিসেবে কাজ করে এবং এর বেশ কিছু বৈশিষ্ট্য রয়েছে:

  • গুগল ড্রাইভ ইউআই- এর মতো একই রকম চেহারা ও অনুভূতি।
  • ড্রাইভ ফাইলগুলির প্রিভিউ এবং থাম্বনেইল ছবি দেখানোর জন্য বিভিন্ন ভিউ।
  • একটি ইনলাইন মোডাল উইন্ডো, ফলে ব্যবহারকারীরা মূল অ্যাপ থেকে কখনো বের হন না।

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

পূর্বশর্ত

যেসব অ্যাপ গুগল পিকার ব্যবহার করে, তাদের অবশ্যই বিদ্যমান সকল পরিষেবার শর্তাবলী মেনে চলতে হবে। সবচেয়ে গুরুত্বপূর্ণ হলো, আপনার অনুরোধগুলিতে আপনাকে অবশ্যই নিজের পরিচয় সঠিকভাবে প্রদান করতে হবে।

আপনার একটি গুগল ক্লাউড প্রজেক্টও থাকতে হবে।

আপনার পরিবেশ তৈরি করুন

Google Picker API ব্যবহার শুরু করতে, আপনাকে আপনার পরিবেশ সেট আপ করতে হবে।

এপিআই সক্রিয় করুন

গুগল এপিআই ব্যবহার করার আগে, আপনাকে একটি গুগল ক্লাউড প্রজেক্টে সেগুলি চালু করতে হবে। আপনি একটি একক গুগল ক্লাউড প্রজেক্টে এক বা একাধিক এপিআই চালু করতে পারেন।

একটি এপিআই কী তৈরি করুন

একটি API কী হলো বড় ও ছোট হাতের অক্ষর, সংখ্যা, আন্ডারস্কোর এবং হাইফেন সম্বলিত একটি দীর্ঘ স্ট্রিং, যেমন AIzaSyDaGmWKa4JsXZ-HjGw7ISLn_3namBGewQe । এই প্রমাণীকরণ পদ্ধতিটি সর্বজনীনভাবে উপলব্ধ ডেটা, যেমন "এই লিঙ্কের মাধ্যমে ইন্টারনেটে যে কেউ" শেয়ারিং সেটিং ব্যবহার করে শেয়ার করা Google Workspace ফাইলগুলি, বেনামে অ্যাক্সেস করার জন্য ব্যবহৃত হয়। আরও বিস্তারিত জানতে, API কী পরিচালনা দেখুন।

একটি এপিআই কী তৈরি করতে:

  1. গুগল ক্লাউড কনসোলে, > এপিআই ও পরিষেবা > ক্রেডেনশিয়ালস- এ যান।

    পরিচয়পত্রে যান

  2. ক্রেডেনশিয়াল তৈরি করুন > এপিআই কী-তে ক্লিক করুন।
  3. আপনার নতুন এপিআই কী প্রদর্শিত হচ্ছে।
    • আপনার অ্যাপের কোডে ব্যবহারের জন্য আপনার এপিআই কী (API key) কপি করতে 'Copy তে ক্লিক করুন। এপিআই কী-টি আপনার প্রোজেক্টের ক্রেডেনশিয়ালস (credentials)-এর 'API Keys' সেকশনেও পাওয়া যাবে।
    • অননুমোদিত ব্যবহার রোধ করতে, আমরা এপিআই কী-টি কোথায় এবং কোন কোন এপিআই-এর জন্য ব্যবহার করা যাবে তা সীমাবদ্ধ করার সুপারিশ করি। আরও বিস্তারিত জানতে, ‘এপিআই সীমাবদ্ধতা যোগ করুন ’ দেখুন।

একটি ওয়েব অ্যাপের জন্য ক্রেডেনশিয়াল অনুমোদন করুন

আপনার অ্যাপে ব্যবহারকারীদের প্রমাণীকরণ করতে এবং তাদের ডেটা অ্যাক্সেস করতে, আপনাকে এক বা একাধিক OAuth 2.0 ক্লায়েন্ট আইডি তৈরি করতে হবে। গুগলের OAuth সার্ভারের কাছে একটি একক অ্যাপকে শনাক্ত করতে ক্লায়েন্ট আইডি ব্যবহৃত হয়। যদি আপনার অ্যাপ একাধিক প্ল্যাটফর্মে চলে, তবে আপনাকে প্রতিটি প্ল্যাটফর্মের জন্য একটি পৃথক ক্লায়েন্ট আইডি তৈরি করতে হবে।
  • Google API কনসোলে, > Google Auth প্ল্যাটফর্ম > ক্লায়েন্টস- এ যান।

    ক্লায়েন্টদের কাছে যান

  • ক্লায়েন্ট তৈরি করুন -এ ক্লিক করুন।
  • অ্যাপ্লিকেশন টাইপ > ওয়েব অ্যাপ্লিকেশন-এ ক্লিক করুন।
  • Name ফিল্ডে ক্রেডেনশিয়ালটির জন্য একটি নাম টাইপ করুন। এই নামটি শুধুমাত্র Google API Console-এ দেখানো হয়।
  • আপনার অ্যাপ সম্পর্কিত অনুমোদিত URI-গুলো যোগ করুন:
    • ক্লায়েন্ট-সাইড অ্যাপস (জাভাস্ক্রিপ্ট) – ‘Authorized JavaScript origins’-এর অধীনে, ‘Add URI’-তে ক্লিক করুন। এরপর, ব্রাউজার রিকোয়েস্টের জন্য ব্যবহার করার উদ্দেশ্যে একটি URI লিখুন। এটি সেই ডোমেইনগুলোকে শনাক্ত করে, যেখান থেকে আপনার অ্যাপ্লিকেশন OAuth 2.0 সার্ভারে API রিকোয়েস্ট পাঠাতে পারবে।
    • সার্ভার-সাইড অ্যাপস (জাভা, পাইথন এবং আরও) – ‘Authorized redirect URIs’-এর অধীনে, ‘Add URI’-তে ক্লিক করুন। এরপর, একটি এন্ডপয়েন্ট URI লিখুন যেখানে OAuth 2.0 সার্ভার প্রতিক্রিয়া পাঠাতে পারবে।
  • তৈরি করুন- এ ক্লিক করুন।

    নতুন তৈরি করা ক্রেডেনশিয়ালটি OAuth 2.0 ক্লায়েন্ট আইডি-এর অধীনে দেখা যায়।

    ক্লায়েন্ট আইডিটি নোট করুন। ওয়েব অ্যাপ্লিকেশনের জন্য ক্লায়েন্ট সিক্রেট ব্যবহার করা হয় না।

    • গুরুত্বপূর্ণ: Picker অবজেক্ট তৈরি করার সময়, আপনার অ্যাপকে অবশ্যই সেইসব ভিউয়ের সাথে একটি OAuth 2.0 অ্যাক্সেস টোকেন পাঠাতে হবে যেগুলো ব্যবহারকারীর ব্যক্তিগত ডেটা অ্যাক্সেস করে। অ্যাক্সেস টোকেনের জন্য অনুরোধ করতে, “Using OAuth 2.0 to Access Google APIs” দেখুন।

    গুগল পিকার পরিচালনা করুন

    এই গাইডের বাকি অংশে একটি ওয়েব অ্যাপ থেকে কীভাবে গুগল পিকার লোড ও প্রদর্শন করতে হয় এবং কলব্যাকটি কীভাবে প্রয়োগ করতে হয়, তা আলোচনা করা হয়েছে। সম্পূর্ণ উদাহরণটি দেখতে, ‘ওয়েব অ্যাপের জন্য কোড নমুনা’ ​​দেখুন।

    গুগল পিকার লাইব্রেরি লোড করুন

    Google Picker লাইব্রেরিটি লোড করতে, লাইব্রেরির নাম এবং সফলভাবে লোড হওয়ার পর চালু করার জন্য একটি কলব্যাক ফাংশন সহ gapi.load কল করুন:

        <script>
      let tokenClient;
      let accessToken = null;
      let pickerInited = false;
      let gisInited = false;

      // Use the API Loader script to load google.picker.
      function onApiLoad() {
        gapi.load('picker', onPickerApiLoad);
      }

      function onPickerApiLoad() {
        pickerInited = true;
      }

      function gisLoaded() {
        // Replace with your client ID and required scopes.
        tokenClient = google.accounts.oauth2.initTokenClient({
          client_id: 'CLIENT_ID',
          scope: 'SCOPES',
          callback: '', // defined later
        });
        gisInited = true;
    }
    </script>
    <!-- Load the Google API Loader script. -->
    <script async defer src="https://apis.google.com/js/api.js" onload="onApiLoad()"></script>
    <script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>

    নিম্নলিখিতগুলি প্রতিস্থাপন করুন:

    • CLIENT_ID : আপনার ওয়েব অ্যাপের ক্লায়েন্ট আইডি।
    • SCOPES : আপনার প্রয়োজনীয় অ্যাক্সেসের স্তরের উপর নির্ভর করে, গুগল এপিআই অ্যাক্সেস করার জন্য আপনাকে এক বা একাধিক OAuth 2.0 স্কোপের জন্য অনুরোধ করতে হবে। আরও তথ্যের জন্য, গুগল এপিআই-এর জন্য OAuth 2.0 স্কোপ দেখুন।

    google.accounts.oauth2 জাভাস্ক্রিপ্ট লাইব্রেরিটি আপনাকে ব্যবহারকারীর সম্মতি চাইতে এবং ব্যবহারকারীর ডেটা নিয়ে কাজ করার জন্য একটি অ্যাক্সেস টোকেন পেতে সাহায্য করে। initTokenClient মেথডটি আপনার ওয়েব অ্যাপের ক্লায়েন্ট আইডি দিয়ে একটি নতুন টোকেন ক্লায়েন্ট চালু করে। আরও তথ্যের জন্য, টোকেন মডেলের ব্যবহার দেখুন।

    onApiLoad ফাংশনটি গুগল পিকার লাইব্রেরিগুলো লোড করে। গুগল পিকার লাইব্রেরি সফলভাবে লোড হওয়ার পর onPickerApiLoad কলব্যাক ফাংশনটি কল করা হয়।

    দ্রষ্টব্য: আপনি যদি TypeScript ব্যবহার করেন, তাহলে window.google.picker ব্যবহার করার জন্য @types/google.picker ইনস্টল করতে পারেন। এই টাইপগুলো নিয়ে কোনো সমস্যা জানাতে, একটি সাপোর্ট টিকেট খুলুন।

    গুগল পিকার প্রদর্শন করুন

    createPicker ফাংশনটি নিশ্চিত করে যে গুগল পিকার এপিআই (Google Picker API) লোড হওয়া শেষ হয়েছে এবং একটি OAuth 2.0 টোকেন তৈরি হয়েছে। অ্যাপটিকে ব্যবহারকারীর ফাইল অ্যাক্সেস করার অনুমতি দিতে, ক্লাউড প্রজেক্ট নম্বর ব্যবহার করে ড্রাইভ অ্যাপ আইডি (Drive App ID) সেট করার জন্য ` PickerBuilder.setAppId মেথডটি ব্যবহার করুন। এরপর এই ফাংশনটি গুগল পিকারের একটি ইনস্ট্যান্স তৈরি করে এবং তা প্রদর্শন করে।

        // Create and render a Google Picker object for selecting from Drive.
    function createPicker() {
      const showPicker = () => {
        // Replace with your API key and App ID.
        const picker = new google.picker.PickerBuilder()
            .addView(google.picker.ViewId.DOCS)
            .setOAuthToken(accessToken)
            .setDeveloperKey('API_KEY')
            .setCallback(pickerCallback)
            .setAppId('APP_ID')
            .build();
        picker.setVisible(true);
      }

      // Request an access token.
      tokenClient.callback = async (response) => {
        if (response.error !== undefined) {
          throw (response);
        }
        accessToken = response.access_token;
        showPicker();
      };

      if (accessToken === null) {
        // Prompt the user to select a Google Account and ask for consent to share their data
        // when establishing a new session.
        tokenClient.requestAccessToken({prompt: 'consent'});
      } else {
        // Skip display of account chooser and consent dialog for an existing session.
        tokenClient.requestAccessToken({prompt: ''});
      }
    }

    নিম্নলিখিতগুলি প্রতিস্থাপন করুন:

    • API_KEY : আপনার এপিআই কী।
    • APP_ID : আপনার ক্লাউড প্রজেক্ট নম্বর।

    একটি গুগল পিকার ইনস্ট্যান্স তৈরি করতে, আপনাকে অবশ্যই PickerBuilder ব্যবহার করে একটি Picker অবজেক্ট তৈরি করতে হবে। PickerBuilder জন্য একটি View , একটি OAuth 2.0 টোকেন, একটি ডেভেলপার কী এবং সফল হলে কল করার জন্য একটি কলব্যাক ফাংশন ( pickerCallback ) প্রয়োজন হয়।

    Picker অবজেক্টটি একবারে একটি View রেন্ডার করে। ViewId ( google.picker.ViewId.* ) ব্যবহার করে অথবা ভিউটি কীভাবে রেন্ডার হবে তার উপর অতিরিক্ত নিয়ন্ত্রণের জন্য একটি DocsView এর ইনস্ট্যান্স তৈরি করে অন্তত একটি ভিউ নির্দিষ্ট করুন।

    গুগল পিকার-এ একাধিক ভিউ যোগ করা থাকলে, ব্যবহারকারীরা বাম দিকের ট্যাবে ক্লিক করে এক ভিউ থেকে অন্য ভিউতে যেতে পারেন। ViewGroup অবজেক্ট ব্যবহার করে ট্যাবগুলোকে যৌক্তিকভাবে গ্রুপ করা যায়।

    বৈধ ভিউগুলির তালিকার জন্য, গুগল পিকার রেফারেন্সে ViewId দেখুন। এই ভিউগুলির যেকোনোটির টোকেন পেতে, https://www.googleapis.com/auth/drive.file স্কোপটি ব্যবহার করুন।

    গুগল পিকার কলব্যাক বাস্তবায়ন করুন

    গুগল পিকার-এ ব্যবহারকারীর কার্যকলাপ, যেমন কোনো ফাইল নির্বাচন করা বা বাতিল (Cancel) বোতাম চাপার প্রতিক্রিয়ায় সাড়া দেওয়ার জন্য একটি গুগল পিকার কলব্যাক ব্যবহার করা যেতে পারে। ResponseObject ইন্টারফেসটি ব্যবহারকারীর নির্বাচন সম্পর্কিত তথ্য প্রদান করে।

        // A callback implementation.
    function pickerCallback(data) {
      let url = 'nothing';
      if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
        const doc = data[google.picker.Response.DOCUMENTS][0];
        url = doc[google.picker.Document.URL];
      }
      const message = `You picked: ${url}`;
      document.getElementById('result').textContent = message;
    }

    কলব্যাকটি একটি JSON-এনকোডেড ডেটা অবজেক্ট গ্রহণ করে। এই অবজেক্টটিতে একটি Action থাকে যা ব্যবহারকারী গুগল পিকার ( google.picker.Response.ACTION ) ব্যবহার করে সম্পাদন করেন। যদি ব্যবহারকারী কোনো আইটেম নির্বাচন করেন, তাহলে google.picker.Response.DOCUMENTS অ্যারেটিও পূরণ হয়ে যায়। এই উদাহরণে, মূল পৃষ্ঠায় google.picker.Document.URL দেখানো হয়েছে। ডেটা ফিল্ড সম্পর্কে বিস্তারিত জানতে, ResponseObject ইন্টারফেসটি দেখুন।

    নির্দিষ্ট ফাইলের প্রকার ফিল্টার করুন

    নির্দিষ্ট আইটেম ফিল্টার করার জন্য ViewGroup ব্যবহার করুন। নিচের কোড নমুনাটিতে দেখানো হয়েছে কিভাবে 'ড্রাইভ' সাবভিউটি শুধুমাত্র ডকুমেন্ট এবং প্রেজেন্টেশন প্রদর্শন করে।

        const picker = new google.picker.PickerBuilder()
        .addViewGroup(
          new google.picker.ViewGroup(google.picker.ViewId.DOCS)
              .addView(google.picker.ViewId.DOCUMENTS)
              .addView(google.picker.ViewId.PRESENTATIONS))
        .setOAuthToken(oauthToken)
        .setDeveloperKey(developerKey)
        .setAppId(cloudProjectNumber)
        .setCallback(pickerCallback)
        .build();

    বৈধ ভিউ টাইপগুলোর তালিকার জন্য, ViewId দেখুন।

    গুগল পিকারের চেহারা সামঞ্জস্য করুন

    আপনি বিভিন্ন ভিউয়ের ফিচারগুলো চালু বা বন্ধ করতে Feature অবজেক্টটি ব্যবহার করতে পারেন। গুগল পিকার উইন্ডোর চেহারা সূক্ষ্মভাবে সমন্বয় করতে, PickerBuilder.enableFeature অথবা PickerBuilder.disableFeature মেথডটি ব্যবহার করুন। উদাহরণস্বরূপ, যদি আপনার কেবল একটি ভিউ থাকে, তাহলে ব্যবহারকারীদের আইটেমগুলো দেখার জন্য আরও বেশি জায়গা দিতে আপনি নেভিগেশন পেইনটি ( Feature.NAV_HIDDEN ) লুকাতে চাইতে পারেন।

    নিম্নলিখিত কোড নমুনাটিতে এই বৈশিষ্ট্যটি ব্যবহার করে একটি স্প্রেডশীটের সার্চ পিকারের উদাহরণ দেখানো হয়েছে:

        const picker = new google.picker.PickerBuilder()
        .addView(google.picker.ViewId.SPREADSHEETS)
        .enableFeature(google.picker.Feature.NAV_HIDDEN)
        .setDeveloperKey(developerKey)
        .setCallback(pickerCallback)
        .build();