Tworzenie aplikacji Google Chat za pomocą Google Cloud Functions

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Z tego artykułu dowiesz się, jak tworzyć aplikacje Google Chat i korzystać z nich w Google Cloud Functions.

Aby utworzyć aplikację, napisz i wdróż funkcję w Cloud Functions, która jest używana przez aplikację do przetwarzania odpowiedzi na zdarzenie z wiadomości w Google Chat. Odpowiedź to karta z nazwą i awatarem nadawcy, jak na tym obrazie:

Aplikacja Google Chat wyświetlająca kartę z wyświetlaną nazwą i awatarem nadawcy

Cele

  • skonfigurować środowisko,
  • utworzyć i wdrożyć funkcję w Cloud Functions;
  • Opublikuj aplikację w Google Chat.
  • Przetestuj aplikację.

Wymagania wstępne

Konfigurowanie środowiska

Zanim zaczniesz korzystać z interfejsów API Google, musisz włączyć je w projekcie Google Cloud. W jednym projekcie Google Cloud możesz włączyć jeden lub więcej interfejsów API.
  • W konsoli Google Cloud włącz interfejsy Google Chat API, Cloud Build API, Cloud Functions API i Cloud Pub/Sub API.

    Włączanie interfejsów API

Tworzenie i wdrażanie funkcji w Cloud Functions

Utwórz i wdróż funkcję w Cloud Functions, która wygeneruje kartę czatu z wyświetlaną nazwą i obrazem awatara nadawcy. Gdy aplikacja do obsługi czatu otrzymuje wiadomość, uruchamia funkcję i odpowiada kartą.

Aby utworzyć i wdrożyć funkcję dla aplikacji do obsługi czatu, wykonaj te czynności:

Node.js

  1. W konsoli Google Cloud otwórz stronę Cloud Functions:

    Otwórz stronę Cloud Functions

    Sprawdź, czy wybrany jest projekt aplikacji do obsługi czatu.

  2. Kliknij Utwórz funkcję.

  3. Na stronie Utwórz funkcję skonfiguruj funkcję:

    1. W polu Nazwa funkcji wpisz „QuickStartChatApp”.
    2. W polu Typ reguły wybierz HTTP.
    3. W sekcji Uwierzytelnianie wybierz Zezwalaj na nieuwierzytelnione wywołania.

      Więcej informacji o uwierzytelnianiu w Google Workspace znajdziesz w artykule Uwierzytelnianie i autoryzowanie aplikacji do obsługi czatu oraz żądań do interfejsu API (w języku angielskim).

    4. Kliknij Zapisz.

    5. Kliknij Dalej.

  4. W sekcji Środowisko wykonawcze wybierz Node.js 10.

  5. W sekcji Kod źródłowy wybierz Edytor wbudowany.

  6. W sekcji Punkt wejścia usuń tekst domyślny i wpisz helloChat.

  7. Zamień zawartość pliku index.js na ten kod:

    /**
      * 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. Kliknij Wdróż.

Python

  1. W konsoli Google Cloud otwórz stronę Cloud Functions:

    Otwórz stronę Cloud Functions

    Sprawdź, czy wybrany jest projekt aplikacji do obsługi czatu.

  2. Kliknij Utwórz funkcję.

  3. Na stronie Utwórz funkcję skonfiguruj funkcję:

    1. W polu Nazwa funkcji wpisz „QuickStartChatApp”.
    2. W polu Typ reguły wybierz HTTP.
    3. W sekcji Uwierzytelnianie wybierz Zezwalaj na nieuwierzytelnione wywołania.

      Więcej informacji o uwierzytelnianiu w Google Workspace znajdziesz w artykule Uwierzytelnianie i autoryzowanie aplikacji do obsługi czatu oraz żądań do interfejsu API (w języku angielskim).

    4. Kliknij Zapisz.

    5. Kliknij Dalej.

  4. W sekcji Środowisko wykonawcze wybierz Python 3.10.

  5. W sekcji Kod źródłowy wybierz Edytor wbudowany.

  6. W sekcji Punkt wejścia usuń tekst domyślny i wpisz hello_chat.

  7. Zamień zawartość pliku main.py na ten kod:

    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. Kliknij Wdróż.

Java

  1. W konsoli Google Cloud otwórz stronę Cloud Functions:

    Otwórz stronę Cloud Functions

    Sprawdź, czy wybrany jest projekt aplikacji do obsługi czatu.

  2. Kliknij Utwórz funkcję.

  3. Na stronie Utwórz funkcję skonfiguruj funkcję:

    1. W polu Nazwa funkcji wpisz „QuickStartChatApp”.
    2. W polu Typ reguły wybierz HTTP.
    3. W sekcji Uwierzytelnianie wybierz Zezwalaj na nieuwierzytelnione wywołania.

      Więcej informacji o uwierzytelnianiu w Google Workspace znajdziesz w artykule Uwierzytelnianie i autoryzowanie aplikacji do obsługi czatu oraz żądań do interfejsu API (w języku angielskim).

    4. Kliknij Zapisz.

    5. Kliknij Dalej.

  4. W sekcji Środowisko wykonawcze wybierz Java 11.

  5. W sekcji Kod źródłowy wybierz Edytor wbudowany.

  6. W sekcji Punkt wejścia usuń tekst domyślny i wpisz HelloChat.

  7. Zmień nazwę pliku src/main/java/com/example/Example.java na src/main/java/HelloChat.java.

  8. Zamień zawartość pliku HelloChat.java na ten kod:

    java/avatar-bot/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. Zamień zawartość pliku pom.xml na ten kod:

    java/awatar-bot/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. Kliknij Wdróż.

Otworzy się strona Cloud Functions, a obok nazwy funkcji pojawi się wskaźnik postępu wdrażania. Gdy wskaźnik zniknie i pojawi się znacznik wyboru, funkcja zostanie wdrożona.

Publikowanie aplikacji w Google Chat

Po wdrożeniu funkcji w Cloud Functions wykonaj te czynności, aby przekształcić ją w aplikację Google Chat:

  1. W konsoli Google Cloud kliknij Menu > Cloud Functions.

    Otwórz przegląd Cloud Functions

    Wybierz projekt, w którym włączono Cloud Functions.

  2. Na liście funkcji kliknij QuickStartChatApp.

  3. Na stronie ze szczegółami funkcji kliknij Aktywator.

  4. W sekcji URL aktywatora skopiuj adres URL.

  5. Wyszukaj interfejs „Google Chat API” i kliknij Google Chat API.

  6. Kliknij Zarządzaj.

  7. Kliknij Konfiguracja i skonfiguruj aplikację Google Chat:

    1. W polu Nazwa aplikacji wpisz Quickstart App.
    2. W polu URL awatara wpisz https://developers.google.com/chat/images/quickstart-app-avatar.png.
    3. W polu Opis wpisz Quickstart app.
    4. W sekcji Funkcje wybierz Odbieranie wiadomości 1:1, Dołączanie do pokoi i rozmów grupowych oraz Rejestruj błędy w Cloud Logging.
    5. W sekcji Ustawienia połączenia wybierz Adres URL aplikacji i wklej w polu adres URL aktywatora funkcji w Cloud Functions.
    6. W sekcji Uprawnienia wybierz Określone osoby i grupy w domenie i wpisz adres e-mail.
  8. Kliknij Zapisz.

Aplikacja jest gotowa do odbierania wiadomości i odpowiadania na nie w Google Chat.

Testowanie aplikacji Google Chat

Aby przetestować aplikację Google Chat, wyślij jej wiadomość na czacie:

  1. Otwórz Google Chat.
  2. Aby wysłać czat do aplikacji, kliknij Rozpocznij czat , a następnie w wyświetlonym oknie kliknij Znajdź aplikacje.
  3. W oknie Znajdź aplikacje wyszukaj „Quickstart app”.
  4. Aby otworzyć czat z aplikacją, znajdź aplikację Quickstart i kliknij Dodaj > Google Chat.
  5. Na czacie wpisz Hello i naciśnij enter.

Aplikacja wyświetli kartę z wyświetlaną nazwą i zdjęciem awatara.

Dalsze kroki

Informacje o rozwiązywaniu problemów z aplikacją Google Chat i debugowaniu treści znajdziesz na tych stronach:

  • Podczas tworzenia aplikacji do obsługi czatu może być konieczne jej debugowanie, ponieważ odczytywane są jej dzienniki błędów. Aby odczytać logi, w konsoli Google Cloud otwórz eksplorator logów.
  • Rozwiąż problemy

Aby dodać więcej funkcji do aplikacji do obsługi czatu, skorzystaj z tych przewodników:

  • Tworzenie kart interaktywnych – komunikaty kart obsługują zdefiniowany układ, interaktywne elementy interfejsu (np. przyciski) i multimedia (np. obrazy). Korzystaj z kart, aby prezentować szczegółowe informacje, gromadzić informacje od użytkowników i pomagać im w kolejnych krokach.
  • Polecenia po ukośniku – polecenia po ukośniku umożliwiają rejestrowanie i reklamowanie konkretnych poleceń, które użytkownicy mogą przekazać aplikacji. Wystarczy, że wpiszesz polecenie rozpoczynające się ukośnikiem (/), np. /help.
  • Okna uruchamiania – okna są oparte na kartach i mogą służyć do interakcji użytkownika z aplikacją. Wiele kart może się układać po kolei, co ułatwia użytkownikom wykonywanie wieloetapowych procesów, takich jak wypełnianie danych formularza.

Więcej informacji o Google Chat API znajdziesz w dokumentacji.