Tworzenie strony głównej aplikacji Google Chat

Na tej stronie dowiesz się, jak utworzyć stronę główną aplikacji Google Chat. Strona główna aplikacji to interfejs kart z możliwością dostosowania wysyłane przez aplikację do obsługi czatu po otwarciu czatu w aplikacji Google Chat.

Karta główna aplikacji z 2 widżetami.

Możesz na przykład: skonfigurować komunikat na karcie głównej aplikacji tak, aby zawierał wskazówki dotyczące interakcji Czat za pomocą polecenia po ukośniku. Dla użytkowników strona główna aplikacji to jest dostępna tylko na czacie w aplikacji Google Chat, jeśli włącza ją deweloper aplikacji.

Za pomocą kreatora kart możesz zaprojektować i wyświetlić podgląd wiadomości kart JSON przeznaczonych do aplikacji Google Chat:

Otwórz kreator kart

Wymagania wstępne

Python

Aplikacja Google Chat, w której można korzystać z funkcji interaktywnych. Aby utworzyć interaktywna aplikacja do obsługi czatu przy użyciu usługi HTTP zapoznaj się z tym krótkim wprowadzeniem.

Google Apps Script

Aplikacja Google Chat, w której można korzystać z funkcji interaktywnych. Aby utworzyć z interaktywną aplikacją Google Chat w Apps Script, zapoznaj się z tym krótkim wprowadzeniem.

Node.js

Aplikacja Google Chat, w której można korzystać z funkcji interaktywnych. Aby utworzyć interaktywna aplikacja do obsługi czatu przy użyciu usługi HTTP zapoznaj się z tym krótkim wprowadzeniem.

Java

Aplikacja Google Chat, w której można korzystać z funkcji interaktywnych. Aby utworzyć interaktywna aplikacja do obsługi czatu przy użyciu usługi HTTP zapoznaj się z tym krótkim wprowadzeniem.

Konfigurowanie interfejsu Chat API

Aby obsługiwać stronę główną aplikacji, musisz zaktualizować konfigurację interfejsu Chat API w konsoli Google Cloud.

Python

  1. W konsoli Google Cloud otwórz Menu. > Więcej produktów > Google Workspace > Biblioteka usług > Interfejs Google Chat API.

    Otwórz interfejs Google Chat API

  2. Kliknij Manage (Zarządzaj), a następnie kliknij kartę Configuration (Konfiguracja).

  3. Zaznacz pole wyboru Pomoc techniczna App Home.

  4. W polu URL strony głównej aplikacji dodaj adres URL. Ta wartość jest zwykle taka sama Adres URL w polu URL aplikacji. Ten adres URL jest wywoływany dla Zdarzenia: APP_HOME.

  5. Kliknij Zapisz.

Google Apps Script

  1. W konsoli Google Cloud otwórz Menu. > Więcej produktów > Google Workspace > Biblioteka usług > Interfejs Google Chat API.

    Otwórz interfejs Google Chat API

  2. Kliknij Manage (Zarządzaj), a następnie kliknij kartę Configuration (Konfiguracja).

  3. Zaznacz pole wyboru Pomoc techniczna App Home.

  4. Kliknij Zapisz.

Node.js

  1. W konsoli Google Cloud otwórz Menu. > Więcej produktów > Google Workspace > Biblioteka usług > Interfejs Google Chat API.

    Otwórz interfejs Google Chat API

  2. Kliknij Manage (Zarządzaj), a następnie kliknij kartę Configuration (Konfiguracja).

  3. Zaznacz pole wyboru Pomoc techniczna App Home.

  4. W polu URL strony głównej aplikacji dodaj adres URL. Ta wartość jest zwykle taka sama Adres URL w polu URL aplikacji. Ten adres URL jest wywoływany dla Zdarzenia: APP_HOME.

  5. Kliknij Zapisz.

Java

  1. W konsoli Google Cloud otwórz Menu. > Więcej produktów > Google Workspace > Biblioteka usług > Interfejs Google Chat API.

    Otwórz interfejs Google Chat API

  2. Kliknij Manage (Zarządzaj), a następnie kliknij kartę Configuration (Konfiguracja).

  3. Zaznacz pole wyboru Pomoc techniczna App Home.

  4. W polu URL strony głównej aplikacji dodaj adres URL. Ta wartość jest zwykle taka sama Adres URL w polu URL aplikacji. Ten adres URL jest wywoływany dla Zdarzenia: APP_HOME.

  5. Kliknij Zapisz.

Utwórz stronę główną aplikacji

Karta strony głównej aplikacji jest inicjowana, gdy użytkownik otworzy czat z Google Chat i można ją zaktualizować w odpowiedzi na zdarzenie interaktywne, takie jak kliknięcie przycisku, przesłanie formularza lub zamknięcie okna;

W przykładzie poniżej aplikacja Google Chat wyświetla pierwszą kartę strony głównej aplikacji, która zawiera godzinę utworzenia karty oraz przycisk. Gdy użytkownik kliknie przycisk, aplikacja Google Chat zwraca zaktualizowaną kartę z godziną utworzenia zaktualizowanej karty.

Utwórz początkową kartę strony głównej aplikacji

Aby utworzyć stronę główną aplikacji, musi ona obsługiwać APP_HOME zdarzeń interakcji i zwracają wystąpienie RenderActions. z nawigacją 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"
      }}
    }]}}
  ]}]}

Google Apps Script

Zaimplementuj funkcję onAppHome, która będzie wywoływana po wszystkich zdarzeniach APP_HOME:

Ten przykładowy kod karty wysyła wiadomość przez zwrócenie card JSON. Możesz też użyć usługi Usługa karty 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;
}

Aktualizowanie karty strony głównej aplikacji

Jeśli początkowa karta główna aplikacji zawiera interaktywne widżety, np. przyciski lub danych wejściowych wyboru, aplikacja Google Chat musi powiązanych zdarzeń interakcji przez zwrócenie instancji RenderActions z nawigacją updateCard. Aby dowiedzieć się więcej o obsłudze elementów interaktywnych widżety, patrz Informacje o procesach wprowadzane przez użytkowników.

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

Google Apps Script

Ten przykładowy kod karty wysyła wiadomość przez zwrócenie card JSON. Możesz też użyć usługi Usługa karty 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;
}

Ograniczenia

Ogólnie rzecz biorąc, navigation to niedostępne w przypadku aplikacji do obsługi czatu. Nie można zwrócić stosu kart. Tylko pushCard (w przypadku pierwszej odpowiedzi) i updateCard (w przypadku aktualizacji) w aplikacjach do obsługi czatu.