คู่มือการใช้งาน EX10.tech (Platform สำหรับ LINE Developers) ฉบับสมบูรณ์

EX10.tech เป็น Platform ที่ช่วยให้นักพัฒนา LINE สามารถเริ่มต้นพัฒนา LINE API ได้ง่ายขึ้น โดยมี Features หลักๆ ดังนี้

• Chat Tool : ใช้งาน LINE Bot ร่วมกับ Admin Chat ได้
• Extensions : ส่วนเสริมของ Messaging API เช่น OCR, Object Detection เป็นต้น

มาเริ่มที่ Feature แรกกันเลย

EX10 Chat Tool

เป็นระบบที่ช่วยแก้ปัญหาที่ต้องเลือก Response Mode อย่างใดอย่างหนึ่ง เท่านั้น ทำให้ไม่สามารถใช้งาน Chatbot พร้อมกับ Admin Chat ได้

Chat Tool แก้ปัญหานี้ โดยการสร้าง Chat UI ขึ้นมาใหม่ ทำให้ admin สามารถเข้ามา chat คุยกับลูกค้าได้ตามปกติ ในขณะที่ Chatbot ก็ทำงานได้เช่นเดียวกัน (เปิด Response Mode เป็น Bot)

นอกจากนี้ Admin ยังสามารถเห็นข้อความที่ Bot ตอบผู้ใช้ไปได้ด้วยเช่นกัน

เริ่มใช้งาน EX10 Chat Tool

เริ่มจากเข้าเวบ ex10.tech

แล้ว Sign In ด้วย LINE Account มุมบนขวา

จะเจอหน้าจอให้สร้าง Channel ให้กด + Add new channel

• ตั้งชื่อ Channel Name
• ระบุ Channel ID / Channel Secret (จากเวบ LINE Developers Console)
• ตรง Connection Mode กับ Extensions ให้ปล่อยว่างไว้ก่อน
• กด Create / ระบบจะทำการสร้าง Channel และพาไปหน้า Channel ทั้งหมด

จากนั้นให้กดที่ชื่อ Channel เข้าไปเพื่อตั้งค่า Connection

แต่ก่อนที่จะไปทำการตั้งค่า Connection Mode ขออธิบายการทำงานของ Chat Tool ดังนี้

การทำงานของ EX10 Chat Tool

• EX10 สร้าง webhook url ให้ท่านนำไปใช้ที่ LINE Developers Console
• EX10 ทำหน้าที่รับ webhook request จาก LINE
• EX10 แสดงผลข้อความ Chat จากผู้ใช้ในหน้าจอ Chat UI
• EX10 ประมวลผลตาม Extensions ที่ต้องการ (ถ้ามี)
• EX10 ส่งต่อ request ไปให้ Bot Server หรือ Dialogflow ของท่านตามต้องการ

การตั้งค่าใช้งาน EX10

กรณียังไม่มีการใช้งาน Chat Bot

• ที่หัวข้อ Webhook API / กดปุ่ม Set wdebhook / ระบบจะทำการ set webhook ของ EX10 ไปที่ LINE Developers Console ให้อัตโนมัติ

• ระบบพร้อมใช้แล้ว เริ่มทดสอบการใช้งาน ในหัวข้อ Chat UI ได้เลย

กรณีตั้ง Bot API Server เอง

• เลือก Connection Mode เป็น Bot Server

• ระบุ API endpoint ของ bot server หรือ กดปุ่ม Get webhook กรณีมีการตั้งค่าไว้ที่ LINE Developers Console อยู่แล้ว ระบบจะทำการดึงมาให้อัตโนมัติ
• กดปุ่ม Verify เพื่อตรวจสอบการเชื่อมต่อ
• กดปุ่ม Save มุมล่างขวา
• ที่หัวข้อ Webhook API / กดปุ่ม Set webhook / ระบบจะทำการ set webhook ของ EX10 ไปที่ LINE Developers Console ให้อัตโนมัติ

