Google Chat के उपयोगकर्ताओं से जानकारी इकट्ठा करना और उसे प्रोसेस करना

इस गाइड में बताया गया है कि Google Chat ऐप्लिकेशन, कार्ड-आधारित इंटरफ़ेस में फ़ॉर्म इनपुट बनाकर, उपयोगकर्ताओं से जानकारी कैसे इकट्ठा और प्रोसेस कर सकते हैं.

पहली इमेज: Chat ऐप्लिकेशन का एक सैंपल, जो संपर्क जानकारी इकट्ठा करने के लिए डायलॉग बॉक्स खोलता है.

चैट ऐप्लिकेशन, Chat में या उसके बाहर कार्रवाइयां करने के लिए, उपयोगकर्ताओं से जानकारी का अनुरोध करते हैं. इनमें ये तरीके भी शामिल हैं:

• सेटिंग कॉन्फ़िगर करें. उदाहरण के लिए, उपयोगकर्ताओं को सूचना सेटिंग को पसंद के मुताबिक बनाने या Chat ऐप्लिकेशन को एक या उससे ज़्यादा स्पेस में कॉन्फ़िगर करने और जोड़ने की अनुमति देने के लिए.
• Google Workspace के अन्य ऐप्लिकेशन में जानकारी बनाएं या अपडेट करें. उदाहरण के लिए, उपयोगकर्ताओं को Google Calendar इवेंट बनाने की अनुमति दें.
• उपयोगकर्ताओं को दूसरे ऐप्लिकेशन या वेब सेवाओं में संसाधनों को ऐक्सेस और अपडेट करने की अनुमति दें. उदाहरण के लिए, Chat ऐप्लिकेशन की मदद से उपयोगकर्ता, सीधे Chat स्पेस से सहायता टिकट की स्थिति अपडेट कर सकते हैं.

ज़रूरी शर्तें

Node.js

Google Chat ऐप्लिकेशन, जिसमें इंटरैक्टिव सुविधाएं चालू हों. एचटीटीपी सेवा का इस्तेमाल करके, इंटरैक्टिव Chat ऐप्लिकेशन बनाने के लिए, यह क्विकस्टार्ट पूरा करें.

Python

Google Chat ऐप्लिकेशन, जिसमें इंटरैक्टिव सुविधाएं चालू हों. एचटीटीपी सेवा का इस्तेमाल करके, इंटरैक्टिव Chat ऐप्लिकेशन बनाने के लिए, यह क्विकस्टार्ट पूरा करें.

Java

Google Chat ऐप्लिकेशन, जिसमें इंटरैक्टिव सुविधाएं चालू हों. एचटीटीपी सेवा का इस्तेमाल करके, इंटरैक्टिव Chat ऐप्लिकेशन बनाने के लिए, यह क्विकस्टार्ट पूरा करें.

Apps Script

Google Chat ऐप्लिकेशन, जिसमें इंटरैक्टिव सुविधाएं चालू हों. Apps Script में इंटरैक्टिव Chat ऐप्लिकेशन बनाने के लिए, यह शुरुआती लेख पढ़ें.

कार्ड का इस्तेमाल करके फ़ॉर्म बनाना

जानकारी इकट्ठा करने के लिए, Chat ऐप्लिकेशन फ़ॉर्म और उनके इनपुट डिज़ाइन करते हैं और उन्हें कार्ड में बनाते हैं. उपयोगकर्ताओं को कार्ड दिखाने के लिए, Chat ऐप्लिकेशन इन Chat इंटरफ़ेस का इस्तेमाल कर सकते हैं:

• ऐसे मैसेज जिनमें एक या उससे ज़्यादा कार्ड शामिल हों.
• होम पेज, यह एक कार्ड होता है जो Chat ऐप्लिकेशन के डायरेक्ट मैसेज में, होम टैब में दिखता है.
• डायलॉग, ये कार्ड होते हैं जो मैसेज और होम पेजों से नई विंडो में खुलते हैं.

चैट ऐप्लिकेशन, इन विजेट का इस्तेमाल करके कार्ड बना सकते हैं:

