Google Chat ऐप्लिकेशन के लिए होम पेज बनाना

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

दो विजेट वाला ऐप्लिकेशन होम कार्ड.
पहली इमेज: Chat ऐप्लिकेशन के साथ डायरेक्ट मैसेज में दिखने वाले होम पेज का उदाहरण.

Google Workspace के अन्य होस्ट ऐप्लिकेशन के उलट, Chat की सुविधाओं को बढ़ाने वाले ऐड-ऑन, दाईं ओर मौजूद क्विक ऐक्सेस पैनल में होम पेज नहीं दिखाते. साथ ही, मेनिफ़ेस्ट में addOns.common.homepageTrigger का इस्तेमाल नहीं करते. इसके बजाय, Chat आपके होम पेज को Chat ऐप्लिकेशन के साथ सीधी बातचीत की होम टैब में कार्ड के तौर पर दिखाता है. इसे Google Cloud Console में कॉन्फ़िगर किया जाता है.

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


Chat ऐप्लिकेशन के लिए मैसेजिंग और यूज़र इंटरफ़ेस को डिज़ाइन करने और उनकी झलक देखने के लिए, Card Builder का इस्तेमाल करें:

कार्ड बिल्डर खोलें

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

HTTP

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

Apps Script

Google Chat ऐप्लिकेशन, जो उपयोगकर्ता के इंटरैक्शन को स्वीकार करता है और उनका जवाब देता है. इसे बनाने के लिए, Apps Script क्विकस्टार्ट पूरा करें.

Chat ऐप्लिकेशन के लिए, ऐप्लिकेशन का होम पेज कॉन्फ़िगर करना

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

Google Cloud Console में ऐप्लिकेशन होम को कॉन्फ़िगर करने के लिए:

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

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

  2. इंटरैक्टिव सुविधाएं में जाकर, पक्का करें कि इंटरैक्टिव सुविधाएं चालू करें चालू हो. इसके बाद, सुविधा में जाकर, ऐप्लिकेशन होम पेज पर उपलब्ध कराएं चेकबॉक्स को चुनें.

  3. कनेक्शन की सेटिंग > ट्रिगर में जाकर, अपने चैट ऐप्लिकेशन के आर्किटेक्चर के आधार पर, ऐप्लिकेशन होम फ़ील्ड में ऐप्लिकेशन होम हैंडलर तय करें:

    • एचटीटीपी: ऐप्लिकेशन होम के अनुरोधों को मैनेज करने वाले एचटीटीपीएस एंडपॉइंट का यूआरएल डालें. इसके अलावा, सभी ट्रिगर के लिए सामान्य एचटीटीपी एंडपॉइंट यूआरएल का इस्तेमाल करें को चुना जा सकता है, ताकि आपके सामान्य एचटीटीपी एंडपॉइंट यूआरएल को सभी इवेंट मिलें.
    • Google Apps Script: Google Apps Script के उस कॉलबैक फ़ंक्शन का नाम डालें जो आपके होम पेज का कार्ड बनाता है और उसे दिखाता है. डिफ़ॉल्ट रूप से, यह onAppHome पर सेट होता है.
  4. सेव करें पर क्लिक करें.

ऐप्लिकेशन होम इवेंट ऑब्जेक्ट को हैंडल करना

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

स्पेस या मैसेज इंटरैक्शन इवेंट के उलट, ऐप्लिकेशन होम के शुरुआती इवेंट ऑब्जेक्ट में यूनियन इंटरैक्शन पेलोड (जैसे कि messagePayload) शामिल नहीं होता. इसमें ये फ़ील्ड शामिल होते हैं:

  • commonEventObject: इसमें clientPlatform, hostApp ("CHAT"), userLocale, और userTimezone शामिल हैं.
  • chat.user: होम टैब खोलने वाला Chat उपयोगकर्ता.
  • chat.eventTime: वह टाइमस्टैंप जब उपयोगकर्ता ने होम टैब खोला था.

ऐप्लिकेशन होम कार्ड बनाना

