สรุป

กลับมาอีกครั้งกับงาน LINE THAILAND DEVELOPER CONFERENCE ที่ปีนี้จัดเป็นครั้งที่ 2 แล้ว และมาในรูปแบบออนไลน์ใน Theme : Line API in Action 💪

โดยเริ่มต้นกันที่การอัพเดทสถิติการใช้งาน และ API ใหม่ ๆ ที่เปิดตัวใน 1 ปีที่ผ่านมา จากนั้นมีการเปิดตัว ex10 บริการที่จะเข้ามาช่วยให้สามารถพัฒนา Bot ได้ง่ายขึ้น โดยเฉพาะ Feature ที่นักพัฒนาอยากได้มานาน คือ การสลับระหว่าง Bot และ Chat Mode ที่สำคัญคือสามารถใช้งานได้ฟรี ต่อด้วยการแชร์ Use case และ บทเรียน จาก SCB, OA Plus และ KhunThong

นอกจากนี้ยังมีการเล่าเรื่องราวการพัฒนาแอพพลิเคชั่น โดยใช้ BFF การ Testing ทั้งบน LIFF และ iOS และแสดง Live Coding สุดท้ายจบงานด้วยการตอบปัญหา จาก LINE API Expert

จากหลาย ๆ Session จะเห็นการพูดถึงวิธีการที่ทำให้สามารถใช้งาน Chat Mode และ Bot Mode พร้อมกัน ซึ่งจุดนี้ ถือว่าเป็นปัญหาสำคัญทีเดียวที่ทำให้บางที่ยังไม่สามารถใช้ LINE API ได้ วิธีต่าง ๆ ของแต่ละ Session ก็คล้ายคลึงกัน คือการทำจอ Chat ขึ้นมาเอง และใช้ทั้ง Reply และ Push API ผสมกันในการส่งข้อความไปยัง User

สิ่งที่สนุกที่สุดในงานคงเป็นการเล่นเกมแต่ละท้าย Session เพื่อสะสมคะแนนรับของรางวัล โดยเกมมีทั้งรูปแบบที่เป็นตอบคำถามและหมุนวงล้อ ดูคำถามและเฉลยคำตอบได้ที่ เฉลยคำตอบชิงรางวัลจากงาน LINE Thailand Developer Conference 2020

จะเห็นว่าในปีที่ผ่านมา LINE เปิดตัว API ต่าง ๆ เร็วเพิ่มมากขึ้น และมีคนนำไปใช้อย่างรวดเร็ว ตอนนี้ Use Case ต่าง ๆ ก็ยังเหลืออีกมากมายที่ยังรอการพัฒนาต่อยอด

รายละเอียดแต่ละ Session

มีทั้งหมด 11 sessions ดังนี้

1. Welcome Remarks
2. Catching up New Features of LINE API
3. ex10: LINE API Extensions for Developers
4. LIFF Component Testing with Cypress
5. Enriching Chatbot Journey with Live Chat Experiences
6. 13 Lessons Learned from Building OA Plus Infrastructure
7. KhunThong From Zero To One
8. Back-end Driven Dynamic Mobile App UI
9. Building Payment Service in Android app by LINE Pay API
10. iOS Testing Techniques on LINE MAN App
11. Live Coding: Developing LIFF without Caching from Zero to App

Welcome Remarks

อัพเดทสถิติภายในชุมชนนักพัฒนา โดยปัจจุบันสมาชิกในกลุ่ม LINE Developers Group Thailand
มีกว่า 17000 คนแล้ว และทีม LINE Engineer ประเทศไทย ได้ขยายจากเริ่มต้น 15 คน จนปัจจุบันมี 120 คน

Catching up New Features of LINE API

จากปีที่แล้ว งาน LINE THAILAND DEVELOPER CONFERENCE 2019 เปิดตัว LINE Redisign ที่ปลดล็อคบอทฟรีที่มีเพื่อนได้แค่ 50 คน และ LIFF v2 ตอนนี้ LINE API มีสถิติ 130k active chatbot, 43M messages, 5500 LIFF App และ 3M LIFF Users

อัพเดท API ต่าง ๆ

