Создайте приложение для чата с помощью Google Cloud Functions

На этой странице объясняется, как создать приложение для чата и взаимодействовать с ним с помощью Google Cloud Functions .

Чтобы создать приложение, вы пишете и развертываете облачную функцию , которую приложение использует для обработки ответа на событие сообщения из Google Chat. Ответ представляет собой карточку , на которой отображается имя отправителя и изображение аватара, как показано на следующем изображении:

Приложение чата отвечает карточкой с отображаемым именем отправителя и изображением аватара

Цели

  • Настройте свою среду.
  • Создайте и разверните облачную функцию.
  • Опубликуйте приложение в Google Chat.
  • Протестируйте приложение.

Предпосылки

Настройка среды

Прежде чем использовать Google API, вам необходимо включить их в проекте Google Cloud. Вы можете включить один или несколько API в одном проекте Google Cloud.

  • В консоли Google Cloud включите Google Chat API, Cloud Build API, Cloud Functions API и Cloud Pub/Sub API.

    Включить API

Создание и развертывание облачной функции

Создайте и разверните облачную функцию, которая создает карточку чата с отображаемым именем отправителя и изображением аватара. Когда приложение чата получает сообщение, оно запускает функцию и отвечает карточкой.

Чтобы создать и развернуть функцию для приложения чата, выполните следующие действия:

Node.js

  1. В консоли Google Cloud перейдите на страницу Cloud Functions:

    Перейти к облачным функциям

    Убедитесь, что выбран проект для вашего приложения Chat.

  2. Нажмите Создать функцию .

  3. На странице Создать функцию настройте свою функцию:

    1. В поле «Имя функции » введите «QuickStartChatApp».
    2. В поле Тип триггера выберите HTTP .

    3. В разделе «Аутентификация» выберите «Разрешить вызовы без проверки подлинности» .

      Дополнительную информацию об аутентификации в Google Workspace см. в разделе Аутентификация и авторизация приложений Chat и запросов API .

    4. Нажмите Сохранить .

    5. Нажмите «Далее» .

  4. В среде выполнения выберите Node.js 10 .

  5. В Исходный код выберите встроенный редактор .

  6. В точке входа удалите текст по умолчанию и введите helloChat .

  7. Замените содержимое index.js следующим кодом:

    узел/аватар-бот/index.js
    /**
 * Google Cloud Function that responds to messages sent from a
 * Hangouts Chat room.
 *
 * @param {Object} req Request sent from Hangouts Chat room
 * @param {Object} res Response to send back
 */
exports.helloChat = function helloChat(req, res) {
  if (req.method === 'GET' || !req.body.message) {
    res.send('Hello! This function is meant to be used in a Hangouts Chat ' +
      'Room.');
  }

  const sender = req.body.message.sender.displayName;
  const image = req.body.message.sender.avatarUrl;

  const data = createMessage(sender, image);

  res.send(data);
};

/**
 * Creates a card with two widgets.
 * @param {string} displayName the sender's display name
 * @param {string} imageUrl the URL for the sender's avatar
 * @return {Object} a card with the user's avatar.
 */
function createMessage(displayName, imageUrl) {
  const cardHeader = {
    title: `Hello ${displayName}!`,
  };

  const avatarWidget = {
    textParagraph: {text: 'Your avatar picture: '},
  };

  const avatarImageWidget = {
    image: {imageUrl},
  };

  const avatarSection = {
    widgets: [
      avatarWidget,
      avatarImageWidget,
    ],
  };

  return {
    cardsV2: [{
      cardId: 'avatarCard',
      card: {
        name: 'Avatar Card',
        header: cardHeader,
        sections: [avatarSection],
      }
    }],
  };
}

  8. Щелкните Развернуть .

питон

  1. В консоли Google Cloud перейдите на страницу Cloud Functions:

    Перейти к облачным функциям

    Убедитесь, что выбран проект для вашего приложения Chat.

  2. Нажмите Создать функцию .

  3. На странице Создать функцию настройте свою функцию:

    1. В поле «Имя функции » введите «QuickStartChatApp».
    2. В поле Тип триггера выберите HTTP .

    3. В разделе «Аутентификация» выберите «Разрешить вызовы без проверки подлинности» .

      Дополнительную информацию об аутентификации в Google Workspace см. в разделе Аутентификация и авторизация приложений Chat и запросов API .

    4. Нажмите Сохранить .

    5. Нажмите «Далее» .

  4. В среде выполнения выберите Python 3.10 .

  5. В Исходный код выберите встроенный редактор .

  6. В точке входа удалите текст по умолчанию и введите hello_chat .

  7. Замените содержимое main.py следующим кодом:

    python/аватар-бот/main.py
    from typing import Any, Mapping

import flask
import functions_framework


# Google Cloud Function that responds to messages sent in
# Google Chat.
#
# @param {Object} req Request sent from Google Chat.
# @param {Object} res Response to send back.
@functions_framework.http
def hello_chat(req: flask.Request) -> Mapping[str, Any]:
  if req.method == "GET":
    return "Hello! This function must be called from Google Chat."

  request_json = req.get_json(silent=True)

  display_name = request_json["message"]["sender"]["displayName"]
  avatar = request_json["message"]["sender"]["avatarUrl"]

  response = create_message(name=display_name, image_url=avatar)

  return response


