Google Chat में संपर्कों को इकट्ठा और मैनेज करना

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

Chat ऐप्लिकेशन के काम करने का तरीका देखें:

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

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

मकसद

आर्किटेक्चर

Chat ऐप्लिकेशन, Google Apps Script में बनाया गया है. यह Google Workspace ऐड-ऑन के तौर पर काम करता है और Google Chat की सुविधाओं को बढ़ाता है. यह उपयोगकर्ताओं की कार्रवाइयों (onMessage, onAppCommand, और बटन क्लिक, जो openInitialDialog, openConfirmationDialog, और submitForm को चालू करते हैं) के हिसाब से काम करता है. इससे Chat ऐप्लिकेशन के उपयोगकर्ताओं के अनुरोधों को प्रोसेस किया जाता है और उन्हें जवाब दिया जाता है.

यहां बताया गया है कि कोई उपयोगकर्ता, Chat ऐप्लिकेशन के साथ कैसे इंटरैक्ट कर सकता है:

  1. कोई उपयोगकर्ता Chat ऐप्लिकेशन में कोई डायरेक्ट मैसेज खोलता है या Chat ऐप्लिकेशन को किसी मौजूदा स्पेस में जोड़ता है.

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

    • यह @नाम और डायरेक्ट मैसेज (onMessage) मिलने पर, संपर्क करने के लिए फ़ॉर्म वाले कार्ड मैसेज के साथ जवाब देता है.
    • यह स्लैश कमांड /addContact (onAppCommand) का जवाब देता है. इसके लिए, यह संपर्क करने के लिए फ़ॉर्म वाला एक डायलॉग बॉक्स खोलता है.
    • यह /about (onAppCommand) स्लैश कमांड का जवाब, टेक्स्ट मैसेज के तौर पर देता है. इसमें संपर्क जोड़ें बटन होता है. इस बटन पर क्लिक करके, उपयोगकर्ता openInitialDialog को शुरू कर सकते हैं और संपर्क करने के लिए फ़ॉर्म वाला डायलॉग बॉक्स खोल सकते हैं.
  3. संपर्क करने के लिए फ़ॉर्म दिखने पर, उपयोगकर्ता इन फ़ील्ड और विजेट में संपर्क जानकारी डालता है:

    • पहला और आखिरी नाम: यह एक ऐसा textInput विजेट है जो स्ट्रिंग स्वीकार करता है.
    • जन्म की तारीख: यह एक ऐसा dateTimePicker विजेट है जिसमें सिर्फ़ तारीखें डाली जा सकती हैं.
    • संपर्क टाइप: यह selectionInputरेडियो बटन का एक ऐसा विजेट है जिसकी मदद से उपयोगकर्ता, एक स्ट्रिंग वैल्यू (Personal या Work) चुनकर सबमिट कर सकते हैं.
    • समीक्षा करें और सबमिट करें बटन: यह buttonList ऐरे है. इसमें button विजेट होता है. उपयोगकर्ता इस पर क्लिक करके, अपनी दी गई वैल्यू सबमिट करता है.
  4. Google Chat ऐप्लिकेशन, उपयोगकर्ता की ओर से डाली गई वैल्यू को प्रोसेस करने के लिए openConfirmationDialog को शुरू करता है. इसके बाद, पुष्टि करने वाले कार्ड में वैल्यू दिखाता है.

  5. उपयोगकर्ता, पुष्टि करने वाले कार्ड की समीक्षा करता है. इसके बाद, submitForm को शुरू करने और संपर्क जानकारी को फ़ाइनल करने के लिए, सबमिट करें बटन पर क्लिक करता है.

  6. Google Chat ऐप्लिकेशन, एक निजी टेक्स्ट मैसेज भेजता है. इससे पुष्टि होती है कि आपने फ़ॉर्म सबमिट कर दिया है.

एनवायरमेंट तैयार करना

इस सेक्शन में, Chat ऐप्लिकेशन के लिए Google Cloud प्रोजेक्ट को कॉन्फ़िगर करने का तरीका बताया गया है.

