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

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

На этой странице объясняется, как создать приложение Google Chat и взаимодействовать с ним с помощью 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 Console перейдите на страницу 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 следующим кодом:

    /**
      * 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.
      */
    exports.helloChat = function helloChat(req, res) {
      if (req.method === 'GET' || !req.body.message) {
        res.send('Hello! This function must be called from Google Chat.');
      }
    
      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': imageURL},
      };
    
      const avatarSection = {
        'widgets': [
          avatarWidget,
          avatarImageWidget,
        ],
      };
    
      return {
        'cards': [{
          'name': 'Avatar Card',
          'header': cardHeader,
          'sections': [avatarSection],
        }],
      };
    }
    
  8. Щелкните Развернуть .

питон

  1. В Google Cloud Console перейдите на страницу 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 следующим кодом:

    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):
      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 = {'cards': [{'name': 'Avatar Card',
                          'header': header, 'sections': [avatar_section]}]}
    
      return cards
    
  8. Щелкните Развернуть .

Ява

  1. В Google Cloud Console перейдите на страницу 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.Card;
    import com.google.api.services.chat.v1.model.CardHeader;
    import com.google.api.services.chat.v1.model.Image;
    import com.google.api.services.chat.v1.model.Message;
    import com.google.api.services.chat.v1.model.Section;
    import com.google.api.services.chat.v1.model.TextParagraph;
    import com.google.api.services.chat.v1.model.WidgetMarkup;
    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) {
        CardHeader cardHeader = new CardHeader().setTitle(String.format("Hello %s!", displayName));
        TextParagraph textParagraph = new TextParagraph().setText("Your avatar picture: ");
        WidgetMarkup avatarWidget = new WidgetMarkup().setTextParagraph(textParagraph);
        Image image = new Image().setImageUrl(avatarUrl);
        WidgetMarkup avatarImageWidget = new WidgetMarkup().setImage(image);
        Section section = new Section().setWidgets(List.of(avatarWidget, avatarImageWidget));
        Card card = new Card().setName("Avatar Card").setHeader(cardHeader).setSections(List.of(section));
    
        return new Message().setCards(List.of(card));
      }
    }

  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-rev135-1.25.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, просмотрите справочную документацию .