ইন্টারেক্টিভ ডায়ালগ তৈরি করুন

এই পৃষ্ঠায় বর্ণনা করা হয়েছে কিভাবে একটি Google Chat অ্যাপ ইউজার ইন্টারফেস (UI) প্রদর্শনের জন্য ডায়ালগ খুলতে পারে এবং ব্যবহারকারীদের প্রতিক্রিয়া জানাতে পারে।

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

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

পূর্বশর্ত

HTTP সম্পর্কে

একটি Google Workspace অ্যাড-অন যা Google Chat কে প্রসারিত করে। এটি তৈরি করতে, HTTP কুইকস্টার্ট সম্পূর্ণ করুন।

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

একটি Google Workspace অ্যাড-অন যা Google Chat কে প্রসারিত করে। এটি তৈরি করতে, Apps Script quickstart সম্পূর্ণ করুন।

একটি ডায়ালগ খুলুন

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

এই বিভাগটি ব্যাখ্যা করে যে কীভাবে নিম্নলিখিত কাজগুলি করে একটি সংলাপ সেট আপ করতে হয় এবং প্রতিক্রিয়া জানাতে হয়:

  1. ব্যবহারকারীর ইন্টারঅ্যাকশন থেকে ডায়ালগ অনুরোধটি ট্রিগার করুন।
  2. একটি ডায়ালগ খুলে এবং ফিরে এসে অনুরোধটি পরিচালনা করুন।
  3. ব্যবহারকারীরা তথ্য জমা দেওয়ার পরে, ডায়ালগটি বন্ধ করে অথবা অন্য একটি ডায়ালগ ফিরিয়ে দিয়ে জমাটি প্রক্রিয়া করুন।

একটি ডায়ালগ অনুরোধ ট্রিগার করুন

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

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

  • একটি কমান্ডের উত্তর দিন। একটি কমান্ড থেকে অনুরোধটি ট্রিগার করতে, কমান্ডটি কনফিগার করার সময় আপনাকে একটি ডায়ালগ খুলবে চেকবক্সটি চেক করতে হবে।
  • একটি বার্তায় একটি বোতাম ক্লিকের উত্তর দিন , হয় একটি কার্ডের অংশ হিসাবে অথবা বার্তার নীচে। একটি বার্তার একটি বোতাম থেকে অনুরোধটি ট্রিগার করতে, আপনি বোতামটির onClick interaction OPEN_DIALOG এ সেট করে কনফিগার করতে পারেন।
ডায়ালগ চালু করার বোতাম
চিত্র ২ : একটি চ্যাট অ্যাপ একটি বার্তা পাঠায় যা ব্যবহারকারীদের /addContact স্ল্যাশ কমান্ড ব্যবহার করতে অনুরোধ করে।
বার্তাটিতে একটি বোতামও রয়েছে যা ব্যবহারকারীরা কমান্ডটি ট্রিগার করতে ক্লিক করতে পারেন।

নিম্নলিখিত JSON দেখায় কিভাবে একটি কার্ড বার্তার একটি বোতাম থেকে একটি ডায়ালগ অনুরোধ ট্রিগার করতে হয়। ডায়ালগটি খুলতে, বোতামের onClick.action.interaction ক্ষেত্রটি OPEN_DIALOG এ সেট করুন:

{
  "buttonList": { "buttons": [{
    "text": "BUTTON_TEXT",
    "onClick": { "action": {
      "function": "ACTION_FUNCTION",
      "interaction": "OPEN_DIALOG"
    }}
  }]}
}

যেখানে BUTTON_TEXT হল বোতামে প্রদর্শিত টেক্সট এবং ACTION_FUNCTION হল ফাংশন যা প্রাথমিক ডায়ালগ খুলতে কাজ করে। HTTP এন্ডপয়েন্ট ব্যবহার করে তৈরি অ্যাড-অনের জন্য, ACTION_FUNCTION সম্পূর্ণ এন্ডপয়েন্ট HTTP URL নির্দেশ করবে।