जब कोई उपयोगकर्ता होम टैब खोलता है, तब ऐप्लिकेशन होम ट्रिगर इवेंट को हैंडल करें. इसके लिए, pushCard नेविगेशन ऐक्शन और Card के साथ RenderActions ऑब्जेक्ट दिखाएं. इंटरैक्टिव अनुभव बनाने के लिए, कार्ड में बटन या टेक्स्ट इनपुट जैसे इंटरैक्टिव विजेट शामिल किए जा सकते हैं.

HTTP

{
  "action": {
    "navigations": [
      {
        "pushCard": {
          "header": {
            "title": "Welcome to App Home"
          },
          "sections": [
            {
              "widgets": [
                {
                  "textParagraph": {
                    "text": "Manage your settings and view your dashboard here."
                  }
                },
                {
                  "buttonList": {
                    "buttons": [
                      {
                        "text": "Refresh",
                        "onClick": {
                          "action": {
                            "function": "https://example.com/updateAppHome"
                          }
                        }
                      }
                    ]
                  }
                }
              ]
            }
          ]
        }
      }
    ]
  }
}

Apps Script

/**
 * Builds and returns the App Home card when a user opens the Home tab.
 *
 * @param {Object} event The event object from Google Chat.
 * @return {ActionResponse} The RenderActions response pushing the homepage card.
 */
function onAppHome(event) {
  const card = CardService.newCardBuilder()
      .setHeader(
          CardService.newCardHeader().setTitle('Welcome to App Home'))
      .addSection(
          CardService.newCardSection()
              .addWidget(
                  CardService.newTextParagraph().setText(
                      'Manage your settings and view your dashboard here.'))
              .addWidget(
                  CardService.newButtonSet().addButton(
                      CardService.newTextButton()
                          .setText('Refresh')
                          .setOnClickAction(
                              CardService.newAction().setFunctionName(
                                  'updateAppHome')))))
      .build();

  return CardService.newActionResponseBuilder()
      .setNavigation(CardService.newNavigation().pushCard(card))
      .build();
}

ऐप्लिकेशन की होम स्क्रीन पर किए गए इंटरैक्शन का जवाब देना

अगर आपके ऐप्लिकेशन के होम कार्ड में इंटरैक्टिव विजेट शामिल हैं, जैसे कि बटन या फ़ॉर्म इनपुट, तो किसी बटन पर क्लिक करने से, बटन के कॉन्फ़िगर किए गए ऐक्शन फ़ंक्शन या एंडपॉइंट को chat.buttonClickedPayload (commonEventObject.parameters और commonEventObject.formInputs के साथ) वाला इवेंट ऑब्जेक्ट भेजा जाता है.

उपयोगकर्ता के इंटरैक्शन के जवाब में, ऐप्लिकेशन होम कार्ड को अपडेट करने के लिए, updateCard नेविगेशन ऐक्शन के साथ RenderActions ऑब्जेक्ट दिखाएं. इंटरैक्टिव विजेट से फ़ॉर्म इनपुट पढ़ने के बारे में ज़्यादा जानने के लिए, कार्ड पर उपयोगकर्ताओं के फ़ॉर्म डेटा इनपुट को पढ़ना लेख पढ़ें.

HTTP

{
  "action": {
    "navigations": [
      {
        "updateCard": {
          "header": {
            "title": "Welcome to App Home"
          },
          "sections": [
            {
              "widgets": [
                {
                  "textParagraph": {
                    "text": "Last updated: 2026-10-02T23:00:00Z"
                  }
                }
              ]
            }
          ]
        }
      }
    ]
  }
}

Apps Script

/**
 * Updates the App Home card when a user clicks the Refresh button.
 *
 * @param {Object} event The event object from Google Chat.
 * @return {ActionResponse} The RenderActions response updating the homepage card.
 */
function updateAppHome(event) {
  const updatedCard = CardService.newCardBuilder()
      .setHeader(
          CardService.newCardHeader().setTitle('Welcome to App Home'))
      .addSection(
          CardService.newCardSection().addWidget(
              CardService.newTextParagraph().setText(
                  'Last updated: ' + new Date().toTimeString())))
      .build();

  return CardService.newActionResponseBuilder()
      .setNavigation(CardService.newNavigation().updateCard(updatedCard))
      .build();
}

ऐप्लिकेशन होम से डायलॉग बॉक्स खोलना

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

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