• Messaging API
  1. เปลี่ยนชื่อและรูปของ Official Account 2020/03/17 ดูตัวอย่างการนำไปใช้ที่ Enriching Chatbot Journey with Live Chat Experiences
  2. ใส่ Emoji ในข้อความ 2020/04/14
  3. Get user's language 2020/04/14
  4. เปิดตัว Narrowcast API 2020/01/15
  5. Multicast API จาก 150 เป็น 500 userId ต่อ request 2020/04/14
  6. Link/Unlink rich menu จาก 150 เป็น 500 userId ต่อ request
  7. Channel Access Token v2.1 2020/04/06 จากสมัยก่อน Channel Access Token ไม่มีหมดอายุ ต่อมาเป็นมีอายุ 30 วัน และตอนนี้เป็น jwt สามารถกำหนดอายุได้เอง
  8. X-Line-Retry-Key 2020/05/12
  9. 2 new webhook events 2020/08/04
     1. Unsend event
     2. Video Viewing Complete Event
• Group/Room APIs 2020/06/10
  1. get group summary
  2. get members in group count
  3. get members in room count
• อื่นๆ

Official SDKs

มีทั้งหมด 7 ภาษา

Flex Message

• APNG รองรับ Animation
• Flex content alignment
• Font size & Margin & Spacing in px
• Image size in px & %
• Shrink-to-fit (Autosizing)
• Gradient Background

LIFF

• Universal link เป็น Default
• Share Target Picker
• liff.ready()
• New CDN Url 2020/05/08
• Open graph protocol 2020/05/19
• LIFF SDK ใน npm 2020/07/01
• New UI and Feature from LIFF in LINE v10.12.0 2020/07/06 มีปุ่มแชร์ และปุ่ม Back

อื่น ๆ

• Online Course : Getting Started with LIFF Development เรียนรู้การพัฒนาแอปพลิเคชันด้วย LINE Front-end Framework
• เปิดตัว LINE Developers Codelabs
• hackth.line.me
• LINE Beacon สำหรับ SME เร็ว ๆ นี้

ex10: LINE API Extensions for Developers

Developer Tips

• การใช้ Emoji ใน Message
• ImageMap baseUrl ไม่ใช่ url ของรูปภาพ และ Line จะดึงรูปภาพตามขนาดของหน้าจอ
• ex10.tech มี Docs การใช้งาน emoji และเครื่องมือสร้าง imagemap & rich menu

Chat Tool (Bot mode + Admin Mode)

จากเดิมที่ไม่สามารถใช้ Bot กับ Chat mode พร้อมกันได้ ซึ่งเมื่อต้นปีก็มีโพสต์ เผยวิธีทำให้ LINE ใช้ Bot กับ Chat พร้อมกันได้

ตอนนี้มี ex10 Chat Tool ที่เพียงนำไปไว้ตรงกลางระหว่าง LINE กับ Webhook เดิมของเรา ก็สามารถทำให้ใช้ Bot กับ Chat Mode พร้อมกันได้ นอกจากนี้ถ้า Admin ตอบภายใน 30 วินาที ระบบจะใช้ Reply Token ให้แทน และ Admin ยังสามารถส่งรูป และไฟล์ จากกล่องแชทได้เลยอีกด้วย

ex10 API

สามารถนำมาช่วยทำ Intent Analysis, OCR, Image Processing, Object Detection และอื่น ๆ

ex10 API จะช่วยแนบข้อมูลเพิ่มเติมไปกับ Webhook โดยมีตัวอย่างดังนี้

1. เลือกวันที่ จากเดิมที่ Postback event ไม่สามารถใช้กับ Dialogflow ได้ เราสามารถตั้งค่าให้ ex10 API Forward Non-text event ไปที่ Dialog flow ให้ โดยแปลงวันที่ใน evemt กลับมาเป็นข้อความให้
2. Intent Analysis ใช้ร่วมกับ Botnoi e-commerce intent analysis

What's Next

ตอนนี้ ex10 เปิดให้ใช้งานได้ฟรีแล้ว ต่อไปจะเปิด Premium API ให้นักพัฒนามาร่วมเพิ่ม Service ได้ และจะรวบรวมเป็น API Store ให้สามารถซื้อมาใช้ได้ง่าย ๆ เลย

LIFF Component Testing with Cypress

Automated testing strategy

หลักการที่นิยมคือ Testing Pyramid โดยแบ่งเป็น Unit test, Integration Test และ End-to-End Test (E2E)
โดยจะ Trade-off กันระหว่าง Fidelity หรือ ความเสมือนจริง และ Speed หรือ ความเร็วในการ Test