• फ़ॉर्म इनपुट विजेट, जो उपयोगकर्ताओं से जानकारी का अनुरोध करते हैं. इसके अलावा, फ़ॉर्म इनपुट विजेट में पुष्टि करने की सुविधा जोड़ी जा सकती है. इससे यह पक्का किया जा सकता है कि उपयोगकर्ता सही तरीके से जानकारी डालें और उसे सही फ़ॉर्मैट में डालें. चैट ऐप्लिकेशन, इन फ़ॉर्म इनपुट विजेट का इस्तेमाल कर सकते हैं:

  • फ़्री-फ़ॉर्म या सुझाए गए टेक्स्ट के लिए टेक्स्ट इनपुट (textInput).
  • चुने गए इनपुट (selectionInput), चुने जा सकने वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट होते हैं. जैसे, चेकबॉक्स, रेडियो बटन, और ड्रॉप-डाउन मेन्यू. चुनने के लिए दिए गए इनपुट विजेट, स्टैटिक या डाइनैमिक डेटा सोर्स से भी आइटम पॉप्युलेट कर सकते हैं. उदाहरण के लिए, उपयोगकर्ता उन 'Chat स्पेस' की सूची में से कोई एक चुन सकते हैं जिनके वे सदस्य हैं.
  • तारीख और समय की एंट्री के लिए, तारीख और समय चुनने वाले टूल (dateTimePicker).

• बटन विजेट, ताकि उपयोगकर्ता कार्ड में डाली गई वैल्यू सबमिट कर सकें. उपयोगकर्ता के बटन पर क्लिक करने के बाद, Chat ऐप्लिकेशन अपने पास मौजूद जानकारी को प्रोसेस कर सकता है.

नीचे दिए गए उदाहरण में, कार्ड टेक्स्ट इनपुट, तारीख और समय चुनने वाले टूल, और चुनने के लिए दिए गए विकल्पों का इस्तेमाल करके संपर्क जानकारी इकट्ठा करता है:

इस संपर्क फ़ॉर्म का इस्तेमाल करने वाले Chat ऐप्लिकेशन का उदाहरण देखने के लिए, यह कोड देखें:

Node.js

node/contact-form-app/index.js

GitHub पर देखना

/**
 * The section of the contact card that contains the form input widgets. Used in a dialog and card message.
 * To add and preview widgets, use the Card Builder: https://addons.gsuite.google.com/uikit/builder
 */
const CONTACT_FORM_WIDGETS = [
  {
    "textInput": {
      "name": "contactName",
      "label": "First and last name",
      "type": "SINGLE_LINE"
    }
  },
  {
    "dateTimePicker": {
      "name": "contactBirthdate",
      "label": "Birthdate",
      "type": "DATE_ONLY"
    }
  },
  {
    "selectionInput": {
      "name": "contactType",
      "label": "Contact type",
      "type": "RADIO_BUTTON",
      "items": [
        {
          "text": "Work",
          "value": "Work",
          "selected": false
        },
        {
          "text": "Personal",
          "value": "Personal",
          "selected": false
        }
      ]
    }
  }
];

Python

python/contact-form-app/main.py

GitHub पर देखना

# The section of the contact card that contains the form input widgets. Used in a dialog and card message.
# To add and preview widgets, use the Card Builder: https://addons.gsuite.google.com/uikit/builder
CONTACT_FORM_WIDGETS = [
  {
    "textInput": {
      "name": "contactName",
      "label": "First and last name",
      "type": "SINGLE_LINE"
    }
  },
  {
    "dateTimePicker": {
      "name": "contactBirthdate",
      "label": "Birthdate",
      "type": "DATE_ONLY"
    }
  },
  {
    "selectionInput": {
      "name": "contactType",
      "label": "Contact type",
      "type": "RADIO_BUTTON",
      "items": [
        {
          "text": "Work",
          "value": "Work",
          "selected": False
        },
        {
          "text": "Personal",
          "value": "Personal",
          "selected": False
        }
      ]
    }
  }
]

Java

java/contact-form-app/src/main/java/com/google/chat/contact/App.java

GitHub पर देखना

// The section of the contact card that contains the form input widgets. Used in a dialog and card message.
// To add and preview widgets, use the Card Builder: https://addons.gsuite.google.com/uikit/builder
final static private List<GoogleAppsCardV1Widget> CONTACT_FORM_WIDGETS = List.of(
  new GoogleAppsCardV1Widget().setTextInput(new GoogleAppsCardV1TextInput()
    .setName("contactName")
    .setLabel("First and last name")
    .setType("SINGLE_LINE")),
  new GoogleAppsCardV1Widget().setDateTimePicker(new GoogleAppsCardV1DateTimePicker()
    .setName("contactBirthdate")
    .setLabel("Birthdate")
    .setType("DATE_ONLY")),
  new GoogleAppsCardV1Widget().setSelectionInput(new GoogleAppsCardV1SelectionInput()
    .setName("contactType")
    .setLabel("Contact type")
    .setType("RADIO_BUTTON")
    .setItems(List.of(
      new GoogleAppsCardV1SelectionItem()
        .setText("Work")
        .setValue("Work")
        .setSelected(false),
      new GoogleAppsCardV1SelectionItem()
        .setText("Personal")
        .setValue("Personal")
        .setSelected(false)))));

