Google Chat ব্যবহারকারীদের কাছ থেকে তথ্য সংগ্রহ ও প্রক্রিয়া করুন

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

একটি ডায়ালগ বক্স যেখানে বিভিন্ন ধরনের উইজেট রয়েছে।
চিত্র ১ : একটি চ্যাট অ্যাপ যা যোগাযোগের তথ্য সংগ্রহের জন্য একটি ডায়ালগ বক্স খোলে।

চ্যাট অ্যাপগুলো চ্যাটের ভেতরে বা বাইরে বিভিন্ন কাজ করার জন্য ব্যবহারকারীদের কাছ থেকে তথ্য চেয়ে থাকে, যার মধ্যে নিম্নলিখিত উপায়গুলো অন্তর্ভুক্ত:

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

পূর্বশর্ত

HTTP

একটি গুগল ওয়ার্কস্পেস অ্যাড-অন যা গুগল চ্যাটের কার্যকারিতা বৃদ্ধি করে। এটি তৈরি করতে, HTTP কুইকস্টার্টটি সম্পূর্ণ করুন।

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

একটি গুগল ওয়ার্কস্পেস অ্যাড-অন যা গুগল চ্যাটের কার্যকারিতা বৃদ্ধি করে। এটি তৈরি করতে, অ্যাপস স্ক্রিপ্ট কুইকস্টার্টটি সম্পূর্ণ করুন।

কার্ড ব্যবহার করে ফর্ম তৈরি করুন

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

  • চ্যাট বার্তা যাতে এক বা একাধিক কার্ড থাকে।
  • ডায়ালগ হলো এমন কার্ড যা মেসেজ এবং হোমপেজ থেকে একটি নতুন উইন্ডোতে খোলে।

চ্যাট অ্যাপগুলো নিম্নলিখিত উইজেটগুলো ব্যবহার করে কার্ডগুলো তৈরি করতে পারে:

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

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

নিম্নলিখিত উদাহরণে, একটি কার্ড টেক্সট ইনপুট, ডেট টাইম পিকার এবং সিলেকশন ইনপুট ব্যবহার করে যোগাযোগের তথ্য সংগ্রহ করে:

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

একটি ড্রপ-ডাউন মেনু যোগ করুন

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

আপনি নিম্নলিখিত ডেটা উৎসগুলো থেকে একটি ড্রপ-ডাউন মেনুর জন্য আইটেম যোগ করতে পারেন:

গুগল ওয়ার্কস্পেস ডেটা উৎস থেকে আইটেমগুলি পূরণ করুন

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

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

JSON 

{
  "sections": [
    {
      "header": "Section Header",
      "widgets": [
        {
          "selectionInput": {
            "name": "contacts",
            "type": "DROPDOWN",
            "label": "Select contact from organization",
            "data_source_configs": [
              {
                "platformDataSource": {
                  "commonDataSource": "USER"
                },
                "min_characters_trigger": 1
              }
            ]
          }
        }
      ]
    }
  ]
}

বাহ্যিক ডেটা উৎস থেকে আইটেমগুলি পূরণ করুন

ড্রপ-ডাউন মেনুগুলো কোনো তৃতীয়-পক্ষ বা বাহ্যিক ডেটা উৎস থেকেও আইটেম সরবরাহ করতে পারে। কোনো বাহ্যিক ডেটা উৎস ব্যবহার করতে হলে, আপনাকে একটি DataSourceConfig অবজেক্টের মধ্যে remoteDataSource ফিল্ডটি নির্দিষ্ট করতে হবে, যেটিতে ডেটা উৎস থেকে আইটেম কোয়েরি করে ফেরত পাঠানোর ফাংশনটি থাকে।

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

নিম্নলিখিত কোডটি একটি ড্রপ-ডাউন মেনু প্রদর্শন করে, যা একটি বাহ্যিক ডেটা উৎস থেকে আইটেমগুলি কোয়েরি করে এবং পূরণ করে:

JSON 

{
  "sections": [
    {
      "header": "Section Header",
      "widgets": [
        {
          "selectionInput": {
            "name": "crm_leads",
            "type": "DROPDOWN",
            "label": "Select CRM Lead",
            "data_source_configs": [
              {
                "remoteDataSource": {
                  "function": "getCrmLeads"
                },
                "min_characters_trigger": 2
              }
            ],
            "items": [
              {
                "text": "Suggested Lead 1",
                "value": "lead-1"
              }
            ]
          }
        }
      ]
    }
  ]
}

