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

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

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

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

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

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

Node.js

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

Python

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

Java

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

Apps Script

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

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

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

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

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

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

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

• बटन विजेट, ताकि उपयोगकर्ता कार्ड में डाली गई वैल्यू सबमिट कर सकें. बटन पर क्लिक करने के बाद, 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 ऐप्लिकेशन के लिए गड़बड़ी को लॉग करने की सुविधा चालू होने पर, गड़बड़ी के बारे में जानकारी देने वाले मैसेज और लॉग डेटा उपलब्ध होते हैं. इनकी मदद से, गड़बड़ियों को ठीक किया जा सकता है. गड़बड़ियों को देखने, डिबग करने, और ठीक करने में मदद पाने के लिए, Google Chat में गड़बड़ियों को हल करना और उन्हें ठीक करना लेख पढ़ें.

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

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