Créer une page d'accueil pour une application Google Chat

Cette page explique comment créer une page d'accueil pour votre Application Google Chat. La page d'accueil de l'application est une interface personnalisable qu'une application Chat envoie à un utilisateur lorsqu'il ouvre une session directe avec l'application Chat.

Fiche d'accueil de l'application avec deux widgets.

Par exemple, vous pouvez configurez le message de la fiche d'accueil de l'application afin d'inclure des conseils pour interagir avec Application de chat avec commandes à barre oblique. Pour les utilisateurs finaux, la page d'accueil de l'application n'est disponible que dans un message privé d'une application Chat si le développeur de l'application active la fonctionnalité.

Utilisez le générateur de cartes pour concevoir et prévisualiser des messages de cartes JSON pour les applications Chat:

Ouvrir Card Builder

Prérequis

Python

Une application Google Chat avec des fonctionnalités interactives. Pour créer un une application Chat interactive utilisant un service HTTP, suivez ce guide de démarrage rapide.

Apps Script

Une application Google Chat avec des fonctionnalités interactives. Pour créer un application Chat interactive dans Apps Script, suivez ce guide de démarrage rapide.

Node.js

Une application Google Chat avec des fonctionnalités interactives. Pour créer un une application Chat interactive utilisant un service HTTP, suivez ce guide de démarrage rapide.

Java

Une application Google Chat avec des fonctionnalités interactives. Pour créer un une application Chat interactive utilisant un service HTTP, suivez ce guide de démarrage rapide.

Configurer l'API Chat

Pour utiliser App Home, vous devez mettre à jour la configuration de votre API Chat dans la console Google Cloud.

Python

  1. Dans la console Google Cloud, accédez à Menu. > Autres produits > Google Workspace > Bibliothèque de produits > API Google Chat.

    Accéder à l'API Google Chat

  2. Cliquez sur Gérer, puis sur l'onglet Configuration.

  3. Cochez la case Accueil de l'application d'assistance.

  4. Dans le champ App Home URL (URL de la page d'accueil de l'application), ajoutez une URL. Cette valeur est généralement la même comme URL de l'application. Cette URL est appelée Événements APP_HOME.

  5. Cliquez sur Enregistrer.

Apps Script

  1. Dans la console Google Cloud, accédez à Menu. > Autres produits > Google Workspace > Bibliothèque de produits > API Google Chat.

    Accéder à l'API Google Chat

  2. Cliquez sur Gérer, puis sur l'onglet Configuration.

  3. Cochez la case Accueil de l'application d'assistance.

  4. Cliquez sur Enregistrer.

Node.js

  1. Dans la console Google Cloud, accédez à Menu. > Autres produits > Google Workspace > Bibliothèque de produits > API Google Chat.

    Accéder à l'API Google Chat

  2. Cliquez sur Gérer, puis sur l'onglet Configuration.

  3. Cochez la case Accueil de l'application d'assistance.

  4. Dans le champ App Home URL (URL de la page d'accueil de l'application), ajoutez une URL. Cette valeur est généralement la même comme URL de l'application. Cette URL est appelée Événements APP_HOME.

  5. Cliquez sur Enregistrer.

Java

  1. Dans la console Google Cloud, accédez à Menu. > Autres produits > Google Workspace > Bibliothèque de produits > API Google Chat.

    Accéder à l'API Google Chat

  2. Cliquez sur Gérer, puis sur l'onglet Configuration.

  3. Cochez la case Accueil de l'application d'assistance.

  4. Dans le champ App Home URL (URL de la page d'accueil de l'application), ajoutez une URL. Cette valeur est généralement la même comme URL de l'application. Cette URL est appelée Événements APP_HOME.

  5. Cliquez sur Enregistrer.

Créer la page d'accueil de l'application

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

La fiche d'accueil de l'application est lancée lorsqu'un utilisateur ouvre un message privé à partir de L'application Chat peut être mise à jour en réponse à un événement interactif tel qu'un clic sur un bouton, l'envoi d'un formulaire ou la fermeture d'une boîte de dialogue.

Dans l'exemple suivant, l'application Chat affiche une fiche d'accueil initiale de l'application qui affiche l'heure à laquelle la carte a été créée et un bouton. Lorsqu'un utilisateur clique sur le bouton, l'application Chat renvoie une fiche mise à jour qui affiche l'heure à laquelle la fiche mise à jour a été créée.

Créer la carte initiale pour la page d'accueil de l'application

Pour créer une page d'accueil, l'application Chat doit gérer APP_HOME les événements d'interaction et renvoient une instance de RenderActions avec la navigation 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"
      }}
    }]}}
  ]}]}

Apps Script

Implémentez la fonction onAppHome qui est appelée après tous les événements APP_HOME:

Cet exemple envoie un message de carte en renvoyant fichier JSON de la carte. Vous pouvez également utiliser Service de fiches 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;
}

Mettre à jour la fiche d'accueil d'une application

Si la fiche d'accueil initiale de votre application contient des widgets interactifs, tels que des boutons ou de sélection, votre application Chat doit gérer les événements d'interaction associés en renvoyant une instance RenderActions avec la navigation updateCard. Pour en savoir plus sur la gestion des interactions des widgets, consultez l'article Traiter les informations saisies par les utilisateurs.

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

Cet exemple envoie un message de carte en renvoyant fichier JSON de la carte. Vous pouvez également utiliser Service de fiches 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;
}

Limites

En général, navigation correspond à non disponible pour les applications Chat. Vous ne pouvez pas retourner une pile de cartes. Seuls pushCard (pour la réponse initiale) et updateCard (pour les mises à jour) sont disponible pour les applications Chat.