หน้านี้ได้รับการแปลโดย Cloud Translation API

สร้างแอป Chat ด้วยฟังก์ชัน Google Cloud

หน้านี้จะอธิบายวิธีสร้างและโต้ตอบกับแอป Chat โดยใช้ Google Cloud Functions

ในการสร้างแอป คุณจะต้องเขียนและทําให้ฟังก์ชันระบบคลาวด์ใช้งานได้ ซึ่งแอปใช้เพื่อประมวลผลการตอบกลับกิจกรรมข้อความจาก Google Chat การตอบกลับเป็นการ์ดที่แสดงชื่อและรูปโปรไฟล์ของผู้ส่งดังที่แสดงในรูปภาพต่อไปนี้

แอปแชทตอบกลับด้วยการ์ดที่มีชื่อที่แสดงและรูปโปรไฟล์ของผู้ส่ง

วัตถุประสงค์

ตั้งค่าสภาพแวดล้อมของคุณ
สร้างและทําให้ Cloud Function ใช้งานได้
เผยแพร่แอปไปยัง Google Chat
ทดสอบแอป

สิ่งที่ต้องดำเนินการก่อน

บัญชี Google Workspace ที่มีสิทธิ์เข้าถึง Google Chat
โปรเจ็กต์ Google Cloud
ตรวจสอบว่าคุณเปิดการเรียกเก็บเงินสําหรับโปรเจ็กต์ที่อยู่ในระบบคลาวด์แล้ว ดูวิธียืนยันสถานะการเรียกเก็บเงินของโปรเจ็กต์

ตั้งค่าสภาพแวดล้อม

ก่อนใช้ Google APIs คุณต้องเปิดใช้งาน API ดังกล่าวในโปรเจ็กต์ Google Cloud คุณจะเปิดใช้ API อย่างน้อย 1 รายการในโปรเจ็กต์ Google Cloud เดียวได้

ในคอนโซล Google Cloud ให้เปิดใช้ Google Chat API, Cloud Build API, Cloud Functions API และ Cloud Pub/Sub API

เปิดใช้ API

สร้างและทําให้ Cloud Function ใช้งานได้

สร้าง Cloud Function ที่สร้างการ์ด Chat ด้วยชื่อที่แสดงและรูปโปรไฟล์ของผู้ส่ง เมื่อแอป Chat ได้รับข้อความ แอป จะเรียกใช้ฟังก์ชันและตอบกลับด้วยการ์ด

หากต้องการสร้างฟังก์ชันและทําให้แอป Chat ใช้งานได้ ให้ทําตามขั้นตอนต่อไปนี้

Node.js

ใน Google Cloud Console ให้ไปที่หน้า Cloud Functions:

ไปที่ Cloud Functions

ตรวจสอบว่าโปรเจ็กต์สําหรับแอป Chat ได้รับการเลือกแล้ว
คลิก สร้างฟังก์ชัน
ในหน้า "สร้างฟังก์ชัน" ให้ตั้งค่าฟังก์ชันดังนี้
1. ในชื่อฟังก์ชัน ให้ป้อน "QuickStartChatApp"
2. ในประเภททริกเกอร์ ให้เลือก HTTP
3. ในส่วนการตรวจสอบสิทธิ์ ให้เลือกอนุญาตการเรียกใช้ที่ไม่ผ่านการตรวจสอบสิทธิ์
  
  โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับการตรวจสอบสิทธิ์ใน Google Workspace ที่หัวข้อตรวจสอบสิทธิ์และให้สิทธิ์แอป Chat และ API ที่ต้องการ
4. คลิกบันทึก
5. คลิกถัดไป
ใน Runtime ให้เลือก Node.js 10
ในซอร์สโค้ด ให้เลือกตัวแก้ไขในบรรทัด
ลบข้อความเริ่มต้นแล้วป้อน helloChat ในจุดแรกเข้า

แทนที่เนื้อหาของ index.js ด้วยโค้ดต่อไปนี้

node/avatar-bot/index.js

ดูใน GitHub

