একটি ইন্টারেক্টিভ কার্ড বা ডায়ালগ ডিজাইন করুন

এই পৃষ্ঠাটি ব্যাখ্যা করে কিভাবে কার্ড বা ডায়ালগ মেসেজে উইজেট এবং UI উপাদান যোগ করতে হয় যাতে ব্যবহারকারীরা আপনার Google Chat অ্যাপের সাথে ইন্টারঅ্যাক্ট করতে পারে, যেমন একটি বোতামে ক্লিক করে বা তথ্য জমা দিয়ে।

চ্যাট অ্যাপের জন্য JSON কার্ড মেসেজ ডিজাইন ও প্রিভিউ করতে কার্ড বিল্ডার ব্যবহার করুন:

কার্ড বিল্ডার খুলুন

পূর্বশর্ত

  • Google Chat- এ অ্যাক্সেস সহ একটি Google Workspace অ্যাকাউন্ট ।
  • একটি প্রকাশিত চ্যাট অ্যাপ। একটি চ্যাট অ্যাপ তৈরি করতে, এই কুইকস্টার্টটি অনুসরণ করুন।

    • একটি বোতাম যোগ করুন

    ButtonList উইজেট বোতামের একটি সেট প্রদর্শন করে। বোতামগুলি পাঠ্য, একটি আইকন, বা পাঠ্য এবং একটি আইকন উভয়ই প্রদর্শন করতে পারে। প্রতিটি Button একটি OnClick অ্যাকশন সমর্থন করে যা ব্যবহারকারীরা বোতামে ক্লিক করলে ঘটে। উদাহরণ স্বরূপ:

    • ব্যবহারকারীদের অতিরিক্ত তথ্য প্রদানের জন্য OpenLink এর সাথে একটি হাইপারলিঙ্ক খুলুন।
    • একটি action চালান যা একটি কাস্টম ফাংশন চালায়, যেমন একটি API কল করা।

    অ্যাক্সেসযোগ্যতার জন্য, বোতামগুলি বিকল্প পাঠ্য সমর্থন করে।

    একটি কাস্টম ফাংশন চালায় এমন একটি বোতাম যোগ করুন

    নিম্নলিখিত দুটি বোতাম সহ একটি ButtonList উইজেট সমন্বিত একটি কার্ড। একটি বোতাম একটি নতুন ট্যাবে Google Chat বিকাশকারী ডকুমেন্টেশন খোলে। অন্য বোতামটি goToView() নামে একটি কাস্টম ফাংশন চালায় এবং viewType="BIRD EYE VIEW" প্যারামিটার পাস করে।

    কাস্টম রঙ এবং একটি নিষ্ক্রিয় বোতাম সহ একটি বোতাম যুক্ত করুন৷

    আপনি "disabled": "true" সেট করে একটি বোতামে ক্লিক করা থেকে ব্যবহারকারীদের আটকাতে পারেন৷

    নিম্নলিখিত দুটি বোতাম সহ একটি ButtonList উইজেট সমন্বিত একটি কার্ড প্রদর্শন করে। বোতামের পটভূমির রঙ কাস্টমাইজ করতে একটি বোতাম Color ক্ষেত্র ব্যবহার করে। অন্য বোতামটি Disabled ক্ষেত্রের সাথে নিষ্ক্রিয় করা হয়েছে, যা ব্যবহারকারীকে বোতামটি ক্লিক করতে এবং ফাংশনটি কার্যকর করতে বাধা দেয়।

    একটি আইকন সহ একটি বোতাম যোগ করুন

    নিম্নলিখিত দুটি আইকন Button উইজেট সহ একটি ButtonList উইজেট সমন্বিত একটি কার্ড প্রদর্শন করে। Google চ্যাটের অন্তর্নির্মিত ইমেল আইকন প্রদর্শন করতে একটি বোতাম knownIcon ক্ষেত্র ব্যবহার করে। অন্য বোতামটি একটি কাস্টম আইকন উইজেট প্রদর্শন করতে iconUrl ক্ষেত্র ব্যবহার করে।

    একটি আইকন এবং পাঠ্য সহ একটি বোতাম যুক্ত করুন৷

    নিম্নলিখিতটি একটি ButtonList উইজেট সমন্বিত একটি কার্ড প্রদর্শন করে যা ব্যবহারকারীকে একটি ইমেল পাঠাতে অনুরোধ করে। প্রথম বোতামটি একটি ইমেল আইকন প্রদর্শন করে এবং দ্বিতীয় বোতামটি পাঠ্য প্রদর্শন করে। ব্যবহারকারী sendEmail ফাংশন চালানোর জন্য আইকন বা টেক্সট বোতামে ক্লিক করতে পারেন।

    নির্বাচনযোগ্য UI উপাদান যোগ করুন

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

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

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

    এই বিভাগটি কার্ডের উদাহরণ প্রদান করে যা SelectionInput উইজেট ব্যবহার করে। উদাহরণগুলি বিভিন্ন ধরণের বিভাগ ইনপুট ব্যবহার করে:

    একটি চেকবক্স যোগ করুন

    নিম্নলিখিতটি একটি ডায়ালগ প্রদর্শন করে যা ব্যবহারকারীকে একটি পরিচিতি পেশাদার, ব্যক্তিগত বা উভয়ই কিনা তা নির্দিষ্ট করতে বলে, একটি SelectionInput উইজেট যা চেকবক্স ব্যবহার করে:

    একটি রেডিও বোতাম যোগ করুন

    নিম্নলিখিতটি একটি ডায়ালগ প্রদর্শন করে যা ব্যবহারকারীকে রেডিও বোতাম ব্যবহার করে এমন একটি SelectionInput উইজেট সহ একটি পরিচিতি পেশাদার বা ব্যক্তিগত কিনা তা নির্দিষ্ট করতে বলে:

    একটি সুইচ যোগ করুন

    নিম্নলিখিতটি একটি ডায়ালগ প্রদর্শন করে যা ব্যবহারকারীকে সুইচ ব্যবহার করে এমন একটি SelectionInput উইজেট সহ একটি পরিচিতি পেশাদার, ব্যক্তিগত বা উভয়ই নির্দিষ্ট করতে বলে:

    নিম্নলিখিত একটি ডায়ালগ প্রদর্শন করে যা ব্যবহারকারীকে একটি ড্রপ-ডাউন মেনু ব্যবহার করে এমন একটি SelectionInput উইজেট সহ একটি পরিচিতি পেশাদার বা ব্যক্তিগত কিনা তা নির্দিষ্ট করতে বলে:

    একটি বহুনির্বাচন মেনু যোগ করুন

    নিম্নলিখিত একটি ডায়ালগ প্রদর্শন করে যা ব্যবহারকারীকে একটি বহুনির্বাচন মেনু থেকে পরিচিতি নির্বাচন করতে বলে:

    মাল্টিসিলেক্ট মেনুর জন্য ডেটা সোর্স ব্যবহার করুন

    Google Workspace অ্যাপ্লিকেশন বা এক্সটার্নাল ডেটা সোর্সের মতো ডায়নামিক সোর্স থেকে ডেটা পপুলেট করতে মাল্টিসিলেক্ট মেনু কীভাবে ব্যবহার করতে হয় তা নিম্নলিখিত বিভাগে ব্যাখ্যা করা হয়েছে।

    Google Workspace থেকে ডেটা উৎস

    আপনি Google Workspace-এ নিম্নলিখিত ডেটা উত্স থেকে একটি বহুনির্বাচিত মেনুর জন্য আইটেমগুলি পূরণ করতে পারেন:

    • Google Workspace ব্যবহারকারীরা : আপনি শুধুমাত্র একই Google Workspace সংস্থার মধ্যে থাকা ব্যবহারকারীদের পপুলেট করতে পারবেন।
    • চ্যাট স্পেস : মাল্টিসিলেক্ট মেনুতে আইটেম ইনপুট করা ব্যবহারকারী শুধুমাত্র তাদের Google Workspace সংস্থার মধ্যে থাকা স্পেস দেখতে এবং বেছে নিতে পারে।

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

    নিম্নলিখিত কোডটি Google Workspace ব্যবহারকারীদের একটি বহুনির্বাচিত মেনু দেখায়। ব্যবহারকারীদের পপুলেট করতে, নির্বাচন ইনপুট commonDataSource USER এ সেট করে:

    JSON

    {
  "selectionInput": {
    "name": "contacts",
    "type": "MULTI_SELECT",
    "label": "Selected contacts",
    "multiSelectMaxSelectedItems": 5,
    "multiSelectMinQueryLength": 1,
    "platformDataSource": {
      "commonDataSource": "USER"
    }
  }
}

    নিম্নলিখিত কোড চ্যাট স্পেসগুলির একটি বহুনির্বাচিত মেনু দেখায়। স্পেস পূরণ করতে, নির্বাচন ইনপুট hostAppDataSource ক্ষেত্র নির্দিষ্ট করে। মাল্টিসিলেক্ট মেনুটি defaultToCurrentSpace true এ সেট করে, যা বর্তমান স্থানটিকে মেনুতে ডিফল্ট নির্বাচন করে তোলে:

    JSON

    {
  "selectionInput": {
    "name": "spaces",
    "type": "MULTI_SELECT",
    "label": "Selected contacts",
    "multiSelectMaxSelectedItems": 3,
    "multiSelectMinQueryLength": 1,
    "platformDataSource": {
      "hostAppDataSource": {
        "chatDataSource": {
          "spaceDataSource": {
            "defaultToCurrentSpace": true
          }
        }
      }
    }
  }
}
    Google Workspace-এর বাইরের ডেটা সোর্স

    মাল্টিসিলেক্ট মেনুগুলি তৃতীয়-পক্ষ বা বাহ্যিক ডেটা উত্স থেকে আইটেমগুলিকে পপুলেট করতে পারে। উদাহরণস্বরূপ, আপনি একটি গ্রাহক সম্পর্ক ব্যবস্থাপনা (CRM) সিস্টেম থেকে বিক্রয় লিডের একটি তালিকা থেকে একটি ব্যবহারকারীকে নির্বাচন করতে সাহায্য করতে মাল্টিসিলেক্ট মেনু ব্যবহার করতে পারেন।

    একটি বাহ্যিক ডেটা উত্স ব্যবহার করতে, আপনি একটি ফাংশন নির্দিষ্ট করতে externalDataSource ক্ষেত্রটি ব্যবহার করেন যা ডেটা উত্স থেকে আইটেমগুলি ফেরত দেয়৷

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

    নিম্নলিখিত কোড ব্যবহারকারীর জন্য পরিচিতিগুলির একটি বহিরাগত সেট থেকে আইটেমগুলির একটি বহুনির্বাচিত মেনু দেখায়৷ মেনুটি ডিফল্টরূপে একটি পরিচিতি প্রদর্শন করে এবং বহিরাগত ডেটা উত্স থেকে আইটেমগুলি পুনরুদ্ধার এবং পপুলেট করতে getContacts ফাংশন চালায়:

    JSON

    {
  "selectionInput": {
    "name": "contacts",
    "type": "MULTI_SELECT",
    "label": "Selected contacts",
    "multiSelectMaxSelectedItems": 5,
    "multiSelectMinQueryLength": 2,
    "externalDataSource": {
      "function": "getContacts"
    },
    "items": [
      {
        "text": "Contact 3",
        "value": "contact-3",
        "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
        "bottomText": "Contact three description",
        "selected": false
      }
    ]
  }
}

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

    আইটেমগুলি স্বয়ংসম্পূর্ণ করতে, আপনি একটি ফাংশন তৈরি করেন যা বাহ্যিক ডেটা উত্স অনুসন্ধান করে এবং যখনই কোনও ব্যবহারকারী বহুনির্বাচন মেনুতে টাইপ করে তখন আইটেমগুলি ফেরত দেয়৷ ফাংশন নিম্নলিখিত করতে হবে:

    • একটি ইভেন্ট অবজেক্ট পাস করুন যা মেনুর সাথে ব্যবহারকারীর মিথস্ক্রিয়া প্রতিনিধিত্ব করে।
    • সনাক্ত করুন যে ইন্টারঅ্যাকশন ইভেন্টের invokedFunction মান externalDataSource ক্ষেত্রের ফাংশনের সাথে মেলে।
    • ফাংশন মিলে গেলে, বহিরাগত ডেটা উৎস থেকে প্রস্তাবিত আইটেমগুলি ফেরত দিন। ব্যবহারকারীর প্রকারের উপর ভিত্তি করে আইটেমগুলি প্রস্তাব করতে, autocomplete_widget_query কীটির মান পান। এই মানটি মেনুতে ব্যবহারকারী কী প্রকারের প্রতিনিধিত্ব করে।

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

    অ্যাপস স্ক্রিপ্ট

    apps-script/select-input/on-widget-update.gs
    /**
 * Widget update event handler.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app.
 */