Apps Script

apps-script/contact-form-app/contactForm.gs

GitHub पर देखना

/**
 * The section of the contact card that contains the form input widgets. Used in a dialog and card message.
 * To add and preview widgets, use the Card Builder: https://addons.gsuite.google.com/uikit/builder
 */
const CONTACT_FORM_WIDGETS = [
  {
    "textInput": {
      "name": "contactName",
      "label": "First and last name",
      "type": "SINGLE_LINE"
    }
  },
  {
    "dateTimePicker": {
      "name": "contactBirthdate",
      "label": "Birthdate",
      "type": "DATE_ONLY"
    }
  },
  {
    "selectionInput": {
      "name": "contactType",
      "label": "Contact type",
      "type": "RADIO_BUTTON",
      "items": [
        {
          "text": "Work",
          "value": "Work",
          "selected": false
        },
        {
          "text": "Personal",
          "value": "Personal",
          "selected": false
        }
      ]
    }
  }
];

जानकारी इकट्ठा करने के लिए इस्तेमाल किए जा सकने वाले इंटरैक्टिव विजेट के ज़्यादा उदाहरणों के लिए, इंटरैक्टिव कार्ड या डायलॉग डिज़ाइन करना लेख पढ़ें.

इंटरैक्टिव विजेट से डेटा पाना

ज़्यादा उदाहरणों के लिए, Google Chat ऐप्लिकेशन के सैंपल देखें.

जब भी उपयोगकर्ता किसी बटन पर क्लिक करते हैं, तो चैट ऐप्लिकेशन को एक CARD_CLICKED इंटरैक्शन इवेंट मिलता है. इसमें इंटरैक्शन की जानकारी होती है. CARD_CLICKED इंटरैक्शन इवेंट के पेलोड में, common.formInputs ऑब्जेक्ट होता है. इसमें उपयोगकर्ता की डाली गई वैल्यू होती हैं.

ऑब्जेक्ट common.formInputs.WIDGET_NAME से वैल्यू वापस पाई जा सकती हैं. यहां WIDGET_NAME, वह name फ़ील्ड है जिसे आपने विजेट के लिए तय किया है. वैल्यू, विजेट के लिए किसी खास डेटा टाइप के तौर पर दिखती हैं. इन्हें Inputs ऑब्जेक्ट के तौर पर दिखाया जाता है.

यहां CARD_CLICKED इंटरैक्शन इवेंट का एक हिस्सा दिखाया गया है, जिसमें उपयोगकर्ता ने हर विजेट के लिए वैल्यू डाली है:

HTTP

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

Apps Script

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

डेटा पाने के लिए, आपका Chat ऐप्लिकेशन इंटरैक्शन इवेंट को मैनेज करता है. इससे, उपयोगकर्ताओं को विजेट में डाली गई वैल्यू मिलती हैं. नीचे दी गई टेबल में, किसी फ़ॉर्म इनपुट विजेट की वैल्यू पाने का तरीका बताया गया है. हर विजेट के लिए, टेबल में वह डेटा टाइप दिखता है जिसे विजेट स्वीकार करता है. साथ ही, इंटरैक्शन इवेंट में वैल्यू को कहां सेव किया जाता है और वैल्यू का उदाहरण भी दिखता है.

अहम जानकारी: अगर आपका Chat ऐप्लिकेशन, Apps Script की मदद से बनाया गया है, तो आपको विजेट के नाम के बाद [""] जोड़ना होगा. उदाहरण के लिए, formInputs.contactName[""].stringInputs.value[0].

फ़ॉर्म इनपुट विजेट	इनपुट डेटा का टाइप	इंटरैक्शन इवेंट से मिली इनपुट वैल्यू	उदाहरण के तौर पर दी गई वैल्यू
textInput	stringInputs	event.common.formInputs.contactName.stringInputs.value[0]	Kai O
selectionInput	stringInputs	पहली या सिर्फ़ एक वैल्यू पाने के लिए, event.common.formInputs.contactType.stringInputs.value[0]	Personal
dateTimePicker, जो सिर्फ़ तारीखें स्वीकार करता है.	dateInput	event.common.formInputs.contactBirthdate.dateInput.msSinceEpoch.	1000425600000

डेटा को किसी दूसरे कार्ड पर ट्रांसफ़र करना

जब कोई उपयोगकर्ता किसी कार्ड की जानकारी सबमिट करता है, तो आपको इनमें से कोई भी काम करने के लिए, अतिरिक्त कार्ड दिखाने पड़ सकते हैं:

• अलग-अलग सेक्शन बनाकर, उपयोगकर्ताओं को लंबे फ़ॉर्म भरने में मदद करें.
• उपयोगकर्ताओं को शुरुआती कार्ड में दी गई जानकारी की झलक दिखाएं और उसकी पुष्टि करने का विकल्प दें, ताकि वे सबमिट करने से पहले अपने जवाबों की समीक्षा कर सकें.
• फ़ॉर्म के बाकी हिस्सों में जानकारी अपने-आप भर जाए. उदाहरण के लिए, उपयोगकर्ताओं को अपॉइंटमेंट बनाने के लिए कहने के लिए, Chat ऐप्लिकेशन एक शुरुआती कार्ड दिखा सकता है. इस कार्ड में, अपॉइंटमेंट की वजह पूछी जाती है. इसके बाद, एक और कार्ड दिखता है. इसमें अपॉइंटमेंट के टाइप के आधार पर, उपलब्ध समय की जानकारी दी जाती है.

शुरुआती कार्ड से डेटा इनपुट ट्रांसफ़र करने के लिए, actionParameters के साथ button विजेट बनाया जा सकता है. इसमें विजेट का name और उपयोगकर्ता की डाली गई वैल्यू शामिल होती है, जैसा कि यहां दिए गए उदाहरण में दिखाया गया है:

Node.js

node/contact-form-app/index.js

GitHub पर देखना

buttonList: { buttons: [{
  text: "Submit",
  onClick: { action: {
    function: "submitForm",
    parameters: [{
      key: "contactName", value: name }, {
      key: "contactBirthdate", value: birthdate }, {
      key: "contactType", value: type
    }]
  }}
}]}

Python

python/contact-form-app/main.py

GitHub पर देखना

'buttonList': { 'buttons': [{
  'text': "Submit",
  'onClick': { 'action': {
    'function': "submitForm",
    'parameters': [{
      'key': "contactName", 'value': name }, {
      'key': "contactBirthdate", 'value': birthdate }, {
      'key': "contactType", 'value': type
    }]
  }}
}]}

Java

java/contact-form-app/src/main/java/com/google/chat/contact/App.java

GitHub पर देखना

new GoogleAppsCardV1Widget().setButtonList(new GoogleAppsCardV1ButtonList().setButtons(List.of(new GoogleAppsCardV1Button()
  .setText("Submit")
  .setOnClick(new GoogleAppsCardV1OnClick().setAction(new GoogleAppsCardV1Action()
    .setFunction("submitForm")
    .setParameters(List.of(
      new GoogleAppsCardV1ActionParameter().setKey("contactName").setValue(name),
      new GoogleAppsCardV1ActionParameter().setKey("contactBirthdate").setValue(birthdate),
      new GoogleAppsCardV1ActionParameter().setKey("contactType").setValue(type))))))))));

Apps Script

apps-script/contact-form-app/main.gs

GitHub पर देखना

buttonList: { buttons: [{
  text: "Submit",
  onClick: { action: {
    function: "submitForm",
    parameters: [{
      key: "contactName", value: name }, {
      key: "contactBirthdate", value: birthdate }, {
      key: "contactType", value: type
    }]
  }}
}]}

जब कोई उपयोगकर्ता बटन पर क्लिक करता है, तो आपके Chat ऐप्लिकेशन को एक CARD_CLICKED इंटरैक्शन इवेंट मिलता है. इस इवेंट से, आपको डेटा मिल सकता है.

फ़ॉर्म सबमिट करने का जवाब देना

कार्ड मैसेज या डायलॉग से डेटा मिलने के बाद, Chat ऐप्लिकेशन जवाब देता है. इसमें, डेटा मिलने की पुष्टि की जाती है या गड़बड़ी का मैसेज दिया जाता है.

नीचे दिए गए उदाहरण में, Chat ऐप्लिकेशन एक टेक्स्ट मैसेज भेजता है. इससे यह पुष्टि की जाती है कि उसे डायलॉग या कार्ड मैसेज से सबमिट किया गया फ़ॉर्म मिल गया है.

Node.js

node/contact-form-app/index.js

GitHub पर देखना

const contactName = event.common.parameters["contactName"];
// Checks to make sure the user entered a contact name.
// If no name value detected, returns an error message.
if (!contactName) {
  const errorMessage = "Don't forget to name your new contact!";
  if (event.dialogEventType === "SUBMIT_DIALOG") {
    return { actionResponse: {
      type: "DIALOG",
      dialogAction: { actionStatus: {
        statusCode: "INVALID_ARGUMENT",
        userFacingMessage: errorMessage
      }}
    }};
  } else {
    return {
      privateMessageViewer: event.user,
      text: errorMessage
    };
  }
}

