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

توضّح هذه الصفحة كيفية إنشاء إضافة في Google Workspace تعمل في Google Chat باستخدام خدمة HTTP. في Google Chat، تظهر الإضافات للمستخدمين على أنّها تطبيقات Google Chat. لمزيد من المعلومات، راجِع نظرة عامة على توسيع نطاق Google Chat.

يوضّح لك دليل البدء السريع هذا كيفية إنشاء خدمة HTTP باستخدام خدمات Google Cloud. لإنشاء تطبيق Chat، عليك كتابة ونشر وظيفة Cloud يستخدمها تطبيق 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 Function ونشرها.
  • ضبط إضافة Google Workspace لتطبيق Chat
  • اختبِر التطبيق.

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

إعداد البيئة

قبل استخدام واجهات برمجة تطبيقات Google، عليك تفعيلها في مشروع على Google Cloud. يمكنك تفعيل واجهة برمجة تطبيقات واحدة أو أكثر في مشروع واحد على 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.

    تفعيل واجهات برمجة التطبيقات

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

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

لإنشاء الدالة ونشرها في تطبيق Chat، عليك إكمال الخطوات التالية:

Node.js

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

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

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

  2. انقر على إنشاء دالة.

  3. في صفحة "إنشاء دالة"، اضبط الدالة:

    1. في البيئة، اختَر وظيفة Cloud Run.
    2. في اسم الدالة، أدخِل AddOnChatApp.
    3. في المنطقة، اختَر منطقة.
    4. ضمن "المصادقة"، اختَر طلب المصادقة.
    5. انقر على التالي.
  4. في وقت التشغيل، اختَر أحدث إصدار من Node.js.

  5. في الرمز المصدر، اختَر المحرِّر المضمّن.

  6. في نقطة الدخول، احذف النص التلقائي وأدخِل avatarApp.

  7. استبدِل محتويات index.js بالرمز التالي:

    /**
     * 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.chat) {
            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 chatMessage = req.body.chat.messagePayload.message;
    
        // Replies with the sender's avatar in a card.
        const displayName = chatMessage.sender.displayName;
        const avatarUrl = chatMessage.sender.avatarUrl;
        res.send({ hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
            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. في وحدة تحكّم Google Cloud، انتقِل إلى صفحة Cloud Functions:

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

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

  2. انقر على إنشاء دالة.

  3. في صفحة "إنشاء دالة"، اضبط الدالة:

    1. في البيئة، اختَر وظيفة Cloud Run.
    2. في اسم الدالة، أدخِل AddOnChatApp.
    3. في المنطقة، اختَر منطقة.
    4. ضمن "المصادقة"، اختَر طلب المصادقة.
    5. انقر على التالي.
  4. في وقت التشغيل، اختَر أحدث إصدار من Python.

  5. في الرمز المصدر، اختَر المحرِّر المضمّن.

  6. في نقطة الدخول، احذف النص التلقائي وأدخِل avatar_app.

  7. استبدِل محتويات main.py بالرمز التالي:

    from typing import Any, Mapping
    
    import flask
    import functions_framework
    
    @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)
    
        # Stores the Google Chat event as a variable.
        chat_message = request_json["chat"]["messagePayload"]["message"]
    
        # Replies with the sender's avatar in a card.
        display_name = chat_message["sender"]["displayName"]
        avatar_url = chat_message["sender"]["avatarUrl"]
        return { "hostAppDataAction": { "chatDataAction": { "createMessageAction": { "message": {
            "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. في وحدة تحكّم Google Cloud، انتقِل إلى صفحة Cloud Functions:

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

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

  2. انقر على إنشاء دالة.

  3. في صفحة "إنشاء دالة"، اضبط الدالة:

    1. في البيئة، اختَر وظيفة Cloud Run.
    2. في اسم الدالة، أدخِل AddOnChatApp.
    3. في المنطقة، اختَر منطقة.
    4. ضمن "المصادقة"، اختَر طلب المصادقة.
    5. انقر على التالي.
  4. في وقت التشغيل، اختَر أحدث إصدار من Java.

  5. في الرمز المصدر، اختَر المحرِّر المضمّن.

  6. في نقطة الدخول، احذف النص التلقائي وأدخِل AvatarApp.

  7. أعِد تسمية ملف Java التلقائي إلى src/main/java/AvatarApp.java.

  8. استبدِل محتويات AvatarApp.java بالرمز التالي:

    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 AvatarApp 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("chat")) {
                response.getWriter().write("Hello! This function is meant to be used " +
                    "in a Google Chat Space..");
                return;
            }
    
            // Stores the Google Chat event as a variable.
            JsonObject chatMessage = body.getAsJsonObject("chat")
                .getAsJsonObject("messagePayload").getAsJsonObject("message");
    
            // Replies with the sender's avatar in a card.
            String displayName = chatMessage.getAsJsonObject("sender").get("displayName").getAsString();
            String avatarUrl = chatMessage.getAsJsonObject("sender").get("avatarUrl").getAsString();
            Message message = createMessage(displayName, avatarUrl);
    
            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));
        }
    
        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("avatarCard");
            cardWithId.setCard(card);
    
            Message message = new Message();
            message.setText("Here's your avatar");
            message.setCardsV2(List.of(cardWithId));
    
            return message;
        }
    }
    
  9. استبدِل محتويات 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.0.4</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 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. انقر على نشر.

ستفتح صفحة تفاصيل "وظائف Cloud"، وستظهر دالة مع اثنين من مؤشرات التقدّم: أحدهما للإصدار والآخر للخدمة. عندما يختفي كلا مؤشّري التقدّم ويتم استبدالهما بعلامة اختيار، يعني ذلك أنّه تم نشر وظيفتك وأنّها جاهزة.

تفويض Google Chat لاستدعاء الدالة

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

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

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

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

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

  4. انقر على إضافة مشرف.

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

  6. في اختيار دور، اختَر Cloud Run > Cloud Run Invoker.

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

ضبط الإضافة

بعد نشر Cloud Function، اتّبِع الخطوات التالية لإنشاء إضافة ونشر تطبيق Google Chat:

  1. في وحدة تحكّم Google Cloud، انقر على رمز القائمة > Cloud Functions.

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

    تأكَّد من اختيار المشروع الذي فعّلت فيه وظائف Cloud.

  2. في قائمة الدوال، انقر على AddOnChatApp.

  3. انقر على علامة التبويب العوامل المشغِّلة.

  4. ضمن HTTPS، انسخ عنوان URL.

  5. ابحث عن "Google Chat API" وانقر على Google Chat API، ثم انقر على إدارة.

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

  6. انقر على الإعداد وفعِّل تطبيق Google Chat:

    1. في حقل اسم التطبيق، أدخِل Add-on Chat app.
    2. في عنوان URL للصورة الرمزية، أدخِل https://developers.google.com/chat/images/quickstart-app-avatar.png.
    3. في الوصف، أدخِل Add-on Chat app.
    4. ضمن الوظيفة، اختَر تلقّي رسائل بين شخصَين و الانضمام إلى المساحات والمحادثات الجماعية.
    5. ضمن إعدادات الاتصال، اختَر عنوان URL لنقطة نهاية HTTP والصق عنوان URL لعامل تشغيل Cloud Function في المربّع.
    6. في جمهور المصادقة، اختَر عنوان URL لنقطة نهاية HTTP.
    7. ضمن مستوى الرؤية، اختَر إتاحة تطبيق Google Chat هذا لأشخاص معيّنين ومجموعات في نطاقك وأدخِل عنوان بريدك الإلكتروني.
    8. ضمن السجلّات، اختَر تسجيل الأخطاء في السجلّ.
  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، انتقِل إلى صفحة إدارة الموارد. انقر على القائمة > إدارة الهوية وإمكانية الوصول والمشرف > إدارة الموارد.

    انتقِل إلى "مدير الموارد"

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