• ระบบพร้อมใช้แล้ว เริ่มทดสอบการใช้งาน ในหัวข้อ Chat UI ได้เลย

กรณีใช้ Dialogflow เป็น Bot

• เลือก Connection Mode เป็น Dialogflow

• ระบุ Dialogflow Agent ID (ดูได้จากเมนู Integrations ใน Dialogflow)

• (optional) หากต้องการให้ระบบรองรับ Webhook Event อื่นๆ ที่ไม่ใช่ Text (เช่น Location Event, Postback Event) สามารถเปิด option “Convert Non-Text Event to Dialogflow” ระบบจะทำการแปลง event นั้นเพื่อให้ Dialogflow เข้าใจได้ โดยอัตโนมัติ

• แนบ Service Account File (ดูวิธีการดาวน์โหลด service account file ได้จาก https://ex10.tech/docs/service-account-file)

• กดปุ่ม Save มุมล่างขวา
• ที่หัวข้อ Webhook API / กดปุ่ม Set webhook / ระบบจะทำการ set webhook ของ EX10 ไปที่ LINE Developers Console ให้อัตโนมัติ

• ระบบพร้อมใช้แล้ว เริ่มทดสอบการใช้งาน ในหัวข้อ Chat UI ได้เลย

สำหรับคนที่ยังไม่เคยใช้งาน Dialogflow สามารถศึกษาการสร้าง LINE Chatbot ด้วย Dialogflow ได้ที่ Codelab นี้

Building LINE Chatbot using Dialogflow

Chat Tool

เริ่มต้นใช้งาน Chat โดยเข้าไปที่เมนู Chat Tool

จะประกฏหน้าจอ Chat ตามภาพ

สังเกตว่า ยังไม่มีรายชื่อผู้ใช้ในหน้าจอนี้ เนื่องจากระบบเราเพิ่งเริ่มทำงาน

ข้อมูล Chat ทั้งหมดที่เคยคุยกับผู้ใช้ทาง LINE OA Manager จะไม่สามารถมาแสดงได้ในหน้าจอนี้

ทดลองทักไปที่ OA ของเราใน LINE จะเริ่มเห็นข้อความปรากฏทางหน้าจอทางด้านซ้าย

สิ่งที่แสดงตรงนี้ ประกอบด้วย

• ชื่อและรูปโปรไฟล์ลูกค้า
• ข้อความล่าสุด และเวลา
• ตัวเลขแสดงจำนวนข้อความ
• สถานะการทำงานของ Bot (ON/OFF)
  Default เป็น ON / เมื่อ admin ตอบ จะเป็น OFF อัตโนมัติ

เมื่อคลิกที่ชื่อลูกค้า จะแสดงความความทั้งหมดในหน้าต่าง chat ด้านขวา

ประกอบด้วย

• ข้อความทั้งหมด ทั้งจากลูกค้า / จาก admin / จาก chatbot
  รองรับข้อความ, รูปภาพ, สติ๊กเกอร์, วิดีโอ, ออดิโอ, ไฟล์แนบ

• ล่าสุด รองรับ Flex Message แล้วด้วย
  (credit: Blog “แสดงผล Flex Message ใน HTML เสมือนอยู่บน LINE” โดยคุณกอล์ฟ PamornT LINE API Expert)

• ด้านล่างเป็นช่องแชทสำหรับ admin
  รองรับการส่งข้อความ, รูปภาพ, วิดีโอ, ออดิโอ

• รองรับการส่ง LINE Sticker

• รองรับการแนบไฟล์
  โดยการแนบไฟล์ จะเป็นการอัพโหลดขึ้น EX10 server และส่ง link ให้ลูกค้าดาวน์โหลดแทนการส่งไฟล์ไปตรงๆ

• สามารถกำหนด Tags และ Note ในส่วนของ Customer Info

เป็นอย่างไรกันบ้างครับ เริ่มอยากใช้งานกันแล้วละสิ ไปเริ่มใช้งานได้เลย ตอนนี้ยังเปิดให้ใช้ฟรีอยู่ครับ ==> ex10.tech

แต่บทความเรายังไม่จบนะครับ ไปต่อกัน…

การทำให้ Chat Tool แสดงข้อความจาก Chat Bot

จากตัวอย่างเรื่อง Flex message ด้านบน ถ้าสังเกตดีดี จะเห็นว่า ข้อความนั้น ส่งมาจาก bot

คำถามคือ ต้องทำอย่างไร ให้ข้อความจาก bot มาแสดงในหน้าจอนี้ด้วย

คำตอบคือ

• กรณีใช้ Connection Mode เป็น Dialogflow
  แค่แนบ server account file ที่ถูกต้อง ระบบจะดึงข้อความจาก dialogflow response มาแสดงให้เองโดยอัตโนมัติ เรียกได้ว่า ไม่ต้องทำอะไรเลย
  (ถ้าไม่แนบ service account file ก็ยังสามารถใช้งาน chat ได้ แต่จะไม่แสดงข้อความจาก bot ใน chat tool)
• กรณีใช้ Connection Mode เป็น Bot Server
  ต้องใช้วิธีปรับโปรแกรมของ API server เล็กน้อย เพื่อให้ระบบสามารถรู้ได้ว่า bot ตอบผู้ใช้ไปว่าอย่างไร แล้วนำมาแสดงใน chat tool

จากการทำงานของ EX10 ที่รับ webhook request แล้วส่งต่อไปที่ bot server API โดยการ POST request รูปแบบเดียวกันกับ webhook request จาก LINE ไปยัง bot server API

ปกติแล้ว เมื่อ bot server ได้รับ webhook event ก็จะ process และตอบกลับผู้ใช้ โดยใช้คำสั่ง replyMessage ในการส่งข้อความกลับ

แต่ระบบ EX10 ต้องการทราบข้อความที่ตอบกลับด้วย จึงต้องมีการแก้ไข bot server API ให้ทำการ response with HTTP Status 200 กลับมาตอนที่ EX10 request ไป ในรูปแบบดังนี้

[
  {
    "messages": [
      {
        "type": "text",
        "text": "ข้อความจาก bot"
      }
    ]
  }
]

ดูตัวอย่าง source code ได้ที่ https://gitlab.com/emetworks-public/ex10-show-bot-message-in-chat-tool

เมื่อ EX10 ได้รับ response มา ก็จะนำไปแสดงใน chat tool ดังรูป

เป็นอันเรียบร้อย ตอนนี้ระบบสามารถแสดงข้อความทั้งจากผู้ใช้ จาก admin และจาก bot ได้เรียบร้อย

ต่อไปจะพาไปรู้จักกับอีก Feature ที่สำคัญของ EX10 นั่นก็คือ

EX10 Extensions

EX10 Extensions ออกแบบมาเพื่อช่วยให้นักพัฒนาลดภาระงานบางอย่างลง โดยถูกออกแบบมาจากประสบการณ์ของ LINE Developers ที่พบงานที่ซับซ้อนหรือมักถูกใช้บ่อยๆ นำมาทำให้เป็นระบบสำเร็จรูปและพร้อมใช้ได้ทันที เช่น

• การดาวน์โหลดรูปที่ผู้ใช้ส่งเข้ามา และอัพโหลดขึ้น server อัตโนมัติ
• การทำ OCR หรือ Object Detection จากรูปที่ผู้ใช้ส่งเข้ามา
• การแปลง Non Text Event ไปเป็น ข้อความที่ Dialogflow เข้าใจได้
• การ Detect Intent ของข้อความ

เป็นต้น

Feature ต่างๆข้างต้น EX10 ทำไว้ให้หมดแล้ว เพียงแค่เปิดใช้งาน ก็ใช้ได้ทันที

Extensions : OCR

สิ่งที่เกิดขึ้น เมื่อเปิดใช้งาน OCR คือ เมื่อผู้ใช้ส่งรูปภาพเข้ามา ระบบจะทำการประมวลผลข้อความในภาพให้อัตโนมัติ เหมาะสำหรับงานประเภทที่ต้องการดึงข้อความจากภาพ เช่น งานอ่านป้ายทะเบียนรถยนต์ หรือ งานอ่านข้อมูลจากใบเสร็จ เป็นต้น

ตัวอย่างภาพ

ตัวอย่างภาพ จากอินเตอร์เนต ref : https://www.thairath.co.th/news/auto/news/1580753

เมื่อส่งภาพนี้ให้แชทบอท ระบบ EX10 จะเพิ่ม property “GVisionOCR” เข้าไปใน webhook request ให้ดังนี้

{
  type: 'message',
  message: {
    type: 'image',
    id: 'xxxxxxxxxxxxxxx',
    contentProvider: { type: 'line' }
  },
  timestamp: 1625319558366,
  source: { type: 'user', userId: 'Uxxxxx' },
  replyToken: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
  mode: 'active',
  GVisionOCR: {
    fullTextAnnotation: '7กญ 3603\nกรุงเทพมหานคร\n',
    textAnnotations: [ [Object], [Object], [Object], [Object] ]
  }
}

เมื่อได้รับ webhook request นักพัฒนาก็สามารถนำค่าที่ได้ ไปใช้งานต่อได้ทันที

เริ่มสนุกกันแล้วล่ะสิ ไปดูกันต่อครับ

Extensions : Object Detection

สิ่งที่เกิดขึ้น เมื่อเปิดใช้งาน Object Detection คือ เมื่อผู้ใช้ส่งรูปภาพเข้ามา ระบบจะทำการประมวลผลหาสิ่งของที่อยู่ในภาพให้อัตโนมัติ เหมาะสำหรับงานประเภทตรวจสอบสิ่งของ หรือค้นหาสิ่งของในภาพ เป็นต้น

ตัวอย่างภาพ

ตัวอย่างภาพ จากอินเตอร์เนต ref : https://www.ddproperty.com/คู่มือซื้อขาย/เลี้ยงหมา-แมว-ต้องระวัง-อย่ากระทบเพื่อนบ้าน-7768

เมื่อส่งภาพนี้ให้แชทบอท ระบบ EX10 จะเพิ่ม property “GVisionObjectDetection” เข้าไปใน webhook request ให้ดังนี้

{
  type: 'message',
  message: {
    type: 'image',
    id: 'xxxxxxxxxxxxxxx',
    contentProvider: { type: 'line' }
  },
  timestamp: 1625319558366,
  source: { type: 'user', userId: 'Uxxxxx' },
  replyToken: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
  mode: 'active',
  GVisionObjectDetection: {
    localizedObjectAnnotations: [ [Object], [Object], [Object], [Object] ]
  }
}

ซึ่งใน [Object] ก็จะมีข้อมูลของวัตถุที่ detect ได้ ประมาณนี้

{
    "mid": "/m/01yrx",
    "languageCode": "",
    "name": "Cat",
    "score": 0.6649515628814697,
    "boundingPoly": {
      "vertices": [
        
      ],
      "normalizedVertices": [
        {
          "x": 0.16320312023162842,
          "y": 0.42987558245658875
        },
        {
          "x": 0.509072482585907,
          "y": 0.42987558245658875
        },
        {
          "x": 0.509072482585907,
          "y": 0.85074383020401
        },
        {
          "x": 0.16320312023162842,
          "y": 0.85074383020401
        }
      ]
    }
  }

เมื่อได้รับ webhook request นักพัฒนาก็สามารถนำค่า GVisionObjectDetection.localizedObjectAnnotations ที่ได้ ไปใช้งานต่อได้ทันที ตามตัวอย่าง

Extensions : E-Commerce Intent

สิ่งที่เกิดขึ้น เมื่อเปิดใช้งาน E-Commerce Intent คือ เมื่อผู้ใช้ส่งข้อความเข้ามา ระบบจะทำการประมวลผลข้อความ เพื่อหา Intent ของผู้ใช้ (เน้นที่เกี่ยวข้องกับการซื้อขายสินค้า) ให้นักพัฒนาสามารถเข้าใจความต้องการของผู้ใช้ได้ โดยไม่ต้องไปสร้าง AI ในการประมวลผลเอง

โดยเบื้องหลังคือความสามารถของ Botnoi Open API
(ref : https://openapi.botnoi.ai/)
โดย ดร.วินน์ Dr. Winn Voravuthikunchai LINE API Expert นั่นเอง

เช่น เมื่อส่งข้อความให้แชทบอท ว่า “สวัสดี”
ระบบ EX10 จะเพิ่ม property “BotnoiECommerce” เข้าไปใน webhook request ให้ดังนี้

{
  type: 'message',
  message: {
    type: 'image',
    id: 'xxxxxxxxxxxxxxx',
    contentProvider: { type: 'line' }
  },
  timestamp: 1625319558366,
  source: { type: 'user', userId: 'Uxxxxx' },
  replyToken: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
  mode: 'active',
  BotnoiECommerce : {
     "intent" : "สวัสดี",
     "category" : "ทักทาย",
     "confidence" : 0.4445523754275134
  }
}

เมื่อได้รับ webhook request นักพัฒนาก็สามารถนำค่า BotnoiECommerce.intent ที่ได้ ไปใช้งานต่อได้ทันที

Extensions : Image URL

สิ่งที่เกิดขึ้น เมื่อเปิดใช้งาน Image URL คือ เมื่อผู้ใช้ส่งรูปภาพเข้ามา ระบบจะทำการดาวน์โหลดรูปนั้นจาก LINE แล้วทำการอัพโหลดขึ้น EX10 Server และ สร้าง url เพื่อให้นักพัฒนาสามารถนำเอา url ของรูป ไปใช้งานต่อได้ทันที

ตัวอย่างภาพ

เมื่อส่งภาพนี้ให้แชทบอท ระบบ EX10 จะเพิ่ม property “imageUrl” เข้าไปใน webhook request ให้ดังนี้

{
  type: 'message',
  message: {
    type: 'image',
    id: 'xxxxxxxxxxxxxxx',
    contentProvider: { type: 'line' }
  },
  timestamp: 1625319558366,
  source: { type: 'user', userId: 'Uxxxxx' },
  replyToken: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
  mode: 'active',
  imageUrl: {
    id: 'xxxxxxxxxxxxxxx',
    url: 'https://ex10.tech/store/v1/public/NjBlMDMyNTVmM2NkMTE0YjYwMDI2ODQ4L21lc3NhZ2UvaW1hZ2UvMTQzMzE1NjUwNDgzODE='
  }
}

เมื่อได้รับ webhook request นักพัฒนาก็สามารถนำค่าที่ได้ ไปใช้งานต่อได้ทันที

Extensions : Send with Sender Name

เป็น option ที่อนุญาตให้ admin สามารถตั้งค่าการแสดงผล เมื่อผู้ใช้ได้รับข้อความ ว่าต้องการแสดงเป็นชื่อ OA หรือ แสดงเป็นชื่อของ admin ผู้ตอบได้เลยก็ได้

เป็นอย่างไรกันบ้างครับ สำหรับ extensions ที่ทาง EX10 เตรียมไว้ให้
เร็วๆนี้จะทยอยมี extensions ใหม่ๆออกมาให้ได้ใช้งานกัน อย่าลืมติดตามกันนะครับ

แค่อ่านคงยังไม่ฟิน เท่าได้ลองใช้งานจริง ใครสนใจก็ตามกันไปได้เลยที่ https://ex10.tech

หากต้องการติชม หรือติดปัญหาการใช้งาน สามารถสอบถามช่องทาง Support ได้ที่ LINE ID : @ex10 นะครับ

ขอบคุณครับ สวัสดีครับ