Startseite für eine Google Chat-App erstellen

Auf dieser Seite erfahren Sie, wie Sie eine Startseite für Ihr Google Chat App. Die App-Startseite ist eine anpassbare Kartenoberfläche die eine Chat-App an einen Nutzer sendet, wenn er eine direkte eine Nachricht mit der Chat App senden.

Karte der App-Startseite mit zwei Widgets

So können Sie zum Beispiel konfigurieren Sie die Nachricht auf der App-Startseite so, dass sie Tipps für die Interaktion mit der Chat-App mit Slash-Befehlen. Für Endnutzer ist die App-Startseite in der Direktnachricht in einer Chat-App nur verfügbar, wenn die App-Entwickler die Funktion aktiviert.

Mit dem Card Builder können Sie JSON-Kartennachrichten für Chat-Apps erstellen und als Vorschau ansehen:

Card Builder öffnen

Vorbereitung

Python

Eine Google Chat App mit aktivierten interaktiven Funktionen. So erstellen Sie ein Chat-App mit einem HTTP-Dienst verwenden können, führen Sie diese Kurzanleitung aus.

Apps Script

Eine Google Chat App mit aktivierten interaktiven Funktionen. So erstellen Sie ein interaktive Chat-App in Apps Script verwenden möchten, führen Sie diese Kurzanleitung aus.

Node.js

Eine Google Chat App mit aktivierten interaktiven Funktionen. So erstellen Sie ein Chat-App mit einem HTTP-Dienst verwenden können, führen Sie diese Kurzanleitung aus.

Java

Eine Google Chat App mit aktivierten interaktiven Funktionen. So erstellen Sie ein Chat-App mit einem HTTP-Dienst verwenden können, führen Sie diese Kurzanleitung aus.

Chat API konfigurieren

Damit die App-Startseite unterstützt wird, müssen Sie Ihre Chat API-Konfiguration aktualisieren in der Google Cloud Console.

Python

  1. Rufen Sie in der Google Cloud Console das Menü auf. > Weitere Produkte > Google Workspace > Produktbibliothek > Google Chat API.

    Zur Google Chat API

  2. Klicken Sie auf Manage (Verwalten) und dann auf den Tab Configuration (Konfiguration).

  3. Klicken Sie das Kästchen Support-App-Startseite an.

  4. Geben Sie im Feld URL der App-Startseite eine URL ein. Dieser Wert entspricht normalerweise URL als App-URL ein. Diese URL wird für APP_HOME Ereignisse.

  5. Klicken Sie auf Speichern.

Apps Script

  1. Rufen Sie in der Google Cloud Console das Menü auf. > Weitere Produkte > Google Workspace > Produktbibliothek > Google Chat API.

    Zur Google Chat API

  2. Klicken Sie auf Manage (Verwalten) und dann auf den Tab Configuration (Konfiguration).

  3. Klicken Sie das Kästchen Support-App-Startseite an.

  4. Klicken Sie auf Speichern.

Node.js

  1. Rufen Sie in der Google Cloud Console das Menü auf. > Weitere Produkte > Google Workspace > Produktbibliothek > Google Chat API.

    Zur Google Chat API

  2. Klicken Sie auf Manage (Verwalten) und dann auf den Tab Configuration (Konfiguration).

  3. Klicken Sie das Kästchen Support-App-Startseite an.

  4. Geben Sie im Feld URL der App-Startseite eine URL ein. Dieser Wert entspricht normalerweise URL als App-URL ein. Diese URL wird für APP_HOME Ereignisse.

  5. Klicken Sie auf Speichern.

Java

  1. Rufen Sie in der Google Cloud Console das Menü auf. > Weitere Produkte > Google Workspace > Produktbibliothek > Google Chat API.

    Zur Google Chat API

  2. Klicken Sie auf Manage (Verwalten) und dann auf den Tab Configuration (Konfiguration).

  3. Klicken Sie das Kästchen Support-App-Startseite an.

  4. Geben Sie im Feld URL der App-Startseite eine URL ein. Dieser Wert entspricht normalerweise URL als App-URL ein. Diese URL wird für APP_HOME Ereignisse.

  5. Klicken Sie auf Speichern.

App-Startseite erstellen

<ph type="x-smartling-placeholder">

Die Karte auf der Startseite der App wird initiiert, wenn ein Nutzer eine Direktnachricht über die Chat-App, die aktualisiert werden kann, wenn Ein interaktives Ereignis wie das Klicken auf eine Schaltfläche, das Senden eines Formulars oder das Schließen eines Dialogfelds

Im folgenden Beispiel zeigt die Chat-App eine erste Karte auf der App-Startseite, auf der die Erstellungs- und eine Schaltfläche. Wenn ein Nutzer auf die Schaltfläche klickt, gibt eine aktualisierte Karte zurück, die den Erstellungszeitpunkt der aktualisierten Karte anzeigt.

Erste Karte für die Startseite der App erstellen

Damit ein App-Startseite erstellt werden kann, muss die Chat-App Folgendes verarbeiten: APP_HOME-Interaktionsereignisse und gibt eine Instanz von RenderActions mit pushCard-Navigation.

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"
      }}
    }]}}
  ]}]}

Apps Script

Implementieren Sie die onAppHome-Funktion, die nach allen APP_HOME-Ereignissen aufgerufen wird:

In diesem Beispiel wird eine Kartennachricht gesendet, JSON-Karte Sie können auch die Apps Script-Kartendienst

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

Karte auf der App-Startseite aktualisieren

Wenn die ursprüngliche Karte der App-Startseite interaktive Widgets enthält, z. B. Schaltflächen oder Auswahleingaben muss Ihre Chat-App der zugehörigen Interaktionsereignisse, indem eine Instanz von RenderActions mit updateCard-Navigation. Weitere Informationen zum Umgang mit interaktiven Widgets finden Sie unter Von Nutzern eingegebene Informationen verarbeiten.

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

Apps Script

In diesem Beispiel wird eine Kartennachricht gesendet, JSON-Karte Sie können auch die Apps Script-Kartendienst

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

Beschränkungen

Im Allgemeinen navigation ist nicht für Chat-Apps verfügbar. Sie können keinen Stapel Karten zurückgeben. Nur pushCard (für die erste Antwort) und updateCard (für Aktualisierungen) werden für Chat-Apps verfügbar.