פיתוח אפליקציית HTTP ב-Google Chat

בדף הזה מוסבר איך לבנות תוסף ל-Google Workspace שפועל ב-Google Chat באמצעות שירות HTTP.

במדריך למתחילים הזה נסביר איך ליצור שירות HTTP באמצעות שירותי Google Cloud. כדי ליצור את אפליקציית Chat, כותבים ופורסים פונקציית Cloud Run שאפליקציית Chat משתמשת בה כדי להגיב להודעה של משתמש.

באמצעות ארכיטקטורת HTTP, אתם מגדירים את Chat כך שישתלב עם Google Cloud או עם שרת מקומי באמצעות HTTP, כמו שמוצג בתרשים הבא:

ארכיטקטורה של אפליקציית Chat שמשתמשת בשירות אינטרנט בשרת מקומי.

בתרשים שלמעלה, משתמש שמקיים אינטראקציה עם אפליקציית צ'אט HTTP, נתוני המידע עוברים באופן הבא:

  1. משתמש שולח הודעה באפליקציית Chat, בצ'אט ישיר או במרחב ב-Chat.
  2. בקשת HTTP נשלחת לשרת אינטרנט שהוא מערכת בענן או מערכת מקומית שמכילה את הלוגיקה של אפליקציית Chat.
  3. אופציונלית, אפשר לשלב את הלוגיקה של אפליקציית Chat עם שירותי Google Workspace (כמו יומן Google ו-Sheets), עם שירותים אחרים של Google (כמו מפות Google,‏ YouTube ו-Vertex AI) או עם שירותי אינטרנט אחרים (כמו מערכת לניהול פרויקטים או כלי לניהול כרטיסי תמיכה).
  4. שרת האינטרנט שולח תגובת HTTP בחזרה לשירות של אפליקציית Chat ב-Chat.
  5. התשובה מועברת למשתמש.
  6. אופציונלית, אפליקציית הצ'אט יכולה להתקשר אל Chat API כדי לפרסם הודעות באופן אסינכרוני או לבצע פעולות אחרות.

הארכיטקטורה הזו מאפשרת לכם להשתמש בספריות ובמרכיבים קיימים שכבר נמצאים במערכת, כי אפשר לעצב את אפליקציות הצ'אט האלה באמצעות שפות תכנות שונות.

מטרות

  • מגדירים את הסביבה.
  • יוצרים ופורסים פונקציית Cloud Run.
  • הגדרת תוסף ל-Google Workspace באפליקציית Chat.
  • בודקים את האפליקציה.

דרישות מוקדמות

הגדרת הסביבה

לפני שאתם משתמשים בממשקי Google API, אתם צריכים להפעיל אותם בפרויקט ב-Google Cloud. בכל פרויקט אפשר להפעיל ממשק API אחד או יותר.
  • במסוף Google Cloud, מפעילים את Cloud Build API,‏ Cloud Functions API,‏ Cloud Pub/Sub API,‏ Cloud Logging API,‏ Artifact Registry API ו-Cloud Run API.

    הפעלת ממשקי ה-API

יצירה ופריסה של פונקציית Cloud Run

יצירה ופריסה של פונקציית Cloud Run שיוצרת כרטיס ל-Chat עם השם המוצג ותמונת הדמות של השולח. כשאפליקציית Chat מקבלת הודעה, היא מריצה את הפונקציה ומגיבה באמצעות הכרטיס.

כדי ליצור ולפרוס את הפונקציה לאפליקציית Chat, פועלים לפי השלבים הבאים:

Node.js

  1. במסוף Google Cloud, עוברים לדף Cloud Run:

    מעבר אל Cloud Run

    מוודאים שהפרויקט של אפליקציית Chat נבחר.

  2. לוחצים על כתיבת פונקציה.

  3. בדף Create service, מגדירים את הפונקציה:

    1. בשדה שם השירות מזינים addonchatapp.
    2. בוחרים אזור מהרשימה אזור.
    3. ברשימה Runtime (זמן ריצה), בוחרים את הגרסה העדכנית ביותר של Node.js.
    4. בקטע Authentication, בוחרים באפשרות Require authentication.
    5. לוחצים על Create (יצירה) ומחכים ש-Cloud Run ייצור את השירות. המסוף מפנה אתכם לכרטיסייה מקור.
  4. בכרטיסייה מקור:

    1. בקטע נקודת כניסה, מוחקים את טקסט ברירת המחדל ומזינים avatarApp.
    2. מחליפים את התוכן של index.js בקוד הבא:
    node/chat/avatar-app/index.js
    import { http } from '@google-cloud/functions-framework';
    
    // The ID of the slash command "/about".
    // You must use the same ID in the Google Chat API configuration.
    const ABOUT_COMMAND_ID = 1;
    
    /**
     * Handle requests from Google Workspace add on
     *
     * @param {Object} req Request sent by Google Chat
     * @param {Object} res Response to be sent back to Google Chat
     */
    http('avatarApp', (req, res) => {
      const chatEvent = req.body.chat;
      let message;
      if (chatEvent.appCommandPayload) {
        message = handleAppCommand(chatEvent);
      } else {
        message = handleMessage(chatEvent);
      }
      res.send({ hostAppDataAction: { chatDataAction: { createMessageAction: {
        message: message
      }}}});
    });
    
    /**
     * Responds to an APP_COMMAND event in Google Chat.
     *
     * @param {Object} event the event object from Google Chat
     * @return the response message object.
     */
    function handleAppCommand(event) {
      switch (event.appCommandPayload.appCommandMetadata.appCommandId) {
        case ABOUT_COMMAND_ID:
          return {
            text: 'The Avatar app replies to Google Chat messages.'
          };
      }
    }
    
    /**
     * Responds to a MESSAGE event in Google Chat.
     *
     * @param {Object} event the event object from Google Chat
     * @return the response message object.
     */
    function handleMessage(event) {
      // Stores the Google Chat user as a variable.
      const chatUser = event.messagePayload.message.sender;
      const displayName = chatUser.displayName;
      const avatarUrl = chatUser.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 }
            }]}]
          }
        }]
      };
    }
    1. לוחצים על שמירה ופריסה מחדש.

Python

  1. במסוף Google Cloud, עוברים לדף Cloud Run:

    מעבר אל Cloud Run

    מוודאים שהפרויקט של אפליקציית Chat נבחר.

  2. לוחצים על כתיבת פונקציה.

  3. בדף Create service, מגדירים את הפונקציה:

    1. בשדה שם השירות מזינים addonchatapp.
    2. בוחרים אזור מהרשימה אזור.
    3. ברשימה Runtime (סביבת זמן ריצה), בוחרים את הגרסה העדכנית ביותר של Python.
    4. בקטע Authentication, בוחרים באפשרות Require authentication.
    5. לוחצים על Create (יצירה) ומחכים ש-Cloud Run ייצור את השירות. המסוף מפנה אתכם לכרטיסייה מקור.
  4. בכרטיסייה מקור:

    1. בקטע נקודת כניסה, מוחקים את טקסט ברירת המחדל ומזינים avatar_app.
    2. מחליפים את התוכן של main.py בקוד הבא:
    python/chat/avatar-app/main.py
    from typing import Any, Mapping
    
    import flask
    import functions_framework
    
    # The ID of the slash command "/about".
    # You must use the same ID in the Google Chat API configuration.
    ABOUT_COMMAND_ID = 1
    
    @functions_framework.http
    def avatar_app(req: flask.Request) -> Mapping[str, Any]:
      """Handle requests from Google Workspace add on
    
      Args:
        flask.Request req: the request sent by Google Chat
    
      Returns:
        Mapping[str, Any]: the response to be sent back to Google Chat
      """
      chat_event = req.get_json(silent=True)["chat"]
      if chat_event and "appCommandPayload" in chat_event:
        message = handle_app_command(chat_event)
      else:
        message = handle_message(chat_event)
      return { "hostAppDataAction": { "chatDataAction": { "createMessageAction": {
          "message": message
      }}}}
    
    def handle_app_command(event: Mapping[str, Any]) -> Mapping[str, Any]:
      """Responds to an APP_COMMAND event in Google Chat.
    
      Args:
        Mapping[str, Any] event: the event object from Google Chat
    
      Returns:
        Mapping[str, Any]: the response message object.
      """
      if event["appCommandPayload"]["appCommandMetadata"]["appCommandId"] == ABOUT_COMMAND_ID:
        return {
          "text": "The Avatar app replies to Google Chat messages.",
        }
      return {}
    
    def handle_message(event: Mapping[str, Any]) -> Mapping[str, Any]:
      """Responds to a MESSAGE event in Google Chat.
    
      Args:
        Mapping[str, Any] event: the event object from Google Chat
    
      Returns:
        Mapping[str, Any]: the response message object.
      """
      # Stores the Google Chat user as a variable.
      chat_user = event["messagePayload"]["message"]["sender"]
      display_name = chat_user.get("displayName", "")
      avatar_url = chat_user.get("avatarUrl", "")
      return {
        "text": "Here's your avatar",
        "cardsV2": [{
          "cardId": "avatarCard",
          "card": {
            "name": "Avatar Card",
            "header": {
              "title": f"Hello {display_name}!"
            },
            "sections": [{ "widgets": [
              { "textParagraph": { "text": "Your avatar picture:" }},
              { "image": { "imageUrl": avatar_url }},
            ]}]
          }
        }]
      }
    1. לוחצים על שמירה ופריסה מחדש.

