เมื่อ Dev เล่นทอง… API เช็คราคาทอง ก็ต้องมา (EP2)

มีอัพเดท ! เชื่อม LINE Chat Bot แล้ว~~ สวัสดีคร้าบบ กลับมาเจอกันอีกทีกับ “เมื่อ Dev เล่นทอง… API เช็คราคาทอง ก็ต้องมา” เดอะซีรีย์ สืบเนื่องจาก EP1 (กลับไปอ่าน คลิ๊กตรงนี้) ก็ได้เกริ่นเรื่องแนวคิด ที่มาที่ไป การ Design เอย, Tech Stack เอย, เทคนิควิธี Web-scraping รวมไปถึงทำ Docker Container แถมได้เอา App ขึ้น heroku ไปเรียบร้อยแล้ว ในตอนนี้จะเอา App จาก EP1 มาต่อยอด โดยเอาไปต่อกับ LINE Chat Bot คร้าบบ

Photo by Isabella and Louisa Fischer on Unsplash

ถ้าจะพูดถึงเรื่องการเชื่อมต่อ LINE Chat Bot สิ่งหนึ่งที่ต้องพูดก่อนคือ Design อีกแล้วครับ ก่อนหน้านี้เนี่ย ผมได้วางแผนไว้ว่าจะเอา LINE Chat Bot ไปเชื่อมกับ DialogFlow เพื่อความเป็นธรรมชาติของการถาม-ตอบ ผม Design ไว้อย่างดี ต้องมี Intents อะไรบ้าง นู่นนี่นั่น ต้องมี Response หน้าตาประมาณไหน มี Template เตรียมไว้แล้ว แต่แล้วปัญหาที่คาดว่าจะไม่เกิด ก็ดันเกิดขึ้น !!!

Ref: https://cloud.google.com/dialogflow/docs/integrations/line#custom_payload_responses

ฉันร้องกรี๊ดเลย… พออ่านมาถึงหัวข้อ Custom payload responses ก็พบตัวอักษรสีแดงสะดุดตา เพราะว่า​ ณ ปัจจุบัน (ที่เขียนบทความ — 20 Jul 2020 15:26) DialogFlow ยังไม่รองรับ Custom Payload ของ LINE flex message อ่าาาา เอ่อออ ไปต่อไม่ถูกเลย เพราะสิ่งที่ Design ไว้ ถูกกากบาทแดงทับอย่างไม่ใยดี แต่แล้วก็ต้อง Move On แก้ไขปัญหาต่อไป คราวนี้แก้ไขปัญหาโดย ไม่ใช้แล้ว DialogFlow ย้ายๆๆ กลับไปใช้ Design แบบเดิมที่เคยคิดไว้ก่อน และแน่นอนว่าไม่ผ่าน DialogFlow งื้ออออ ไว้มีอัพเดทจะมาบอกอีกทีค้าบบ

LINE Bot Designer

กลับเข้าเรื่องกันก่อน สิ่งที่มาก่อนเพื่อนเลยคือ Flex Message ที่ Design ไว้ก่อนที่จะเจอปัญหา อ่ะเล่าก่อน LINE Bot Designer คือแอพลิเคชั่นที่จะช่วยให้เราสามารถ Design Message ที่ตอบกลับของ LINE Chat Bot อย่างที่ต้องการ โดยในปัจจุบันมีหลากหลายรูปแบบมากมาย หาอ่านเพิ่มเติมได้ทั่วไป และเราโฟกัสที่ Flex Message ครับเพราะมันสวยถูกใจผม อิอิ

และนี่คือสิ่งที่ผม Design โดยได้มุมมองนี้จาก Ticket Template ที่ในตัวอย่างออกแบบมาให้

ขั้นตอนในการ Design ก็ไม่มี Coding เลยใช้งานง่ายสุดๆ

หลังจาก Design หน้าตาจนเป็นที่น่าพอใจ ก็ดำเนินการต่อ App เราเข้ากับ LINE Chat Bot เลย โดยผมได้เลือกใช้ช่องทาง Webhook URL เชื่อมต่อกับ App ที่ถูก Deployed แล้วที่ heroku แต่ทว่าต้องเพิ่ม API Path ใหม่ ให้รองรับการเชื่อมต่อวิธีนี้ (ความจริงใช้ Link Path เดิมก็ได้น้ะ แต่ผมจะเก็บอันเก่าไว้ให้ดู จะได้ไม่ต้องตามอ่าน Git Commit History กัน แห่ะ)

