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

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

Google Chat-এ অ্যাড-অনগুলি ব্যবহারকারীদের কাছে Google Chat অ্যাপ হিসেবে দেখা যায়। আরও জানতে, এক্সটেন্ড Google চ্যাট ওভারভিউ দেখুন।

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

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

পূর্বশর্ত

Node.js

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

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

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

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

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

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

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

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

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

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

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

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

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

যেখানে BUTTON_TEXT হল সেই টেক্সট যা বোতামে প্রদর্শিত হয় এবং ACTION_FUNCTION হল সেই ফাংশন যা প্রাথমিক ডায়ালগ খোলার জন্য চলে৷

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

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

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

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

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

যেখানে BUTTON_TEXT এমন একটি পাঠ্য যা বোতামে প্রদর্শিত হয় (যেমন Next বা Submit ), WIDGETS এক বা একাধিক ফর্ম ইনপুট উইজেটগুলিকে উপস্থাপন করে এবং ACTION_FUNCTION হল অ্যাকশনের কলব্যাক ফাংশন যা ব্যবহারকারীরা যখন একটি বোতামে ক্লিক করে তখন চলে৷

ডায়ালগ জমা হ্যান্ডেল

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

আপনার চ্যাট অ্যাপকে অবশ্যই নিম্নলিখিতগুলির একটি করে ইভেন্ট অবজেক্ট পরিচালনা করতে হবে:

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

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

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

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

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

Node.js

/**
 * Google Cloud 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 ফেরত দিয়ে একটি কার্ড বার্তা পাঠায়। আপনি Apps স্ক্রিপ্ট কার্ড পরিষেবাও ব্যবহার করতে পারেন৷

/**
 * 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 অবজেক্টটি ফেরত দিন।

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

Node.js

/**
 * 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: "CLOSE_DIALOG"}],
      notification: { text: "Failure, the contact name was missing!" }
    }};
  }

  return { action: {
    navigations: [{ endNavigation: "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: "CLOSE_DIALOG"}],
      notification: { text: "Failure, the contact name was missing!" }
    }};
  }

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

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

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

আপনি যখন ডায়ালগ বন্ধ করেন, তখন আপনি একটি নতুন বার্তা পাঠাতে বা বিদ্যমান একটি আপডেট করতে পারেন৷

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

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

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

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

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

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