LINE THAILAND DEVELOPER CONFERENCE 2020
สรุป
กลับมาอีกครั้งกับงาน 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 ดังนี้
- Welcome Remarks
- Catching up New Features of LINE API
- ex10: LINE API Extensions for Developers
- LIFF Component Testing with Cypress
- Enriching Chatbot Journey with Live Chat Experiences
- 13 Lessons Learned from Building OA Plus Infrastructure
- KhunThong From Zero To One
- Back-end Driven Dynamic Mobile App UI
- Building Payment Service in Android app by LINE Pay API
- iOS Testing Techniques on LINE MAN App
- 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
- เปลี่ยนชื่อและรูปของ Official Account 2020/03/17
ดูตัวอย่างการนำไปใช้ที่ Enriching Chatbot Journey with Live Chat Experiences - ใส่ Emoji ในข้อความ 2020/04/14
- Get user's language 2020/04/14
- เปิดตัว Narrowcast API 2020/01/15
- Multicast API จาก 150 เป็น 500 userId ต่อ request 2020/04/14
- Link/Unlink rich menu จาก 150 เป็น 500 userId ต่อ request
- Channel Access Token v2.1 2020/04/06
จากสมัยก่อน Channel Access Token ไม่มีหมดอายุ ต่อมาเป็นมีอายุ 30 วัน และตอนนี้เป็น jwt สามารถกำหนดอายุได้เอง - X-Line-Retry-Key 2020/05/12
- 2 new webhook events 2020/08/04
- Unsend event
- Video Viewing Complete Event
- เปลี่ยนชื่อและรูปของ Official Account 2020/03/17
- Group/Room APIs 2020/06/10
- get group summary
- get members in group count
- 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 โดยมีตัวอย่างดังนี้
- เลือกวันที่
จากเดิมที่ Postback event ไม่สามารถใช้กับ Dialogflow ได้ เราสามารถตั้งค่าให้ ex10 API Forward Non-text event ไปที่ Dialog flow ให้ โดยแปลงวันที่ใน evemt กลับมาเป็นข้อความให้ - 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
โดยมีตัวอย่างต่างๆดังนี้
- Stub LIFF initialization ด้วย
cy.stub(liff, "init")
- Negative test ด้วย
cy.stub(liff, "init").rejects()
- Test LINE Login ด้วยการ stub funciton และ properties ต่าง ๆ ใน LIFF SDK
- Emulate การ Open จาก LINE App โดยการ stub
cy.stub(liff, "isInClient")
,cy.stub(liff, "getOs")
และcy.viewport()
- 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 ของเราด้วย
- Icon / Nickname Switch API อาจนำไปทำให้ Bot กับ Agent แสดงชื่อและรูปแตกต่างกัน เพื่อให้ User ทราบว่าคุยกับใครอยู่
- Message Classify with Flex message โดยทำให้ข้อความมีหน้าตาแตกต่างกันตามชนิดของข้อความ
- 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
- Design for Scale From Day 1
- Stateless = Horizontally Scalable
- Microservice มี trade-off เรื่อง complexity
- Monitor Everything (While respect user privacy and Law)
- System telemetry (Grafana)
- Component level data (Kafka)
- Infrastructure telemetry
- Product level telemetry
- Client Side Error (Sentry)
- Use RIGHT Datastore for the Job
- RDBMS อาจเป็น bottle neck
- โดย OA Plus ใช้
- ไม่มี one size fits all
- Scaling Prometheus is Worth it (All metrics at the longest possible retention)
- 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
- Service Mesh is Hard (But canbe really helpful)
- Istio
- ข้อดี
- Smart proxy
- Decoupling RBAC
- แต่ใช้แล้ว Upgrade ยาก จึงควรนับเป็น Major upgrade
- (CORE) DNS is the Heart of Many Things
- แต่ถ้าพังแล้วก็จุดที่พังหายาก
- โดย OA Plus ใช้ CoreDNS + Auto path + Node local cache
- Kafka VS. Rabbit MQ
- ใช้ Kafka เป็นหลักของ LINE Messaging Scale ดี แต่ Complex โดย LINE ได้ปล่อย decaton ออกมาช่วย
- RabbitMQ ง่าย Retry ได้ แต่ Scale ไม่เท่า Kafka
- ข้อควรระวังของ Kafka
- ระวัง poison message เพราะเอาออกยาก
- Kafka offset (Zookeeper) มีหมดอายุ
- ข้อความหาย ลองเช็คที่ Publisher library
- Tracing is Mandatory in Distributed System
- Auto-Scaling Might Not Be Feasible
เมื่อเจอ Peak แล้วจะ Scale ไม่ทัน - Prepare for integration
เมื่อมี Features มากขึ้น ก็ต้องมีคนมากขึ้น จึงต้องเตรียมพร้อมไว้ก่อน โดยอาจใช้ Microservice ช่วย - Leverage CDN
เพื่อลดโหลด และ Latency - Micro-Frontend
Render รวมกันผ่าน Server-side
KhunThong From Zero To One
เล่าเรื่องการพัฒนา KhunThong จากเวอร์ชั่น Text อย่างเดียวที่สั่งงานผ่าน Hashtag เป็น Flex message และ LIFF ใช้เวลาในการสร้างเพียง 2 สัปดาห์ จนปัจจุบัน KhunThong อยู่ใน 70k Groups และมีเพื่อน 190k แล้ว
ทำไมถึงใช้ LINE API
- Intant Onboard ไม่ต้องติดตั้งแอพ
- Login ได้ง่าย
- Zero-Baht Initial Cost
API ที่ใช้
- LINE Login
- LIFF
- Messaging API
เช่น นำliff.shareTargetPicker()
ไปใช้ทำ Feature บริจาค COVID
Programming Languages
- GO เป็นหลัก
- Python ทำ OCR
- React ทำ LIFF
Cloud & Services
- AWS ใช้ Kubernetes
- Nginx
- Redis
- mongoDB แบบ Replicate
Deployment
- Git
- Jenkins
Analytics
- Grafana
- ElasticSearch
Support Services
- Cloud Vision API สำหรับอ่านบิล
- Firebase Realtime Database สำหรับให้ทุกคนมาเลือกเมนูที่แต่ละคนรับประทานไปพร้อมกัน
- DialogFlow
สำหรับการตัดเงินใช้ VPN เชื่อมต่อกับ KBank
Security Practices
- Check OAUTH 2.0 Token ที่ฝั่ง Bankend ว่ามาจาก LINE
- Encrypt/Decrypt ข้อมูลระหว่าง LIFF และ Server
- เก็บการเชื่อมต่อ K Plus ใน Local Storage ในกรณีที่ Login LINE เครื่องใหม่ จะไม่สามารถใช้ได้
Back-end Driven Dynamic Mobile App UI
ปัญหาการพัฒนาแอพแบบเดิม ๆ
- Heavy client logic
โดยเฉพาะ Presentation logic เช่น ข้อความต่าง ๆ - Maintain code across platforms
ทั้งใน Android และ iOS - 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 ปัญหา
- Mock Data ด้วย Node-Red
- ByPass Login
- Deeplink และ Query String
- 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