Coding Time

เขียนโค้ดเพิ่มอีกนิด เพราะเราวาง Design เดิมไว้ดีอยู่แล้ว lol สิ่งที่เพิ่มขึ้นมาคือ

1. Webhook ใหม่ สำหรับให้ LINE Chat Bot ใช้
2. ใช้ SDK ช่วย

อันดับแรก: Code Structure เดิมที่วางไว้คือ

• api : เปรียบเสมือนแผนกต้อนรับ ใช้สำหรับแกะ HTTP Request ที่ได้มา ส่งต่อให้ service
• service : เปรียบเสมือนแผนกจัดการส่วนกลาง ใช้สำหรับดำเนินการตามที่เราต้องการ หากมีส่วนหนึ่งส่วนใดต้องไปต่อกับ External จะให้ repository ช่วย
• repository : เปรียบเสมือนแผนกประสานงาน คุยกับคนภายนอกให้แล้วส่ง Data กลับไป

อันดับสอง: ก็แค่เพิ่มทีมงานมาอีกชุด ในการทำ Webhook ใหม่ อาทิเช่น

api เพิ่ม HTTP handler function

api.go — เพิ่ม func มาอีกอันนึง

service รับไม้ต่อ เพิ่มคนจัดการส่วนกลางอีกคนนึง

service.go — เพิ่มการจัดการรับไม้ต่อ เอา event ไปทำอะไรอย่างที่ต้องการ

ปล. Service ขอย่อเป็น {FLEX_MESSAGE_JSON} ไว้ เดี๋ยวจะยาว ฮ่าๆ

และคนสุดท้าย ผู้ประสานงาน repository

repository.go — ผู้ประสานงาน (เป็นคนเชื่อมต่อ App กับ LINE Server)

โดย SDK ที่ LINE มีให้ ต้องใช้ Channel Secret กับ Channel Access Token ด้วยเน้อ ในกรณีนี้ผมทำให้อ่านค่าจาก ENV Variable เพื่อความปลอดภัยของ Account ผมแห่ะๆ ศึกษาเพิ่มเติม SDK ที่นี่

The Last One

เขียนเสร็จ Deployed เสร็จ ก็อย่าลืมไปแก้ Webhook URL ที่ LINE Chat Bot — Messaging API ด้วยนะ แล้วนี่ก็คือ ผลลัพธ์สุดภาคภูมิใจ

สังเกตว่า ไม่ได้ Lock คำอะไรทั้งนั้น พิมพ์อะไรมาก็ได้ ตอบกลับเหมือนเดิม

สรุป

บทความในตอนนี้ เจตนาอย่างยิ่งในความอธิบายอย่างหยาบๆ เพื่อให้เห็นภาพรวมของ Phase 2 ไม่ได้เจาะลึก หรือสอนทำแบบ Step-by-Step มากขนาดนั้น ไม่ได้หวงความรู้นะ แค่ขี้เกียจ อิอิ ถ้าถามเข้ามาก็จะตอบทุกคำถามที่ตอบได้แหละ อีกเหตุผลหนึ่งก็คือ ขอเก็บไว้อธิบายแบบแน่นๆ อีกบทความแทนละกัน เพื่อความสะดวกในการอ่านคร้าบ

#Phase3 นั้นยังอยู่ในระหว่างการ Design อยู่ครับคงจะต้องรอติดตามกันไปเรื่อยๆ ก็แล้วกันครับ

กลับไปอ่านบทความ Phase 1 ได้ที่นี่: https://medium.com/@ch.chinnawat/เมื่อ-dev-เล่นทอง-api-เช็คราคาทอง-ก็ต้องมา-ep1-f098f343f7de

Photo by Frederick Tubiermont on Unsplash

ดู Source Code เพิ่มเติมที่

buildingwatsize/goldnoti

[ตรงนี้ Ref.]

สร้าง Line Message ประเภทต่างๆ ด้วย Golang กัน~~

line/line-bot-sdk-go

linebot - GoDoc

Making a Flex Message with LINE's Go SDK - LINE ENGINEERING