ส่งข้อมูลเข้า MS Teams ผ่าน Webhooks — Part 2

สำหรับใครที่ยังไม่ได้อ่าน Concept ใน ส่งข้อมูลเข้า MS Teams ผ่าน Webhooks — Part 1 แนะนำให้ไปอ่านก่อนนะครับ แต่ถ้าอ่านแล้วมาลุยภาคจบกันเลยครับ

ถึงเวลาของโค้ด Python

การส่งข้อมูลผ่าน Webhook จะอยู่ในรูปแบบของ HTTP Post ใช่ครับคุณอาจจะรู้จักเครื่องมือที่ชื่อว่า Postman ลองใช้เครื่องมือนี้ทดสอบดูก่อนก็ได้ครับ หรือจะมาเริ่มเขียนโค้ด python กันเลย

เราจะใช้ Library Requests เพื่อในการสร้าง HTTP Request ดังนั้นก็เริ่มต้นด้วยการ import ตามโค้ดด้านล่างนี้ได้เลย

import requests

หลังจากนี้เราจะสร้าง Payloads รูปแบบต่างๆ โดยแยกตามประเภทของ Cards นั่นเอง

Office 365 connector card

payload_message_card = {
    "@type": "MessageCard",
    "@context": "http://schema.org/extensions",
    "themeColor": "0076D7",
    "summary": "Larry Bryant created a new task",
    "sections": [{
        "activityTitle": "![TestImage](https://47a92947.ngrok.io/Content/Images/default.png)Larry Bryant created a new task",
        "activitySubtitle": "On Project Tango",
        "activityImage": "https://teamsnodesample.azurewebsites.net/static/img/image5.png",
        "facts": [{
            "name": "Assigned to",
            "value": "Unassigned"
        }, {
            "name": "Due date",
            "value": "Mon May 01 2017 17:07:18 GMT-0700 (Pacific Daylight Time)"
        }, {
            "name": "Status",
            "value": "Not started"
        }],
        "markdown": True
    }],
    "potentialAction": [{
        "@type": "ActionCard",
        "name": "Add a comment",
        "inputs": [{
            "@type": "TextInput",
            "id": "comment",
            "isMultiline": False,
            "title": "Add a comment here for this task"
        }],
        "actions": [{
            "@type": "HttpPOST",
            "name": "Add comment",
            "target": "http://..."
        }]
    }, {
        "@type": "ActionCard",
        "name": "Set due date",
        "inputs": [{
            "@type": "DateInput",
            "id": "dueDate",
            "title": "Enter a due date for this task"
        }],
        "actions": [{
            "@type": "HttpPOST",
            "name": "Save",
            "target": "http://..."
        }]
    }, {
        "@type": "ActionCard",
        "name": "Change status",
        "inputs": [{
            "@type": "MultichoiceInput",
            "id": "list",
            "title": "Select a status",
            "isMultiSelect": "false",
            "choices": [{
                "display": "In Progress",
                "value": "1"
            }, {
                "display": "Active",
                "value": "2"
            }, {
                "display": "Closed",
                "value": "3"
            }]
        }],
        "actions": [{
            "@type": "HttpPOST",
            "name": "Save",
            "target": "http://..."
        }]
    }]
}

Adaptive Card