প্রাথমিক ডায়ালগ খুলুন

যখন একজন ব্যবহারকারী একটি ডায়ালগ অনুরোধ ট্রিগার করেন, তখন আপনার চ্যাট অ্যাপটি একটি ইভেন্ট অবজেক্ট পায় যার একটি পেলোড থাকে যা একটি dialogEventType অবজেক্টকে REQUEST_DIALOG হিসেবে নির্দিষ্ট করে।

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

নিম্নলিখিত JSON দেখায় যে কীভাবে একটি চ্যাট অ্যাপ একটি ডায়ালগ খোলার প্রতিক্রিয়া ফেরত দেয়:

{
  "action": { "navigations": [{ "pushCard": { "sections": [{ "widgets": [{
    WIDGETS,
    { "buttonList": { "buttons": [{
      "text": "BUTTON_TEXT",
      "onClick": {
        "action": { "function": "ACTION_FUNCTION" }
      }
    }]}}
  }]}]}}]}
}

যেখানে BUTTON_TEXT হল বোতামে প্রদর্শিত টেক্সট (যেমন Next বা Submit ), WIDGETS হল এক বা একাধিক ফর্ম ইনপুট উইজেট প্রতিনিধিত্ব করে এবং ACTION_FUNCTION হল অ্যাকশনের কলব্যাক ফাংশন যা ব্যবহারকারীরা যখন একটি বোতামে ক্লিক করেন তখন চলে। HTTP এন্ডপয়েন্ট ব্যবহার করার সময়, এটি সম্পূর্ণ HTTP URL-এর দিকে নির্দেশ করা উচিত।

ডায়ালগ জমা দেওয়ার কাজটি পরিচালনা করুন

যখন ব্যবহারকারীরা একটি ডায়ালগ জমা দেওয়ার বোতামে ক্লিক করেন, তখন আপনার চ্যাট অ্যাপটি একটি ButtonClickedPayload অবজেক্ট সহ একটি ইভেন্ট অবজেক্ট পায়। পেলোডে, dialogEventType SUBMIT_DIALOG তে সেট করা থাকে। ডায়ালগে তথ্য কীভাবে সংগ্রহ এবং প্রক্রিয়া করতে হয় তা বুঝতে, Google Chat ব্যবহারকারীদের কাছ থেকে তথ্য সংগ্রহ এবং প্রক্রিয়া করুন দেখুন।

আপনার চ্যাট অ্যাপকে নিম্নলিখিত যেকোনো একটি করে ইভেন্ট অবজেক্টের প্রতি সাড়া দিতে হবে:

ঐচ্ছিক: আরেকটি ডায়ালগ ফেরত দিন

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

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

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

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

নোড.জেএস

/**
 * Google Cloud Run function that handles all Google Workspace Add On events for
 * the contact manager app.
 *
 * @param {Object} req Request sent from Google Chat space
 * @param {Object} res Response to send back
 */
exports.contactManager = function contactManager(req, res) {
  const chatEvent = req.body.chat;
  // Handle MESSAGE events
  if(chatEvent.messagePayload) {
    return res.send(handleMessage(req.body));
  // Handle button clicks
  } else if(chatEvent.buttonClickedPayload) {
    switch(req.body.commonEventObject.parameters.actionName) {
        case "openInitialDialog":
            return res.send(openInitialDialog(req.body));
        case "openConfirmationDialog":
            return res.send(openConfirmationDialog(req.body));
        case "submitDialog":
            return res.send(submitDialog(req.body));
    }
  }
};

/**
 * Responds to a message in Google Chat.
 *
 * @param {Object} event The event object from the Google Workspace add-on.
 * @return {Object} response that handles dialogs.
 */