/**
 * Google Cloud Function that responds to messages sent from a
 * Hangouts Chat room.
 *
 * @param {Object} req Request sent from Hangouts Chat room
 * @param {Object} res Response to send back
 */
exports.helloChat = function helloChat(req, res) {
  if (req.method === 'GET' || !req.body.message) {
    res.send('Hello! This function is meant to be used in a Hangouts Chat ' +
      'Room.');
  }

  const sender = req.body.message.sender.displayName;
  const image = req.body.message.sender.avatarUrl;

  const data = createMessage(sender, image);

  res.send(data);
};

/**
 * Creates a card with two widgets.
 * @param {string} displayName the sender's display name
 * @param {string} imageUrl the URL for the sender's avatar
 * @return {Object} a card with the user's avatar.
 */
function createMessage(displayName, imageUrl) {
  const cardHeader = {
    title: `Hello ${displayName}!`,
  };

  const avatarWidget = {
    textParagraph: {text: 'Your avatar picture: '},
  };

  const avatarImageWidget = {
    image: {imageUrl},
  };

  const avatarSection = {
    widgets: [
      avatarWidget,
      avatarImageWidget,
    ],
  };

  return {
    cardsV2: [{
      cardId: 'avatarCard',
      card: {
        name: 'Avatar Card',
        header: cardHeader,
        sections: [avatarSection],
      }
    }],
  };
}

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

Python

ใน Google Cloud Console ให้ไปที่หน้า Cloud Functions:

ไปที่ Cloud Functions

ตรวจสอบว่าโปรเจ็กต์สําหรับแอป Chat ได้รับการเลือกแล้ว
คลิก สร้างฟังก์ชัน
ในหน้า "สร้างฟังก์ชัน" ให้ตั้งค่าฟังก์ชันดังนี้
1. ในชื่อฟังก์ชัน ให้ป้อน "QuickStartChatApp"
2. ในประเภททริกเกอร์ ให้เลือก HTTP
3. ในส่วนการตรวจสอบสิทธิ์ ให้เลือกอนุญาตการเรียกใช้ที่ไม่ผ่านการตรวจสอบสิทธิ์
  
  โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับการตรวจสอบสิทธิ์ใน Google Workspace ที่หัวข้อตรวจสอบสิทธิ์และให้สิทธิ์แอป Chat และ API ที่ต้องการ
4. คลิกบันทึก
5. คลิกถัดไป
ใน Runtime ให้เลือก Python 3.10
ในซอร์สโค้ด ให้เลือกตัวแก้ไขในบรรทัด
ลบข้อความเริ่มต้นแล้วป้อน hello_chat ในจุดแรกเข้า

แทนที่เนื้อหาของ main.py ด้วยโค้ดต่อไปนี้

python/avatar-bot/main.py

ดูใน GitHub

from typing import Any, Mapping

import flask
import functions_framework


# Google Cloud Function that responds to messages sent in
# Google Chat.
#
# @param {Object} req Request sent from Google Chat.
# @param {Object} res Response to send back.
@functions_framework.http
def hello_chat(req: flask.Request) -> Mapping[str, Any]:
  if req.method == "GET":
    return "Hello! This function must be called from Google Chat."

  request_json = req.get_json(silent=True)

  display_name = request_json["message"]["sender"]["displayName"]
  avatar = request_json["message"]["sender"]["avatarUrl"]

  response = create_message(name=display_name, image_url=avatar)

  return response


# Creates a card with two widgets.
# @param {string} name the sender's display name.
# @param {string} image_url the URL for the sender's avatar.
# @return {Object} a card with the user's avatar.
def create_message(name: str, image_url: str) -> Mapping[str, Any]:
  avatar_image_widget = {"image": {"imageUrl": image_url}}
  avatar_text_widget = {"textParagraph": {"text": "Your avatar picture:"}}
  avatar_section = {"widgets": [avatar_text_widget, avatar_image_widget]}

  header = {"title": f"Hello {name}!"}

  cards = {
      "cardsV2": [
          {
              "cardId": "avatarCard",
              "card": {
                  "name": "Avatar Card",
                  "header": header,
                  "sections": [avatar_section],
              },
          }
      ]
  }

  return cards

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

Java

