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

এই পৃষ্ঠাটি ব্যাখ্যা করে যে কীভাবে আপনার Google Chat অ্যাপের মাধ্যমে সরাসরি বার্তাগুলির জন্য একটি হোমপেজ তৈরি করতে হয়। একটি হোমপেজ, Google Chat API-এ অ্যাপ হোম হিসাবে উল্লেখ করা হয়, এটি একটি কাস্টমাইজযোগ্য কার্ড ইন্টারফেস যা ব্যবহারকারী এবং একটি চ্যাট অ্যাপের মধ্যে সরাসরি বার্তা স্থানগুলির হোম ট্যাবে প্রদর্শিত হয়।

চিত্র 1 : একটি হোমপেজের একটি উদাহরণ যা একটি চ্যাট অ্যাপের সাথে সরাসরি বার্তাগুলিতে প্রদর্শিত হয়৷

আপনি চ্যাট অ্যাপের সাথে ইন্টারঅ্যাক্ট করার জন্য বা ব্যবহারকারীদের চ্যাট থেকে একটি বহিরাগত পরিষেবা বা টুল ব্যবহার করতে দেওয়ার জন্য টিপস শেয়ার করতে অ্যাপ হোম ব্যবহার করতে পারেন।

---

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

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

---

পূর্বশর্ত

Node.js

একটি Google চ্যাট অ্যাপ যা ইন্টারেক্টিভ বৈশিষ্ট্যের জন্য সক্ষম। একটি HTTP পরিষেবা ব্যবহার করে একটি ইন্টারেক্টিভ চ্যাট অ্যাপ তৈরি করতে, এই কুইকস্টার্টটি সম্পূর্ণ করুন।

পাইথন

একটি Google চ্যাট অ্যাপ যা ইন্টারেক্টিভ বৈশিষ্ট্যের জন্য সক্ষম। একটি HTTP পরিষেবা ব্যবহার করে একটি ইন্টারেক্টিভ চ্যাট অ্যাপ তৈরি করতে, এই কুইকস্টার্টটি সম্পূর্ণ করুন।

জাভা

একটি Google চ্যাট অ্যাপ যা ইন্টারেক্টিভ বৈশিষ্ট্যের জন্য সক্ষম। একটি HTTP পরিষেবা ব্যবহার করে একটি ইন্টারেক্টিভ চ্যাট অ্যাপ তৈরি করতে, এই কুইকস্টার্টটি সম্পূর্ণ করুন।

অ্যাপস স্ক্রিপ্ট

একটি Google চ্যাট অ্যাপ যা ইন্টারেক্টিভ বৈশিষ্ট্যের জন্য সক্ষম। Apps Script-এ একটি ইন্টারেক্টিভ চ্যাট অ্যাপ তৈরি করতে, এই কুইকস্টার্টটি সম্পূর্ণ করুন।

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

অ্যাপ হোম সমর্থন করার জন্য, APP_HOME ইন্টারঅ্যাকশন ইভেন্টগুলি পাওয়ার জন্য আপনাকে অবশ্যই আপনার চ্যাট অ্যাপটি কনফিগার করতে হবে, যখনই কোনও ব্যবহারকারী চ্যাট অ্যাপের সাথে সরাসরি বার্তা থেকে হোম ট্যাবে ক্লিক করেন তখনই আপনার চ্যাট অ্যাপটি এই ইভেন্টটি গ্রহণ করে।

Google ক্লাউড কনসোলে আপনার কনফিগারেশন সেটিংস আপডেট করতে, নিম্নলিখিতগুলি করুন:

1. Google ক্লাউড কনসোলে, মেনু > আরও প্রোডাক্ট > Google Workspace > প্রোডাক্ট লাইব্রেরি > Google Chat API- এ যান।

   Google Chat API-এ যান

2. পরিচালনা ক্লিক করুন, এবং তারপর কনফিগারেশন ট্যাবে ক্লিক করুন।

3. ইন্টারেক্টিভ বৈশিষ্ট্যের অধীনে, অ্যাপ হোম কনফিগার করতে কার্যকারিতা বিভাগে যান:

   1. রিসিভ 1:1 মেসেজ চেকবক্স নির্বাচন করুন।
   2. সাপোর্ট অ্যাপ হোম চেকবক্স নির্বাচন করুন।