# Creates a card with two widgets.
# @param {string} name the sender's display name.
# @param {string} image_url the URL for the sender's avatar.
# @return {Object} a card with the user's avatar.
def create_message(name: str, image_url: str) -> Mapping[str, Any]:
  avatar_image_widget = {"image": {"imageUrl": image_url}}
  avatar_text_widget = {"textParagraph": {"text": "Your avatar picture:"}}
  avatar_section = {"widgets": [avatar_text_widget, avatar_image_widget]}

  header = {"title": f"Hello {name}!"}

  cards = {
      "cardsV2": [
          {
              "cardId": "avatarCard",
              "card": {
                  "name": "Avatar Card",
                  "header": header,
                  "sections": [avatar_section],
              },
          }
      ]
  }

  return cards

  8. Щелкните Развернуть .

Джава

  1. В консоли Google Cloud перейдите на страницу Cloud Functions:

    Перейти к облачным функциям

    Убедитесь, что выбран проект для вашего приложения Chat.

  2. Нажмите Создать функцию .

  3. На странице Создать функцию настройте свою функцию:

    1. В поле «Имя функции » введите «QuickStartChatApp».
    2. В поле Тип триггера выберите HTTP .

    3. В разделе «Аутентификация» выберите «Разрешить вызовы без проверки подлинности» .

      Дополнительную информацию об аутентификации в Google Workspace см. в разделе Аутентификация и авторизация приложений Chat и запросов API .

    4. Нажмите Сохранить .

    5. Нажмите «Далее» .

  4. В среде выполнения выберите Java 11 .

  5. В Исходный код выберите встроенный редактор .

  6. В точке входа удалите текст по умолчанию и введите HelloChat .

  7. Переименуйте src/main/java/com/example/Example.java в src/main/java/HelloChat.java .

  8. Замените содержимое HelloChat.java следующим кодом:

    java/аватар-бот/src/main/java/HelloChat.java
    import com.google.api.services.chat.v1.model.CardWithId;
import com.google.api.services.chat.v1.model.GoogleAppsCardV1Card;
import com.google.api.services.chat.v1.model.GoogleAppsCardV1CardHeader;
import com.google.api.services.chat.v1.model.GoogleAppsCardV1Image;
import com.google.api.services.chat.v1.model.GoogleAppsCardV1Section;
import com.google.api.services.chat.v1.model.GoogleAppsCardV1TextParagraph;
import com.google.api.services.chat.v1.model.GoogleAppsCardV1Widget;
import com.google.api.services.chat.v1.model.Message;
import com.google.cloud.functions.HttpFunction;
import com.google.cloud.functions.HttpRequest;
import com.google.cloud.functions.HttpResponse;
import com.google.gson.Gson;
import com.google.gson.JsonObject;
import java.util.List;

public class HelloChat implements HttpFunction {
  private static final Gson gson = new Gson();

  @Override
  public void service(HttpRequest request, HttpResponse response) throws Exception {
    JsonObject body = gson.fromJson(request.getReader(), JsonObject.class);

    if (request.getMethod().equals("GET") || !body.has("message")) {
      response.getWriter().write("Hello! This function must be called from Google Chat.");
      return;
    }

    JsonObject sender = body.getAsJsonObject("message").getAsJsonObject("sender");
    String displayName = sender.has("displayName") ? sender.get("displayName").getAsString() : "";
    String avatarUrl = sender.has("avatarUrl") ? sender.get("avatarUrl").getAsString() : "";
    Message message = createMessage(displayName, avatarUrl);

    response.getWriter().write(gson.toJson(message));
  }

