إنشاء تطبيق Google Chat يستخدم بروتوكول HTTP

توضّح هذه الصفحة كيفية إنشاء إضافة في Google Workspace تعمل في Google Chat باستخدام خدمة HTTP.

يوضّح دليل البدء السريع هذا كيفية إنشاء خدمة HTTP باستخدام خدمات Google Cloud. لإنشاء تطبيق Chat، عليك كتابة دالة Cloud Run ونشرها، ويستخدمها تطبيق Chat للردّ على رسالة المستخدم.

باستخدام بنية HTTP، يمكنك ضبط Chat للدمج مع Google Cloud أو خادم محلي باستخدام HTTP، كما هو موضّح في الرسم البياني التالي:

بنية تطبيق Chat باستخدام خدمة ويب على خادم محلي

في الرسم البياني السابق، يتضمّن تفاعل المستخدم مع تطبيق HTTP Chat تدفق المعلومات التالي:

  1. يرسل المستخدم رسالة في Chat إلى تطبيق Chat، إما في رسالة مباشرة أو في مساحة Chat.
  2. يتم إرسال طلب HTTP إلى خادم ويب، وهو إما نظام سحابي أو نظام محلي يحتوي على منطق تطبيق Chat.
  3. يمكن لمنطق تطبيق Chat اختياريًا الدمج مع خدمات Google Workspace (مثل "تقويم Google" و"جداول بيانات Google") أو خدمات Google الأخرى (مثل "خرائط Google" وYouTube وVertex AI) أو خدمات الويب الأخرى (مثل نظام إدارة المشاريع أو أداة تتبُّع المشاكل).
  4. يرسل خادم الويب استجابة HTTP إلى خدمة تطبيق Chat في Chat.
  5. يتم تسليم الردّ إلى المستخدم.
  6. يمكن لتطبيق Chat اختياريًا استدعاء Chat API لنشر الرسائل بشكل غير متزامن أو تنفيذ عمليات أخرى.

توفّر هذه البنية المرونة لاستخدام المكتبات والمكوّنات المتوفّرة حاليًا في نظامك، لأنّه يمكن تصميم تطبيقات Chat هذه باستخدام لغات برمجة مختلفة.

الأهداف

  • إعداد البيئة
  • إنشاء دالة Cloud Run ونشرها
  • ضبط إضافة في Google Workspace لتطبيق Chat
  • اختبار التطبيق

المتطلبات الأساسية

إعداد البيئة

قبل استخدام واجهات برمجة تطبيقات Google، عليك تفعيلها في مشروع على Google Cloud. يمكنك تفعيل واجهة برمجة تطبيق واحدة أو أكثر في مشروع واحد على Google Cloud.

إنشاء دالة Cloud Run ونشرها

أنشئ دالة Cloud Run ونشرها، وتنشئ هذه الدالة بطاقة Chat تتضمّن الاسم المعروض للمرسِل وصورة الأفاتار. عندما يتلقّى تطبيق Chat رسالة، يشغّل الدالة ويردّ بالبطاقة.

لإنشاء الدالة ونشرها لتطبيق Chat، يُرجى اتّباع الخطوات التالية:

Node.js

  1. في وحدة تحكّم Google Cloud، انتقِل إلى صفحة Cloud Run:

    الانتقال إلى Cloud Run

    تأكَّد من اختيار مشروع تطبيق Chat.

  2. انقر على كتابة دالة.

  3. في صفحة إنشاء خدمة ، اضبط دالتك:

    1. في حقل اسم الخدمة ، أدخِل addonchatapp.
    2. في قائمة المنطقة ، اختَر منطقة.
    3. في قائمة وقت التشغيل ، اختَر أحدث إصدار من Node.js.
    4. في قسم المصادقة ، اختَر طلب المصادقة.
    5. انقر على إنشاء، وانتظِر إلى أن تنشئ 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. في صفحة إنشاء خدمة ، اضبط دالتك:

    1. في حقل اسم الخدمة ، أدخِل addonchatapp.
    2. في قائمة المنطقة ، اختَر منطقة.
    3. في قائمة وقت التشغيل ، اختَر أحدث إصدار من Python.
    4. في قسم المصادقة ، اختَر طلب المصادقة.
    5. انقر على إنشاء، وانتظِر إلى أن تنشئ 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. انقر على حفظ وإعادة النشر.

جافا

  1. في وحدة تحكّم Google Cloud، انتقِل إلى صفحة Cloud Run:

    الانتقال إلى Cloud Run

    تأكَّد من اختيار مشروع تطبيق Chat.

  2. انقر على كتابة دالة.

  3. في صفحة إنشاء خدمة ، اضبط دالتك:

    1. في حقل اسم الخدمة ، أدخِل addonchatapp.
    2. في قائمة المنطقة ، اختَر منطقة.
    3. في قائمة وقت التشغيل ، اختَر أحدث إصدار من Java.
    4. في قسم المصادقة ، اختَر طلب المصادقة.
    5. انقر على إنشاء، وانتظِر إلى أن تنشئ 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. في اسم التطبيق، أدخِل 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. ضمن إعدادات الاتصال، اختَر عنوان URL لنقطة نهاية HTTP.
    6. ضمن المشغّلات ، اختَر استخدام عنوان URL لنقطة نهاية HTTP مشتركة لجميع المشغّلات ، والصِق عنوان URL لمشغّل دالة Cloud Run في الـ مربّع.
    7. ضمن حق الدخول، اختَر إتاحة تطبيق Google Chat هذا لأشخاص ومجموعات معيّنة في نطاقك وأدخِل عنوان بريدك الإلكتروني.
    8. ضمن السجلات ، اختَر تسجيل الأخطاء في Cloud Logging.
  6. انقر على حفظ.

  7. ضمن إعدادات الاتصال ، انسخ عنوان البريد الإلكتروني لحساب الخدمة. ستحتاج إلى هذا البريد الإلكتروني عند منح الإذن للإضافة باستدعاء دالتك.

