สร้างแอป HTTP สำหรับ Google Chat

ในคอนโซล Google Cloud ให้ไปที่หน้า Cloud Functions โดยทำดังนี้

ไปที่ Cloud Functions

ตรวจสอบว่าได้เลือกโปรเจ็กต์สำหรับแอป Chat แล้ว

คลิก add_box สร้างฟังก์ชัน

ในหน้าสร้างฟังก์ชัน ให้ตั้งค่าฟังก์ชันดังนี้

1. ในสภาพแวดล้อม ให้เลือกฟังก์ชัน Cloud Run
2. ป้อน AddOnChatApp ในชื่อฟังก์ชัน
3. เลือกภูมิภาคในภูมิภาค
4. ในส่วนการตรวจสอบสิทธิ์ ให้เลือกต้องตรวจสอบสิทธิ์
5. คลิกถัดไป

ในรันไทม์ ให้เลือก Node.js เวอร์ชันล่าสุด

ในซอร์สโค้ด ให้เลือกเครื่องมือแก้ไขในบรรทัด

ในจุดแรกเข้า ให้ลบข้อความเริ่มต้นแล้วป้อน avatarApp

แทนที่เนื้อหาของ 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 }
                    }]
                }]
            }
        }]
    }}}}});
};

คลิกทำให้ใช้งานได้

ในคอนโซล Google Cloud ให้ไปที่หน้า Cloud Functions โดยทำดังนี้

ไปที่ Cloud Functions

ตรวจสอบว่าได้เลือกโปรเจ็กต์สำหรับแอป Chat แล้ว

คลิก add_box สร้างฟังก์ชัน

ในหน้าสร้างฟังก์ชัน ให้ตั้งค่าฟังก์ชันดังนี้

1. ในสภาพแวดล้อม ให้เลือกฟังก์ชัน Cloud Run
2. ป้อน AddOnChatApp ในชื่อฟังก์ชัน
3. เลือกภูมิภาคในภูมิภาค
4. ในส่วนการตรวจสอบสิทธิ์ ให้เลือกต้องตรวจสอบสิทธิ์
5. คลิกถัดไป

ในรันไทม์ ให้เลือก Python เวอร์ชันล่าสุด

ในซอร์สโค้ด ให้เลือกเครื่องมือแก้ไขในบรรทัด

ในจุดแรกเข้า ให้ลบข้อความเริ่มต้นแล้วป้อน avatar_app

แทนที่เนื้อหาของ 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 }
                    }]
                }]
            }
        }]
    }}}}}

คลิกทำให้ใช้งานได้

ในคอนโซล Google Cloud ให้ไปที่หน้า Cloud Functions โดยทำดังนี้

ไปที่ Cloud Functions

ตรวจสอบว่าได้เลือกโปรเจ็กต์สำหรับแอป Chat แล้ว

คลิก add_box สร้างฟังก์ชัน

ในหน้าสร้างฟังก์ชัน ให้ตั้งค่าฟังก์ชันดังนี้

1. ในสภาพแวดล้อม ให้เลือกฟังก์ชัน Cloud Run
2. ป้อน AddOnChatApp ในชื่อฟังก์ชัน
3. เลือกภูมิภาคในภูมิภาค
4. ในส่วนการตรวจสอบสิทธิ์ ให้เลือกต้องตรวจสอบสิทธิ์
5. คลิกถัดไป

ในรันไทม์ ให้เลือก Java เวอร์ชันล่าสุด

ในซอร์สโค้ด ให้เลือกเครื่องมือแก้ไขในบรรทัด

ในจุดแรกเข้า ให้ลบข้อความเริ่มต้นแล้วป้อน AvatarApp

เปลี่ยนชื่อไฟล์ Java เริ่มต้นเป็น src/main/java/AvatarApp.java

แทนที่เนื้อหาของ 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;
    }
}

แทนที่เนื้อหาของ 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>

คลิกทำให้ใช้งานได้