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

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

दो विजेट के साथ ऐप्लिकेशन का होम कार्ड.

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


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

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

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

Python

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

Apps Script

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

Node.js

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

Java

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

Chat API को कॉन्फ़िगर करना

ऐप्लिकेशन के होम पेज पर इसका इस्तेमाल करने के लिए, आपको Chat API का कॉन्फ़िगरेशन अपडेट करना होगा पर जाकर, प्रोजेक्ट डाउनलोड करने की सुविधा मिलती है.

Python

  1. Google Cloud Console में, मेन्यू पर जाएं > ज़्यादा प्रॉडक्ट > Google Workspace > प्रॉडक्ट लाइब्रेरी > Google Chat API.

    Google Chat API पर जाएं

  2. मैनेज करें पर क्लिक करें. इसके बाद, कॉन्फ़िगरेशन टैब पर क्लिक करें.

  3. सहायता ऐप्लिकेशन होम चेकबॉक्स चुनें.

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

  5. सेव करें पर क्लिक करें.

Apps Script

  1. Google Cloud Console में, मेन्यू पर जाएं > ज़्यादा प्रॉडक्ट > Google Workspace > प्रॉडक्ट लाइब्रेरी > Google Chat API.

    Google Chat API पर जाएं

  2. मैनेज करें पर क्लिक करें. इसके बाद, कॉन्फ़िगरेशन टैब पर क्लिक करें.

  3. सहायता ऐप्लिकेशन होम चेकबॉक्स चुनें.

  4. सेव करें पर क्लिक करें.

Node.js

  1. Google Cloud Console में, मेन्यू पर जाएं > ज़्यादा प्रॉडक्ट > Google Workspace > प्रॉडक्ट लाइब्रेरी > Google Chat API.

    Google Chat API पर जाएं

  2. मैनेज करें पर क्लिक करें. इसके बाद, कॉन्फ़िगरेशन टैब पर क्लिक करें.

  3. सहायता ऐप्लिकेशन होम चेकबॉक्स चुनें.

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

  5. सेव करें पर क्लिक करें.

Java

  1. Google Cloud Console में, मेन्यू पर जाएं > ज़्यादा प्रॉडक्ट > Google Workspace > प्रॉडक्ट लाइब्रेरी > Google Chat API.

    Google Chat API पर जाएं

  2. मैनेज करें पर क्लिक करें. इसके बाद, कॉन्फ़िगरेशन टैब पर क्लिक करें.

  3. सहायता ऐप्लिकेशन होम चेकबॉक्स चुनें.

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

  5. सेव करें पर क्लिक करें.

ऐप्लिकेशन होम बनाएं

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

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

ऐप्लिकेशन के होम पेज के लिए, शुरुआती कार्ड बनाएं

ऐप्लिकेशन का होम पेज बनाने के लिए, Chat ऐप्लिकेशन को APP_HOME इंटरैक्शन इवेंट और इसका इंस्टेंस दिखाता है RenderActions pushCard नेविगेशन के साथ.

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"
      }}
    }]}}
  ]}]}

Apps Script

ऐसा onAppHome फ़ंक्शन लागू करें जिसे सभी APP_HOME इवेंट के बाद कॉल किया जाता है:

यह उदाहरण वापस लौटकर एक कार्ड संदेश भेजता है card JSON. Google आपके यूआरएल पैरामीटर को कैसे इस्तेमाल करेगा, यह तय करने के लिए 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"
      }}
    }]}}
  ]}]};
}

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"
      }}
    }]}}
  ]}]};
}

Java

java/app-home/src/main/java/com/google/chat/app/home/App.java
/**
 * Process Google Chat events
 *
 * @param event Event from chat.
 * @return GenericJson
 * @throws Exception
 */
@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() {
  GoogleAppsCardV1TextParagraph textParagraph = new GoogleAppsCardV1TextParagraph();
  textParagraph.setText("Here is the app home 🏠 It's " + new Date());

  GoogleAppsCardV1Widget textParagraphWidget = new GoogleAppsCardV1Widget();
  textParagraphWidget.setTextParagraph(textParagraph);

  GoogleAppsCardV1Action action = new GoogleAppsCardV1Action();
  action.setFunction("updateAppHome");

  GoogleAppsCardV1OnClick onClick = new GoogleAppsCardV1OnClick();
  onClick.setAction(action);

  GoogleAppsCardV1Button button = new GoogleAppsCardV1Button();
  button.setText("Update app home");
  button.setOnClick(onClick);

  GoogleAppsCardV1ButtonList buttonList = new GoogleAppsCardV1ButtonList();
  buttonList.setButtons(List.of(button));

  GoogleAppsCardV1Widget buttonListWidget = new GoogleAppsCardV1Widget();
  buttonListWidget.setButtonList(buttonList);

  GoogleAppsCardV1Section section = new GoogleAppsCardV1Section();
  section.setWidgets(List.of(textParagraphWidget, buttonListWidget));

  GoogleAppsCardV1Card card = new GoogleAppsCardV1Card();
  card.setSections(List.of(section));

  return card;
}

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

अगर आपके ऐप्लिकेशन के शुरुआती होम कार्ड में बटन जैसे इंटरैक्टिव विजेट हैं या टेक्स्ट इनपुट न हो, तो Chat ऐप्लिकेशन मिलते-जुलते इंटरैक्शन इवेंट को RenderActions updateCard नेविगेशन के साथ. इंटरैक्टिव विज्ञापनों को मैनेज करने के बारे में ज़्यादा जानें विजेट, देखें उपयोगकर्ताओं की ओर से डाली गई जानकारी को प्रोसेस करें.

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()
  }]}}}

Apps Script

यह उदाहरण वापस लौटकर एक कार्ड संदेश भेजता है card JSON. Google आपके यूआरएल पैरामीटर को कैसे इस्तेमाल करेगा, यह तय करने के लिए Apps Script कार्ड सेवा.

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

Node.js

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

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;
}

सीमाएं

सामान्य तौर पर, navigation है Chat ऐप्लिकेशन के लिए उपलब्ध नहीं है. आपको कई कार्ड नहीं दिखाए जा सकते. सिर्फ़ pushCard (शुरुआती जवाब के लिए) और updateCard (अपडेट के लिए) हैं चैट ऐप्लिकेशन के लिए उपलब्ध है.