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

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

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

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

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

  1. משתמש שולח הודעה ב-Chat לאפליקציית 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 Functions ופורסים אותה.
  • מפרסמים את האפליקציה ב-Chat.
  • בודקים את האפליקציה.

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

הגדרת הסביבה

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

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

יצירה ופריסה של פונקציה ב-Cloud Functions

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

כדי ליצור ולפרוס את הפונקציה לאפליקציית Chat:

Node.js

  1. נכנסים לדף Cloud Functions במסוף Google Cloud:

    כניסה לדף Cloud Functions

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

  2. לוחצים על Create Function.

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

    1. בקטע Environment, בוחרים באפשרות Cloud Run Function.
    2. בשדה Function name, מזינים QuickStartChatApp.
    3. בקטע אזור, בוחרים אזור.
    4. בקטע 'אימות', בוחרים באפשרות דרישת אימות.
    5. לוחצים על הבא.
  4. בקטע Runtime, בוחרים את הגרסה האחרונה של Node.js.

  5. בקטע קוד מקור, בוחרים באפשרות עורך בשורה.

  6. בקטע Entry point (נקודת כניסה), מוחקים את טקסט ברירת המחדל ומזינים avatarApp.

  7. מחליפים את התוכן של index.js בקוד הבא:

    node/avatar-app/index.js
    const functions = require('@google-cloud/functions-framework');
    
    // Command IDs (configure these in Google Chat API)
    const ABOUT_COMMAND_ID = 1; // ID for the "/about" slash command
    const HELP_COMMAND_ID = 2; // ID for the "Help" quick command
    
    /**
     * Google Cloud Function that handles HTTP requests from Google Chat.
     *
     * @param {Object} req - The HTTP request object sent from Google Chat.
     * @param {Object} res - The HTTP response object.
     */
    functions.http('avatarApp', (req, res) => {
      const event = req.body;
    
      if (event.appCommandMetadata) {
        handleAppCommands(event, res);
      } else {
        handleRegularMessage(event, res);
      }
    });
    
    /**
     * Handles slash and quick commands.
     *
     * @param {Object} event - The Google Chat event.
     * @param {Object} res - The HTTP response object.
     */
    function handleAppCommands(event, res) {
      const {appCommandId, appCommandType} = event.appCommandMetadata;
    
      switch (appCommandId) {
        case ABOUT_COMMAND_ID:
          return res.send({
            privateMessageViewer: event.user,
            text: 'The Avatar app replies to Google Chat messages.'
          });
        case HELP_COMMAND_ID:
          return res.send({
            privateMessageViewer: event.user,
            text: 'The Avatar app replies to Google Chat messages.'
          });
      }
    }
    
    /**
     * Handles regular messages (not commands).
     *
     * @param {Object} event - The Google Chat event.
     * @param {Object} res - The HTTP response object.
     */
    function handleRegularMessage(event, res) {
      const messageData = createMessage(event.user);
      res.send(messageData);
    }
    
    /**
     * Creates a card message with the user's avatar.
     *
     * @param {Object} user - The user who sent the message.
     * @param {string} user.displayName - The user's display name.
     * @param {string} user.avatarUrl - The URL of the user's avatar.
     * @return {Object} - The card message object.
     */
    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. לוחצים על פריסת.