Java

  1. במסוף Google Cloud, עוברים לדף Cloud Run:

    מעבר אל Cloud Run

    מוודאים שהפרויקט של אפליקציית Chat נבחר.

  2. לוחצים על כתיבת פונקציה.

  3. בדף Create service, מגדירים את הפונקציה:

    1. בשדה שם השירות מזינים addonchatapp.
    2. בוחרים אזור מהרשימה אזור.
    3. ברשימה Runtime בוחרים בגרסה העדכנית ביותר של Java.
    4. בקטע Authentication, בוחרים באפשרות Require authentication.
    5. לוחצים על Create (יצירה) ומחכים ש-Cloud Run ייצור את השירות. המסוף מפנה אתכם לכרטיסייה מקור.
  4. בכרטיסייה מקור:

    1. בקטע נקודת כניסה, מוחקים את טקסט ברירת המחדל ומזינים App.
    2. משנים את השם של קובץ ה-Java שמוגדר כברירת מחדל ל-src/main/java/com/google/chat/avatar/App.java.
    3. מחליפים את התוכן של App.java בקוד הבא:
    java/chat/avatar-app/src/main/java/com/google/chat/avatar/App.java
    package com.google.chat.avatar;
    
    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 App implements HttpFunction {
      // The ID of the slash command "/about".
      // You must use the same ID in the Google Chat API configuration.
      private static final int ABOUT_COMMAND_ID = 1;
    
      private static final Gson gson = new Gson();
    
      /**
       * Handle requests from Google Workspace add on
       * 
       * @param request the request sent by Google Chat
       * @param response the response to be sent back to Google Chat
       */
      @Override
      public void service(HttpRequest request, HttpResponse response) throws Exception {
        JsonObject event = gson.fromJson(request.getReader(), JsonObject.class);
        JsonObject chatEvent = event.getAsJsonObject("chat");
        Message message;
        if (chatEvent.has("appCommandPayload")) {
          message = handleAppCommand(chatEvent);
        } else {
          message = handleMessage(chatEvent);
        }
        JsonObject createMessageAction = new JsonObject();
        createMessageAction.add("message", gson.fromJson(gson.toJson(message), JsonObject.class));
        JsonObject chatDataAction = new JsonObject();
        chatDataAction.add("createMessageAction", createMessageAction);
        JsonObject hostAppDataAction = new JsonObject();
        hostAppDataAction.add("chatDataAction", chatDataAction);
        JsonObject dataActions = new JsonObject();
        dataActions.add("hostAppDataAction", hostAppDataAction);
        response.getWriter().write(gson.toJson(dataActions));
      }
    
      /**
       * Handles an APP_COMMAND event in Google Chat.
       *
       * @param event the event object from Google Chat
       * @return the response message object.
       */
      private Message handleAppCommand(JsonObject event) throws Exception {
        switch (event.getAsJsonObject("appCommandPayload")
          .getAsJsonObject("appCommandMetadata").get("appCommandId").getAsInt()) {
          case ABOUT_COMMAND_ID:
            return new Message()
              .setText("The Avatar app replies to Google Chat messages.");
          default:
            return null;
        }
      }
    
      /**
       * Handles a MESSAGE event in Google Chat.
       *
       * @param event the event object from Google Chat
       * @return the response message object.
       */
      private Message handleMessage(JsonObject event) throws Exception {
        // Stores the Google Chat user as a variable.
        JsonObject chatUser = event.getAsJsonObject("messagePayload").getAsJsonObject("message").getAsJsonObject("sender");
        String displayName = chatUser.has("displayName") ? chatUser.get("displayName").getAsString() : "";
        String avatarUrl = chatUser.has("avatarUrl") ? chatUser.get("avatarUrl").getAsString() : "";
        return new Message()
          .setText("Here's your avatar")
          .setCardsV2(List.of(new CardWithId()
            .setCardId("avatarCard")
            .setCard(new GoogleAppsCardV1Card()
              .setName("Avatar Card")
              .setHeader(new GoogleAppsCardV1CardHeader()
                .setTitle(String.format("Hello %s!", displayName)))
              .setSections(List.of(new GoogleAppsCardV1Section().setWidgets(List.of(
                new GoogleAppsCardV1Widget().setTextParagraph(new GoogleAppsCardV1TextParagraph()
                  .setText("Your avatar picture:")),
                new GoogleAppsCardV1Widget()
                  .setImage(new GoogleAppsCardV1Image().setImageUrl(avatarUrl)))))))));
      }
    }
  5. מחליפים את התוכן של pom.xml בקוד הבא:

    java/chat/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>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.1.4</version>
        </dependency>
        <dependency>
          <groupId>com.google.code.gson</groupId>
          <artifactId>gson</artifactId>
          <version>2.9.1</version>
        </dependency>
        <dependency>
          <groupId>com.google.apis</groupId>
          <artifactId>google-api-services-chat</artifactId>
          <version>v1-rev20230115-2.0.0</version>
        </dependency>
      </dependencies>
    
      <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>
    1. לוחצים על שמירה ופריסה מחדש.