Cypress

Cypress เป็นเครื่องมือ open-source ที่เข้ามาช่วยจัดการการทำ E2E Test โดยมี Features มากมาย เช่น Debug, ย้อนดูการทำงานด้วย Time travel, Automatic Wait, Realtime Reload และ Export Screenshot/Video

นอกจากนี้ Cypress ยังสามารถทำ Unit test ได้ด้วย โดยเข้ามาช่วยควบคุม LIFF SDK ได้โดยการ Stub & Spy

ตัวอย่าง Vue

แนะนำให้ใช้ร่วมกับ Library cypress-vue-unit-test มากกว่า vue-test-utils โดยมีตัวอย่างต่างๆดังนี้

1. Stub LIFF initialization ด้วย cy.stub(liff, "init")
2. Negative test ด้วย cy.stub(liff, "init").rejects()
3. Test LINE Login ด้วยการ stub funciton และ properties ต่าง ๆ ใน LIFF SDK
4. Emulate การ Open จาก LINE App โดยการ stub cy.stub(liff, "isInClient"), cy.stub(liff, "getOs") และ cy.viewport()
5. Integration กับ Line Platform ด้วย cy.stub(liff, "sendMessage").resolve()

สำหรับสาย React และ Angular ก็มี cypress-react-unit-test cypress-angular-unit-test ให้ใช้ได้เหมือนกัน

ติดตามรายละเอียดที่ Blog: มาเขียน Automated UI Tests ให้กับ LIFF App ด้วย Cypress.io กันเถอะ

Enriching Chatbot Journey with Live Chat Experiences

การใช้งานธนาคารจากเดิม Telephone Banking สู่ Online Banking และ Mobile Banking จนยุคนี้คือ Conversational Banking ที่สามารถตามลูกค้าไปได้ทุกที ทั้งแบบ Text และ Voice โดยสามารถดูสถิติที่น่าสนใจต่าง ๆ ได้จาก Accenture

ปัจจุบัน มีการใช้ Virtual Assistant มาร่วมกับ Self service ที่ช่วยให้ลูกค้าได้รับประสบการณ์ที่ดีขึ้น ผ่าน NLU หรือ Natural Language Understanding ซึ่งเป็นแขนงหนึ่งของ NLP (Natural Language Processing) ที่เกิดจากการรวมกันของ Linguistic และ AI นอกจากนี้ยังมีการรวมกันระหว่าง Live Agent และ AI เป็น Digital Assistant ทำให้ Users พึงพอใจมากยิ่งขึ้น

การวัด Performance ของ Bot

• ด้วย Google และ On-premise ดูเพิ่มเติมที่ Youtube โดยปีนี้เพิ่ม Sensitivity Filter เพื่อกรองข้อมูลบางอย่างออก
• ใช้ Confusion Matrix โดยหา False positive หรือ Missed Classification ด้วย Manual Labelling (สำหรับบอทเล็ก ๆ), Satisfaction Survey และ Tone and sentiment ที่ลูกค้าตอบกลับมา

เราสามารถพัฒนาบอทต่อไปด้วยการ Train ต่อไปเรื่อย ๆ ด้วยข้อมูลที่ได้จากทั้ง Bot และ Live Agent เพื่อให้บอทฉลาดขึ้นเรื่อย ๆ

วิธีการสลับมา Live Agent

เราอาจจะสั่งให้ Bot สลับกลับมาเป็น Live Agent เมื่อ Bot ตอบด้วย Fallback เกิน 3 ครั้ง โดยการนำ Controller และ Switcher มาอยู่ข้างหน้า NLU โดย Switcher จะสลับระหว่าง Bot และ Live agent ของแต่ละ User ด้วย userId ที่ส่งเข้ามาพร้อมกับ Webhook

Enriching

เราสามารถเพิ่มลูกเล่นให้กับ Official Account ของเราด้วย

1. Icon / Nickname Switch API อาจนำไปทำให้ Bot กับ Agent แสดงชื่อและรูปแตกต่างกัน เพื่อให้ User ทราบว่าคุยกับใครอยู่
2. Message Classify with Flex message โดยทำให้ข้อความมีหน้าตาแตกต่างกันตามชนิดของข้อความ
3. Personalize Rich Menu เช่น เมื่อสลับเป็น Live Agent แล้ว จะแสดงปุ่มให้สามารถจบการสนทนา เพื่อสลับกลับไปเป็น Bot ได้