RenderActions (pushCard, updateCard, और endNavigation: "CLOSE_DIALOG") का इस्तेमाल करके डायलॉग बॉक्स खोलने, अपडेट करने, और बंद करने का तरीका जानने के लिए, इंटरैक्टिव डायलॉग बॉक्स खोलना लेख पढ़ें.

Chat ऐप्लिकेशन जो ऐड-ऑन नहीं हैं: Chat ऐप्लिकेशन के लिए होम पेज बनाना

अगर आपके पास ऐसा Chat ऐप्लिकेशन है जो Google Workspace ऐड-ऑन नहीं है, तो Chat, APP_HOME इंटरैक्शन इवेंट भेजता है. ऐसा तब होता है, जब कोई उपयोगकर्ता होम टैब खोलता है. इसके अलावा, जब कोई उपयोगकर्ता ऐप्लिकेशन होम कार्ड पर मौजूद विजेट से इंटरैक्ट करता है, तब Chat, CARD_CLICKED या SUBMIT_FORM इंटरैक्शन इवेंट भेजता है.

अगर आपको किसी ऐसे Chat ऐप्लिकेशन को Google Workspace ऐड-ऑन फ़्रेमवर्क में अपग्रेड करना है जो ऐड-ऑन नहीं है, तो Google Chat ऐप्लिकेशन को Google Workspace ऐड-ऑन में बदलना लेख पढ़ें.

Chat ऐप्लिकेशन में, ऐप्लिकेशन होम कार्ड बनाना. यह ऐप्लिकेशन, ऐड-ऑन नहीं होना चाहिए

Chat ऐप्लिकेशन में, ऐड-ऑन नहीं है, तो APP_HOME इंटरैक्शन इवेंट को हैंडल करें. इसके लिए, टॉप-लेवल renderActions फ़ील्ड वाला जवाब दें. इसमें pushCard नेविगेशन शामिल हो:

Node.js

node/app-home/index.js
app.post('/', async (req, res) => {
  let event = req.body.chat;

  let body = {};
  if (event.type === 'APP_HOME') {
    // App home is requested
    body = { action: { navigations: [{
      pushCard: getHomeCard()
    }]}}
  } else if (event.type === 'SUBMIT_FORM') {
    // The update button from app home is clicked
    commonEvent = req.body.commonEventObject;
    if (commonEvent && commonEvent.invokedFunction === 'updateAppHome') {
      body = updateAppHome()
    }
  }

  return res.json(body);
});

// Create the app home card
function getHomeCard() {
  return { sections: [{ widgets: [
    { textParagraph: {
      text: "Here is the app home 🏠 It's " + new Date().toTimeString()
    }},
    { buttonList: { buttons: [{
      text: "Update app home",
      onClick: { action: {
        function: "updateAppHome"
      }}
    }]}}
  ]}]};
}

Python

python/app-home/main.py
@app.route('/', methods=['POST'])
def post() -> Mapping[str, Any]:
  """Handle requests from Google Chat

  Returns:
      Mapping[str, Any]: the response
  """
  event = request.get_json()
  match event['chat'].get('type'):

    case 'APP_HOME':
      # App home is requested
      body = { "action": { "navigations": [{
        "pushCard": get_home_card()
      }]}}

    case 'SUBMIT_FORM':
      # The update button from app home is clicked
      event_object = event.get('commonEventObject')
      if event_object is not None:
        if 'update_app_home' == event_object.get('invokedFunction'):
          body = update_app_home()

    case _:
      # Other response types are not supported
      body = {}

  return json.jsonify(body)


def get_home_card() -> Mapping[str, Any]:
  """Create the app home card

  Returns:
      Mapping[str, Any]: the card
  """
  return { "sections": [{ "widgets": [
    { "textParagraph": {
      "text": "Here is the app home 🏠 It's " +
        datetime.datetime.now().isoformat()
    }},
    { "buttonList": { "buttons": [{
      "text": "Update app home",
      "onClick": { "action": {
        "function": "update_app_home"
      }}
    }]}}
  ]}]}

Java

