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

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

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

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

মনে রাখবেন যে Google Picker ব্যবহারকারীদের এক ফোল্ডার থেকে অন্য ফোল্ডারে ফাইলগুলি সংগঠিত, সরানো বা অনুলিপি করার অনুমতি দেয় না। ফাইলগুলি পরিচালনা করতে, আপনাকে Google Drive API অথবা Drive UI ব্যবহার করতে হবে।

পূর্বশর্ত

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

আপনার অবশ্যই একটি গুগল ক্লাউড প্রকল্প থাকতে হবে।

আপনার পরিবেশ সেট আপ করুন

গুগল পিকার এপিআই ব্যবহার শুরু করতে, আপনাকে আপনার পরিবেশ সেট আপ করতে হবে।

API সক্রিয় করুন

• গুগল ক্লাউড কনসোলে, গুগল পিকার এপিআই সক্ষম করুন।

  API সক্রিয় করুন

একটি API কী তৈরি করুন

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

একটি API কী তৈরি করতে:

1. গুগল ক্লাউড কনসোলে, মেনু menu > API এবং পরিষেবা > শংসাপত্রগুলিতে যান।

   শংসাপত্রগুলিতে যান

2. ক্রেডেনশিয়াল তৈরি করুন > API কী ক্লিক করুন।
3. আপনার নতুন API কী প্রদর্শিত হবে।
   • আপনার অ্যাপের কোডে ব্যবহারের জন্য আপনার API কী কপি করতে, "Copy content_copy এ ক্লিক করুন। API কীটি আপনার প্রকল্পের শংসাপত্রের "API Keys" বিভাগেও পাওয়া যাবে।
   • অননুমোদিত ব্যবহার রোধ করার জন্য, আমরা সুপারিশ করছি যে API কী কোথায় এবং কোন API-এর জন্য ব্যবহার করা যেতে পারে তা সীমাবদ্ধ করুন। আরও বিস্তারিত জানার জন্য, API সীমাবদ্ধতা যোগ করুন দেখুন।

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

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

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

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

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

গুগল পিকার লাইব্রেরি লোড করতে, লাইব্রেরির নাম এবং সফল লোডের পরে কলব্যাক ফাংশনটি ব্যবহার করে 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 : আপনার প্রয়োজনীয় অ্যাক্সেসের স্তরের উপর নির্ভর করে Google API অ্যাক্সেস করার জন্য আপনাকে এক বা একাধিক OAuth 2.0 স্কোপ অনুরোধ করতে হবে। আরও তথ্যের জন্য, Google API এর জন্য OAuth 2.0 স্কোপ দেখুন।

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

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

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

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

createPicker ফাংশনটি নিশ্চিত করে যে Google Picker API লোড করা শেষ হয়েছে এবং একটি OAuth 2.0 টোকেন তৈরি হয়েছে। PickerBuilder.setAppId পদ্ধতি ব্যবহার করে ক্লাউড প্রজেক্ট নম্বর ব্যবহার করে ড্রাইভ অ্যাপ আইডি সেট করুন যাতে অ্যাপটি ব্যবহারকারীর ফাইল অ্যাক্সেস করতে পারে। এই ফাংশনটি তারপর Google Picker এর একটি উদাহরণ তৈরি করে এবং এটি প্রদর্শন করে:

    // 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 : আপনার API কী।
• APP_ID : আপনার ক্লাউড প্রকল্প নম্বর।

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

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

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

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

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

গুগল পিকারে ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রতিক্রিয়া জানাতে গুগল পিকার কলব্যাক ব্যবহার করা যেতে পারে, যেমন একটি ফাইল নির্বাচন করা বা বাতিল করা টিপুন। 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-এনকোডেড ডেটা অবজেক্ট গ্রহণ করে। এই অবজেক্টটিতে ব্যবহারকারীর দ্বারা Google Picker ( google.picker.Response.ACTION ) দিয়ে সম্পাদিত একটি 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();