প্রস্তাবিত আইটেমগুলো কীভাবে ফেরত দিতে হয় তার একটি সম্পূর্ণ উদাহরণের জন্য, “নির্বাচন আইটেম প্রস্তাব করুন” বিভাগটি দেখুন।

একটি মাল্টিসিলেক্ট মেনু যোগ করুন

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

আপনি নিম্নলিখিত ডেটা উৎসগুলি থেকে একটি মাল্টিসিলেক্ট মেনুর জন্য আইটেমগুলি যোগ করতে পারেন:

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

গুগল ওয়ার্কস্পেস ডেটা উৎস থেকে আইটেমগুলি পূরণ করুন

Google Workspace ডেটা সোর্স ব্যবহার করতে, SelectionInput উইজেটে platformDataSource ফিল্ডটি নির্দিষ্ট করুন। অন্যান্য সিলেকশন ইনপুট টাইপের মতো নয়, এখানে SelectionItem অবজেক্টগুলো বাদ দিতে হয়, কারণ এই সিলেকশন আইটেমগুলো 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
          }
        }
      }
    }
  }
}

বাহ্যিক ডেটা উৎস থেকে আইটেমগুলি পূরণ করুন

মাল্টিসিলেক্ট মেনু কোনো তৃতীয় পক্ষ বা বাহ্যিক ডেটা উৎস থেকেও আইটেম সরবরাহ করতে পারে। বাহ্যিক ডেটা উৎস ব্যবহার করার জন্য, আপনাকে SelectionInput উইজেটের externalDataSource ফিল্ডটি নির্দিষ্ট করতে হবে, যেটিতে ডেটা উৎস থেকে আইটেম কোয়েরি করে ফেরত পাঠানোর ফাংশনটি থাকে।

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

নিম্নলিখিত কোড নমুনাটি একটি মাল্টিসিলেক্ট মেনু দেখায় যা একটি বাহ্যিক ডেটা উৎস থেকে আইটেমগুলি কোয়েরি করে এবং পূরণ করে:

নোড.জেএস

node/chat/selection-input/index.js
selectionInput: {
  name: "contacts",
  type: "MULTI_SELECT",
  label: "Selected contacts",
  multiSelectMaxSelectedItems: 3,
  multiSelectMinQueryLength: 1,
  externalDataSource: { function: FUNCTION_URL },
  // Suggested items loaded by default.
  // The list is static here but it could be dynamic.
  items: [getSuggestedContact("3")]
}

বাহ্যিক ডেটা উৎস থেকে তথ্য সংগ্রহের জন্য ব্যবহৃত HTTP এন্ডপয়েন্টটি দিয়ে FUNCTION_URL প্রতিস্থাপন করুন।

পাইথন

python/chat/selection-input/main.py
'selectionInput': {
  'name': "contacts",
  'type': "MULTI_SELECT",
  'label': "Selected contacts",
  'multiSelectMaxSelectedItems': 3,
  'multiSelectMinQueryLength': 1,
  'externalDataSource': { 'function': FUNCTION_URL },
  # Suggested items loaded by default.
  # The list is static here but it could be dynamic.
  'items': [get_suggested_contact("3")]
}

বাহ্যিক ডেটা উৎস থেকে তথ্য সংগ্রহের জন্য ব্যবহৃত HTTP এন্ডপয়েন্টটি দিয়ে FUNCTION_URL প্রতিস্থাপন করুন।

জাভা

java/chat/selection-input/src/main/java/com/google/chat/selectionInput/App.java
.setSelectionInput(new GoogleAppsCardV1SelectionInput()
  .setName("contacts")
  .setType("MULTI_SELECT")
  .setLabel("Selected contacts")
  .setMultiSelectMaxSelectedItems(3)
  .setMultiSelectMinQueryLength(1)
  .setExternalDataSource(new GoogleAppsCardV1Action().setFunction(FUNCTION_URL))
  // Suggested items loaded by default.
  // The list is static here but it could be dynamic.
  .setItems(List.of(getSuggestedContact("3")))))))))));

