Teams Adaptive Card คืออะไร?

Content difficulty — user

นอกจากเป็น collaboration software แล้ว Microsoft Teams สามารถทำได้มากกว่า การ chat, VDO sharing หรือ การใช้ AI technology มาเพื่อเพิ่มประสิทธิภาพให้กับ applications

Microsoft Teams สามารถให้นักพัฒนาสามารถพัฒนา Application เพื่อเข้ามาใช้ร่วมกับ Microsoft Teams ได้ เพื่อที่จะมีความสามารถกว่าการพิมพ์ text ธรรมดา หรือการ online meeting อย่างเช่น การพัฒนาเรื่องของ Message Extensions จาก application อื่นๆ import เข้ามาใน chat

Message extension เช่น นำ Wikipedia มา Search ในห้อง Conversation ได้เลย

หรือในมุม Low-code application บน Power Apps เช่น ตัวอย่างข้างล่าง พอมีพนักงาน ใช้ apps เพื่อขอให้คนนอกเข้ามาติดต่อที่ counter แล้วเจ้าหน้าที่สามารถส่ง notification ไปแจ้งเตือนพนักงานที่ request ได้

การสร้าง application มา integrate กับ Microsoft Team สามารถ input ค่าต่างๆได้

สามารถส่งข้อความไปเตือน user พนักงานคนนั้นได้ แล้วเจ้าตัวก็สามารถตอบกลับมาได้ เเละคำตอบก็อาจจะบันทึกไปในระบบหลังบ้านต่างๆ

Flow bot ของ Teams ก็มาคุยเตือนเจ้าตัวว่า แขกมาถึงแล้ว

user ส่งค่า acknowledged กลับมาได้

แต่จากที่เห็นด้านบน ข้อความที่ bot ส่งมาไม่ใช่แค่ text ธรรมดา แต่เหมือนเป็น program web form เล็กๆ ที่สามารถให้ user input ค่ากลับไปได้ ต่างกับข้อความปกติที่ทำได้แค่ กด like ซึ่ง form การให้ user พิมพ์ตอบกลับมาได้ที่เห็นในรูปคือหนึ่งในตัวอย่างของ Adaptive card

Adaptive Card

Adaptive card เป็น User Interface (UI) แบบ mini ที่สามารถใส่ข้อมูลได้ ซึ่งได้ทั้งรูปภาพ, ข้อความ, vdo หรือ ปุ่มต่างๆ เพื่อให้ user ได้ใช้งาน หรือ ดูข้อมูลที่สำคัญเพื่อต่อยอด การทำงานของ application ที่ไปผูกอยู่ได้

https://adaptivecards.io/

Version ก่อนหน้าของ Adaptive card จะเรียกว่า MessageCard

ซึ่งตรงส่วนนี้สามารถใช้ได้ผ่าน Microsoft Teams, Outlook, Azure Bot Framework หรือแม่แต่ใน Windows Timeline แล้วก็มีเป้าหมายเพื่อให้เป็น universal platform ใช้ใน framework อื่นๆ .NET, UWP, JavaScript หรือ platform อย่าง iOS/Android จุดประสงค์เพื่อเพิ่ม engagement ระหว่าง user กับ application ด้วยโครงสร้างหลักๆของ object สามารถ add/edit ได้ด้วย JavaScript Object Notation (JSON) format

โครงสร้างมาสามารถทำได้ผ่าน JSON format

ตัวอย่างหน้าตาการใช้ adaptive card?

เช่นในมุมการกรอกข้อมูลส่วนตัว, รายงานสภาพอากาศ, ทำ survey, ราคาหุ้น, ผลการแข่งขัน หรือ โชว์ agenda งานต่างๆ ซึ่งมีทั้งที่ให้ user ดูเฉยๆ หรือ ทำการกรอก คลิก หรือ เลือกตัวเลือกเพื่อตัดสินใจ

สามารถใช้ใน use case ที่หลากหลาย

ใช้ในมุมการ survey

ใครใช้ Outlook mobile ก็อาจจะเคยได้ใช้ Adaptive Card มาแล้ว

Adaptive card บนระบบอย่าง SAP

Adaptive card ร่วมกับ Workday

สามารถเริ่ม Design Adaptive card ที่ไหน?

สามารถเริ่มได้ที่ https://adaptivecards.io/designer/ ซึ่งใน VS Code ก็มี Extension เพื่อช่วยในการ Design

ทำผ่าน designer online ได้เลย

VS Code Extensions

คราวต่อไปจะมาลองยิง adaptive card เข้า Microsoft Teams กันครับ