Tworzenie aplikacji HTTP Google Chat

Z tego artykułu dowiesz się, jak utworzyć aplikację HTTP do obsługi czatu. Istnieją różne sposoby wdrażania tej architektury. W Google Cloud mogą korzystać z Cloud Functions, Cloud Run i App Engine. W tym krótkim wprowadzeniu napisać i wdrożyć Funkcja w Cloud Functions używane przez aplikację Google Chat do odpowiadania na wiadomość użytkownika.

W przypadku tej architektury konfigurujesz Google Chat tak, aby integrował się z Google Cloud lub serwer lokalny przez protokół HTTP, jak widać w tabeli ten diagram:

Na poprzednim diagramie użytkownik wchodzi w interakcję z protokołem HTTP W aplikacji Google Chat przepływ informacji jest następujący:

1. Użytkownik wysyła wiadomość w Google Chat do w aplikacji Google Chat na czacie lub na czacie. Pokój czatu.
2. Żądanie HTTP jest wysyłane do serwera WWW działającego w chmurze lub system lokalny zawierający aplikację Google Chat, logikę logiczną.
3. Opcjonalnie logika aplikacji Google Chat może zostać zintegrowana z usług Google Workspace (takich jak Kalendarz czy Arkuszy), innymi usługami Google (takie jak Mapy, YouTube czy Vertex AI) lub innych usług internetowych (takich jak projekt do systemu zarządzania lub narzędzia do zarządzania zgłoszeniami).
4. Serwer WWW wysyła odpowiedź HTTP z powrotem do Usługa aplikacji Google Chat w Google Chat.
5. Odpowiedź jest dostarczana do użytkownika.
6. Opcjonalnie aplikacja Google Chat może wywołać metodę Interfejs Chat API do asynchronicznego publikowania wiadomości lub wykonywania innych operacji.

Architektura ta zapewnia elastyczność korzystania z istniejących bibliotek istniejących już w systemie, ponieważ Aplikacje do obsługi czatu można projektować w różnych językach programowania.

Cele

• skonfigurować środowisko,
• Utwórz i wdróż funkcję w Cloud Functions.
• Opublikuj aplikację w Google Chat.
• Przetestuj aplikację.

Wymagania wstępne

• Firmy lub przedsiębiorstwa Konto Google Workspace z dostępem do Google Chat.
• Projekt Google Cloud z włączonymi płatnościami. Aby sprawdzić, czy w istniejącym projekcie są włączone płatności: Więcej informacji można znaleźć w sekcji Weryfikowanie lub stan płatności w projektach. Aby utworzyć projekt i skonfigurować płatności, zobacz Utwórz projekt Google Cloud.

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ć 1 lub więcej interfejsów API.

• W konsoli Google Cloud włącz interfejsy Google Chat API, Cloud Build API i Cloud Functions API. Cloud Pub/Sub API, Cloud Logging API, Artifact Registry API oraz Cloud Run 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 awatarem nadawcy. Gdy aplikacja do obsługi czatu odbiera wiadomość, uruchamia funkcję i odpowiada, używając karty.

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

Node.js

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

   Otwórz Cloud Functions

   Projekt aplikacji Google Chat musi być zaznaczono.

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 polu Region wybierz region.
   4. W sekcji Uwierzytelnianie wybierz Wymagaj uwierzytelnienia.
   5. Kliknij Dalej.

4. W sekcji Środowisko wykonawcze wybierz najnowszą wersję Node.js.

5. W sekcji Source code (Kod źródłowy) wybierz Wbudowany edytor.