বাহ্যিক ডেটা উৎস থেকে তথ্য সংগ্রহের জন্য ব্যবহৃত HTTP এন্ডপয়েন্টটি দিয়ে FUNCTION_URL প্রতিস্থাপন করুন।

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

এই উদাহরণটি কার্ডের JSON রিটার্ন করার মাধ্যমে একটি কার্ড মেসেজ পাঠায়। আপনি অ্যাপস স্ক্রিপ্টের কার্ড সার্ভিসটিও ব্যবহার করতে পারেন।

apps-script/chat/selection-input/selection-input.gs
selectionInput: {
  name: "contacts",
  type: "MULTI_SELECT",
  label: "Selected contacts",
  multiSelectMaxSelectedItems: 3,
  multiSelectMinQueryLength: 1,
  externalDataSource: { function: "queryContacts" },
  // Suggested items loaded by default.
  // The list is static here but it could be dynamic.
  items: [getSuggestedContact("3")]
}

প্রস্তাবিত আইটেমগুলো কীভাবে ফেরত দিতে হয় তার একটি সম্পূর্ণ উদাহরণের জন্য, “নির্বাচন আইটেম প্রস্তাব করুন” বিভাগটি দেখুন।

ইন্টারেক্টিভ উইজেট থেকে ডেটা গ্রহণ করুন

যখনই ব্যবহারকারীরা কোনো বোতামে ক্লিক করেন, তখন সেই ইন্টারঅ্যাকশন সম্পর্কিত তথ্যসহ এর চ্যাট অ্যাপস অ্যাকশনটি সক্রিয় হয়। ইভেন্ট পেলোডের commonEventObject এ থাকা formInputs অবজেক্টটিতে ব্যবহারকারীর ইনপুট করা যেকোনো মান থাকে।

আপনি commonEventObject.formInputs. WIDGET_NAME অবজেক্ট থেকে মানগুলো পুনরুদ্ধার করতে পারেন, যেখানে WIDGET_NAME হলো উইজেটের জন্য আপনার নির্দিষ্ট করা name ফিল্ড। মানগুলো উইজেটের জন্য একটি নির্দিষ্ট ডেটা টাইপ হিসেবে ফেরত দেওয়া হয়।

নিচে একটি ইভেন্ট অবজেক্টের অংশ দেখানো হয়েছে, যেখানে ব্যবহারকারী প্রতিটি উইজেটের জন্য মান প্রবেশ করিয়েছেন:

{
  "commonEventObject": { "formInputs": {
    "contactName": { "stringInputs": {
      "value": ["Kai 0"]
    }},
    "contactBirthdate": { "dateInput": {
      "msSinceEpoch": 1000425600000
    }},
    "contactType": { "stringInputs": {
      "value": ["Personal"]
    }}
  }}
}

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

ফর্ম ইনপুট উইজেট ইনপুট ডেটার ধরণ ইভেন্ট অবজেক্ট থেকে মান ইনপুট করুন উদাহরণ মান
textInput stringInputs event.commonEventObject.formInputs.contactName.stringInputs.value[0] Kai O
selectionInput stringInputs প্রথম বা একমাত্র মান পেতে, event.commonEventObject.formInputs.contactType.stringInputs.value[0] Personal
dateTimePicker যা শুধুমাত্র তারিখ গ্রহণ করে। dateInput event.commonEventObject.formInputs.contactBirthdate.dateInput.msSinceEpoch . 1000425600000

চ্যাট অ্যাপটি ডেটা পাওয়ার পর নিম্নলিখিত কাজগুলোর যেকোনো একটি করতে পারে:

নির্বাচনের আইটেমগুলি প্রস্তাব করুন

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

একটি সিলেকশন ইনপুটে আইটেম সাজেস্ট করতে এবং ডায়নামিকভাবে পপুলেট করতে, কার্ডের SelectionInput উইজেটে অবশ্যই একটি ফাংশন নির্দিষ্ট করতে হবে যা এক্সটার্নাল ডেটা সোর্স থেকে ডেটা কোয়েরি করে। মাল্টিসিলেক্ট মেনুর জন্য, আপনাকে externalDataSource ফিল্ডটি নির্দিষ্ট করতে হবে। ড্রপ-ডাউন মেনুর জন্য, আপনাকে একটি DataSourceConfig অবজেক্টের মধ্যে remoteDataSource ফিল্ডটি নির্দিষ্ট করতে হবে।