ใน Google Cloud Console ให้ไปที่หน้า Cloud Functions:

ไปที่ Cloud Functions

ตรวจสอบว่าโปรเจ็กต์สําหรับแอป Chat ได้รับการเลือกแล้ว
คลิก สร้างฟังก์ชัน
ในหน้า "สร้างฟังก์ชัน" ให้ตั้งค่าฟังก์ชันดังนี้
1. ในชื่อฟังก์ชัน ให้ป้อน "QuickStartChatApp"
2. ในประเภททริกเกอร์ ให้เลือก HTTP
3. ในส่วนการตรวจสอบสิทธิ์ ให้เลือกอนุญาตการเรียกใช้ที่ไม่ผ่านการตรวจสอบสิทธิ์
  
  โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับการตรวจสอบสิทธิ์ใน Google Workspace ที่หัวข้อตรวจสอบสิทธิ์และให้สิทธิ์แอป Chat และ API ที่ต้องการ
4. คลิกบันทึก
5. คลิกถัดไป
ใน Runtime ให้เลือก Java 11
ในซอร์สโค้ด ให้เลือกตัวแก้ไขในบรรทัด
ลบข้อความเริ่มต้นแล้วป้อน HelloChat ในจุดแรกเข้า
เปลี่ยนชื่อ src/main/java/com/example/Example.java เป็น src/main/java/HelloChat.java

แทนที่เนื้อหาของ HelloChat.java ด้วยโค้ดต่อไปนี้

java/avatar-bot/src/main/java/HelloChat.java

ดูใน GitHub

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 HelloChat 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("message")) {
      response.getWriter().write("Hello! This function must be called from Google Chat.");
      return;
    }

    JsonObject sender = body.getAsJsonObject("message").getAsJsonObject("sender");
    String displayName = sender.has("displayName") ? sender.get("displayName").getAsString() : "";
    String avatarUrl = sender.has("avatarUrl") ? sender.get("avatarUrl").getAsString() : "";
    Message message = createMessage(displayName, avatarUrl);

    response.getWriter().write(gson.toJson(message));
  }

  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("previewLink");
    cardWithId.setCard(card);

    Message message = new Message();
    message.setCardsV2(List.of(cardWithId));

    return message;
  }
}

แทนที่เนื้อหาของ pom.xml ด้วยโค้ดต่อไปนี้

java/avatar-bot/pom.xml

ดูใน GitHub

<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>cloudfunctions</groupId>
  <artifactId>http-function</artifactId>
  <version>1.0-SNAPSHOT</version>

  <properties>
    <maven.compiler.target>11</maven.compiler.target>
    <maven.compiler.source>11</maven.compiler.source>
  </properties>

  <dependencies>
    <dependency>
      <groupId>com.google.cloud.functions</groupId>
      <artifactId>functions-framework-api</artifactId>
      <version>1.0.1</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 11 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>

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

หน้า Cloud Functions จะเปิดขึ้น โดยฟังก์ชันจะปรากฏขึ้นพร้อมสัญญาณบอกสถานะความคืบหน้าในการทําให้ใช้งานได้ถัดจากชื่อฟังก์ชัน เมื่อสัญญาณบอกสถานะความคืบหน้าปรากฏขึ้น และเครื่องหมายถูกปรากฏขึ้น จะมีการนําฟังก์ชันไปใช้

เผยแพร่แอปไปยัง Google Chat

หลังจากทําให้ Cloud Function ใช้งานได้แล้ว ให้ทําตามขั้นตอนต่อไปนี้เพื่อเปลี่ยนเป็นแอป Google Chat

ในคอนโซล Google Cloud ให้คลิกเมนู > Cloud Functions

ไปที่ Cloud Functions