6. W polu Punkt wejścia usuń tekst domyślny i wpisz avatarApp.

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

   node/avatar-app/index.js

   Wyświetl w GitHubie

   // The ID of the slash command "/about".
   // It's not enabled by default, set to the actual ID to enable it. You need to
   // use the same ID as set in the Google Chat API configuration.
   const ABOUT_COMMAND_ID = "";
   
   /**
    * Google Cloud Function that responds to messages sent from a
    * Google Chat space.
    *
    * @param {Object} req Request sent from Google Chat space
    * @param {Object} res Response to send back
    */
   exports.avatarApp = function avatarApp(req, res) {
     if (req.method === 'GET' || !req.body.message) {
       return res.send('Hello! This function is meant to be used ' +
         'in a Google Chat Space.');
     }
   
     // Stores the Google Chat event as a variable.
     const event = req.body;
   
     // Checks for the presence of a slash command in the message.
     if (event.message.slashCommand) {
       // Executes the slash command logic based on its ID.
       // Slash command IDs are set in the Google Chat API configuration.
       switch (event.message.slashCommand.commandId) {
         case ABOUT_COMMAND_ID:
           return res.send({
             privateMessageViewer: event.user,
             text: 'The Avatar app replies to Google Chat messages.'
           });
       }
     }
   
     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} avatarUrl the URL for the sender's avatar
    * @return {Object} a card with the user's avatar.
    */
   function createMessage(displayName, avatarUrl) {
     return {
       text: 'Here\'s your avatar',
       cardsV2: [{
         cardId: 'avatarCard',
         card: {
           name: 'Avatar Card',
           header: {
             title: `Hello ${displayName}!`,
           },
           sections: [{ widgets: [{
             textParagraph: { text: 'Your avatar picture: ' }
           }, {
             image: { imageUrl: avatarUrl }
           }]}]
         }
       }]
     };
   }

8. Kliknij Wdróż.

Python

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

   Otwórz Cloud Functions

   Projekt aplikacji Google Chat musi być zaznaczono.

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 polu Region wybierz region.
   4. W sekcji Uwierzytelnianie wybierz Wymagaj uwierzytelnienia.
   5. Kliknij Dalej.

4. W sekcji Środowisko wykonawcze wybierz najnowszą wersję Pythona.

5. W sekcji Source code (Kod źródłowy) wybierz Wbudowany edytor.

6. W polu Punkt wejścia usuń tekst domyślny i wpisz avatar_app.

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

   python/avatar-app/main.py

   Wyświetl w GitHubie

   from typing import Any, Mapping
   
   import flask
   import functions_framework
   
   # The ID of the slash command "/about".
   # It's not enabled by default, set to the actual ID to enable it. You need to
   # use the same ID as set in the Google Chat API configuration.
   ABOUT_COMMAND_ID = ""
   
   @functions_framework.http
   def avatar_app(req: flask.Request) -> Mapping[str, Any]:
     """Google Cloud Function that handles requests from Google Chat
   
     Args:
         flask.Request: the request
   
     Returns:
         Mapping[str, Any]: the response
     """
     if req.method == "GET":
       return "Hello! This function must be called from Google Chat."
   
     request_json = req.get_json(silent=True)
   
     # Checks for the presence of a slash command in the message.
     if "slashCommand" in request_json["message"]:
       # Executes the slash command logic based on its ID.
       # Slash command IDs are set in the Google Chat API configuration.
       if request_json["message"]["slashCommand"]["commandId"] == ABOUT_COMMAND_ID:
         return {
           "privateMessageViewer": request_json["user"],
           "text": 'The Avatar app replies to Google Chat messages.'
         }
   
     display_name = request_json["message"]["sender"]["displayName"]
     avatar = request_json["message"]["sender"]["avatarUrl"]
     response = create_message(name=display_name, image_url=avatar)
     return response
   
   
   def create_message(name: str, image_url: str) -> Mapping[str, Any]:
     """Google Cloud Function that handles requests from Google Chat
   
     Args:
         str name: the sender's display name.
         str image_url: the URL for the sender's avatar.
   
     Returns:
         Mapping[str, Any]: a card with the user's avatar.
     """
     return {
       "text": "Here's your avatar",
       "cardsV2": [{
         "cardId": "avatarCard",
         "card": {
             "name": "Avatar Card",
             "header": { "title": f"Hello {name}!" },
             "sections": [{
               "widgets": [{
                 "textParagraph": { "text": "Your avatar picture:" }
               }, {
                 "image": { "imageUrl": image_url }
               }]
             }]
         }
       }]
     }

8. Kliknij Wdróż.