Google API Console में अपना क्लाउड प्रोजेक्ट खोलें

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

  1. Google API Console में, कोई प्रोजेक्ट चुनें पेज पर जाएं.

    कोई क्लाउड प्रोजेक्ट चुनें

  2. वह Google Cloud प्रोजेक्ट चुनें जिसका आपको इस्तेमाल करना है. इसके अलावा, प्रोजेक्ट बनाएं पर क्लिक करें और स्क्रीन पर दिए गए निर्देशों का पालन करें. Google Cloud प्रोजेक्ट बनाने पर, आपको प्रोजेक्ट के लिए बिलिंग की सुविधा चालू करनी पड़ सकती है.

पुष्टि करने और अनुमति देने की सुविधा सेट अप करना

Google Chat ऐप्लिकेशन के लिए, आपको OAuth के लिए सहमति की स्क्रीन कॉन्फ़िगर करनी होगी. इससे उपयोगकर्ता, Google Workspace ऐप्लिकेशन में आपके ऐप्लिकेशन को अनुमति दे पाएंगे. इनमें Google Chat भी शामिल है.

इस ट्यूटोरियल में, आपको एक ऐसा Chat ऐप्लिकेशन डिप्लॉय करना है जिसका इस्तेमाल सिर्फ़ टेस्टिंग और इंटरनल तौर पर किया जा सकता है. इसलिए, सहमति वाली स्क्रीन के लिए प्लेसहोल्डर की जानकारी का इस्तेमाल किया जा सकता है. Chat ऐप्लिकेशन को पब्लिश करने से पहले, प्लेसहोल्डर की जानकारी को असली जानकारी से बदलें.

  1. Google API Console में, मेन्यू &gt Google Auth platform &gt Branding पर जाएं.

    ब्रैंडिंग पर जाएं

  2. अगर आपने Google Auth प्लैटफ़ॉर्म को पहले ही कॉन्फ़िगर कर लिया है, तो ब्रैंडिंग, दर्शक, और डेटा ऐक्सेस में जाकर, OAuth के लिए सहमति की स्क्रीन से जुड़ी ये सेटिंग कॉन्फ़िगर की जा सकती हैं. अगर आपको यह मैसेज दिखता है कि Google Auth प्लैटफ़ॉर्म को अब तक कॉन्फ़िगर नहीं किया गया है, तो शुरू करें पर क्लिक करें:

    1. ऐप्लिकेशन की जानकारी में जाकर, ऐप्लिकेशन का नाम में Contact Manager टाइप करें.
    2. उपयोगकर्ता सहायता के लिए ईमेल पता में, अपना ईमेल पता या कोई सही Google ग्रुप चुनें.
    3. आगे बढ़ें पर क्लिक करें.
    4. दर्शक में जाकर, इंटरनल चुनें. अगर इंटरनल विकल्प नहीं चुना जा सकता, तो एक्सटर्नल विकल्प चुनें.
    5. आगे बढ़ें पर क्लिक करें.
    6. संपर्क जानकारी में जाकर, वह ईमेल पता डालें जिस पर आपको अपने प्रोजेक्ट में हुए किसी भी बदलाव की सूचना मिल सके.
    7. आगे बढ़ें पर क्लिक करें.
    8. पूरा करें में जाकर, Google API सेवाओं के उपयोगकर्ता के डेटा से जुड़ी नीति पढ़ें. अगर आप इससे सहमत हैं, तो मैं Google API सेवाओं के उपयोगकर्ता के डेटा से जुड़ी नीति से सहमत हूं को चुनें.
    9. जारी रखें पर क्लिक करें.
    10. बनाएं पर क्लिक करें.
    11. अगर आपने उपयोगकर्ता के टाइप के लिए बाहरी चुना है, तो टेस्ट करने वाले उपयोगकर्ताओं को जोड़ें:
      1. ऑडियंस पर क्लिक करें.
      2. टेस्ट ऐप्लिकेशन इस्तेमाल करने वाले लोग में जाकर, उपयोगकर्ता जोड़ें पर क्लिक करें.
      3. अपना ईमेल पता और टेस्ट के लिए अनुमति पा चुके अन्य उपयोगकर्ताओं के ईमेल पते डालें. इसके बाद, सेव करें पर क्लिक करें.

Chat ऐप्लिकेशन बनाना और उसे डिप्लॉय करना

यहां दिए गए सेक्शन में, आपको अपने Chat ऐप्लिकेशन के लिए ऐप्लिकेशन कोड (Code.gs और appsscript.json) की मदद से, Apps Script प्रोजेक्ट बनाने और उसे अपडेट करने का तरीका बताया गया है.