ব্যবহারকারী কতগুলো অক্ষর টাইপ করার পর মেনুটি সাজেশন দেখাবে, তাও আপনি কনফিগার করতে পারেন। মাল্টিসিলেক্ট মেনুর জন্য, multiSelectMinQueryLength ফিল্ডটি সেট করুন। ড্রপ-ডাউন মেনুর জন্য, DataSourceConfig মধ্যে min_characters_trigger ফিল্ডটি সেট করুন।

প্রস্তাবিত আইটেমগুলো ফেরত দেওয়ার জন্য, ফাংশনটিকে নিম্নলিখিত কাজগুলো করতে হবে:

  1. একটি ইভেন্ট অবজেক্ট পরিচালনা করুন, যেটি ব্যবহারকারীরা মেনুতে টাইপ করলে চ্যাট অ্যাপটি গ্রহণ করে।
  2. ইভেন্ট অবজেক্ট থেকে ব্যবহারকারীর টাইপ করা মানটি নিন, যা event.commonEventObject.parameters["autocomplete_widget_query"] ফিল্ডে উপস্থাপিত থাকে।
  3. ব্যবহারকারীকে পরামর্শ দেওয়ার জন্য এক বা একাধিক SelectionItems পেতে, ব্যবহারকারীর ইনপুট করা মান ব্যবহার করে ডেটা সোর্স থেকে কোয়েরি করুন।
  4. একটি modifyCard অবজেক্ট সহ RenderActions অ্যাকশনটি রিটার্ন করার মাধ্যমে প্রস্তাবিত আইটেমগুলো ফেরত দিন।

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

নোড.জেএস

node/chat/selection-input/index.js
/**
 * Web app that responds to events sent from a Google Chat space.
 *
 * @param {Object} req Request sent from Google Chat space
 * @param {Object} res Response to send back
 */
app.post('/', async (req, res) => {
  // Stores the Google Chat event
  const chatEvent = req.body.chat;

  // Handle user interaction with multiselect.
  if(chatEvent.widgetUpdatedPayload) {
    return res.json(queryContacts(req.body));
  }

  // Replies with a card that contains the multiselect menu.
  return res.json({ hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
    cardsV2: [{
      cardId: "contactSelector",
      card: { sections:[{ widgets: [{
        selectionInput: {
          name: "contacts",
          type: "MULTI_SELECT",
          label: "Selected contacts",
          multiSelectMaxSelectedItems: 3,
          multiSelectMinQueryLength: 1,
          externalDataSource: { function: FUNCTION_URL },
          // Suggested items loaded by default.
          // The list is static here but it could be dynamic.
          items: [getSuggestedContact("3")]
        }
      }]}]}
    }]
  }}}}});
});

/**
 * Get contact suggestions based on text typed by users.
 *
 * @param {Object} event the event object that contains the user's query
 * @return {Object} suggestions
 */
function queryContacts(event) {
  const query = event.commonEventObject.parameters["autocomplete_widget_query"];
  return { action: { modifyOperations: [{ updateWidget: { selectionInputWidgetSuggestions: { suggestions: [
    // The list is static here but it could be dynamic.
    getSuggestedContact("1"), getSuggestedContact("2"), getSuggestedContact("3"), getSuggestedContact("4"), getSuggestedContact("5")
  // Only return items based on the query from the user.
  ].filter(e => !query || e.text.includes(query)) }}}]}};
}

/**
 * Generate a suggested contact given an ID.
 *
 * @param {String} id The ID of the contact to return.
 * @return {Object} The contact formatted as a selection item in the menu.
 */
function getSuggestedContact(id) {
  return {
    value: id,
    startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    text: "Contact " + id
  };
}

বাহ্যিক ডেটা উৎস থেকে তথ্য সংগ্রহের জন্য ব্যবহৃত HTTP এন্ডপয়েন্টটি দিয়ে FUNCTION_URL প্রতিস্থাপন করুন।

পাইথন