function onWidgetUpdate(event) {
  const actionName = event.common["invokedFunction"];
  if (actionName !== "getContacts") {
    return {};
  }

  return {
    actionResponse: {
      type: "UPDATE_WIDGET",
      updatedWidget: {
        suggestions: {
          items: [
            {
              value: "contact-1",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 1",
              bottomText: "Contact one description",
              selected: false
            },
            {
              value: "contact-2",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 2",
              bottomText: "Contact two description",
              selected: false
            },
            {
              value: "contact-3",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 3",
              bottomText: "Contact three description",
              selected: false
            },
            {
              value: "contact-4",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 4",
              bottomText: "Contact four description",
              selected: false
            },
            {
              value: "contact-5",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 5",
              bottomText: "Contact five description",
              selected: false
            },
          ]
        }
      }
    }
  };
}

    Node.js

    node/selection-input/on-widget-update.js
    /**
 * Widget update event handler.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app.
 */
function onWidgetUpdate(event) {
  const actionName = event.common["invokedFunction"];
  if (actionName !== "getContacts") {
    return {};
  }

  return {
    actionResponse: {
      type: "UPDATE_WIDGET",
      updatedWidget: {
        suggestions: {
          items: [
            {
              value: "contact-1",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 1",
              bottomText: "Contact one description",
              selected: false
            },
            {
              value: "contact-2",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 2",
              bottomText: "Contact two description",
              selected: false
            },
            {
              value: "contact-3",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 3",
              bottomText: "Contact three description",
              selected: false
            },
            {
              value: "contact-4",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 4",
              bottomText: "Contact four description",
              selected: false
            },
            {
              value: "contact-5",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 5",
              bottomText: "Contact five description",
              selected: false
            },
          ]
        }
      }
    }
  };
}

    একটি ক্ষেত্র যোগ করুন যেখানে একজন ব্যবহারকারী পাঠ্য লিখতে পারে

    TextInput উইজেট একটি ক্ষেত্র প্রদান করে যেখানে ব্যবহারকারীরা পাঠ্য লিখতে পারে। উইজেট পরামর্শগুলিকে সমর্থন করে, যা ব্যবহারকারীদের অভিন্ন ডেটা প্রবেশ করতে সাহায্য করে এবং অন-চেঞ্জ অ্যাকশন, যেগুলি এমন Actions যা টেক্সট ইনপুট ক্ষেত্রের পরিবর্তন ঘটলে চালিত হয়, যেমন কোনও ব্যবহারকারী পাঠ্য যোগ করা বা মুছে ফেলা।

    যখন আপনাকে ব্যবহারকারীদের কাছ থেকে বিমূর্ত বা অজানা তথ্য সংগ্রহ করতে হবে, তখন এই TextInput উইজেটটি ব্যবহার করুন। ব্যবহারকারীদের কাছ থেকে সংজ্ঞায়িত ডেটা সংগ্রহ করতে, পরিবর্তে SelectionInput উইজেট ব্যবহার করুন।

    ব্যবহারকারীরা ইনপুট করা টেক্সট প্রক্রিয়া করতে, ফর্ম ডেটা গ্রহণ দেখুন।

    নিম্নলিখিতটি একটি TextInput উইজেট সমন্বিত একটি কার্ড:

    একজন ব্যবহারকারীকে একটি তারিখ এবং সময় বাছাই করতে দিন

    DateTimePicker উইজেট ব্যবহারকারীদের একটি তারিখ, একটি সময়, বা একটি তারিখ এবং একটি সময় উভয়ই ইনপুট করতে দেয়৷ অথবা, ব্যবহারকারীরা তারিখ এবং সময় নির্বাচন করতে পিকার ব্যবহার করতে পারেন। যদি ব্যবহারকারীরা একটি অবৈধ তারিখ বা সময় ইনপুট করে, বাছাইকারী একটি ত্রুটি দেখায় যা ব্যবহারকারীদের সঠিকভাবে তথ্য ইনপুট করতে অনুরোধ করে।

    ব্যবহারকারীরা ইনপুট করা তারিখ এবং সময়ের মানগুলি প্রক্রিয়া করতে, ফর্ম ডেটা গ্রহণ করুন দেখুন।

    নিম্নলিখিত তিনটি ভিন্ন ধরণের DateTimePicker উইজেট সমন্বিত একটি কার্ড প্রদর্শন করে:

    সমস্যা সমাধান

    যখন একটি Google চ্যাট অ্যাপ বা কার্ড একটি ত্রুটি ফেরত দেয়, তখন চ্যাট ইন্টারফেস "কিছু ভুল হয়েছে" বলে একটি বার্তা দেখায়। অথবা "আপনার অনুরোধ প্রক্রিয়া করতে অক্ষম।" কখনও কখনও চ্যাট UI কোনও ত্রুটি বার্তা প্রদর্শন করে না, তবে চ্যাট অ্যাপ বা কার্ড একটি অপ্রত্যাশিত ফলাফল তৈরি করে; উদাহরণস্বরূপ, একটি কার্ড বার্তা প্রদর্শিত নাও হতে পারে৷

    যদিও একটি ত্রুটি বার্তা চ্যাট UI-তে প্রদর্শিত নাও হতে পারে, বর্ণনামূলক ত্রুটি বার্তা এবং লগ ডেটা উপলব্ধ রয়েছে যাতে আপনি যখন চ্যাট অ্যাপগুলির জন্য ত্রুটি লগিং চালু থাকে তখন ত্রুটিগুলি ঠিক করতে সহায়তা করে৷ দেখা, ডিবাগিং এবং ত্রুটিগুলি সংশোধন করতে সহায়তার জন্য, Google Chat ত্রুটিগুলি সমস্যা সমাধান এবং ঠিক করুন দেখুন৷