4. যদি আপনার চ্যাট অ্যাপ একটি HTTP পরিষেবা ব্যবহার করে, তাহলে সংযোগ সেটিংসে যান এবং অ্যাপ হোম ইউআরএল ক্ষেত্রের জন্য একটি এন্ডপয়েন্ট নির্দিষ্ট করুন। আপনি HTTP এন্ডপয়েন্ট ইউআরএল ফিল্ডে যে ইউআরএল উল্লেখ করেছেন সেই একই ইউআরএল ব্যবহার করতে পারেন।

5. Save এ ক্লিক করুন।

একটি অ্যাপ হোম কার্ড তৈরি করুন

আরও উদাহরণের জন্য, Google Chat অ্যাপের নমুনাগুলি দেখুন।

যখন কোনও ব্যবহারকারী অ্যাপ হোম খোলে, তখন আপনার চ্যাট অ্যাপটিকে pushCard নেভিগেশন এবং একটি Card মাধ্যমে RenderActions এর একটি উদাহরণ ফিরিয়ে দিয়ে APP_HOME ইন্টারঅ্যাকশন ইভেন্টটি পরিচালনা করতে হবে। একটি ইন্টারেক্টিভ অভিজ্ঞতা তৈরি করতে, কার্ডটিতে ইন্টারেক্টিভ উইজেট থাকতে পারে যেমন বোতাম বা টেক্সট ইনপুট যা চ্যাট অ্যাপ অতিরিক্ত কার্ড বা ডায়ালগ দিয়ে প্রক্রিয়া করতে এবং প্রতিক্রিয়া জানাতে পারে।

নিম্নলিখিত উদাহরণে, চ্যাট অ্যাপ একটি প্রাথমিক অ্যাপ হোম কার্ড প্রদর্শন করে যা কার্ড তৈরির সময় এবং একটি বোতাম প্রদর্শন করে। যখন একজন ব্যবহারকারী বোতামে ক্লিক করেন, তখন চ্যাট অ্যাপ একটি আপডেট করা কার্ড ফেরত দেয় যা আপডেট করা কার্ড তৈরির সময় দেখায়।

Node.js

node/app-home/index.js

GitHub এ দেখুন

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/app-home/main.py

GitHub এ দেখুন

@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/app-home/src/main/java/com/google/chat/app/home/App.java

GitHub এ দেখুন

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

অ্যাপস স্ক্রিপ্ট

সমস্ত APP_HOME ইন্টারঅ্যাকশন ইভেন্টের পরে কল করা onAppHome ফাংশনটি প্রয়োগ করুন:

এই উদাহরণ কার্ড JSON ফেরত দিয়ে একটি কার্ড বার্তা পাঠায়। আপনি Apps স্ক্রিপ্ট কার্ড পরিষেবাও ব্যবহার করতে পারেন৷

apps-script/app-home/app-home.gs

GitHub এ দেখুন

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

অ্যাপ হোম ইন্টারঅ্যাকশনে সাড়া দিন

যদি আপনার প্রাথমিক অ্যাপ হোম কার্ডে ইন্টারেক্টিভ উইজেট থাকে, যেমন বোতাম বা নির্বাচন ইনপুট, আপনার চ্যাট অ্যাপকে অবশ্যই updateCard নেভিগেশনের সাথে RenderActions এর একটি উদাহরণ প্রদান করে সংশ্লিষ্ট ইন্টারঅ্যাকশন ইভেন্টগুলি পরিচালনা করতে হবে। ইন্টারেক্টিভ উইজেট পরিচালনা সম্পর্কে আরও জানতে, ব্যবহারকারীদের দ্বারা ইনপুট করা প্রক্রিয়া তথ্য দেখুন।

আগের উদাহরণে, প্রাথমিক অ্যাপ হোম কার্ডে একটি বোতাম অন্তর্ভুক্ত ছিল। যখনই একজন ব্যবহারকারী বোতামে ক্লিক করেন, একটি CARD_CLICKED ইন্টারঅ্যাকশন ইভেন্ট অ্যাপ হোম কার্ড রিফ্রেশ করতে ফাংশন updateAppHome ট্রিগার করে, যেমনটি নিম্নলিখিত কোডে দেখানো হয়েছে:

Node.js

node/app-home/index.js

GitHub এ দেখুন

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

পাইথন

python/app-home/main.py

GitHub এ দেখুন

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/app-home/src/main/java/com/google/chat/app/home/App.java

GitHub এ দেখুন

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

অ্যাপস স্ক্রিপ্ট

এই উদাহরণ কার্ড JSON ফেরত দিয়ে একটি কার্ড বার্তা পাঠায়। আপনি Apps স্ক্রিপ্ট কার্ড পরিষেবাও ব্যবহার করতে পারেন৷

apps-script/app-home/app-home.gs

GitHub এ দেখুন

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

ডায়ালগ খুলুন

আপনার চ্যাট অ্যাপটিও ডায়ালগ খোলার মাধ্যমে অ্যাপ হোমে ইন্টারঅ্যাকশনের প্রতিক্রিয়া জানাতে পারে।

চিত্র 3 : একটি ডায়ালগ যা একজন ব্যবহারকারীকে একটি পরিচিতি যোগ করতে অনুরোধ করে।

অ্যাপ হোম থেকে একটি ডায়ালগ খুলতে, Card অবজেক্ট রয়েছে এমন updateCard নেভিগেশন সহ renderActions ফিরিয়ে দিয়ে সম্পর্কিত ইন্টারঅ্যাকশন ইভেন্টটি প্রক্রিয়া করুন। নিম্নলিখিত উদাহরণে, একটি চ্যাট অ্যাপ CARD_CLICKED ইন্টারঅ্যাকশন ইভেন্ট প্রক্রিয়া করে এবং একটি ডায়ালগ খোলার মাধ্যমে একটি অ্যাপ হোম কার্ড থেকে একটি বোতাম ক্লিকের প্রতিক্রিয়া দেয়:

{ renderActions: { action: { navigations: [{ updateCard: { sections: [{
  header: "Add new contact",
  widgets: [{ "textInput": {
    label: "Name",
    type: "SINGLE_LINE",
    name: "contactName"
  }}, { textInput: {
    label: "Address",
    type: "MULTIPLE_LINE",
    name: "address"
  }}, { decoratedText: {
    text: "Add to favorites",
    switchControl: {
      controlType: "SWITCH",
      name: "saveFavorite"
    }
  }}, { decoratedText: {
    text: "Merge with existing contacts",
    switchControl: {
      controlType: "SWITCH",
      name: "mergeContact",
      selected: true
    }
  }}, { buttonList: { buttons: [{
    text: "Next",
    onClick: { action: { function: "openSequentialDialog" }}
  }]}}]
}]}}]}}}

একটি ডায়ালগ বন্ধ করতে, নিম্নলিখিত মিথস্ক্রিয়া ইভেন্টগুলি প্রক্রিয়া করুন:

• CLOSE_DIALOG : ডায়ালগ বন্ধ করে এবং চ্যাট অ্যাপের প্রাথমিক অ্যাপ হোম কার্ডে ফিরে আসে।
• CLOSE_DIALOG_AND_EXECUTE : ডায়ালগ বন্ধ করে এবং অ্যাপ হোম কার্ড রিফ্রেশ করে।

নিম্নলিখিত কোড নমুনা একটি ডায়ালগ বন্ধ করতে এবং অ্যাপ হোম কার্ডে ফিরে যেতে CLOSE_DIALOG ব্যবহার করে:

{ renderActions: { action: {
  navigations: [{ endNavigation: { action: "CLOSE_DIALOG" }}]
}}}

ব্যবহারকারীদের কাছ থেকে তথ্য সংগ্রহ করতে, আপনি ক্রমিক ডায়ালগও তৈরি করতে পারেন। ক্রমিক ডায়ালগগুলি কীভাবে তৈরি করতে হয় তা শিখতে, ডায়ালগ খুলুন এবং প্রতিক্রিয়া দিন দেখুন।

সম্পর্কিত বিষয়

• অ্যাপ হোম ব্যবহার করে এমন চ্যাট অ্যাপের নমুনাগুলি দেখুন ।
• ডায়ালগ খুলুন এবং সাড়া দিন ।