python/chat/selection-input/main.py
@app.route('/', methods=['POST'])
def post() -> Mapping[str, Any]:
  """Handle requests from Google Chat

  Returns:
      Mapping[str, Any]: The response
  """
  # Stores the Google Chat event
  chatEvent = request.get_json().get('chat')

  # Handle user interaction with multiselect.
  if chatEvent.get('widgetUpdatedPayload') is not None:
    return json.jsonify(query_contacts(request.get_json()))

  # Replies with a card that contains the multiselect menu.
  return json.jsonify({ 'hostAppDataAction': { 'chatDataAction': { 'createMessageAction': {
    'message': { 'cardsV2': [{
      'cardId': "contactSelector",
      'card': { 'sections':[{ 'widgets': [{
        'selectionInput': {
          'name': "contacts",
          'type': "MULTI_SELECT",
          'label': "Selected contacts",
          'multiSelectMaxSelectedItems': 3,
          'multiSelectMinQueryLength': 1,
          'externalDataSource': { 'function': FUNCTION_URL },
          # Suggested items loaded by default.
          # The list is static here but it could be dynamic.
          'items': [get_suggested_contact("3")]
        }
      }]}]}
    }]}
  }}}})


def query_contacts(event: dict) -> dict:
  """Get contact suggestions based on text typed by users.

  Args:
      event (Mapping[str, Any]): The event object that contains the user's query

  Returns:
      Mapping[str, Any]: The response with contact suggestions.
  """
  query = event.get("commonEventObject").get("parameters").get("autocomplete_widget_query")
  return { 'action': { 'modifyOperations': [{ 'updateWidget': { 'selectionInputWidgetSuggestions': { 'suggestions': list(
    filter(lambda e: query is None or query in e["text"], [
      # The list is static here but it could be dynamic.
      get_suggested_contact("1"), get_suggested_contact("2"), get_suggested_contact("3"), get_suggested_contact("4"), get_suggested_contact("5")
    # Only return items based on the query from the user
    ])
  )}}}]}}


def get_suggested_contact(id: str) -> dict:
  """Generate a suggested contact given an ID.

  Args:
      id (str): The ID of the contact to return.

  Returns:
      Mapping[str, Any]: The contact formatted as a selection item in the menu.
  """
  return {
    'value': id,
    'startIconUri': "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    'text': "Contact " + id
  }

বাহ্যিক ডেটা উৎস থেকে তথ্য সংগ্রহের জন্য ব্যবহৃত HTTP এন্ডপয়েন্টটি দিয়ে FUNCTION_URL প্রতিস্থাপন করুন।

জাভা

java/chat/selection-input/src/main/java/com/google/chat/selectionInput/App.java
@SpringBootApplication
@RestController
// Web app that responds to events sent from a Google Chat space.
public class App {
  private static final String FUNCTION_URL = "your-function-url";

  public static void main(String[] args) {
    SpringApplication.run(App.class, args);
  }

  /**
   * Handle requests from Google Chat
   * 
   * @param event the event object sent by Google Chat
   * @return The response to be sent back to Google Chat
   */
  @PostMapping("/")
  @ResponseBody
  public GenericJson onEvent(@RequestBody JsonNode event) throws Exception {
    // Stores the Google Chat event
    JsonNode chatEvent = event.at("/chat");

    // Handle user interaction with multiselect.
    if (!chatEvent.at("/widgetUpdatedPayload").isEmpty()) {
      return queryContacts(event);
    }

    // Replies with a card that contains the multiselect menu.
    Message message = new Message().setCardsV2(List.of(new CardWithId()
      .setCardId("contactSelector")
      .setCard(new GoogleAppsCardV1Card()
        .setSections(List.of(new GoogleAppsCardV1Section().setWidgets(List.of(new GoogleAppsCardV1Widget()
          .setSelectionInput(new GoogleAppsCardV1SelectionInput()
            .setName("contacts")
            .setType("MULTI_SELECT")
            .setLabel("Selected contacts")
            .setMultiSelectMaxSelectedItems(3)
            .setMultiSelectMinQueryLength(1)
            .setExternalDataSource(new GoogleAppsCardV1Action().setFunction(FUNCTION_URL))
            // Suggested items loaded by default.
            // The list is static here but it could be dynamic.
            .setItems(List.of(getSuggestedContact("3")))))))))));

    return new GenericJson() {{
      put("hostAppDataAction", new GenericJson() {{
        put("chatDataAction", new GenericJson() {{
          put("createMessageAction", new GenericJson() {{
            put("message", message);
          }});
        }});
      }});
    }};
  }