Python

python/contact-form-app/main.py

GitHub पर देखना

contact_name = event.get('common').get('parameters')["contactName"]
# Checks to make sure the user entered a contact name.
# If no name value detected, returns an error message.
if contact_name == "":
  error_message = "Don't forget to name your new contact!"
  if "SUBMIT_DIALOG" == event.get('dialogEventType'):
    return { 'actionResponse': {
      'type': "DIALOG",
      'dialogAction': { 'actionStatus': {
        'statusCode': "INVALID_ARGUMENT",
        'userFacingMessage': error_message
      }}
    }}
  else:
    return {
      'privateMessageViewer': event.get('user'),
      'text': error_message
    }

Java

java/contact-form-app/src/main/java/com/google/chat/contact/App.java

GitHub पर देखना

String contactName = event.at("/common/parameters/contactName").asText();
// Checks to make sure the user entered a contact name.
// If no name value detected, returns an error message.
if (contactName.isEmpty()) {
  String errorMessage = "Don't forget to name your new contact!";
  if (event.at("/dialogEventType") != null && "SUBMIT_DIALOG".equals(event.at("/dialogEventType").asText())) {
    return new Message().setActionResponse(new ActionResponse()
      .setType("DIALOG")
      .setDialogAction(new DialogAction().setActionStatus(new ActionStatus()
        .setStatusCode("INVALID_ARGUMENT")
        .setUserFacingMessage(errorMessage))));
  } else {
    return new Message()
      .setPrivateMessageViewer(new User().setName(event.at("/user/name").asText()))
      .setText(errorMessage);
  }
}

Apps Script

apps-script/contact-form-app/main.gs

GitHub पर देखना

const contactName = event.common.parameters["contactName"];
// Checks to make sure the user entered a contact name.
// If no name value detected, returns an error message.
if (!contactName) {
  const errorMessage = "Don't forget to name your new contact!";
  if (event.dialogEventType === "SUBMIT_DIALOG") {
    return { actionResponse: {
      type: "DIALOG",
      dialogAction: { actionStatus: {
        statusCode: "INVALID_ARGUMENT",
        userFacingMessage: errorMessage
      }}
    }};
  } else {
    return {
      privateMessageViewer: event.user,
      text: errorMessage
    };
  }
}

किसी डायलॉग को प्रोसेस और बंद करने के लिए, आपको एक ऐसा ActionResponse ऑब्जेक्ट दिखाना होगा जिससे यह पता चलता हो कि आपको पुष्टि करने वाला मैसेज भेजना है, ओरिजनल मैसेज या कार्ड को अपडेट करना है या सिर्फ़ डायलॉग बॉक्स को बंद करना है. इसके लिए, डायलॉग बॉक्स बंद करना लेख पढ़ें.

समस्या हल करें

जब Google Chat ऐप्लिकेशन या कार्ड से कोई गड़बड़ी का मैसेज मिलता है, तो Chat इंटरफ़ेस पर "कोई गड़बड़ी हुई" मैसेज दिखता है. या "आपका अनुरोध प्रोसेस नहीं किया जा सका." कभी-कभी Chat के यूज़र इंटरफ़ेस (यूआई) पर, गड़बड़ी का कोई मैसेज नहीं दिखता. हालांकि, Chat ऐप्लिकेशन या कार्ड से अनचाहा नतीजा मिल सकता है. उदाहरण के लिए, हो सकता है कि कार्ड का मैसेज न दिखे.

ऐसा हो सकता है कि Chat के यूज़र इंटरफ़ेस (यूआई) में गड़बड़ी का मैसेज न दिखे. हालांकि, Chat ऐप्लिकेशन के लिए गड़बड़ी को लॉग करने की सुविधा चालू होने पर, गड़बड़ी के बारे में जानकारी देने वाले मैसेज और लॉग डेटा उपलब्ध होते हैं. इनकी मदद से, गड़बड़ियों को ठीक किया जा सकता है. गड़बड़ियों को देखने, डिबग करने, और ठीक करने में मदद पाने के लिए, Google Chat में गड़बड़ियों को हल करना और उन्हें ठीक करना लेख पढ़ें.

मिलते-जुलते विषय

• संपर्क मैनेजर का सैंपल देखें. यह एक चैट ऐप्लिकेशन है, जो उपयोगकर्ताओं को कार्ड मैसेज और डायलॉग से संपर्क फ़ॉर्म भरने के लिए कहता है.
• इंटरैक्टिव डायलॉग बॉक्स खोलना