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

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

দুটি উইজেট সহ অ্যাপ হোম কার্ড।
চিত্র ১ : চ্যাট অ্যাপের সরাসরি মেসেজে প্রদর্শিত একটি হোমপেজের উদাহরণ।

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


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

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

পূর্বশর্ত

নোড.জেএস

একটি গুগল চ্যাট অ্যাপ যা ইন্টারঅ্যাকশন ইভেন্ট গ্রহণ করে এবং সেগুলোর উত্তর দেয়। একটি HTTP সার্ভিস ব্যবহার করে ইন্টারেক্টিভ চ্যাট অ্যাপ তৈরি করতে, এই কুইকস্টার্টটি সম্পূর্ণ করুন।

পাইথন

একটি গুগল চ্যাট অ্যাপ যা ইন্টারঅ্যাকশন ইভেন্ট গ্রহণ করে এবং সেগুলোর উত্তর দেয়। একটি HTTP সার্ভিস ব্যবহার করে ইন্টারেক্টিভ চ্যাট অ্যাপ তৈরি করতে, এই কুইকস্টার্টটি সম্পূর্ণ করুন।

জাভা

একটি গুগল চ্যাট অ্যাপ যা ইন্টারঅ্যাকশন ইভেন্ট গ্রহণ করে এবং সেগুলোর উত্তর দেয়। একটি HTTP সার্ভিস ব্যবহার করে ইন্টারেক্টিভ চ্যাট অ্যাপ তৈরি করতে, এই কুইকস্টার্টটি সম্পূর্ণ করুন।

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

একটি গুগল চ্যাট অ্যাপ যা ইন্টারঅ্যাকশন ইভেন্ট গ্রহণ করে এবং সেগুলোর উত্তর দেয়। অ্যাপস স্ক্রিপ্টে একটি ইন্টারেক্টিভ চ্যাট অ্যাপ তৈরি করতে, এই কুইকস্টার্টটি সম্পূর্ণ করুন।

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

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

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

  1. Google Cloud কনসোলে, মেনু > এপিআই ও পরিষেবা > সক্রিয় এপিআই ও পরিষেবা > Google Chat API > কনফিগারেশন- এ ক্লিক করুন। চ্যাট এপিআই কনফিগারেশনে যান
  2. ইন্টারেক্টিভ ফিচারস- এর অধীনে, ফাংশনালিটি সেকশনে যান এবং সাপোর্ট অ্যাপ হোম নির্বাচন করুন।
  3. আপনার চ্যাট অ্যাপ যদি কোনো HTTP সার্ভিস ব্যবহার করে, তাহলে কানেকশন সেটিংসে গিয়ে অ্যাপ হোম ইউআরএল (App Home URL) ফিল্ডের জন্য একটি এন্ডপয়েন্ট নির্দিষ্ট করে দিন। আপনি HTTP এন্ডপয়েন্ট ইউআরএল (HTTP endpoint URL) ফিল্ডে যে ইউআরএলটি নির্দিষ্ট করেছিলেন, সেটিই ব্যবহার করতে পারেন।
  4. সংরক্ষণ করুন- এ ক্লিক করুন।

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

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

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

নোড.জেএস

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

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

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

এই উদাহরণটি কার্ড JSON রিটার্ন করার মাধ্যমে একটি কার্ড মেসেজ পাঠায়। আপনি অ্যাপস স্ক্রিপ্ট কার্ড সার্ভিসটিও ব্যবহার করতে পারেন।

অ্যাপস-স্ক্রিপ্ট/অ্যাপ-হোম/অ্যাপ-হোম.জিএস
/**
 * 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/app-home/index.js
// Update the app home
function updateAppHome() {
  return { renderActions: { action: { navigations: [{
    updateCard: getHomeCard()
  }]}}}
};

পাইথন

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

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

এই উদাহরণটি কার্ড JSON রিটার্ন করার মাধ্যমে একটি কার্ড মেসেজ পাঠায়। আপনি অ্যাপস স্ক্রিপ্ট কার্ড সার্ভিসটিও ব্যবহার করতে পারেন।

অ্যাপস-স্ক্রিপ্ট/অ্যাপ-হোম/অ্যাপ-হোম.জিএস
/**
 * Updates the home app.
 */
function updateAppHome() {
  return { renderActions: { action: { navigations: [{
    updateCard: getHomeCard()
  }]}}};
}

খোলা ডায়ালগ

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

একটি ডায়ালগ বক্স যেখানে বিভিন্ন ধরনের উইজেট রয়েছে।
চিত্র ৩ : একটি ডায়ালগ বক্স যা ব্যবহারকারীকে একটি পরিচিতি যোগ করতে অনুরোধ করে।

অ্যাপ হোম থেকে একটি ডায়ালগ খুলতে, একটি 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" }}]
}}}

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