  /**
   * Get contact suggestions based on text typed by users.
   *
   * @param event the event object that contains the user's query.
   * @return The response with contact suggestions.
   */
  GenericJson queryContacts(JsonNode event) throws Exception {
    String query = event.at("/commonEventObject/parameters/autocomplete_widget_query").asText();
    List<GoogleAppsCardV1SelectionItem> suggestions = List.of(
      // The list is static here but it could be dynamic.
      getSuggestedContact("1"), getSuggestedContact("2"), getSuggestedContact("3"), getSuggestedContact("4"), getSuggestedContact("5")
    // Only return items based on the query from the user
    ).stream().filter(e -> query == null || e.getText().indexOf(query) > -1).toList();

    return new GenericJson() {{
      put("action", new GenericJson() {{
        put("modifyOperations", List.of(new GenericJson() {{
          put("updateWidget", new GenericJson() {{
            put("selectionInputWidgetSuggestions", new GenericJson() {{
              put("suggestions", suggestions);
            }});
          }});
        }}));
      }});
    }};
  }

  /**
   * Generate a suggested contact given an ID.
   * 
   * @param id The ID of the contact to return.
   * @return The contact formatted as a selection item in the menu.
   */
  GoogleAppsCardV1SelectionItem getSuggestedContact(String id) {
    return new GoogleAppsCardV1SelectionItem()
      .setValue(id)
      .setStartIconUri("https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png")
      .setText("Contact " + id);
  }
}

বাহ্যিক ডেটা উৎস থেকে তথ্য সংগ্রহের জন্য ব্যবহৃত HTTP এন্ডপয়েন্টটি দিয়ে FUNCTION_URL প্রতিস্থাপন করুন।

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

এই উদাহরণটি কার্ডের JSON রিটার্ন করার মাধ্যমে একটি কার্ড মেসেজ পাঠায়। আপনি অ্যাপস স্ক্রিপ্টের কার্ড সার্ভিসটিও ব্যবহার করতে পারেন।

apps-script/chat/selection-input/selection-input.gs
/**
* Responds to a Message trigger in Google Chat.
*
* @param {Object} event the event object from Google Chat
* @return {Object} Response from the Chat app.
*/
function onMessage(event) {
  // Replies with a card that contains the multiselect menu.
  return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
    cardsV2: [{
      cardId: "contactSelector",
      card: { sections:[{ widgets: [{
        selectionInput: {
          name: "contacts",
          type: "MULTI_SELECT",
          label: "Selected contacts",
          multiSelectMaxSelectedItems: 3,
          multiSelectMinQueryLength: 1,
          externalDataSource: { function: "queryContacts" },
          // Suggested items loaded by default.
          // The list is static here but it could be dynamic.
          items: [getSuggestedContact("3")]
        }
      }]}]}
    }]
  }}}}};
}

/**
* Get contact suggestions based on text typed by users.
*
* @param {Object} event the event object that contains the user's query
* @return {Object} suggestions
*/
function queryContacts(event) {
  const query = event.commonEventObject.parameters["autocomplete_widget_query"];
  return { action: { modifyOperations: [{ updateWidget: { selectionInputWidgetSuggestions: { suggestions: [
    // The list is static here but it could be dynamic.
    getSuggestedContact("1"), getSuggestedContact("2"), getSuggestedContact("3"), getSuggestedContact("4"), getSuggestedContact("5")
  // Only return items based on the query from the user.
  ].filter(e => !query || e.text.includes(query)) }}}]}};
}

/**
* Generate a suggested contact given an ID.
*
* @param {String} id The ID of the contact to return.
* @return {Object} The contact formatted as a selection item in the menu.
*/
function getSuggestedContact(id) {
  return {
    value: id,
    startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    text: "Contact " + id
  };
}

অন্য কার্ডে ডেটা স্থানান্তর করুন

কোনো ব্যবহারকারী কার্ড থেকে তথ্য জমা দেওয়ার পর, নিম্নলিখিত কাজগুলোর যেকোনোটি করার জন্য আপনাকে অতিরিক্ত কার্ড ফেরত দিতে হতে পারে:

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

প্রাথমিক কার্ড থেকে ইনপুট করা ডেটা স্থানান্তর করতে, আপনি button উইজেটটি actionParameters দিয়ে তৈরি করতে পারেন, যেগুলিতে উইজেটের name এবং ব্যবহারকারীর ইনপুট করা মান থাকবে, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

