Tworzenie aplikacji HTTP Google Chat za pomocą Cloud Functions

Na tej stronie dowiesz się, jak utworzyć aplikację czatu HTTP. Istnieją różne sposoby wdrażania tej architektury. W Google Cloud możesz używać Cloud Functions, Cloud Run i App Engine. W tym krótkim wprowadzeniu napiszesz i wdrożysz funkcję w Cloud Functions, której aplikacja Google Chat używa do odpowiadania na wiadomość użytkownika.

W tej architekturze konfigurujesz Google Chat do integracji z Google Cloud lub serwerem lokalnym przy użyciu HTTP, jak na tym schemacie:

Architektura aplikacji do obsługi czatu korzystającej z usługi internetowej na serwerze lokalnym.

Na poprzednim diagramie użytkownik korzystający z aplikacji do obsługi czatu HTTP przekazuje takie informacje:

  1. Użytkownik wysyła wiadomość w Google Chat do aplikacji Google Chat na czacie lub w pokoju czatu.
  2. Żądanie HTTP jest wysyłane do serwera WWW, który działa w chmurze lub systemie lokalnym, zawierającym logikę aplikacji Google Chat.
  3. Opcjonalnie logika aplikacji Google Chat może zostać zintegrowana z usługami Google Workspace (takimi jak Kalendarz i Arkusze), innymi usługami Google (takimi jak Mapy, YouTube czy Vertex AI) oraz innymi usługami internetowymi (takimi jak system zarządzania projektami czy narzędzie do sprzedaży biletów).
  4. Serwer WWW wysyła odpowiedź HTTP z powrotem do usługi aplikacji Google Chat w Google Chat.
  5. Odpowiedź jest wyświetlana użytkownikowi.
  6. Opcjonalnie aplikacja do obsługi czatu może wywoływać interfejs Chat API, aby asynchronicznie publikować wiadomości lub wykonywać inne operacje.

Ta architektura pozwala korzystać z istniejących bibliotek i komponentów, które już istnieją w Twoim systemie, ponieważ te aplikacje do obsługi czatu można projektować w różnych językach programowania.

Cele

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

Wymagania wstępne

  • Konto Google Workspace z dostępem do Google Chat w organizacji Google Workspace, które zezwala na nieuwierzytelnione wywołania funkcji Google Cloud Functions.

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ć 1 lub więcej interfejsów API.
  • W konsoli Google Cloud włącz interfejsy Google Chat API, Cloud Build API, Cloud Functions API, Cloud Pub/Sub API, Cloud Logging API, Artifact Registry API i Cloud Run API.

    Włączanie interfejsów API

Utwórz i wdróż funkcję w Cloud Functions

Utwórz i wdróż funkcję w Cloud Functions, która generuje kartę czatu z wyświetlaną nazwą nadawcy i obrazem awatara. Gdy aplikacja Google Chat otrzyma wiadomość, uruchamia funkcję i odpowiada za pomocą karty.

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