13 Lessons Learned from Building OA Plus Infrastructure

OA Plus Introduction

OA Plus คือ Platform ที่สามารถขยายได้ (Extensible) และเป็นระบบที่อยู่เบื้องหลัง LINE My Shop ซึ่งพัฒนาโดยทีมประเทศไทย และกำลังขยายจะไปทั่วโลก โดยตอนนี้มีการใช้งานอยู่ 38k Official Account และปลายปีนี้วางแผนจะขยายระบบอีก 10x

สิ่งที่น่าสนใจคือระบบนี้ รองรับ Bot + Chat Mode พร้อมกัน

13 Lessons Learned

1. Design for Scale From Day 1
   • Stateless = Horizontally Scalable
   • Microservice มี trade-off เรื่อง complexity
2. Monitor Everything (While respect user privacy and Law)
   • System telemetry (Grafana)
   • Component level data (Kafka)
   • Infrastructure telemetry
   • Product level telemetry
   • Client Side Error (Sentry)
3. Use RIGHT Datastore for the Job
   • RDBMS อาจเป็น bottle neck
   • โดย OA Plus ใช้
   • ไม่มี one size fits all
4. Scaling Prometheus is Worth it (All metrics at the longest possible retention)
   • ใช้ thanos.io สำหรับ scale out
   • Query caching ด้วย trickster
5. Logging is Challenge but Worth Solving (The most detailed of telemetry class at significant cost)
   • ต้อง reliable + detailed log
   • โดย OA Plus ใช้ ELK + Hadoop + Kafka
   • ควรมี Standard logging pattern
   • ลดการประมวลผล Log บน Node และทำ Paralellization
6. Service Mesh is Hard (But canbe really helpful)
   • Istio
   • ข้อดี
     • Smart proxy
     • Decoupling RBAC
   • แต่ใช้แล้ว Upgrade ยาก จึงควรนับเป็น Major upgrade
7. (CORE) DNS is the Heart of Many Things
   • แต่ถ้าพังแล้วก็จุดที่พังหายาก
   • โดย OA Plus ใช้ CoreDNS + Auto path + Node local cache
8. Kafka VS. Rabbit MQ
   • ใช้ Kafka เป็นหลักของ LINE Messaging Scale ดี แต่ Complex โดย LINE ได้ปล่อย decaton ออกมาช่วย
   • RabbitMQ ง่าย Retry ได้ แต่ Scale ไม่เท่า Kafka
   • ข้อควรระวังของ Kafka
     • ระวัง poison message เพราะเอาออกยาก
     • Kafka offset (Zookeeper) มีหมดอายุ
     • ข้อความหาย ลองเช็คที่ Publisher library
9. Tracing is Mandatory in Distributed System
10. Auto-Scaling Might Not Be Feasible เมื่อเจอ Peak แล้วจะ Scale ไม่ทัน
11. Prepare for integration เมื่อมี Features มากขึ้น ก็ต้องมีคนมากขึ้น จึงต้องเตรียมพร้อมไว้ก่อน โดยอาจใช้ Microservice ช่วย
12. Leverage CDN เพื่อลดโหลด และ Latency
13. Micro-Frontend Render รวมกันผ่าน Server-side

KhunThong From Zero To One

เล่าเรื่องการพัฒนา KhunThong จากเวอร์ชั่น Text อย่างเดียวที่สั่งงานผ่าน Hashtag เป็น Flex message และ LIFF ใช้เวลาในการสร้างเพียง 2 สัปดาห์ จนปัจจุบัน KhunThong อยู่ใน 70k Groups และมีเพื่อน 190k แล้ว

ทำไมถึงใช้ LINE API

1. Intant Onboard ไม่ต้องติดตั้งแอพ
2. Login ได้ง่าย
3. Zero-Baht Initial Cost

API ที่ใช้

1. LINE Login
2. LIFF
3. Messaging API เช่น นำ liff.shareTargetPicker() ไปใช้ทำ Feature บริจาค COVID

Programming Languages

1. GO เป็นหลัก
2. Python ทำ OCR
3. React ทำ LIFF

Cloud & Services

1. AWS ใช้ Kubernetes
2. Nginx
3. Redis
4. mongoDB แบบ Replicate

Deployment