নোড.জেএস

node/chat/contact-form-app/index.js
{ buttonList: { buttons: [{
  text: "SUBMIT",
  onClick: { action: {
    function: FUNCTION_URL,
    parameters: [
      { key: "actionName", value: "submitDialog" },
      // Pass input values as parameters for last dialog step (submission)
      { key: "contactName", value: name },
      { key: "contactBirthdate", value: birthdate },
      { key: "contactType", value: type }
    ]
  }}
}]}}

FUNCTION_URL পরিবর্তে সেই HTTP এন্ডপয়েন্টটি ব্যবহার করুন যা বাটন ক্লিকগুলো পরিচালনা করে।

পাইথন

python/chat/contact-form-app/main.py
{ 'buttonList': { 'buttons': [{
  'text': "SUBMIT",
  'onClick': { 'action': {
    'function': FUNCTION_URL,
    'parameters': [
      { 'key': "actionName", 'value': "submitDialog" },
      # Pass input values as parameters for last dialog step (submission)
      { 'key': "contactName", 'value': name },
      { 'key': "contactBirthdate", 'value': birthdate },
      { 'key': "contactType", 'value': type }
    ]
  }}
}]}}

FUNCTION_URL পরিবর্তে সেই HTTP এন্ডপয়েন্টটি ব্যবহার করুন যা বাটন ক্লিকগুলো পরিচালনা করে।

জাভা

java/chat/contact-form-app/src/main/java/com/google/chat/contact/App.java
new GoogleAppsCardV1Widget().setButtonList(new GoogleAppsCardV1ButtonList().setButtons(List.of(
  new GoogleAppsCardV1Button()
    .setText("SUBMIT")
    .setOnClick(new GoogleAppsCardV1OnClick().setAction(new GoogleAppsCardV1Action()
      .setFunction(FUNCTION_URL)
      .setParameters(List.of(
        new GoogleAppsCardV1ActionParameter().setKey("actionName").setValue("submitDialog"),
        // Pass input values as parameters for last dialog step (submission)
        new GoogleAppsCardV1ActionParameter().setKey("contactName").setValue(name),
        new GoogleAppsCardV1ActionParameter().setKey("contactBirthdate").setValue(birthdate),
        new GoogleAppsCardV1ActionParameter().setKey("contactType").setValue(type))))))))))));

FUNCTION_URL পরিবর্তে সেই HTTP এন্ডপয়েন্টটি ব্যবহার করুন যা বাটন ক্লিকগুলো পরিচালনা করে।

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

এই উদাহরণটি কার্ডের JSON রিটার্ন করার মাধ্যমে একটি কার্ড মেসেজ পাঠায়। আপনি অ্যাপস স্ক্রিপ্টের কার্ড সার্ভিসটিও ব্যবহার করতে পারেন।

apps-script/chat/contact-form-app/Code.gs
{ buttonList: { buttons: [{
  text: "SUBMIT",
  onClick: { action: {
    function: "submitDialog",
    // Pass input values as parameters for last dialog step (submission)
    parameters: [
      { key: "contactName", value: name },
      { key: "contactBirthdate", value: birthdate },
      { key: "contactType", value: type }
    ]
  }}
}]}}

যখন কোনো ব্যবহারকারী বোতামে ক্লিক করেন, তখন আপনার চ্যাট অ্যাপ একটি ইভেন্ট অবজেক্ট পায়, যেখান থেকে আপনি ডেটা গ্রহণ করতে পারেন।

একটি ফর্ম জমা দেওয়ার প্রতিক্রিয়া জানান

কার্ড মেসেজ বা ডায়ালগ থেকে ডেটা পাওয়ার পর, চ্যাট অ্যাপটি হয় প্রাপ্তি স্বীকার করে অথবা একটি ত্রুটি বার্তা দেখায়।

নিম্নলিখিত উদাহরণে, একটি চ্যাট অ্যাপ কার্ড মেসেজ থেকে জমা দেওয়া একটি ফর্ম সফলভাবে গ্রহণ করার বিষয়টি নিশ্চিত করতে একটি টেক্সট মেসেজ পাঠায়।

নোড.জেএস

node/chat/contact-form-app/index.js
return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
  text: "✅ " + event.commonEventObject.parameters["contactName"] + " has been added to your contacts."
}}}}};