इसके अलावा, GitHub पर पूरा प्रोजेक्ट देखा जा सकता है.

GitHub पर देखें

यहां हर फ़ाइल के बारे में खास जानकारी दी गई है:

Code.gs

यह ऐप्लिकेशन के सभी लॉजिक को मैनेज करता है. इसमें उपयोगकर्ता के इंटरैक्शन (onMessage, onAppCommand, openInitialDialog, openConfirmationDialog, और submitForm) शामिल हैं. साथ ही, इसमें मैसेज और डायलॉग में कार्ड में दिखाए गए फ़ॉर्म इनपुट विजेट भी शामिल हैं.

Code.gs कोड देखना

apps-script/chat/contact-form-app/Code.gs
/**
 * Copyright 2025 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * 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"
    }},
    { 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 }
      ]
    }},
    { 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];
  const birthdate = event.commonEventObject.formInputs["contactBirthdate"].dateInput.msSinceEpoch;
  const type = event.commonEventObject.formInputs["contactType"].stringInputs.value[0];
  // Display the input values for confirmation
  return { action: { navigations: [{ pushCard: { sections: [{ widgets: [
    { textParagraph: { text: "Confirm contact information and submit:" }},
    { textParagraph: { text: "<b>Name:</b> " + name }},
    { textParagraph: { text: "<b>Birthday:</b> " + new Date(birthdate) }},
    { textParagraph: { text: "<b>Type:</b> " + type }},
    { 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 }
        ]
      }}
    }]}}
  ]}]}}]}};
}

/**
 * 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 or message.
 */
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 { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
    text: "✅ " + event.commonEventObject.parameters["contactName"] + " has been added to your contacts."
  }}}}};
}
appsscript.json

Apps Script मेनिफ़ेस्ट, Chat ऐप्लिकेशन के लिए Apps Script प्रोजेक्ट को तय और कॉन्फ़िगर करता है.

appsscript.json कोड देखना

apps-script/chat/contact-form-app/appsscript.json
{
  "timeZone": "America/Los_Angeles",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "addOns": {
    "common": {
      "name": "Contact Form app",
      "logoUrl": "https://developers.google.com/workspace/add-ons/images/contact-icon.png"
    },
    "chat": {}
  }
}

Apps Script प्रोजेक्ट बनाना

Code.gs और appsscript.json फ़ाइलों से Apps Script प्रोजेक्ट बनाने के लिए:

  1. Google Apps Script पर जाएं और नया प्रोजेक्ट पर क्लिक करें.
  2. अपने Apps Script प्रोजेक्ट का नाम डालें:

    1. बिना टाइटल वाला प्रोजेक्ट पर क्लिक करें.

    2. प्रोजेक्ट का टाइटल में, Contact Manager - Google Chat app टाइप करें.

    3. नाम बदलें पर क्लिक करें.

  3. Code.gs के कॉन्टेंट को ऊपर दिए गए Code.gs के सैंपल कोड से बदलें.

  4. प्रोजेक्ट सेटिंग प्रोजेक्ट सेटिंग का आइकॉन पर क्लिक करें. इसके बाद, एडिटर में "appsscript.json" मेनिफ़ेस्ट फ़ाइल दिखाएं को चुनें.

  5. एडिटर पर वापस जाएं और appsscript.json के कॉन्टेंट को ऊपर दिए गए appsscript.json मेनिफ़ेस्ट कोड से बदलें. इसके बाद, अपने प्रोजेक्ट को सेव करें.

अगर आपको आने वाले समय में कुछ Google API का इस्तेमाल करना है या अपना ऐप्लिकेशन पब्लिश करना है, तो आपको अपने क्लाउड प्रोजेक्ट को Apps Script प्रोजेक्ट से जोड़ना होगा. इस गाइड के लिए, आपको ऐसा करने की ज़रूरत नहीं है. ज़्यादा जानने के लिए, Google Cloud प्रोजेक्ट गाइड देखें.

Apps Script का डिप्लॉयमेंट बनाना