Python

  1. נכנסים לדף Cloud Functions במסוף Google Cloud:

    כניסה לדף Cloud Functions

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

  2. לוחצים על Create Function.

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

    1. בקטע Environment, בוחרים באפשרות Cloud Run Function.
    2. בשדה Function name, מזינים QuickStartChatApp.
    3. בקטע אזור, בוחרים אזור.
    4. בקטע 'אימות', בוחרים באפשרות דרישת אימות.
    5. לוחצים על הבא.
  4. בקטע Runtime, בוחרים את הגרסה האחרונה של Python.

  5. בקטע קוד מקור, בוחרים באפשרות עורך בשורה.

  6. בקטע Entry point (נקודת כניסה), מוחקים את טקסט ברירת המחדל ומזינים avatar_app.

  7. מחליפים את התוכן של main.py בקוד הבא:

    python/avatar-app/main.py
    from typing import Any, Mapping
    
    import flask
    import functions_framework
    
    # Command IDs (configure these in Google Chat API)
    ABOUT_COMMAND_ID = 1  # ID for the "/about" slash command
    HELP_COMMAND_ID = 2  # ID for the "Help" quick command
    
    
    @functions_framework.http
    def avatar_app(req: flask.Request) -> Mapping[str, Any]:
        """Google Cloud Function that handles HTTP requests from Google Chat.
    
        Args:
            flask.Request: the request
    
        Returns:
            Mapping[str, Any]: the response
        """
        event = req.get_json(silent=True)
    
        if event and "appCommandMetadata" in event:
            return handle_app_commands(event)
        else:
            return handle_regular_message(event)
    
    
    def handle_app_commands(event: Mapping[str, Any]) -> Mapping[str, Any]:
        """Handles slash and quick commands.
    
        Args:
            Mapping[str, Any] event: The Google Chat event.
    
        Returns:
            Mapping[str, Any]: the response
        """
        app_command_id = event["appCommandMetadata"]["appCommandId"]
    
        if app_command_id == ABOUT_COMMAND_ID:
            return {
                "privateMessageViewer": event["user"],
                "text": "The Avatar app replies to Google Chat messages.",
            }
        elif app_command_id == HELP_COMMAND_ID:
            return {
                "privateMessageViewer": event["user"],
                "text": "The Avatar app replies to Google Chat messages.",
            }
        return {}
    
    
    
    
    def handle_regular_message(event: Mapping[str, Any]) -> Mapping[str, Any]:
        """Handles regular messages (not commands).
    
        Args:
            Mapping[str, Any] event: The Google Chat event.
    
        Returns:
            Mapping[str, Any]: the response
        """
    
        if not event or "user" not in event:
            return "Invalid request."
    
        message_data = create_message(event["user"])
        return message_data
    
    
    def create_message(user: Mapping[str, Any]) -> Mapping[str, Any]:
        """Creates a card message with the user's avatar.
    
        Args:
            Mapping[str, Any] user: The user who sent the message.
    
        Returns:
            Mapping[str, Any]: a card with the user's avatar.
        """
        display_name = user.get("displayName", "")
        avatar_url = 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}},
                                ]
                            }
                        ],
                    },
                }
            ],
        }

  8. לוחצים על פריסת.

Java

  1. נכנסים לדף Cloud Functions במסוף Google Cloud:

    כניסה לדף Cloud Functions

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

  2. לוחצים על Create Function.

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

    1. בקטע Environment, בוחרים באפשרות Cloud Run Function.
    2. בשדה Function name, מזינים QuickStartChatApp.
    3. בקטע אזור, בוחרים אזור.
    4. בקטע 'אימות', בוחרים באפשרות דרישת אימות.
    5. לוחצים על הבא.
  4. בקטע Runtime, בוחרים את הגרסה האחרונה של Java.

  5. בקטע קוד מקור, בוחרים באפשרות עורך בשורה.

  6. בקטע Entry point (נקודת כניסה), מוחקים את טקסט ברירת המחדל ומזינים App.

  7. משנים את השם של src/main/java/com/example/Example.java ל-src/main/java/AvatarApp.java.

  8. מחליפים את התוכן של AvatarApp.java בקוד הבא:

    java/avatar-app/src/main/java/AvatarApp.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.api.services.chat.v1.model.User;
    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 AvatarApp implements HttpFunction {
      private static final Gson gson = new Gson();
    
      // Command IDs (configure these in Google Chat API)
      private static final int ABOUT_COMMAND_ID = 1; // ID for the "/about" slash command
      private static final int HELP_COMMAND_ID = 2; // ID for the "Help" quick command
    
      @Override
      public void service(HttpRequest request, HttpResponse response) throws Exception {
        JsonObject event = gson.fromJson(request.getReader(), JsonObject.class);
    
        if (event.has("appCommandMetadata")) {
          handleAppCommands(event, response);
        } else {
          handleRegularMessage(event, response);
        }
      }
    
      /**
       * Handles slash and quick commands.
       *
       * @param event    The Google Chat event.
       * @param response The HTTP response object.
       */
      private void handleAppCommands(JsonObject event, HttpResponse response) throws Exception {
        int appCommandId = event.getAsJsonObject("appCommandMetadata").get("appCommandId").getAsInt();
    
        switch (appCommandId) {
          case ABOUT_COMMAND_ID:
            Message aboutMessage = new Message();
            aboutMessage.setText("The Avatar app replies to Google Chat messages.");
            aboutMessage.setPrivateMessageViewer(new User()
                .setName(event.getAsJsonObject("user").get("name").getAsString()));
            response.getWriter().write(gson.toJson(aboutMessage));
            return;
          case HELP_COMMAND_ID:
            Message helpMessage = new Message();
            helpMessage.setText("The Avatar app replies to Google Chat messages.");
            helpMessage.setPrivateMessageViewer(new User()
                .setName(event.getAsJsonObject("user").get("name").getAsString()));
            response.getWriter().write(gson.toJson(helpMessage));
            return;
        }
      }
    
      /**
       * Handles regular messages (not commands).
       *
       * @param event    The Google Chat event.
       * @param response The HTTP response object.
       */
      private void handleRegularMessage(JsonObject event, HttpResponse response) throws Exception {
    
        if (!event.has("user")) {
          response.getWriter().write("Invalid request.");
          return;
        }
    
        JsonObject user = event.getAsJsonObject("user");
        String displayName = user.has("displayName") ? user.get("displayName").getAsString() : "";
        String avatarUrl = user.has("avatarUrl") ? user.get("avatarUrl").getAsString() : "";
        Message message = createMessage(displayName, avatarUrl);
        response.getWriter().write(gson.toJson(message));
      }
    
      /**
       * Creates a card message with the user's avatar.
       *
       * @param displayName The user's display name.
       * @param avatarUrl   The URL of the user's avatar.
       * @return The card message object.
       */
      private Message createMessage(String displayName, String avatarUrl) {
        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)))))))));
      }
    }

  9. מחליפים את התוכן של pom.xml בקוד הבא:

    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/maven-v4_0_0.xsd">
      <modelVersion>4.0.0</modelVersion>
    
      <groupId>gcfv2</groupId>
      <artifactId>avatar-app</artifactId>
      <version>0.0.1</version>
      <name>Avatar App</name>
    
      <properties>
        <maven.compiler.release>21</maven.compiler.release>
      </properties>
    
      <dependencies>
        <dependency>
          <groupId>com.google.cloud.functions</groupId>
          <artifactId>functions-framework-api</artifactId>
          <version>1.1.4</version>
        </dependency>
    
        <!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
        <dependency>
          <groupId>com.google.code.gson</groupId>
          <artifactId>gson</artifactId>
          <version>2.12.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-rev20250116-2.0.0</version>
        </dependency>
    
      </dependencies>
    
    </project>

  10. לוחצים על פריסת.

