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

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

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

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

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

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

পূর্বশর্ত

নোড.জেএস

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

পাইথন

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

জাভা

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

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

একটি Google Chat অ্যাপ যা ইন্টারঅ্যাকশন ইভেন্ট গ্রহণ করে এবং সাড়া দেয়। Apps Script-এ একটি ইন্টারেক্টিভ চ্যাট অ্যাপ তৈরি করতে, এই Quickstart সম্পূর্ণ করুন।

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

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

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

  1. গুগল ক্লাউড কনসোলে, মেনু > সকল পণ্য দেখুন > অন্যান্য গুগল পণ্য > গুগল ওয়ার্কস্পেস > প্রোডাক্ট লাইব্রেরি > গুগল চ্যাট API -এ যান।

    গুগল চ্যাট এপিআই-তে যান

  2. Manage এ ক্লিক করুন, এবং তারপর Configuration ট্যাবে ক্লিক করুন।

  3. ইন্টারেক্টিভ বৈশিষ্ট্যগুলির অধীনে, কার্যকারিতা বিভাগে যান এবং সাপোর্ট অ্যাপ হোম নির্বাচন করুন।

  4. যদি আপনার Chat অ্যাপটি HTTP পরিষেবা ব্যবহার করে, তাহলে Connection সেটিংসে যান এবং App Home URL ফিল্ডের জন্য একটি এন্ডপয়েন্ট নির্দিষ্ট করুন। আপনি HTTP এন্ডপয়েন্ট URL ফিল্ডে যে URLটি নির্দিষ্ট করেছেন সেই একই URL ব্যবহার করতে পারেন।

  5. সংরক্ষণ করুন ক্লিক করুন।

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

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

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

নোড.জেএস

নোড/অ্যাপ-হোম/ইন্ডেক্স.জেএস
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"
      }}
    }]}}
  ]}]};
}

পাইথন

পাইথন/অ্যাপ-হোম/মেইন.পি
@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"
      }}
    }]}}
  ]}]}

জাভা

জাভা/অ্যাপ-হোম/এসআরসি/মেইন/জাভা/কম/গুগল/চ্যাট/অ্যাপ/হোম/অ্যাপ.জাভা
// 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"))))))))));
}

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

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

এই উদাহরণটি 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 ফাংশনটি ট্রিগার করে, যেমনটি নিম্নলিখিত কোডে দেখানো হয়েছে:

নোড.জেএস

নোড/অ্যাপ-হোম/ইন্ডেক্স.জেএস
// Update the app home
function updateAppHome() {
  return { renderActions: { action: { navigations: [{
    updateCard: getHomeCard()
  }]}}}
};

পাইথন

পাইথন/অ্যাপ-হোম/মেইন.পি
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()
  }]}}}

জাভা

জাভা/অ্যাপ-হোম/এসআরসি/মেইন/জাভা/কম/গুগল/চ্যাট/অ্যাপ/হোম/অ্যাপ.জাভা
// 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 : ডায়ালগটি বন্ধ করে Chat অ্যাপের প্রাথমিক অ্যাপ হোম কার্ডে ফিরে আসে।
  • CLOSE_DIALOG_AND_EXECUTE : ডায়ালগ বন্ধ করে এবং অ্যাপ হোম কার্ড রিফ্রেশ করে।

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

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

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