अब जब पूरा कोड तैयार हो गया है, तो Apps Script प्रोजेक्ट को डिप्लॉय करें. Google Cloud में Chat ऐप्लिकेशन को कॉन्फ़िगर करते समय, डिप्लॉयमेंट आईडी का इस्तेमाल किया जाता है.

  1. Apps Script में, Chat ऐप्लिकेशन का प्रोजेक्ट खोलें.

    Apps Script पर जाएं

  2. डिप्लॉय करें > नया डिप्लॉयमेंट पर क्लिक करें.

  3. अगर ऐड-ऑन पहले से नहीं चुना गया है, तो टाइप चुनें के बगल में मौजूद, डिप्लॉयमेंट टाइप प्रोजेक्ट सेटिंग का आइकॉन पर क्लिक करें. इसके बाद, ऐड-ऑन चुनें.

  4. जानकारी में, इस वर्शन के बारे में जानकारी डालें. जैसे, Test of Contact Manager.

  5. लागू करें पर क्लिक करें. Apps Script, डिप्लॉयमेंट के पूरा होने की सूचना देता है और डिप्लॉयमेंट आईडी उपलब्ध कराता है.

  6. डिप्लॉयमेंट आईडी कॉपी करने के लिए, कॉपी करें पर क्लिक करें. इसके बाद, हो गया पर क्लिक करें.

Google API Console में Chat ऐप्लिकेशन को कॉन्फ़िगर करना

इस सेक्शन में, Google API Console में Google Chat API को कॉन्फ़िगर करने का तरीका बताया गया है. इसमें आपके Chat ऐप्लिकेशन के बारे में जानकारी शामिल है. साथ ही, इसमें Apps Script प्रोजेक्ट से बनाए गए डिप्लॉयमेंट का आईडी भी शामिल है.

  1. Google API Console में, मेन्यू > एपीआई और सेवाएं > चालू किए गए एपीआई और सेवाएं > Google Chat API > कॉन्फ़िगरेशन पर क्लिक करें.

    Chat API कॉन्फ़िगरेशन पर जाएं

  2. ऐप्लिकेशन का नाम में, Contact Manager टाइप करें.

  3. अवतार का यूआरएल में, https://developers.google.com/chat/images/contact-icon.png टाइप करें.

  4. ब्यौरा में जाकर, Manage your personal and business contacts टाइप करें.

  5. इंटरैक्टिव सुविधाएं चालू करें टॉगल पर क्लिक करके उसे चालू करें.

  6. सुविधाएं में जाकर, स्पेस और ग्रुप बातचीत में शामिल हों को चुनें.

  7. कनेक्शन की सेटिंग में जाकर, Apps Script को चुनें.

  8. Deployment ID में, Apps Script का वह Deployment ID चिपकाएं जिसे आपने Apps Script का डिप्लॉयमेंट बनाते समय पिछले सेक्शन में कॉपी किया था.

  9. ट्रिगर में जाकर, उन फ़ंक्शन को कॉन्फ़िगर करें जो उपयोगकर्ता के इंटरैक्शन का जवाब देते हैं:

    • मैसेज ट्रिगर के लिए, onMessage डालें.
    • ऐप्लिकेशन कमांड ट्रिगर के लिए, onAppCommand डालें.
  10. कमांड में जाकर, स्लैश कमांड /about और /addContact सेट अप करें:

    1. पहली स्लैश कमांड सेट अप करने के लिए, कमांड जोड़ें पर क्लिक करें.
    2. कमांड आईडी में, 1 टाइप करें.
    3. जानकारी में जाकर, Learn how to use this Chat app to manage your contacts टाइप करें.
    4. कमांड टाइप में जाकर, Slash command चुनें.
    5. स्लैश कमांड का नाम में, /about टाइप करें.
    6. हो गया पर क्लिक करें.
    7. कोई दूसरी स्लैश कमांड सेट अप करने के लिए, कमांड जोड़ें पर क्लिक करें.
    8. कमांड आईडी में, 2 टाइप करें.
    9. जानकारी में जाकर, Submit information about a contact टाइप करें.
    10. कमांड टाइप में जाकर, Slash command चुनें.
    11. स्लैश कमांड का नाम में, /addContact टाइप करें.
    12. डायलॉग बॉक्स खोलता है को चुनें.
    13. हो गया पर क्लिक करें.
  11. दिखने की सेटिंग में जाकर, इस Chat ऐप्लिकेशन को YOUR DOMAIN में मौजूद चुनिंदा लोगों और ग्रुप के लिए उपलब्ध कराएं चेकबॉक्स को चुनें. इसके बाद, अपना ईमेल पता डालें.

  12. लॉग में जाकर, लॉगिंग में लॉग की गई गड़बड़ियां चुनें.

  13. सेव करें पर क्लिक करें. आपको कॉन्फ़िगरेशन सेव होने का मैसेज दिखेगा.