  Message createMessage(String displayName, String avatarUrl) {
    GoogleAppsCardV1CardHeader cardHeader = new GoogleAppsCardV1CardHeader();
    cardHeader.setTitle(String.format("Hello %s!", displayName));

    GoogleAppsCardV1TextParagraph textParagraph = new GoogleAppsCardV1TextParagraph();
    textParagraph.setText("Your avatar picture: ");

    GoogleAppsCardV1Widget avatarWidget = new GoogleAppsCardV1Widget();
    avatarWidget.setTextParagraph(textParagraph);

    GoogleAppsCardV1Image image = new GoogleAppsCardV1Image();
    image.setImageUrl(avatarUrl);

    GoogleAppsCardV1Widget avatarImageWidget = new GoogleAppsCardV1Widget();
    avatarImageWidget.setImage(image);

    GoogleAppsCardV1Section section = new GoogleAppsCardV1Section();
    section.setWidgets(List.of(avatarWidget, avatarImageWidget));

    GoogleAppsCardV1Card card = new GoogleAppsCardV1Card();
    card.setName("Avatar Card");
    card.setHeader(cardHeader);
    card.setSections(List.of(section));

    CardWithId cardWithId = new CardWithId();
    cardWithId.setCardId("previewLink");
    cardWithId.setCard(card);

    Message message = new Message();
    message.setCardsV2(List.of(cardWithId));

    return message;
  }
}

  9. Замените содержимое pom.xml следующим кодом:

    Java/аватар-бот/pom.xml
    <project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>cloudfunctions</groupId>
  <artifactId>http-function</artifactId>
  <version>1.0-SNAPSHOT</version>

  <properties>
    <maven.compiler.target>11</maven.compiler.target>
    <maven.compiler.source>11</maven.compiler.source>
  </properties>

  <dependencies>
    <dependency>
      <groupId>com.google.cloud.functions</groupId>
      <artifactId>functions-framework-api</artifactId>
      <version>1.0.1</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
    <dependency>
        <groupId>com.google.code.gson</groupId>
        <artifactId>gson</artifactId>
        <version>2.9.1</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/com.google.apis/google-api-services-chat -->
    <dependency>
      <groupId>com.google.apis</groupId>
      <artifactId>google-api-services-chat</artifactId>
      <version>v1-rev20230115-2.0.0</version>
    </dependency>
  </dependencies>

  <!-- Required for Java 11 functions in the inline editor -->
  <build>
    <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.8.1</version>
        <configuration>
          <excludes>
            <exclude>.google/</exclude>
          </excludes>
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>

  10. Щелкните Развернуть .

Откроется страница Cloud Functions, и ваша функция появится с индикатором выполнения развертывания рядом с именем функции. Когда индикатор выполнения исчезнет и появится галочка, ваша функция развернута.

Опубликуйте приложение в Google Chat

После развертывания облачной функции выполните следующие действия, чтобы превратить ее в приложение Google Chat:

  1. В консоли Google Cloud нажмите > Функции облака .

    Перейти к облачным функциям

    Убедитесь, что выбран проект, для которого вы включили облачные функции.

  2. В списке функций нажмите QuickStartChatApp .

  3. На странице сведений о функции щелкните Триггер .

  4. В разделе URL-адрес триггера скопируйте URL-адрес.

  5. Найдите «Google Chat API» и нажмите Google Chat API .

  6. Щелкните Управление .

  7. Нажмите Конфигурация и настройте приложение Google Chat:

    1. В поле Имя приложения введите Quickstart App .
    2. В URL-адресе аватара введите https://developers.google.com/chat/images/quickstart-app-avatar.png .
    3. В поле Описание введите Quickstart app .
    4. В разделе «Функциональность» выберите «Получать сообщения 1:1» , «Присоединяйтесь к пространствам и групповым беседам » и «Записывать ошибки в облачное журналирование» .
    5. В разделе «Настройки подключения» выберите «URL-адрес приложения» и вставьте URL-адрес триггера облачной функции в поле.
    6. В разделе «Разрешения» выберите «Определенные люди и группы в вашем домене» и введите свой адрес электронной почты.

  8. Нажмите Сохранить .

Приложение готово принимать и отвечать на сообщения в Google Chat.

Протестируйте свое приложение чата

Чтобы протестировать приложение Chat, отправьте приложению прямое сообщение:

  1. Откройте чат Google .
  2. Чтобы отправить прямое сообщение в приложение, нажмите «Начать чат и в появившемся окне нажмите «Найти приложения» .
  3. В диалоговом окне «Найти приложения » найдите «Приложение для быстрого запуска».
  4. Чтобы открыть прямое сообщение с помощью приложения, найдите приложение Quickstart и нажмите «Добавить» > «Чат» .
  5. В прямом сообщении введите Hello и нажмите enter .

Приложение возвращает карточку с вашим отображаемым именем и изображением аватара.

Следующие шаги

Для устранения неполадок и отладки приложения Chat см. следующие страницы:

  • При создании приложения Chat может потребоваться его отладка путем чтения журналов ошибок приложения. Чтобы прочитать журналы, в консоли Google Cloud перейдите в Logs Explorer .
  • Устранение неполадок .

Чтобы добавить дополнительные функции в приложение Chat, обратитесь к этим руководствам:

  • Создание интерактивных карточек . Сообщения карточек поддерживают определенный макет, интерактивные элементы пользовательского интерфейса, такие как кнопки, и мультимедийные элементы, такие как изображения. Используйте карточные сообщения, чтобы предоставить подробную информацию, собрать информацию от пользователей и направить пользователей к следующему шагу.
  • Поддержка команд с косой чертой . Команды с косой чертой позволяют регистрировать и рекламировать определенные команды, которые пользователи могут давать вашему приложению, вводя команду, начинающуюся с косой черты ( / ), например /help .
  • Диалоговые окна запуска . Диалоговые окна представляют собой оконные интерфейсы на основе карточек, которые ваше приложение может открывать для взаимодействия с пользователем. Несколько карточек можно соединять последовательно, что помогает пользователям выполнять многоэтапные процессы, такие как заполнение данных формы.

Чтобы узнать больше об API Google Chat, просмотрите справочную документацию .