Google Chat অ্যাপের জন্য হোমপেজ তৈরি করা

এই পৃষ্ঠায় আপনার Google Chat অ্যাপের মাধ্যমে সরাসরি মেসেজের জন্য কীভাবে হোমপেজ তৈরি করতে হয় তা ব্যাখ্যা করা হয়েছে। Google Chat API-তে হোমপেজকে অ্যাপ হোম বলা হয়। এটি হল কাস্টমাইজ করা যায় এমন কার্ড ইন্টারফেস যা কোনও ব্যবহারকারী ও Chat অ্যাপের মধ্যে ১:১ সরাসরি মেসেজ স্পেসের হোম ট্যাবে দেখা যায়।

দুটি উইজেট সহ অ্যাপ হোম কার্ড।
ছবি ১: Chat অ্যাপের মাধ্যমে সরাসরি মেসেজে দেখানো হোমপেজের একটি উদাহরণ।

অন্যান্য Google Workspace হোস্ট অ্যাপ্লিকেশনের মতো, Chat-এর কার্যকারিতা বাড়ায় এমন অ্যাড-অন ডানদিকের কুইক অ্যাক্সেস প্যানেলে হোমপেজ দেখায় না এবং ম্যানিফেস্টে addOns.common.homepageTrigger ব্যবহার করে না। পরিবর্তে, Chat অ্যাপের সাথে ১:১ ডাইরেক্ট মেসেজের হোম ট্যাবে Chat আপনার হোমপেজকে কার্ড হিসেবে দেখায় এবং এটি Google Cloud কনসোলে কনফিগার করা হয়।

আপনি App Home ব্যবহার করে Chat অ্যাপের সাথে ইন্টার‍্যাক্ট করার ব্যাপারে পরামর্শ শেয়ার করতে, পছন্দমতো ব্যবহারকারীর ড্যাশবোর্ড দেখাতে অথবা Chat থেকে ব্যবহারকারীদের এক্সটার্নাল পরিষেবা বা টুল অ্যাক্সেস ও কনফিগার করতে দিতে পারেন।

চ্যাট অ্যাপের জন্য মেসেজিং ও ইউজার ইন্টারফেস ডিজাইন ও প্রিভিউ করতে কার্ড বিল্ডার ব্যবহার করুন:

কার্ড বিল্ডার খুলুন

পূর্বশর্ত

HTTP

Google Chat অ্যাপ যা ব্যবহারকারীর ইন্টার‍্যাকশন গ্রহণ করে এবং উত্তর দেয়। এটি তৈরি করতে, HTTP কুইকস্টার্ট সম্পূর্ণ করুন।

Apps Script

Google Chat অ্যাপ যা ব্যবহারকারীর ইন্টার‍্যাকশন গ্রহণ করে এবং উত্তর দেয়। এটি তৈরি করতে, অ্যাপ স্ক্রিপ্ট কুইকস্টার্ট সম্পূর্ণ করুন।

আপনার Chat অ্যাপের জন্য অ্যাপ হোম কনফিগার করা

অ্যাপ হোম কাজ করে তা নিশ্চিত করতে, অ্যাপ হোম কাজ করে বিকল্প চালু করুন এবং Google Cloud কনসোলে অ্যাপ হোম ট্রিগার কনফিগার করুন। কোনও ব্যবহারকারী Chat অ্যাপের সাথে ১:১ ডাইরেক্ট মেসেজে হোম ট্যাব খুললে, আপনার Chat অ্যাপ একটি অ্যাপ হোম ট্রিগার ইভেন্ট পায়।

Google Cloud Console-এ অ্যাপ হোম কনফিগার করতে:

  1. Google Cloud Console-এ, মেনু > API ও পরিষেবা > চালু করা API ও পরিষেবা > Google Chat API > কনফিগারেশন বিকল্পে যান।

    Chat API কনফিগারেশনে যান

  2. ইন্টার‍্যাক্টিভ ফিচার বিকল্পের মধ্যে, ইন্টার‍্যাক্টিভ ফিচার চালু করুন বিকল্পটি চালু করা আছে কিনা দেখে নিন, তারপর কার্যকারিতা বিকল্পের মধ্যে, App Home কাজ করে চেকবক্স বেছে নিন।

  3. কানেকশন সেটিংস > ট্রিগার বিকল্পের মধ্যে, আপনার Chat অ্যাপ আর্কিটেকচারের উপর ভিত্তি করে অ্যাপ হোম ফিল্ডে আপনার অ্যাপ হোম হ্যান্ডলার নির্দিষ্ট করুন:

    • HTTP: অ্যাপ হোম সংক্রান্ত অনুরোধ ম্যানেজ করে এমন HTTPS এন্ডপয়েন্ট URL লিখুন (অথবা সব ট্রিগারের জন্য সাধারণ HTTP এন্ডপয়েন্ট URL ব্যবহার করুন বিকল্প বেছে নিন যাতে আপনার সাধারণ HTTP এন্ডপয়েন্ট URL সব ইভেন্ট পায়)।
    • Google Apps স্ক্রিপ্ট: আপনার হোমপেজ কার্ড তৈরি ও রিটার্ন করে এমন Google Apps স্ক্রিপ্ট কলব্যাক ফাংশনের নাম লিখুন (ডিফল্ট হিসেবে onAppHome)।

  4. সেভ করুন বিকল্পে ক্লিক করুন।

App Home ইভেন্ট অবজেক্ট ম্যানেজ করা

কোনও ব্যবহারকারী আপনার 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 সহ) সহ একটি ইভেন্ট অবজেক্ট পাঠানো হয়।

ব্যবহারকারীর ইন্টার‍্যাকশনের উত্তরে App Home কার্ড আপডেট করতে, 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 অ্যাপ বজায় রাখেন যা Google Workspace অ্যাড-অন নয়, তাহলে কোনও ব্যবহারকারী হোম ট্যাব খুললে, Chat একটি APP_HOME ইন্ট্যার‍্যাকশন ইভেন্ট পাঠায় এবং কোনও ব্যবহারকারী অ্যাপ হোম কার্ডে উইজেটের সাথে ইন্ট্যার‍্যাক্ট করলে, CARD_CLICKED বা SUBMIT_FORM ইন্ট্যার‍্যাকশন ইভেন্ট পাঠায়।

Google Workspace অ্যাড-অন ফ্রেমওয়ার্কে অ্যাড-অন নয় এমন Chat অ্যাপ আপগ্রেড করতে, 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 স্ক্রিপ্ট কার্ড পরিষেবা ব্যবহার করতে পারবেন।

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 অ্যাপে App Home ইন্টার‍্যাকশনের উত্তর দেওয়া

অ্যাড-অন নয় এমন কোনও 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 স্ক্রিপ্ট কার্ড পরিষেবা ব্যবহার করতে পারবেন।

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