Chat ऐप्लिकेशन, Chat में इंस्टॉल और टेस्ट करने के लिए तैयार है.

Chat ऐप्लिकेशन को आज़माना

Chat ऐप्लिकेशन को आज़माने के लिए, Chat ऐप्लिकेशन में कोई डायरेक्ट मैसेज स्पेस खोलें और मैसेज भेजें:

  1. उस Google Workspace खाते से Google Chat खोलें जिसका इस्तेमाल आपने भरोसेमंद टेस्टर के तौर पर खुद को जोड़ने के लिए किया था.

    Google Chat पर जाएं

  2. नई चैट पर क्लिक करें.
  3. एक या उससे ज़्यादा लोगों को जोड़ें फ़ील्ड में, अपने Chat ऐप्लिकेशन का नाम टाइप करें.
  4. नतीजों में से अपना Chat ऐप्लिकेशन चुनें. एक डायरेक्ट मैसेज खुलता है.

  1. Chat ऐप्लिकेशन के साथ नए डायरेक्ट मैसेज में, /addContact टाइप करें और enter दबाएं.

  2. इसके बाद खुलने वाले डायलॉग बॉक्स में, संपर्क जानकारी डालें:

    1. नाम और सरनेम टेक्स्ट फ़ील्ड में, कोई नाम डालें.
    2. जन्मदिन के लिए तारीख चुनने वाले टूल में, कोई तारीख चुनें.
    3. संपर्क टाइप में जाकर, ऑफ़िस या निजी रेडियो बटन को चुनें.
  3. समीक्षा करें और सबमिट करें पर क्लिक करें.

  4. पुष्टि करने वाले डायलॉग बॉक्स में, सबमिट की गई जानकारी देखें और सबमिट करें पर क्लिक करें. Chat ऐप्लिकेशन, ✅ CONTACT NAME has been added to your contacts. मैसेज के साथ जवाब देता है.

  5. इसके अलावा, संपर्क करने के लिए फ़ॉर्म को इन तरीकों से भी टेस्ट और सबमिट किया जा सकता है:

    • /about स्लैश कमांड का इस्तेमाल करें. चैट ऐप्लिकेशन, टेक्स्ट मैसेज और ऐक्सेसरी विजेट बटन के साथ जवाब देता है. इस बटन पर Add a contact लिखा होता है. संपर्क फ़ॉर्म वाला डायलॉग बॉक्स खोलने के लिए, बटन पर क्लिक करें.
    • Chat ऐप्लिकेशन को स्लैश कमांड के बिना डायरेक्ट मैसेज भेजें. जैसे, Hello. Chat ऐप्लिकेशन, संपर्क करने के लिए फ़ॉर्म वाले कार्ड और टेक्स्ट के साथ जवाब देता है.

व्यवस्थित करें

इस ट्यूटोरियल में इस्तेमाल किए गए संसाधनों के लिए, अपने Google Cloud खाते से शुल्क न लिए जाने के लिए, हमारा सुझाव है कि आप Cloud प्रोजेक्ट को मिटा दें.

  1. Google API Console में, संसाधन मैनेज करें पेज पर जाएं. मेन्यू > IAM और एडमिन > संसाधन मैनेज करें पर क्लिक करें.

    Resource Manager पर जाएं

  2. प्रोजेक्ट की सूची में, वह प्रोजेक्ट चुनें जिसे आपको मिटाना है. इसके बाद, मिटाएं पर क्लिक करें.
  3. डायलॉग बॉक्स में, प्रोजेक्ट आईडी डालें. इसके बाद, प्रोजेक्ट मिटाने के लिए बंद करें पर क्लिक करें.

ऐसे चैट ऐप्लिकेशन जो ऐड-ऑन नहीं हैं: Google Chat से संपर्कों को मैनेज करना

यहां दिए गए निर्देश और कोड सैंपल, ऐसे Chat ऐप्लिकेशन पर लागू होते हैं जो Google Workspace ऐड-ऑन नहीं है (GitHub पर देखें).

Apps Script फ़ाइलें

main.gs