payload_adaptive_card = {
    "type": "message",
    "attachments": [
        {
            "contentType": "application/vnd.microsoft.card.adaptive",
            "contentUrl": None,
            "content": {
                "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
                "type": "AdaptiveCard",
                "version": "1.2",
                "speak": "<s>The forecast for Seattle November 5 is mostly clear with a High of 50 degrees and Low of 41 degrees</s>",
                "body": [
                    {
                        "type": "TextBlock",
                        "text": "Redmond, WA",
                        "size": "Large",
                        "isSubtle": True,
                        "wrap": True
                    },
                    {
                        "type": "TextBlock",
                        "text": "{{DATE(2019-11-05T09:21:18+07:00, SHORT)}} {{TIME(2019-11-05T09:21:18+07:00)}}",
                        "spacing": "None",
                        "wrap": True
                    },
                    {
                        "type": "ColumnSet",
                        "columns": [
                            {
                                "type": "Column",
                                "width": "auto",
                                "items": [
                                    {
                                        "type": "Image",
                                        "url": "https://messagecardplayground.azurewebsites.net/assets/Mostly%20Cloudy-Square.png",
                                        "size": "Small"
                                    }
                                ]
                            },
                            {
                                "type": "Column",
                                "width": "auto",
                                "items": [
                                    {
                                        "type": "TextBlock",
                                        "text": "46",
                                        "size": "ExtraLarge",
                                        "spacing": "None",
                                        "wrap": True
                                    }
                                ]
                            },
                            {
                                "type": "Column",
                                "width": "stretch",
                                "items": [
                                    {
                                        "type": "TextBlock",
                                        "text": "°F",
                                        "weight": "Bolder",
                                        "spacing": "Small",
                                        "wrap": True
                                    }
                                ]
                            },
                            {
                                "type": "Column",
                                "width": "stretch",
                                "items": [
                                    {
                                        "type": "TextBlock",
                                        "text": "Hi 50",
                                        "wrap": True
                                    },
                                    {
                                        "type": "TextBlock",
                                        "text": "Lo 41",
                                        "spacing": "None",
                                        "wrap": True
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        }
    ]
}

สุดท้ายเราจะส่ง Payloads ข้างต้นด้วยการ HTTP Post และแน่นอนว่าถ้า Response text กลับมาเป็น ‘1’ นั่นคือ เราประสบความสำเร็จในการ Post ข้อมูลลง Channel แล้วครับ

url = 'https://ใช้ url ที่ได้จากการตั้งค่า Connector ขั้นตอนที่ 4'
r_message_card = requests.post(url, json=payload_message_card)
r_adaptive_card = requests.post(url, json=payload_adaptive_card)
print(r_message_card.text, r_adaptive_card.text)

สามารถดูโค้ดฉบับเต็มได้ที่ Colab

MS Teams — Webhooks and Cards

คลายปมสงสัยกรณีการส่ง Adaptive Card

จริงๆแล้วในเอกสารมีการพูดถึงเรื่องการ ส่ง Adaptive Card ด้วย Incoming Webhook อยู่แล้วโดยโครงสร้างของ JSON จะเป็นไปตามด้านล่างนี้

payload_adaptive_card = {
    "type": "message",
    "attachments": [
        {
            "contentType":"application/vnd.microsoft.card.adaptive",
            "contentUrl": None,
            "content": JSON Adaptive Card
        }
    ]
}

บทสรุป

• มาถึงตรงนี้เราสามารถที่จะ Post ข้อมูลเข้า MS Teams ผ่าน Webhooks ได้แล้ว
• ตัวเอกสารของทาง Microsoft ในความคิดของผมรู้สึกว่าต้องตั้งใจอ่านมากๆ เพราะมีรายละเอียดที่ต้องตามเก็บ
• ข้อจำกัดในการเชื่อมต่อ Platform ยังเป็นเรื่องที่ Microsoft เองก็เร่งพัฒนาเพื่อตอบโจทย์นักพัฒนา และผู้ใช้งาน ก็ได้แต่หวังว่าจะทันท่วงที

ของแถม

กรณีของ Office 365 connector card มี Python Library สำเร็จรูปที่ชื่อว่า pymsteams ซึ่งเขียนโค้ดตัวอย่างไว้ใน Colab ไว้ให้ด้วยครับ

หากชอบบทความที่ผมเขียนเพื่อเล่าสู่กันฟัง ยังไงก็กด Clap หรือแชร์ความรู้นี้ต่อไปเรื่อยๆด้วยนะครับ หากข้อมูลใดมีการเปลี่ยนแปลง หรือผิดพลาดแจ้งมาได้เลยครับ

Reference

Samples and Templates