function handleMessage(event) {
  // Reply with a message that contains a button to open the initial dialog
  return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
    text: "To add a contact, use the `ADD CONTACT` button below.",
    accessoryWidgets: [{ buttonList: { buttons: [{
      text: "ADD CONTACT",
      onClick: { action: {
        // Use runtime environment variable set with self URL
        function: process.env.BASE_URL,
        parameters: [{ key: "actionName", value: "openInitialDialog" }],
        interaction: "OPEN_DIALOG"
      }}
    }]}}]
  }}}}};
}

/**
 * Opens the initial step of the dialog that lets users add contact details.
 *
 * @param {Object} event The event object from the Google Workspace add-on.
 * @return {Object} open the dialog.
 */
function openInitialDialog(event) {
  return { action: { navigations: [{ pushCard: { sections: [{ widgets: [{
    textInput: {
      name: "contactName",
      label: "First and last name",
      type: "SINGLE_LINE"
    }},
    WIDGETS, {
    buttonList: { buttons: [{
      text: "NEXT",
      onClick: { action: {
        // Use runtime environment variable set with self URL
        function: process.env.BASE_URL,
        parameters: [{ key: "actionName", value: "openConfirmationDialog" }]
      }}
    }]}}
  ]}]}}]}};
}

/**
 * Opens the second step of the dialog that lets users confirm details.
 *
 * @param {Object} event The event object from the Google Workspace add-on.
 * @return {Object} update the dialog.
 */
function openConfirmationDialog(event) {
  // Retrieve the form input values
  const name = event.commonEventObject.formInputs["contactName"].stringInputs.value[0];
  return { action: { navigations: [{ pushCard: { sections: [{ widgets: [{
    // Display the input values for confirmation
    textParagraph: { text: "<b>Name:</b> " + name }},
    WIDGETS, {
    buttonList: { buttons: [{
      text: "SUBMIT",
      onClick: { action: {
        // Use runtime environment variable set with self URL
        function: process.env.BASE_URL,
        parameters: [{
          key: "actionName", value: "submitDialog" }, {
          // Pass input values as parameters for last dialog step (submission)
          key: "contactName", value: name
        }]
      }}
    }]}}]
  }]}}]}};
}

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

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

/**
 * Responds to a message in Google Chat.
 *
 * @param {Object} event The event object from the Google Workspace add-on.
 * @return {Object} response that handles dialogs.
 */
function onMessage(event) {
  // Reply with a message that contains a button to open the initial dialog
  return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
    text: "To add a contact, use the `ADD CONTACT` button below.",
    accessoryWidgets: [{ buttonList: { buttons: [{
      text: "ADD CONTACT",
      onClick: { action: {
        function: "openInitialDialog",
        interaction: "OPEN_DIALOG"
      }}
    }]}}]
  }}}}};
}

/**
 * Opens the initial step of the dialog that lets users add contact details.
 *
 * @param {Object} event The event object from the Google Workspace add-on.
 * @return {Object} open the dialog.
 */
function openInitialDialog(event) {
  return { action: { navigations: [{ pushCard: { sections: [{ widgets: [{
    textInput: {
      name: "contactName",
      label: "First and last name",
      type: "SINGLE_LINE"
    }},
    WIDGETS, {
    buttonList: { buttons: [{
      text: "NEXT",
      onClick: { action: { function : "openConfirmationDialog" }}
    }]}}
  ]}]}}]}};
}

/**
 * Opens the second step of the dialog that lets users confirm details.
 *
 * @param {Object} event The event object from the Google Workspace add-on.
 * @return {Object} update the dialog.
 */
function openConfirmationDialog(event) {
  // Retrieve the form input values
  const name = event.commonEventObject.formInputs["contactName"].stringInputs.value[0];
  return { action: { navigations: [{ pushCard: { sections: [{ widgets: [{
    // Display the input values for confirmation
    textParagraph: { text: "<b>Name:</b> " + name }},
    WIDGETS, {
    buttonList: { buttons: [{
      text: "SUBMIT",
      onClick: { action: {
        function: "submitDialog",
        // Pass input values as parameters for last dialog step (submission)
        parameters: [{ key: "contactName", value: name }]
      }}
    }]}}]
  }]}}]}};
}