यह कुकी, ऐप्लिकेशन के सभी लॉजिक को मैनेज करती है. इसमें इंटरैक्शन इवेंट भी शामिल हैं. जैसे, उपयोगकर्ता Chat ऐप्लिकेशन को कब मैसेज भेजते हैं, Chat ऐप्लिकेशन के मैसेज में मौजूद बटन पर कब क्लिक करते हैं या डायलॉग कब खोलते और बंद करते हैं.

apps-script/contact-form-app/main.gs
/**
 * Copyright 2024 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * Responds to a MESSAGE interaction event in Google Chat.
 *
 * @param {Object} event the MESSAGE interaction event from Chat API.
 * @return {Object} message response that opens a dialog or sends private
 *                          message with text and card.
 */
function onMessage(event) {
  if (event.message.slashCommand) {
    switch (event.message.slashCommand.commandId) {
      case 1:
        // If the slash command is "/about", responds with a text message and button
        // that opens a dialog.
        return {
          text: "Manage your personal and business contacts 📇. To add a " +
                  "contact, use the slash command `/addContact`.",
          accessoryWidgets: [{
            buttonList: { buttons: [{
              text: "Add Contact",
              onClick: { action: {
                function: "openInitialDialog",
                interaction: "OPEN_DIALOG"
              }}
            }]}
          }]
        }
      case 2:
        // If the slash command is "/addContact", opens a dialog.
        return openInitialDialog();
    }
  }

  // If user sends the Chat app a message without a slash command, the app responds
  // privately with a text and card to add a contact.
  return {
    privateMessageViewer: event.user,
    text: "To add a contact, try `/addContact` or complete the form below:",
    cardsV2: [{
      cardId: "addContactForm",
      card: {
        header: { title: "Add a contact" },
        sections:[{ widgets: CONTACT_FORM_WIDGETS.concat([{
          buttonList: { buttons: [{
            text: "Review and submit",
            onClick: { action: { function : "openConfirmation" }}
          }]}
        }])}]
      }
    }]
  };
}

/**
 * Responds to CARD_CLICKED interaction events in Google Chat.
 *
 * @param {Object} event the CARD_CLICKED interaction event from Google Chat.
 * @return {Object} message responses specific to the dialog handling.
 */
function onCardClick(event) {
  // Initial dialog form page
  if (event.common.invokedFunction === "openInitialDialog") {
    return openInitialDialog();
  // Confirmation dialog form page
  } else if (event.common.invokedFunction === "openConfirmation") {
    return openConfirmation(event);
  // Submission dialog form page
  } else if (event.common.invokedFunction === "submitForm") {
    return submitForm(event);
  }
}

/**
 * Opens the initial step of the dialog that lets users add contact details.
 *
 * @return {Object} a message with an action response to open a dialog.
 */
function openInitialDialog() {
  return { actionResponse: {
    type: "DIALOG",
    dialogAction: { dialog: { body: { sections: [{
      header: "Add new contact",
      widgets: CONTACT_FORM_WIDGETS.concat([{
        buttonList: { buttons: [{
          text: "Review and submit",
          onClick: { action: { function: "openConfirmation" }}
        }]}
      }])
    }]}}}
  }};
}

/**
 * Returns the second step as a dialog or card message that lets users confirm details.
 *
 * @param {Object} event the interactive event with form inputs.
 * @return {Object} returns a dialog or private card message.
 */
function openConfirmation(event) {
  const name = fetchFormValue(event, "contactName") ?? "";
  const birthdate = fetchFormValue(event, "contactBirthdate") ?? "";
  const type = fetchFormValue(event, "contactType") ?? "";
  const cardConfirmation = {
    header: "Your contact",
    widgets: [{
      textParagraph: { text: "Confirm contact information and submit:" }}, {
      textParagraph: { text: "<b>Name:</b> " + name }}, {
      textParagraph: {
        text: "<b>Birthday:</b> " + convertMillisToDateString(birthdate)
      }}, {
      textParagraph: { text: "<b>Type:</b> " + type }}, {
      buttonList: { buttons: [{
        text: "Submit",
        onClick: { action: {
          function: "submitForm",
          parameters: [{
            key: "contactName", value: name }, {
            key: "contactBirthdate", value: birthdate }, {
            key: "contactType", value: type
          }]
        }}
      }]}
    }]
  };

  // Returns a dialog with contact information that the user input.
  if (event.isDialogEvent) {
    return { action_response: {
      type: "DIALOG",
      dialogAction: { dialog: { body: { sections: [ cardConfirmation ]}}}
    }};
  }

  // Updates existing card message with contact information that the user input.
  return {
    actionResponse: { type: "UPDATE_MESSAGE" },
    privateMessageViewer: event.user,
    cardsV2: [{
      card: { sections: [cardConfirmation]}
    }]
  }
}