โปรดตรวจสอบว่าได้เลือกโปรเจ็กต์ที่คุณเปิดใช้ Cloud Functions แล้ว
คลิก QuickStartChatApp ในรายการฟังก์ชัน
ในหน้ารายละเอียดของฟังก์ชัน ให้คลิกทริกเกอร์
คัดลอก URL ในส่วน URL ทริกเกอร์
ค้นหา "Google Chat API" แล้วคลิก Google Chat API
คลิก Manage
คลิกการกําหนดค่าและตั้งค่าแอป Google Chat ดังนี้
1. ในชื่อแอป ให้ป้อน Quickstart App
2. ใน Avatar URL ให้ป้อน https://developers.google.com/chat/images/quickstart-app-avatar.png
3. ในคําอธิบาย ให้ป้อน Quickstart app
4. เลือกรับข้อความ 1:1 เข้าร่วมพื้นที่ทํางานและการสนทนากลุ่ม และบันทึกข้อผิดพลาดไปยัง Cloud Logging ในส่วนฟังก์ชันการทํางาน
5. ในส่วนการตั้งค่าการเชื่อมต่อ ให้เลือก URL ของแอป แล้ววาง URL สําหรับทริกเกอร์ Cloud Function ลงในช่อง
6. เลือกบุคคลและกลุ่มเฉพาะในโดเมนและป้อนที่อยู่อีเมลในส่วนสิทธิ์
คลิกบันทึก

แอปพร้อมที่จะรับและตอบกลับข้อความบน Google Chat แล้ว

ทดสอบแอป Chat

หากต้องการทดสอบแอป Chat ให้ส่งข้อความโดยตรงถึงแอปโดยทําดังนี้

เปิด Google Chat
หากต้องการส่งข้อความโดยตรงไปยังแอป ให้คลิก เริ่มแชท และในหน้าต่างที่ปรากฏขึ้น ให้คลิกค้นหาแอป
ในกล่องโต้ตอบค้นหาแอป ให้ค้นหา "แอปการเริ่มต้นอย่างรวดเร็ว"
ในการเปิดข้อความส่วนตัวด้วยแอป ให้ค้นหา แอป Quickstart แล้วคลิกเพิ่ม > แชท
ในข้อความส่วนตัว ให้พิมพ์ Hello และกด enter

แอปจะแสดงการ์ดพร้อมชื่อที่แสดงและรูปโปรไฟล์

ขั้นตอนถัดไป

หากต้องการแก้ปัญหาและแก้ไขข้อบกพร่องของแอป Chat โปรดไปที่หน้าเหล่านี้

ระหว่างที่สร้างแอป Chat คุณอาจต้องแก้ไขข้อบกพร่องนี้โดยการอ่านบันทึกข้อผิดพลาดของแอป หากต้องการอ่านบันทึก ให้ไปที่บันทึกของนักสํารวจในคอนโซล Google Cloud
แก้ปัญหา

หากต้องการเพิ่มฟังก์ชันอื่นๆ ในแอป Chat โปรดอ่านคําแนะนําต่อไปนี้

สร้างการ์ดแบบอินเทอร์แอกทีฟ — ข้อความบนการ์ดรองรับเลย์เอาต์ที่กําหนดไว้ องค์ประกอบ UI เชิงโต้ตอบ เช่น ปุ่ม และสื่อสมบูรณ์ เช่น รูปภาพ ใช้ข้อความบนบัตรเพื่อนําเสนอข้อมูลโดยละเอียด รวบรวมข้อมูลจากผู้ใช้ และแนะนําผู้ใช้ให้ไปยังขั้นตอนถัดไป
คําสั่งเครื่องหมายทับ — คําสั่งเครื่องหมายทับ (Slash) ช่วยให้คุณ ลงทะเบียนและโฆษณาคําสั่งเฉพาะที่ผู้ใช้จะมอบให้แอปได้โดยพิมพ์คําสั่งที่ขึ้นต้นด้วยเครื่องหมายทับ (/) เช่น /help
ช่องโต้ตอบการเปิดใช้ - กล่องโต้ตอบจะเป็นแบบหน้าต่างและเป็นแบบการ์ด ซึ่งแอปเปิดเพื่อโต้ตอบกับผู้ใช้ได้ บัตรหลายใบสามารถเรียงเข้าด้วยกันตามลําดับ ซึ่งช่วยให้ผู้ใช้สามารถดําเนินหลายขั้นตอน เช่น การกรอกแบบฟอร์ม

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Google Chat API ในเอกสารอ้างอิง