Java

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

   Otwórz Cloud Functions

   Projekt aplikacji Google Chat musi być zaznaczono.

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 polu Region wybierz region.
   4. W sekcji Uwierzytelnianie wybierz Wymagaj uwierzytelnienia.
   5. Kliknij Dalej.

4. W sekcji Środowisko wykonawcze wybierz najnowszą wersję Javy.

5. W sekcji Source code (Kod źródłowy) wybierz Wbudowany edytor.

6. W polu Punkt wejścia usuń tekst domyślny i wpisz App.

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

8. Zastąp zawartość pola App.java tym kodem:

   java/avatar-app/src/main/java/App.java

   Wyświetl w GitHubie

   import java.util.List;
   
   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;
   
   public class App implements HttpFunction {
     private static final Gson gson = new Gson();
   
     // The ID of the slash command "/about".
     // It's not enabled by default, set to the actual ID to enable it. You need to
     // use the same ID as set in the Google Chat API configuration.
     private static final String ABOUT_COMMAND_ID = "";
   
     @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;
       }
   
       // Checks for the presence of a slash command in the message.
       if (body.getAsJsonObject("message").has("slashCommand")) {
         // Executes the slash command logic based on its ID.
         // Slash command IDs are set in the Google Chat API configuration.
         JsonObject slashCommand = body.getAsJsonObject("message").getAsJsonObject("slashCommand");
         switch (slashCommand.get("commandId").getAsString()) {
           case ABOUT_COMMAND_ID:
           JsonObject aboutMessage = new JsonObject();
           aboutMessage.addProperty("text", "The Avatar app replies to Google Chat messages.");
           aboutMessage.add("privateMessageViewer", body.getAsJsonObject("user"));
             response.getWriter().write(gson.toJson(aboutMessage));
             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ść pola pom.xml tym kodem:

   java/avatar-app/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>com.google.chat</groupId>
     <artifactId>avatar-app</artifactId>
     <version>1.0-SNAPSHOT</version>
   
     <properties>
       <maven.compiler.target>17</maven.compiler.target>
       <maven.compiler.source>17</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 o funkcjach w Cloud Functions, a Twoja funkcja będzie zawierać 2 elementy wskaźniki postępu: jeden dla kompilacji, drugi dla usługi. Gdy obie wskaźniki postępu znikają i zostaną zastąpione znacznikiem wyboru, jest wdrożony i gotowy.

Autoryzuj Google Chat do wywoływania funkcji

Aby autoryzować Google Chat do wywoływania funkcji, dodaj Google Chat konta usługi z przypisaną rolą wywołującego Cloud Run.

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

   Otwórz Cloud Run

2. Na liście usług Cloud Run zaznacz pole wyboru obok otrzymanego . Nie klikaj samej funkcji.

3. Kliknij Uprawnienia. Otworzy się panel Uprawnienia.

4. Kliknij Dodaj podmiot zabezpieczeń.

5. W sekcji Nowe podmioty zabezpieczeń wpisz [e-mail].

6. W sekcji Wybierz rolę kliknij Cloud Run > Wywołujący Cloud Run

7. Kliknij Zapisz.

Publikowanie aplikacji w Google Chat

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

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

   Otwórz Cloud Functions

   Sprawdź, czy projekt, w którym włączono Cloud Functions, zaznaczono.

2. Na liście funkcji kliknij QuickStartChatApp.

3. Kliknij kartę Reguły.

4. Skopiuj adres URL w polu HTTPS.

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

   Przejdź do interfejsu Chat API

6. 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 Funkcjonalność wybierz Odbieraj wiadomości 1:1. Dołączanie do pokoi i rozmów grupowych
   5. W sekcji Ustawienia połączenia wybierz URL aplikacji i wklej adres URL aplikacji aktywatora funkcji w Cloud Functions.
   6. W sekcji Authentication Audience (Odbiorcy uwierzytelniania) wybierz App URL (Adres URL aplikacji).
   7. W sekcji Widoczność wybierz Udostępnij tę aplikację Google Chat określonym osobom grup w domenie i wpisz swój adres e-mail.
   8. W sekcji Logi wybierz Rejestruj błędy w usłudze Logging.

7. Kliknij Zapisz.

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

Testowanie aplikacji Google Chat

Aby przetestować aplikację Google Chat, otwórz pokój czatu z aplikację Google Chat i wyślij wiadomość:

1. Otwórz Google Chat za pomocą konta Google Workspace, którego używasz dodane podczas dodawania siebie jako zaufanego testera.

   Otwórz Google Chat

2. Kliknij Nowy czat.
3. W polu Dodaj co najmniej jedną osobę wpisz nazwę swojego aplikacja Google Chat.

4. Z wyników wybierz aplikację Google Chat. A Direct

   Uwaga: jeśli nie widzisz swojej aplikacji Google Chat na liście sprawdź, czy Twoje konto Google Workspace zostało uwzględnione Ustawienia widoczności konfiguracji interfejsu Chat API. w konsoli Google Cloud.
5. W nowym czacie z aplikacją wpisz Hello i naciśnij enter

Odpowiedź aplikacji Google Chat zawiera rozszerzenie wiadomość z karty, która zawiera nazwę nadawcy oraz awatara, tak jak na ilustracji:

Aby dodać zaufanych testerów i dowiedzieć się więcej o testowaniu funkcji interaktywnych, zobacz Przetestuj funkcje interaktywne w aplikacji Aplikacje Google Chat.

Rozwiązywanie problemów

Gdy aplikacja Google Chat lub card zwraca błąd, Interfejs czatu wyświetla komunikat „Coś poszło nie tak”. lub „Nie można przetworzyć żądania”. Czasami interfejs Google Chat nie wyświetla się żaden komunikat o błędzie, ale aplikacja Google Chat lub zwraca nieoczekiwany wynik; na przykład wiadomość w formie karty .

Komunikat o błędzie może nie wyświetlać się w interfejsie Google Chat, opisowe komunikaty o błędach i dane dziennika, które pomogą Ci w naprawianiu błędów gdy logowanie błędów aplikacji Google Chat jest włączone. Aby uzyskać pomoc w wyświetlaniu, debugowania i naprawiania błędów, zapoznaj się z artykułem Rozwiązywanie problemów z błędami w Google Chat

Czyszczenie danych

Aby uniknąć obciążenia konta Google Cloud opłatami za używanych w tym samouczku, zalecamy usunięcie Projekt w chmurze.

Uwaga: usunięcie projektu spowoduje, że:

• Wszystkie dane projektu zostaną usunięte. Jeśli w tym samouczku był używany istniejący projekt, usunięcie go spowoduje też usunięcie wszystkich innych zadań wykonanych w tym projekcie.
• Niestandardowe identyfikatory projektu zostaną utracone. Być może w trakcie tworzenia tego projektu został utworzony niestandardowy identyfikator projektu, którego chcesz używać w przyszłości. Aby zachować adresy URL, które używają identyfikatora projektu, na przykład adres URL na appspot.com, usuń wybrane zasoby w projekcie, zamiast usuwać cały projekt.

Jeśli planujesz skorzystać z wielu samouczków i krótkich wprowadzeń, ponowne wykorzystanie tych samych projektów może pomóc Ci uniknąć przekroczenia limitów projektów.

1. W konsoli Google Cloud otwórz stronę Zarządzanie zasobami. Kliknij Menu > Uprawnienia Administracja > Zarządzaj zasobami.

   Otwórz menedżera zasobów

2. Na liście projektów wybierz projekt do usunięcia, a następnie kliknij Usuń .
3. W oknie wpisz identyfikator projektu i kliknij Wyłącz, aby go usunąć. nad projektem.

Powiązane artykuły

• Aby dodać więcej funkcji do aplikacji Google Chat, zobacz :

  • Tworzenie wiadomości na kartach interaktywnych
  • Reagowanie na polecenia po ukośniku
  • Otwieranie okien i odpowiadanie na nie

• Wybieranie architektury aplikacji do obsługi czatu

• Weryfikowanie próśb z Google Chat