java/app-home/src/main/java/com/google/chat/app/home/App.java
// Process Google Chat events
@PostMapping("/")
@ResponseBody
public GenericJson onEvent(@RequestBody JsonNode event) throws Exception {
  switch (event.at("/chat/type").asText()) {
    case "APP_HOME":
      // App home is requested
      GenericJson navigation = new GenericJson();
      navigation.set("pushCard", getHomeCard());

      GenericJson action = new GenericJson();
      action.set("navigations", List.of(navigation));

      GenericJson response = new GenericJson();
      response.set("action", action);
      return response;
    case "SUBMIT_FORM":
      // The update button from app home is clicked
      if (event.at("/commonEventObject/invokedFunction").asText().equals("updateAppHome")) {
        return updateAppHome();
      }
  }

  return new GenericJson();
}

// Create the app home card
GoogleAppsCardV1Card getHomeCard() {
  return new GoogleAppsCardV1Card()
    .setSections(List.of(new GoogleAppsCardV1Section()
      .setWidgets(List.of(
        new GoogleAppsCardV1Widget()
          .setTextParagraph(new GoogleAppsCardV1TextParagraph()
            .setText("Here is the app home 🏠 It's " + new Date())),
        new GoogleAppsCardV1Widget()
          .setButtonList(new GoogleAppsCardV1ButtonList().setButtons(List.of(new GoogleAppsCardV1Button()
            .setText("Update app home")
            .setOnClick(new GoogleAppsCardV1OnClick()
              .setAction(new GoogleAppsCardV1Action()
                .setFunction("updateAppHome"))))))))));
}

Apps Script

इस उदाहरण में, कार्ड JSON को वापस भेजकर, कार्ड मैसेज भेजा जाता है. Apps Script की कार्ड सेवा का भी इस्तेमाल किया जा सकता है.

apps-script/app-home/app-home.gs
/**
 * Responds to a APP_HOME event in Google Chat.
 */
function onAppHome() {
  return { action: { navigations: [{
    pushCard: getHomeCard()
  }]}};
}

/**
 * Returns the app home card.
 */
function getHomeCard() {
  return { sections: [{ widgets: [
    { textParagraph: {
      text: "Here is the app home 🏠 It's " + new Date().toTimeString()
    }},
    { buttonList: { buttons: [{
      text: "Update app home",
      onClick: { action: {
        function: "updateAppHome"
      }}
    }]}}
  ]}]};
}

Chat ऐप्लिकेशन में, ऐप्लिकेशन होम से होने वाले इंटरैक्शन का जवाब देना. यह ऐप्लिकेशन, ऐड-ऑन नहीं होना चाहिए

ऐसे Chat ऐप्लिकेशन में जो ऐड-ऑन नहीं है, ऐप्लिकेशन होम कार्ड से CARD_CLICKED या SUBMIT_FORM इंटरैक्शन इवेंट हैंडल करें. इसके लिए, ऐसा जवाब दें जिसमें updateCard नेविगेशन के साथ टॉप-लेवल renderActions फ़ील्ड शामिल हो:

Node.js

node/app-home/index.js
// Update the app home
function updateAppHome() {
  return { renderActions: { action: { navigations: [{
    updateCard: getHomeCard()
  }]}}}
};

Python

python/app-home/main.py
def update_app_home() -> Mapping[str, Any]:
  """Update the app home

  Returns:
      Mapping[str, Any]: the update card render action
  """
  return { "renderActions": { "action": { "navigations": [{
    "updateCard": get_home_card()
  }]}}}

Java

java/app-home/src/main/java/com/google/chat/app/home/App.java
// Update the app home
GenericJson updateAppHome() {
  GenericJson navigation = new GenericJson();
  navigation.set("updateCard", getHomeCard());

  GenericJson action = new GenericJson();
  action.set("navigations", List.of(navigation));

  GenericJson renderActions = new GenericJson();
  renderActions.set("action", action);

  GenericJson response = new GenericJson();
  response.set("renderActions", renderActions);
  return response;
}

Apps Script

इस उदाहरण में, कार्ड JSON को वापस भेजकर, कार्ड मैसेज भेजा जाता है. Apps Script की कार्ड सेवा का भी इस्तेमाल किया जा सकता है.

apps-script/app-home/app-home.gs
/**
 * Updates the home app.
 */
function updateAppHome() {
  return { renderActions: { action: { navigations: [{
    updateCard: getHomeCard()
  }]}}};
}