Node.js

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

    Otwórz Cloud Functions

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

  2. Kliknij Utwórz funkcję.

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

    1. W sekcji Środowisko wybierz 2 generacji.
    2. W polu Nazwa funkcji wpisz QuickStartChatApp.
    3. W sekcji Region wybierz region.
    4. W sekcji Uwierzytelnianie wybierz Zezwalaj na nieuwierzytelnione wywołania.
    5. Kliknij Dalej.
  4. W sekcji Środowisko wykonawcze wybierz Node.js 20.

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

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

  7. Zastąp zawartość pliku index.js tym kodem:

    node/avatar-app/index.js
    /**
     * Google Cloud Function that responds to messages sent from a
     * Google Chat room.
     *
     * @param {Object} req Request sent from Google 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 Google 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 {
        text: 'Here\'s your avatar',
        cardsV2: [{
          cardId: 'avatarCard',
          card: {
            name: 'Avatar Card',
            header: cardHeader,
            sections: [avatarSection],
          }
        }],
      };
    }

  8. Kliknij Wdróż.

Python

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

    Otwórz Cloud Functions

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

  2. Kliknij Utwórz funkcję.

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

    1. W polu Nazwa funkcji wpisz QuickStartChatApp.
    2. W sekcji Typ aktywatora kliknij HTTP.
    3. W sekcji Uwierzytelnianie wybierz Zezwalaj na nieuwierzytelnione wywołania.
    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ń domyślny tekst i wpisz hello_chat.

  7. Zastąp zawartość pliku main.py tym kodem:

    python/avatar-app/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 = {
          "text": "Here's your avatar",
          "cardsV2": [
              {
                  "cardId": "avatarCard",
                  "card": {
                      "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 Cloud Functions

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

  2. Kliknij Utwórz funkcję.

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

    1. W polu Nazwa funkcji wpisz QuickStartChatApp.
    2. W sekcji Typ aktywatora kliknij HTTP.
    3. W sekcji Uwierzytelnianie wybierz Zezwalaj na nieuwierzytelnione wywołania.
    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ń domyślny tekst i wpisz HelloChat.

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

  8. Zastąp zawartość pliku HelloChat.java tym kodem:

    java/avatar-app/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.setText("Here's your avatar");
        message.setCardsV2(List.of(cardWithId));
    
        return message;
      }
    }

  9. Zastąp zawartość pliku pom.xml tym kodem:

    java/avatar-app/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. Kliknij Wdróż.

Otworzy się strona z informacjami w Cloud Functions, a Twoja funkcja będzie zawierać 2 wskaźniki postępu: jeden dla kompilacji, a drugi dla usługi. Gdy oba wskaźniki postępu znikną i zostaną zastąpione znacznikiem wyboru, funkcja zostanie wdrożona i gotowa do użycia.

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 Cloud Functions

    Sprawdź, czy został wybrany 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 reguły skopiuj adres URL.

  5. Wyszukaj „Google Chat API” i kliknij Google Chat API, a następnie kliknij Zarządzaj.

    Przejdź do Google Chat API

  6. Kliknij Konfiguracja i skonfiguruj aplikację Google Chat:

    1. W polu Nazwa aplikacji wpisz Quickstart App.
    2. W polu Avatar URL wpisz https://developers.google.com/chat/images/quickstart-app-avatar.png.
    3. W polu Opis wpisz Quickstart app.
    4. W sekcji Funkcjonalność wybierz Odbieranie wiadomości 1:1 i Dołączanie do pokoi i rozmów grupowych.
    5. W sekcji Ustawienia połączenia wybierz URL aplikacji i wklej w polu adres URL aktywatora funkcji w Cloud Functions.
    6. W sekcji Widoczność wybierz Udostępnij tę aplikację Google Chat określonym osobom i grupom w domenie i wpisz swój adres e-mail.
    7. W sekcji Logi wybierz Rejestruj błędy w usłudze Logging.
  7. Kliknij Zapisz.

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

Testowanie aplikacji do obsługi czatu

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

  1. Otwórz Google Chat.
  2. Aby wysłać wiadomość na czacie do aplikacji, kliknij Rozpocznij czat i w wyświetlonym oknie kliknij Znajdź aplikacje.
  3. W oknie Znajdź aplikacje wyszukaj Quickstart App.
  4. Aby otworzyć czat z aplikacją, znajdź aplikację szybkiego startu i kliknij Dodaj > Czat.
  5. W oknie czatu wpisz Hello i naciśnij enter.

Odpowiedź aplikacji do obsługi czatu zawiera wiadomość na karcie zawierająca imię i nazwisko nadawcy oraz jego awatar, jak widać na tym obrazie:

Aplikacja do obsługi czatu odpowiada za pomocą karty z wyświetlaną nazwą nadawcy i obrazem awatara

Aby dodać zaufanych testerów i dowiedzieć się więcej o testowaniu funkcji interaktywnych, przeczytaj artykuł Testowanie funkcji interaktywnych w aplikacjach Google Chat.

Rozwiązywanie problemów

Informacje o rozwiązywaniu problemów z aplikacją Google Chat i ich debugowaniu znajdziesz w artykule Rozwiązywanie problemów z aplikacją Google Chat i rozwiązywanie związanych z nimi problemów.