1. Git
2. Jenkins

Analytics

1. Grafana
2. ElasticSearch

Support Services

1. Cloud Vision API สำหรับอ่านบิล
2. Firebase Realtime Database สำหรับให้ทุกคนมาเลือกเมนูที่แต่ละคนรับประทานไปพร้อมกัน
3. DialogFlow

สำหรับการตัดเงินใช้ VPN เชื่อมต่อกับ KBank

Security Practices

1. Check OAUTH 2.0 Token ที่ฝั่ง Bankend ว่ามาจาก LINE
2. Encrypt/Decrypt ข้อมูลระหว่าง LIFF และ Server
3. เก็บการเชื่อมต่อ K Plus ใน Local Storage ในกรณีที่ Login LINE เครื่องใหม่ จะไม่สามารถใช้ได้

Back-end Driven Dynamic Mobile App UI

ปัญหาการพัฒนาแอพแบบเดิม ๆ

1. Heavy client logic โดยเฉพาะ Presentation logic เช่น ข้อความต่าง ๆ
2. Maintain code across platforms ทั้งใน Android และ iOS
3. Deliver product

ปัญหาเหล่านี้ สามารถแก้ด้วย BFF ซึ่งเป็นการเอา Logic ไปไว้ที่ Backend ทำให้ลดงานฝั่ง Client ทำให้ Maintain ได้ง่ายขึ้น รวมถึงทำให้ Deploy ได้ทันที ไม่ต้องอัพเดทแอพ แต่ข้อเสียคืออาจนำไปสู่ Over Engineer และมี Response ขนาดใหญ่

Building Payment Service in Android app by LINE Pay API

LINE Pay ทั่วโลก หรือ Rabbit LINE Pay ในประเทศไทย เป็นบริการเดียวกัน และสามารถเชื่อมต่อได้ด้วย LINE Pay API

สมัครได้ที่ pay.line.me และสำหรับ Developer สามารถเข้าไปดูได้ที่ pay.line.me/th/developers/main/main โดยเลือก Online API นอกจากนี้ยังมี Sandbox ให้เล่นอีกด้วย

Why?

เพิ่มช่องทางชำระเงิน โดยในประเทศไทย มีผู้ลงทะเบียน Rabbit LINE Pay 4.5M คน คิดเป็น 10.2% ของผู้ใช้ไลน์ประเทศไทย

Integration

ปัจจุบันเป็นเวอร์ชั่น 3 ที่มี Authorization Header แล้ว

สำหรับการใช้ร่วมกับ Chat Bot สามารถดูได้ที่ บทความ: LINE Pay API — พัฒนานิดเดียวก็มีระบบตัดเงินได้

สำหรับการใช้งานกับแอพ Android สามารถติดตามขั้นตอนได้ใน Session นี้

การใช้ Endpoint

แนะนำให้ใช้ Production Endpoint (มีการตัดเงินจริง) เนื่องจาก Sandbox จะเปิด scheme linesandbox:// ที่ไม่รองรับในแอพ LINE

iOS Testing Techniques on LINE MAN App

เอาใจสาย iOS ด้วย Session ที่เล่าเรื่องการทำ iOS UI Testing ของแอพ LINE MAN ตั้งแต่อดีตจนปัจจุบัน รวมถึง Pain point ต่าง ๆ และเทคนิคการแก้ไขปัญหาทั้ง 5 ปัญหา

1. Mock Data ด้วย Node-Red
2. ByPass Login
3. Deeplink และ Query String
4. Snapshot Testing ดูรายละเอียดเพิ่มเติม

Live Coding: Developing LIFF without Caching from Zero to App

กล่าวถึง Pain point ของการพัฒนา ที่เกิดจาก Caching คือ Deploy ไปแล้ว แต่ LIFF ไม่เปลี่ยน เนื่องจาก LIFF มีการ Cache CSS, JS และ Endpoint URL ซึ่งวิธีเดิมนั้น สามารถแก้ด้วยการเติม query param อาจจะเป็น random หรือ timestamp

StackBlitz

StackBlitz คือ Online IDE ที่มีการทำ Hot Reloading ดังนั้น เราจึงสามารถหลบ Cache จาก LIFF ได้

ใน Live Coding นี้ จึงนำ StackBlitz มาใช้ และ Deploy โดยตรงไปยัง Firebase Hosting

สรุปงาน 👆