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

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

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

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

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

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

পূর্বশর্ত

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

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

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

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

API সক্ষম করুন

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

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

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

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

  1. Google ক্লাউড কনসোলে, মেনু > APIs & Services > Credentials- এ যান।

    শংসাপত্রে যান

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

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

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

    ক্লায়েন্টে যান

  • ক্লায়েন্ট তৈরি করুন ক্লিক করুন।
  • অ্যাপ্লিকেশন প্রকার > ওয়েব অ্যাপ্লিকেশন ক্লিক করুন।
  • নাম ক্ষেত্রে, শংসাপত্রের জন্য একটি নাম টাইপ করুন। এই নামটি শুধুমাত্র Google ক্লাউড কনসোলে দেখানো হয়।
  • আপনার অ্যাপের সাথে সম্পর্কিত অনুমোদিত URI যোগ করুন:
    • ক্লায়েন্ট-সাইড অ্যাপস (জাভাস্ক্রিপ্ট) -অনুমোদিত জাভাস্ক্রিপ্ট অরিজিন-এর অধীনে, URI যোগ করুন-এ ক্লিক করুন। তারপর, ব্রাউজার অনুরোধের জন্য ব্যবহার করার জন্য একটি URI লিখুন। এটি সেই ডোমেনগুলিকে চিহ্নিত করে যেগুলি থেকে আপনার অ্যাপ্লিকেশনটি OAuth 2.0 সার্ভারে API অনুরোধ পাঠাতে পারে৷
    • সার্ভার-সাইড অ্যাপস (জাভা, পাইথন, এবং আরও) -অথরাইজড রিডাইরেক্ট ইউআরআই-এর অধীনে, ইউআরআই যোগ করুন ক্লিক করুন। তারপর, একটি এন্ডপয়েন্ট URI লিখুন যেখানে OAuth 2.0 সার্ভার প্রতিক্রিয়া পাঠাতে পারে।
  • তৈরি করুন ক্লিক করুন।

    নতুন তৈরি শংসাপত্রটি OAuth 2.0 ক্লায়েন্ট আইডির অধীনে প্রদর্শিত হয়।

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

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

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

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

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

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

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

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

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

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

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

        // 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 পিকার উদাহরণ তৈরি করতে, আপনাকে PickerBuilder ব্যবহার করে একটি Picker অবজেক্ট তৈরি করতে হবে। PickerBuilder একটি View , একটি OAuth 2.0 টোকেন, একটি ডেভেলপার কী এবং একটি কলব্যাক ফাংশন নেয় সাফল্যের জন্য ( pickerCallback )।

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

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

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

    Google পিকার কলব্যাক প্রয়োগ করুন

    একটি Google পিকার কলব্যাক Google পিকারে ব্যবহারকারীর ইন্টারঅ্যাকশনে প্রতিক্রিয়া জানাতে ব্যবহার করা যেতে পারে, যেমন একটি ফাইল নির্বাচন করা বা বাতিল টিপে। 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 পিকার ( 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 অবজেক্ট ব্যবহার করতে পারেন। Google পিকার উইন্ডোর চেহারা ঠিক করতে, 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();