بعد ذلك، عليك منح الإذن لتطبيق Chat باستدعاء دالة Cloud Run.

منح الإذن لـ Google Chat باستدعاء دالتك

لمنح الإذن لإضافة في Google Workspace باستدعاء دالتك، أضِف حساب خدمة الإضافة في Google Workspace باستخدام دور مستدعي خدمة Cloud Run.

  1. في وحدة تحكّم Google Cloud، انتقِل إلى صفحة Cloud Run:

    الانتقال إلى Cloud Run

  2. في قائمة خدمات Cloud Run، ضَع علامة في مربّع الاختيار بجانب الدالة المستلِمة. (لا تنقر على الدالة نفسها).

  3. انقر على الأذونات. يُفتح لوحة الأذونات.

  4. انقر على إضافة مستخدم رئيسي.

  5. في الكيانات الرئيسية الجديدة، أدخِل عنوان البريد الإلكتروني لحساب خدمة الإضافة في Google Workspace المرتبط بتطبيق Chat.

    يظهر عنوان البريد الإلكتروني لحساب الخدمة في صفحة إعدادات Chat API، ضمن إعدادات الاتصال > عنوان URL لنقطة نهاية HTTP > عنوان البريد الإلكتروني لحساب الخدمة:

    الانتقال إلى إعدادات Chat API

  6. في اختيار دور ، اختَر Cloud Run > مستدعي Cloud Run.

  7. انقر على حفظ.

أصبح تطبيق Chat جاهزًا لتلقّي الرسائل والردّ عليها في Chat.

اختبار تطبيق Chat

لاختبار تطبيق Chat، افتح مساحة رسالة مباشرة مع تطبيق Chat وأرسِل رسالة:

  1. افتح Google Chat باستخدام حساب Google Workspace الذي قدّمته عند إضافتك كمختبِر موثوق به.

    الانتقال إلى Google Chat

  2. انقر على محادثة جديدة.
  3. في حقل إضافة شخص واحد أو أكثر ، اكتب اسم تطبيق Chat الخاص بك.
  4. اختَر تطبيق Chat من النتائج. تُفتح رسالة مباشرة.

  5. في الرسالة المباشرة الجديدة مع التطبيق، اكتب Hello واضغط على enter.

تحتوي رسالة تطبيق Chat على بطاقة تعرض اسم المرسِل وصورة الأفاتار، كما هو موضّح في الصورة التالية:

تطبيق محادثة يردّ ببطاقة تعرض الاسم المعروض للمرسل وصورة الأفاتار

لإضافة مختبِرين موثوق بهم ومزيد من المعلومات عن اختبار الميزات التفاعلية، يُرجى الاطّلاع على مقالة اختبار الميزات التفاعلية لتطبيقات Google Chat.

تحديد المشاكل وحلّها

عندما يعرض تطبيق أو بطاقة في Google Chat خطأً، تعرض واجهة Chat رسالة تفيد بأنّه "حدث خطأ ما". أو "يتعذّر معالجة طلبك". في بعض الأحيان، لا تعرض واجهة مستخدم Chat أي رسالة خطأ، ولكن تطبيق Chat أو البطاقة يعرض نتيجة غير متوقّعة، مثلاً قد لا تظهر رسالة البطاقة.

على الرغم من أنّه قد لا تظهر رسالة خطأ في واجهة مستخدم Chat، تتوفّر رسائل خطأ وصفية وبيانات السجلّات لمساعدتك في حلّ الأخطاء عند تفعيل تسجيل الأخطاء لتطبيقات Chat. للحصول على مساعدة في عرض الأخطاء وتصحيحها وحلّها، يُرجى الاطّلاع على تحديد أخطاء Google Chat وحلّها.

تَنظيم

لتجنُّب تحمُّل رسوم على حسابك على Google Cloud مقابل الموارد المستخدَمة في هذا الدليل التوجيهي، ننصحك بحذف مشروع على السحابة الإلكترونية.

  1. في وحدة تحكّم Google Cloud، انتقِل إلى صفحة إدارة الموارد. انقر على القائمة > إدارة الهوية وإمكانية الوصول والمشرف > إدارة الموارد.

    الانتقال إلى Resource Manager

  2. في قائمة المشاريع، اختَر المشروع الذي تريد حذفه، ثم انقر على حذف .
  3. في مربّع الحوار، اكتب رقم تعريف المشروع، ثم انقر على إيقاف لحذف المشروع.