ייפתח דף הפרטים של שירות Cloud Run. מחכים שהפונקציה תיפרס.

הגדרת התוסף

אחרי שפורסים את פונקציית Cloud Run, מבצעים את השלבים הבאים כדי ליצור תוסף ולפרוס את אפליקציית Google Chat:

  1. במסוף Google Cloud, עוברים לדף Cloud Run:

    מעבר אל Cloud Run

    מוודאים שהפרויקט שבו הפעלתם את Cloud Run נבחר.

  2. ברשימת הפונקציות, לוחצים על addonchatapp.

  3. בדף פרטי השירות, מעתיקים את כתובת ה-URL של הפונקציה. כתובת ה-URL מסתיימת ב-run.app.

  4. בשדה החיפוש של Google Cloud, מחפשים את Google Chat API, לוחצים על Google Chat API ואז על ניהול.

    ל-Chat API

  5. לוחצים על הגדרה ומגדירים את אפליקציית Google Chat:

    1. בשדה App name, מזינים Add-on Chat app.
    2. בקטע כתובת ה-URL של הדמות, מזינים את הערך https://developers.google.com/workspace/add-ons/images/quickstart-app-avatar.png.
    3. בשדה תיאור, מזינים Add-on Chat app.
    4. בקטע פונקציונליות, בוחרים באפשרות הצטרפות למרחבים ולשיחות קבוצתיות.
    5. בקטע Connection settings (הגדרות חיבור), בוחרים באפשרות HTTP endpoint URL (כתובת URL של נקודת קצה בפרוטוקול HTTP).
    6. מעתיקים את כתובת האימייל של חשבון השירות. תצטרכו את כתובת האימייל הזו כדי לתת לתוסף הרשאה להפעיל את הפונקציה.
    7. בקטע Triggers (טריגרים), בוחרים באפשרות Use a common HTTP endpoint URL for all triggers (שימוש בכתובת URL משותפת של נקודת קצה מסוג HTTP לכל הטריגרים) ומדביקים בתיבה את כתובת ה-URL של הטריגר של פונקציית Cloud Run.
    8. בקטע חשיפה, בוחרים באפשרות האפליקציה הזו ב-Google Chat תהיה זמינה לאנשים ולקבוצות ספציפיים בדומיין ומזינים את כתובת האימייל.
    9. בקטע יומנים, בוחרים באפשרות רישום שגיאות ביומן.
  6. לוחצים על שמירה.

בשלב הבא, מאשרים לאפליקציית Chat להפעיל את פונקציית Cloud Run.