পাইথন

python/chat/contact-form-app/main.py
return { 'hostAppDataAction': { 'chatDataAction': { 'createMessageAction': { 'message': {
  'text': "✅ " + event.get('commonEventObject').get('parameters')["contactName"] + " has been added to your contacts."
}}}}}

জাভা

java/chat/contact-form-app/src/main/java/com/google/chat/contact/App.java
return new GenericJson() {{
  put("hostAppDataAction", new GenericJson() {{
    put("chatDataAction", new GenericJson() {{
      put("createMessageAction", new GenericJson() {{
        put("message", new Message()
          .setText( "✅ " + event.at("/commonEventObject/parameters/contactName").asText() +
                    " has been added to your contacts."));
      }});
    }});
  }});
}};

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

এই উদাহরণটি কার্ড JSON রিটার্ন করার মাধ্যমে একটি কার্ড মেসেজ পাঠায়। আপনি অ্যাপস স্ক্রিপ্ট কার্ড সার্ভিসটিও ব্যবহার করতে পারেন।

apps-script/chat/contact-form-app/Code.gs
return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
  text: "✅ " + event.commonEventObject.parameters["contactName"] + " has been added to your contacts."
}}}}};

একটি ডায়ালগ প্রসেস ও বন্ধ করতে, আপনাকে একটি RenderActions অবজেক্ট রিটার্ন করতে হয়, যা নির্দিষ্ট করে দেয় যে আপনি একটি কনফার্মেশন মেসেজ পাঠাতে চান, মূল মেসেজ বা কার্ড আপডেট করতে চান, নাকি শুধু ডায়ালগটি বন্ধ করতে চান। ধাপগুলোর জন্য, “একটি ডায়ালগ বন্ধ করুন” দেখুন।

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

এই বিভাগে চ্যাটের ডায়ালগ ব্যবহারের সময় নির্দিষ্ট এরর কোড এবং রানটাইম আচরণের সমস্যা সমাধানের ধাপসমূহ দেওয়া হয়েছে।

ডায়ালগ ইন্টারঅ্যাকশনের ফলে "অ্যাড-অনটি চালু করতে অনির্দিষ্ট ত্রুটি" ফেরত আসে।

কোনো ডায়ালগ ব্যবহার করার সময়, যদি আপনি এরর লগে "Unspecified error invoking the add-on." মেসেজ এবং কোড ১৩ দেখতে পান, তবে এটি সাধারণত একটি অভ্যন্তরীণ ত্রুটি নির্দেশ করে অথবা বোঝায় যে চ্যাট অ্যাপের HTTP এন্ডপয়েন্ট অনুরোধটি প্রসেস করতে বা একটি বৈধ প্রতিক্রিয়া ফেরত দিতে ব্যর্থ হয়েছে।

এই ত্রুটিটি সমাধান করতে:

  • কোনো অনিয়ন্ত্রিত ব্যতিক্রম বা ক্র্যাশের জন্য আপনার HTTP এন্ডপয়েন্টের লগ পরীক্ষা করুন।
  • আপনার এন্ডপয়েন্টটি ৩০ সেকেন্ডের মধ্যে অনুরোধে সাড়া দিচ্ছে কিনা তা যাচাই করুন। যদি এন্ডপয়েন্টটি চালু হতে ৩০ সেকেন্ডের বেশি সময় নেয়, তাহলে চ্যাট প্রতিক্রিয়াটি প্রক্রিয়া করতে পারে না এবং ইন্টারঅ্যাকশন ব্যর্থ হয়। বিস্তারিত জানতে রেট লিমিট এবং সেরা অনুশীলনসমূহ দেখুন।
  • আপনার এন্ডপয়েন্ট যেন একটি বৈধ প্রতিক্রিয়া প্রদান করে, তা নিশ্চিত করুন। ডায়ালগ সাবমিশনের জন্য, এন্ডপয়েন্টকে অবশ্যই সঠিক JSON ফরম্যাটে একটি RenderActions অবজেক্ট ফেরত দিতে হবে। যদি প্রতিক্রিয়াটি ত্রুটিপূর্ণ হয় বা এতে প্রয়োজনীয় ফিল্ডগুলো না থাকে, তাহলে ডায়ালগ ইন্টারঅ্যাকশন ব্যর্থ হতে পারে।

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

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