Ta strona została przetłumaczona przez Cloud Translation API.

Tworzenie aplikacji do obsługi czatu za pomocą Google Cloud Functions

Na tej stronie dowiesz się, jak utworzyć aplikację Google Chat i korzystać z niej za pomocą Google Cloud Functions.

Aby skompilować aplikację, napisz i wdróż funkcję w Cloud Functions, której używa do przetwarzania odpowiedzi na zdarzenie z Google Chat. Odpowiedź to karta zawierająca imię i nazwisko nadawcy oraz zdjęcie awatara, tak jak pokazano na tym obrazie:

Aplikacja Google Chat odpowiadająca kartą zawierającą wyświetlaną nazwę i obraz awatara nadawcy

Cele

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

Wymagania wstępne

Konto Google Workspace z dostępem do Google Chat.
Projekt Google Cloud.
Pamiętaj, aby włączyć w projekcie płatności. Dowiedz się, jak zweryfikować stan rozliczeń projektów.

Konfigurowanie środowiska

Zanim zaczniesz korzystać z interfejsów API Google, musisz je włączyć 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 generuje kartę czatu z wyświetlaną nazwą nadawcy i obrazem awatara. Gdy aplikacja do obsługi czatu otrzymuje wiadomość, uruchamia funkcję i odpowiada kartą.

Aby utworzyć i wdrożyć funkcję w aplikacji Google Chat, wykonaj te czynności:

Node.js

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

Otwórz Cloud Functions

Wybierz projekt aplikacji Google Chat.
Kliknij Utwórz funkcję.
Na stronie Tworzenie funkcji skonfiguruj funkcję:
1. W polu Nazwa funkcji wpisz „QuickStartChatApp”.
2. W sekcji Typ aktywatora 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.
W sekcji Środowisko wykonawcze wybierz Node.js 10.
W sekcji Kod źródłowy wybierz Edytor wbudowany.
W sekcji Punkt wejścia usuń tekst domyślny i wpisz helloChat.

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

węzeł/bot-awatar/index.js

Wyświetl w GitHubie

/**
 * 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],
      }
    }],
  };
}

Kliknij Wdróż.

Python

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

Otwórz Cloud Functions

Wybierz projekt aplikacji Google Chat.
Kliknij Utwórz funkcję.
Na stronie Tworzenie funkcji skonfiguruj funkcję:
1. W polu Nazwa funkcji wpisz „QuickStartChatApp”.
2. W sekcji Typ aktywatora 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.
W sekcji Środowisko wykonawcze wybierz Python 3.10.
W sekcji Kod źródłowy wybierz Edytor wbudowany.
W sekcji Punkt wejścia usuń tekst domyślny i wpisz hello_chat.

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

python/bot-awatar/main.py

Wyświetl w GitHubie

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 = {
        "cardsV2": [
            {
                "cardId": "avatarCard",
                "card": {
                    "name": "Avatar Card",
                    "header": header,
                    "sections": [avatar_section],
                },
            }
        ]
    }

    return cards

Kliknij Wdróż.

Java

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

Otwórz Cloud Functions

Wybierz projekt aplikacji Google Chat.
Kliknij Utwórz funkcję.
Na stronie Tworzenie funkcji skonfiguruj funkcję:
1. W polu Nazwa funkcji wpisz „QuickStartChatApp”.
2. W sekcji Typ aktywatora 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 żądań aplikacji do obsługi czatu i interfejsów API.
4. Kliknij Zapisz.
5. Kliknij Dalej.
W sekcji Środowisko wykonawcze wybierz Java 11.
W sekcji Kod źródłowy wybierz Edytor wbudowany.
W sekcji Punkt wejścia usuń tekst domyślny i wpisz HelloChat.
Zmień nazwę pliku src/main/java/com/example/Example.java na src/main/java/HelloChat.java.

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

java/avatar-bot/src/main/java/HelloChat.java

Wyświetl w GitHubie

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;
  }
}

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

java/bota/awatar/pom.xml

Wyświetl w GitHubie

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

Kliknij Wdróż.

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

Publikowanie aplikacji w Google Chat

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

W konsoli Google Cloud kliknij Menu > Cloud Functions.

Otwórz Cloud Functions

Sprawdź, czy wybrany jest projekt, w którym włączono Cloud Functions.
Na liście funkcji kliknij QuickStartChatApp.
Na stronie Szczegóły funkcji kliknij Wyzwalacz.
Skopiuj adres URL w sekcji URL aktywatora.
Wyszukaj „Google Chat API” i kliknij Google Chat API.
Kliknij Zarządzaj.
Kliknij Konfiguracja i skonfiguruj aplikację Google Chat:
1. W polu Nazwa aplikacji wpisz Quickstart App.
2. W polu Adres URL awatara 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, Dołącz do pokoi i rozmów grupowych oraz Rejestruj błędy w Cloud Logging.
5. W sekcji Ustawienia połączenia wybierz 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 swój adres e-mail.
Kliknij Zapisz.

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

Testowanie aplikacji Google Chat

Aby przetestować aplikację do obsługi czatu, wyślij jej wiadomość na czacie:

Otwórz Google Chat.
Aby wysłać wiadomość na czacie do aplikacji, kliknij Rozpocznij czat , a w wyświetlonym oknie kliknij Znajdź aplikacje.
W oknie Znajdź aplikacje wyszukaj „Quickstart app” (Szybka aplikacja).
Aby otworzyć czat z aplikacją, znajdź aplikację Quickstart i kliknij Dodaj > Google Chat.
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 znajdziesz na tych stronach:

Podczas tworzenia aplikacji Google Chat może być konieczne debugowanie, ponieważ odczytywane są jej dzienniki błędów. Aby odczytać logi, w konsoli Google Cloud otwórz eksplorator logów.
Rozwiązywanie problemów

Aby dodać więcej funkcji do aplikacji Google Chat, zapoznaj się z tymi przewodnikami:

Tworzenie interaktywnych kart – komunikaty kart obsługują zdefiniowany układ, interaktywne elementy interfejsu, takie jak przyciski, oraz rich media, np. obrazy. Za pomocą wiadomości na karcie możesz przedstawiać szczegółowe informacje, zbierać informacje od użytkowników, a także zachęcać użytkowników do wykonania kolejnego kroku.
Polecenia po ukośniku – polecenie po ukośniku pozwala zarejestrować i reklamować określone polecenia, które użytkownicy mogą przekazać aplikacji, wpisując polecenie, które zaczyna się od ukośnika (/), np. /help.
Okna uruchamiania – okna dialogowe to interfejsy oparte na kartach, które aplikacja może otworzyć, aby wejść w interakcję z użytkownikiem. Poszczególne karty mogą być umieszczane w tej samej kolejności, co ułatwia użytkownikom wykonywanie wieloetapowych procesów, takich jak uzupełnianie danych formularzy.

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