/**
  * Validates and submits information from a dialog or card message
  * and notifies status.
  *
  * @param {Object} event the interactive event with parameters.
  * @return {Object} a message response that opens a dialog or posts a private
  *                  message.
  */
function submitForm(event) {
  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.
  const errorMessage = "Don't forget to name your new contact!";
  if (!contactName && event.dialogEventType === "SUBMIT_DIALOG") {
    return { actionResponse: {
      type: "DIALOG",
      dialogAction: { actionStatus: {
        statusCode: "INVALID_ARGUMENT",
        userFacingMessage: errorMessage
      }}
    }};
  }
  if (!contactName) {
    return {
      privateMessageViewer: event.user,
      text: errorMessage
    };
  }

  // The Chat app indicates that it received form data from the dialog or card.
  // Sends private text message that confirms submission.
  const confirmationMessage = "✅ " + contactName + " has been added to your contacts.";
  if (event.dialogEventType === "SUBMIT_DIALOG") {
    return {
      actionResponse: {
        type: "DIALOG",
        dialogAction: { actionStatus: {
          statusCode: "OK",
          userFacingMessage: "Success " + contactName
        }}
      }
    };
  }
  return {
    actionResponse: { type: "NEW_MESSAGE" },
    privateMessageViewer: event.user,
    text: confirmationMessage
  };
}

/**
 * Extracts form input value for a given widget.
 *
 * @param {Object} event the CARD_CLICKED interaction event from Google Chat.
 * @param {String} widgetName a unique ID for the widget, specified in the widget's name field.
 * @returns the value inputted by the user, null if no value can be found.
 */
function fetchFormValue(event, widgetName) {
  const formItem = event.common.formInputs[widgetName][""];
  // For widgets that receive StringInputs data, the value input by the user.
  if (formItem.hasOwnProperty("stringInputs")) {
    const stringInput = event.common.formInputs[widgetName][""].stringInputs.value[0];
    if (stringInput != null) {
      return stringInput;
    }
  // For widgets that receive dateInput data, the value input by the user.
  } else if (formItem.hasOwnProperty("dateInput")) {
    const dateInput = event.common.formInputs[widgetName][""].dateInput.msSinceEpoch;
     if (dateInput != null) {
       return dateInput;
     }
  }

  return null;
}

/**
 * Converts date in milliseconds since epoch to user-friendly string.
 *
 * @param {Object} millis the milliseconds since epoch time.
 * @return {string} Display-friend date (English US).
 */
function convertMillisToDateString(millis) {
  const date = new Date(millis);
  const options = { year: 'numeric', month: 'long', day: 'numeric' };
  return date.toLocaleDateString('en-US', options);
}
contactForm.gs

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

apps-script/contact-form-app/contactForm.gs
/**
 * Copyright 2024 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * 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
        }
      ]
    }
  }
];
appsscript.json

Apps Script मेनिफ़ेस्ट फ़ाइल, Chat ऐप्लिकेशन के लिए Apps Script प्रोजेक्ट को तय करती है और उसे कॉन्फ़िगर करती है. यह ऐड-ऑन नहीं है.

apps-script/contact-form-app/appsscript.json
{
  "timeZone": "America/Los_Angeles",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "chat": {}
}

Apps Script प्रोजेक्ट बनाना और उसे कॉन्फ़िगर करना

  1. Chat ऐप्लिकेशन के लिए, Google Chat में संपर्कों को मैनेज करने वाला Apps Script प्रोजेक्ट खोलें. यह ऐसा Chat ऐप्लिकेशन होना चाहिए जो ऐड-ऑन न हो. इसके बाद, इसकी एक कॉपी बना लें.
  2. Google API Console में Chat API को कॉन्फ़िगर करते समय: इस Chat ऐप्लिकेशन को Google Workspace ऐड-ऑन के तौर पर बनाएं को अनचेक करें. पुष्टि करने के लिए, एक डायलॉग बॉक्स खुलेगा. डायलॉग बॉक्स में, बंद करें पर क्लिक करें.