איך מאשרים ל-Google Chat להפעיל את הפונקציה

כדי לתת הרשאה לתוסף Google Workspace להפעיל את הפונקציה, צריך להוסיף את חשבון השירות של תוסף Google Workspace עם התפקיד מפעיל שירות Cloud Run.

  1. במסוף Google Cloud, עוברים לדף Cloud Run:

    מעבר אל Cloud Run

  2. ברשימת שירותי Cloud Run, מסמנים את התיבה לצד הפונקציה המקבלת. (לא לוחצים על הפונקציה עצמה).

  3. לוחצים על הרשאות. נפתחת החלונית הרשאות.

  4. לוחצים על Add principal.

  5. בשדה New principals, מזינים את כתובת האימייל של חשבון השירות של תוסף Google Workspace שמשויך לאפליקציית Chat.

    כתובת האימייל של חשבון השירות מופיעה בדף ההגדרות של Chat API, בקטע Connection settings (הגדרות חיבור) > HTTP endpoint URL (כתובת URL של נקודת קצה של HTTP) > Service Account Email (אימייל של חשבון שירות):

    כניסה להגדרות של Chat API

  6. ברשימת התפקידים Select a role בוחרים באפשרות Cloud Run > Cloud Run Service Invoker.

  7. לוחצים על שמירה.

אפליקציית Chat מוכנה לקבל הודעות ב-Chat ולענות להן.

בדיקת אפליקציית Chat

כדי לבדוק את אפליקציית Chat, פותחים מרחב לצ'אט ישיר עם אפליקציית Chat ושולחים הודעה:

  1. פותחים את Google Chat באמצעות חשבון Google Workspace שציינתם כשנוספתם כבודקים מהימנים.

    מעבר אל Google Chat

  2. לוחצים על צ'אט חדש.
  3. בשדה הוספת אדם אחד או יותר, מקלידים את השם של אפליקציית Chat.
  4. בוחרים את אפליקציית Chat מתוך התוצאות. ייפתח צ'אט ישיר.

  5. בצ'אט הישיר החדש עם האפליקציה, כותבים Hello ולוחצים על enter.

ההודעה באפליקציית Chat מכילה כרטיס שבו מוצגים השם ותמונת הפרופיל של השולח, כמו שמוצג בתמונה הבאה:

אפליקציית Chat מגיבה עם כרטיס שכולל את השם המוצג של השולח ואת תמונת האווטאר שלו

כדי להוסיף בודקים מהימנים ולקבל מידע נוסף על בדיקת תכונות אינטראקטיביות, אפשר לעיין במאמר בדיקת תכונות אינטראקטיביות באפליקציות ל-Google Chat.

פתרון בעיות

כשמוחזרת שגיאה מאפליקציית Google Chat או מכרטיס, מוצגת בממשק של Chat ההודעה 'משהו השתבש'. או 'לא ניתן לעבד את הבקשה שלך'. לפעמים בממשק המשתמש של Chat לא מוצגת הודעת שגיאה, אבל אפליקציית Chat או הכרטיס מפיקים תוצאה לא צפויה. לדוגמה, יכול להיות שהודעה בכרטיס לא תופיע.

יכול להיות שלא תוצג הודעת שגיאה בממשק המשתמש של Chat, אבל אם הפעלתם את רישום השגיאות באפליקציות של Chat, תוכלו לראות הודעות שגיאה ונתוני יומן שיעזרו לכם לתקן את השגיאות. לקבלת עזרה בצפייה בשגיאות, באיתור באגים ובתיקון שלהן, אפשר לעיין במאמר פתרון בעיות ב-Google Chat.

הסרת המשאבים

כדי להימנע מחיובים בחשבון Google Cloud בגלל השימוש במשאבים שנעשה במסגרת המדריך הזה, מומלץ למחוק את פרויקט Cloud.

  1. במסוף Google Cloud, עוברים לדף Manage resources. לוחצים על תפריט > IAM & Admin > Manage Resources.

    כניסה ל-Resource Manager

  2. ברשימת הפרויקטים, בוחרים את הפרויקט שרוצים למחוק ולוחצים על Delete .
  3. כדי למחוק את הפרויקט, כותבים את מזהה הפרויקט בתיבת הדו-שיח ולוחצים על Shut down.