דף הפרטים של Cloud Functions נפתח, והפונקציה מופיעה עם שני מדדי התקדמות: אחד ל-build ואחד לשירות. כששני מדדי ההתקדמות נעלמים ומוחלפים בסימן וי, הפונקציה פרוסה ומוכנה לשימוש.

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

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

  1. נכנסים לדף Cloud Run במסוף Google Cloud:

    כניסה אל Cloud Run

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

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

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

  5. בשדה New principals, מזינים chat@system.gserviceaccount.com.

  6. בקטע Select a role, בוחרים באפשרות Cloud Run > Cloud Run Invoker.

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

פרסום האפליקציה ב-Google Chat

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

  1. במסוף Google Cloud, לוחצים על סמל התפריט > Cloud Functions.

    כניסה לדף Cloud Functions

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

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

  3. לוחצים על הכרטיסייה טריגרים.

  4. בקטע HTTPS, מעתיקים את כתובת ה-URL.

  5. מחפשים את 'Google Chat API' ולוחצים על Google Chat API ואז על ניהול.

    לדף Chat API

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

    1. בשדה App name, מזינים Quickstart App.
    2. בקטע Avatar URL, מזינים את הערך https://developers.google.com/chat/images/quickstart-app-avatar.png.
    3. בשדה Description, מזינים Quickstart app.
    4. בקטע פונקציונליות, בוחרים באפשרויות קבלת הודעות בצ'אט אישי והצטרפות למרחבים משותפים ולשיחות קבוצתיות.
    5. בקטע Connection settings, בוחרים באפשרות HTTP endpoint URL ומדביקים את כתובת ה-URL של הטריגר של Cloud Function בתיבה.
    6. בקטע Authentication Audience, בוחרים באפשרות HTTP endpoint URL.
    7. בקטע Visibility (חשיפה), בוחרים באפשרות Make this Google Chat app available to specific people and groups (האפליקציה של Google Chat תהיה זמינה לאנשים ולקבוצות ספציפיים) בדומיין ומזינים את כתובת האימייל.
    8. בקטע יומנים, בוחרים באפשרות רישום שגיאות ביומן.
  7. לוחצים על שמירה.

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

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

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

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

    כניסה ל-Google Chat

  2. לוחצים על צ'אט חדש.
  3. בשדה Add 1 or more people, מקלידים את שם אפליקציית 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.