যেখানে WIDGETS অন্য যেকোনো ফর্ম ইনপুট উইজেটকে প্রতিনিধিত্ব করে।

ডায়ালগ বন্ধ করুন

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

  • isDialogEvent true
  • dialogEventType হল SUBMIT_DIALOG

চ্যাট অ্যাপটি EndNavigation CLOSE_DIALOG তে সেট করা একটি RenderActions অবজেক্ট ফিরিয়ে দেবে।

ঐচ্ছিক: একটি অস্থায়ী বিজ্ঞপ্তি প্রদর্শন করুন

যখন আপনি ডায়ালগটি বন্ধ করবেন, তখন আপনি অ্যাপটির সাথে ইন্টারঅ্যাক্ট করা ব্যবহারকারীকে একটি অস্থায়ী টেক্সট বিজ্ঞপ্তিও প্রদর্শন করতে পারবেন।

একটি বিজ্ঞপ্তি প্রদর্শন করতে, ফিল্ড notification সেট সহ RenderActions অবজেক্টটি ফেরত দিন।

নিম্নলিখিত উদাহরণটি পরীক্ষা করে যে প্যারামিটারগুলি বৈধ এবং ফলাফলের উপর নির্ভর করে টেক্সট বিজ্ঞপ্তি সহ ডায়ালগটি বন্ধ করে:

নোড.জেএস

/**
 * Handles submission and closes the dialog.
 *
 * @param {Object} event The event object from the Google Workspace add-on.
 * @return {Object} close the dialog with a status in text notification.
 */
function submitDialog(event) {
  // Validate the parameters.
  if (!event.commonEventObject.parameters["contactName"]) {
    return { action: {
      navigations: [{ endNavigation: { action: "CLOSE_DIALOG"}}],
      notification: { text: "Failure, the contact name was missing!" }
    }};
  }

  return { action: {
    navigations: [{ endNavigation: { action: "CLOSE_DIALOG"}}],
    notification: { text: "Success, the contact was added!" }
  }};
}

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

/**
 * Handles submission and closes the dialog.
 *
 * @param {Object} event The event object from the Google Workspace add-on.
 * @return {Object} close the dialog with a status in text notification.
 */
function submitDialog(event) {
  // Validate the parameters.
  if (!event.commonEventObject.parameters["contactName"]) {
    return { action: {
      navigations: [{ endNavigation: { action: "CLOSE_DIALOG"}}],
      notification: { text: "Failure, the contact name was missing!" }
    }};
  }

  return { action: {
    navigations: [{ endNavigation: {action: "CLOSE_DIALOG"}}],
    notification: { text: "Success, the contact was added!" }
  }};
}

ডায়ালগগুলির মধ্যে প্যারামিটার পাস করার বিশদ বিবরণের জন্য, অন্য কার্ডে ডেটা স্থানান্তর দেখুন।

ঐচ্ছিক: একটি নিশ্চিতকরণ চ্যাট বার্তা পাঠান

ডায়ালগটি বন্ধ করলে, আপনি একটি নতুন চ্যাট মেসেজ পাঠাতে পারেন, অথবা বিদ্যমান মেসেজটি আপডেট করতে পারেন।

একটি নতুন বার্তা পাঠাতে, নতুন বার্তার সাথে CreateMessageAction সেট করা ক্ষেত্র সহ একটি DataActions অবজেক্ট ফেরত দিন। উদাহরণস্বরূপ, ডায়ালগ বন্ধ করে একটি টেক্সট বার্তা পাঠাতে, নিম্নলিখিতটি ফেরত দিন:

{ "hostAppDataAction": { "chatDataAction": { "createMessageAction": { "message": {
  "text": "Your information has been submitted."
}}}}}

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

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

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

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