เริ่มต้นบทความนี้ขอพูดถึง Webhook Event ใน Messaging API ของ LINE กันก่อนว่ามันคือ การที่ผู้ใช้เข้ามามีปฏิสัมพันธ์กับ LINE Chatbot ซึ่งมีมากมายหลายรูปแบบ เช่น การส่งข้อความหา Chatbot ไม่ว่าจะเป็น Text, Image, Sticker หรือการกด Follow ตัว Chatbot, การลาก Chatbot เข้ากลุ่ม, การเข้าไปอยู่ในรัศมีของ LINE Beacon เป็นต้น ทั้งหมดนี้เราจะเรียกมันว่า events โดยหลักการทำงานจะเป็นแบบในรูปด้านล่างนี้


เชื่อว่าคนที่ใช้งาน OA(LINE Official Account) ในไทยตอนนี้ คงไม่มีใครไม่รู้จัก Rich Menu หรือ เมนูที่ช่วยนำทางผู้ใช้งานไปสู่บริการหลักๆของเรา ซึ่งการที่จะได้มันมาก็แสนจะง่ายเพียงแค่ใช้เครื่องมือ หรือ จะเขียนโปรแกรมก็สามารถทำได้

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


นักพัฒนาที่ใช้งาน GitHub อยู่น่าจะรู้จัก GitHub Actions บริการที่เข้ามาช่วยจัดการ Development workflow ใน Repo ของเรา ให้มีระบบ CI/CD แบบอัตโนมัติได้

ด้วยเสียงตอบรับที่ดีของบริการดังกล่าว ทีม Firebase จึงไม่รอช้าที่จะออกฟีเจอร์ใหม่ซึ่งเป็นการ Integrate กันระหว่าง Firebase Hosting และ GitHub Actions เพื่อมาช่วยให้การ deploy เว็บของเรามีความ automate โดยที่นักพัฒนาไม่จำเป็นต้องมีความรู้ในการติดตั้ง GitHub Actions มาก่อน เพราะ Firebase CLI เค้าจะจัดให้

การ Deploy จาก GitHub Actions ไปยัง Firebase Hosting

การ deploy จาก GitHub Actions ที่จะแสดงในบทความนี้ จะเป็นแบบ default ที่ได้หลังจากการติดตั้ง ซึ่งจะมีด้วยกัน 2 รูปแบบ


ใครที่เริ่มต้นพัฒนา LINE Chatbot ด้วย Dialogflow การใช้งาน Inline Editor ใน Fulfillment ก็ถือเป็นจุดเริ่มต้นที่ง่าย และสะดวกมากๆเหมือนมี server ทิพย์ เพราะไม่ต้องมานั่งเตรียม server เอง

สำหรับนักพัฒนาที่มีประสบการณ์แล้ว และอยากต่อยอดการใช้งานให้เจ๋งกว่าเดิม ไม่ว่าจะเป็นเรื่องการพัฒนาและทดสอบใน Local, การบริหารจัดการโค้ดที่ง่ายขึ้น, การปรับแต่งประสิทธิภาพให้สูงขึ้น หรือ การเพิ่มความปลอดภัย…บทความนี้จะพาคุณไปรู้จัก 10 ข้อดีของการติดตั้ง Cloud Functions ใช้งานเอง แทนที่ Inline Editor กัน

1. โค้ดเดิมใน Inline Editor เอามาใช้ได้เลย

หลังจากที่คุณได้ติดตั้ง Cloud Functions for Firebase (แบบ JavaScript) ตามขั้นตอนที่ 2 ของบทความด้านล่างนี้แล้ว

โค้ดเดิมทั้งหมดที่เคยพัฒนาไว้ใน Inline Editor ทั้งไฟล์ index.js และ package.json ก็สามารถ copy ไปใช้กับไฟล์ทั้ง 2 ที่อยู่ในโฟลเดอร์ functions/ ได้เลย หรืออยากจะใช้ async/await แบบไม่มี warning มากวนใจแบบใน Inline Editor ก็ทำได้สบาย


คุณเคยต้องย่อลิงก์ เพราะลิงก์ที่จะแชร์มันยาวเกินไปบ้างไหม ส่วนตัวผมต้องย่อลิงก์บ่อยอยู่เหมือนกัน เนื่องจากเวลาไปทำ Workshop ผมต้องการจะให้ลิงก์ที่แชร์มันดูสั้นและพิมพ์ตามได้ง่าย

ถ้าพูดถึงบริการย่อลิงก์ หลายคนคงนึกถึง Bit.ly เป็นแน่ แต่คุณรู้ไหมว่า Bit.ly เขาเปิด API ให้เราใช้ฟรี แถมง่ายมากๆด้วยนะ และที่ผมเกริ่นมาทั้งหมดก็คือที่มาของบทความนี้ ที่ผมจะพาคุณไปรู้จัก Bitly API ผ่านการพัฒนา LINE Chatbot ที่จะช่วยให้การย่อลิงก์ของคุณเปลี่ยนไปตลอดกาล

อย่าได้ช้ามาดูขั้นตอนการพัฒนากันเลย

  1. สร้าง LINE Chatbot ที่พัฒนาด้วย Dialogflow
  2. สร้าง Intent เพื่อให้ Chatbot รู้ว่าผู้ใช้ส่งลิงก์มา
  3. สร้าง Bitly Access Token
  4. ย่อลิงก์ด้วย Bitly ใน Fulfillment

1. สร้าง LINE Chatbot ที่พัฒนาด้วย Dialogflow

จุดเริ่มขบวนคือคุณต้องสร้าง LINE Chatbot และเข้าใจการพัฒนาตัว Chatbot กับ Dialogflow ซะก่อน โดยใครที่ยังไม่มีประสบการณ์ ผมแนะนำให้เรียนรู้จากบทความด้านล่างนี้ก่อน ซึ่งถ้าคุณเข้าใจบทความด้านล่างนี้แล้วข้อที่เหลือก็ไม่มีอะไรยากแล้ว

2. สร้าง Intent เพื่อให้ Chatbot รู้ว่าผู้ใช้ส่งลิงก์มา

ขั้นตอนนี้เริ่มจากเข้าไปใน Dialogflow console คลิกเมนู Intent แล้วกดปุ่ม CREATE INTENT เลย


ถ้าวันนี้คุณได้รับโจทย์ให้พัฒนาระบบรายงานข้อมูล ที่มีการเปลี่ยนแปลงของข้อมูลอยู่ตลอดเวลา เช่น ผลฟุตบอล, สภาพอากาศ, ค่า PM 2.5, อัตราแลกเปลี่ยน, ราคาหุ้น, ราคาน้ำมัน หรือ ราคาทอง เป็นต้น สิ่งแรกที่คุณจะทำคงเป็นการหา API จากบริการต้นทาง แต่ถ้าโชคไม่ดี มันไม่มี API คุณก็อาจจะต้องสร้างระบบฐานข้อมูลแล้วมากรอกค่าต่างๆเอง ซึ่งถ้าข้อมูลมันเปลี่ยนบ่อยมากๆ คุณก็คงทำเองไม่ไหวแน่ๆ

ดังนั้นบทความนี้จะพาคุณไปรู้จักกับเทคนิค Web Scraping(มหาเวทดูดดาว) ด้วยการพัฒนาระบบรายงานราคาทองผ่าน LINE Chatbot แบบที่ไม่ต้องพึ่ง API และไม่ต้องใช้ admin มานั่งอัพเดทข้อมูลเอง โดยที่ระบบจะรายงานเฉพาะกรณีที่ราคาทองนั้นมีการเปลี่ยนแปลง

มาดู 5 ขั้นตอนในการพัฒนากันเลย

  1. เตรียม LINE Chatbot ที่พัฒนาด้วย Cloud Functions for Firebase
  2. ตั้งเวลาดึงข้อมูลด้วย Cloud Scheduler (Cron Job)
  3. ดึงข้อมูลราคาทองด้วยเทคนิค Web Scraping
  4. เช็คและอัพเดทข้อมูลราคาทองด้วย Cloud Firestore
  5. รายงานราคาทองผ่าน LINE Chatbot

หมายเหตุ: เนื้อหาในบทความนี้ เขียนขึ้นโดยมีวัตถุประสงค์เพื่อการศึกษาเท่านั้น

1. เตรียม LINE Chatbot ที่พัฒนาด้วย Cloud Functions for Firebase

สำหรับใครที่ยังไม่เคยพัฒนา LINE Chatbot ด้วย Cloud Functions for Firebase ให้ทำตามขั้นตอนของบทความด้านล่างนี้(ข้อ 1 และ 2 ก็พอ) แต่หากใครมีประสบการณ์ตรงนี้แล้ว ข้ามไปขั้นตอนที่ 2 ได้เลย…


ในปีที่ผ่านมาบทความเกี่ยวกับ Rich Menu ถือว่าได้รับความนิยมเป็นอย่างสูง สำหรับคนที่มี LINE Official Account หรือ LINE Chatbot ด้วยข้อดีของมันที่ช่วยให้ผู้ใช้เริ่มต้นใช้งานได้ง่าย โดยการแสดงเมนูที่สำคัญต่างๆในหน้าแชท และมี Action ที่หลากหลายให้เลือกใช้ แถมขั้นตอนในการสร้าง ก็สามารถทำได้ทั้งคนทั่วไป รวมถึงคนที่มีทักษะในการเขียนโปรแกรม จึงไม่น่าแปลกใจที่ Rich Menu จะเป็นฟีเจอร์พื้นฐานที่แต่ละ Account ต้องมีกันในปัจจุบัน

สำหรับบทความนี้ ผมจะชวนทุกคนมาต่อยอดการพัฒนา Rich Menu ให้สามารถแสดงผลได้ตรงกับภาษาของเครื่องผู้ใช้แต่ละคนกัน โดยปัจจัยหลักที่เราจะต้องรู้ก่อนก็คือ “เครื่องผู้ใช้คนนั้นๆเขาใช้ภาษาอะไรอยู่?” ซึ่งหนทางที่เราจะได้ภาษาของเครื่องผู้ใช้มานั้น ไม่ใช่เรื่องยาก เพราะทาง LINE เขาเพิ่ม property ที่ชื่อว่า language มาให้ในข้อมูลโปรไฟล์ของผู้ใช้แล้ว จากที่ก่อนหน้านี้เราจะได้แค่ userId, displayName, pictureUrl และ statusMessage

ถึงตรงนี้ เราก็มีต้นทุนและไอเดียที่พร้อมละ ดังนั้นเรามาดูขั้นตอนในการพัฒนากันเลย

  1. เตรียม LINE Chatbot ที่พัฒนาด้วย Cloud Functions for Firebase
  2. เตรียม Rich Menu สำหรับ ภาษาไทย และ ภาษาอังกฤษ…

เหมือนเป็นธรรมเนียมไปแล้วว่า Flex Message หรือข้อความใน LINE ที่ให้นักพัฒนาสามารถออกแบบได้อย่างอิสระ และแสดงผลได้ในทุก device จะมีอัพเดทมาปีละครั้ง โดยในปี 2020 นี้ ทีม Flex Message ก็ตอบรับเสียงของนักพัฒนา พร้อมออกฟีเจอร์ใหม่ เพื่อมาช่วยเปลี่ยนจินตนาการเป็นข้อความใน LINE ให้ง่ายกว่าเดิม

สำหรับใครที่กำลังอ่านบทความนี้ และยังไม่คุ้นเคยกับ Flex Message ก็แนะนำให้ไปทำความรู้จักกับมันก่อน ที่บทความด้านล่างนี้ครับ

และ 10 ฟีเจอร์ใหม่ที่จะมาช่วยปลดล๊อคข้อจำกัดในการออกแบบข้อความใน Flex Message ของปี 2020 แด้ไก่…เอ้ย!…ได่แก้…เอ้ย!…ได้แก่…เอ้ย!…ถูกแล้ว!!!

  1. APNG Support
  2. Content Alignment
  3. Font size & Icon size in px
  4. Shrink-to-Fit
  5. Gradient Background
  6. Margin & Spacing in px
  7. Image size in px and %
  8. Empty Box
  9. Max size of JSON for a Single Bubble is increased
  10. Max number of bubbles in a Carousel is increased

แค่เห็นชื่อแต่ละฟีเจอร์ ก็เหมือนเห็นหลัง ถ้าอยากเห็นหน้า ตามมาเลย ผมจะเล่าให้ฟัง

1. APNG Support

วันนี้ใครอยากเอาภาพ animation เคลื่อนไหว ดุ๊กดิ๊ก อย่าง APNG มาใช้ใน Flex Message ก็ทำได้แล้วนะ เพียงระบุ property ที่ชื่อ animated เป็น…


สำหรับนักพัฒนา LINE ในปี 2020 นี้ ผมคิดว่าคงไม่มีใครไม่รู้จัก LINE Front-end Framework หรือ LIFF และถ้าถามว่า LIFF URL หน้าตาเป็นแบบไหนบ้าง?

  • ส่วนใหญ่คงตอบ https://liff.line.me/xxx-xxx หรือที่เรียกว่า Universal Link
  • รองลงมาคงตอบ line://app/xxx-xxx หรือที่เรียกว่า LINE Scheme
  • ส่วนน้อยคงตอบ https://line.me/R/app/xxx-xxx

แต่หากผมถามต่อว่า LIFF URL มีการทำงานอย่างไร เชื่อว่าคำตอบที่ได้น่าจะหลากหลายเลยหละ โดยเฉพาะอย่างยิ่งเมื่อวันที่ 29 มิ.ย ที่ผ่านมา ทาง LINE ได้คลอด LIFF SDK v2.3.0 ที่มาพร้อมกับการทำงานของ LIFF URL ที่เปลี่ยนไปแบบมีนัยสำคัญ

อย่างไรก็ตามผู้ใช้งาน LIFF ทั้งหมดยังคงใช้งานได้ตามปกติ ถึงแม้นักพัฒนาจะอัพเดท LIFF SDK เป็นเวอร์ชันล่าสุดแล้วก็ตาม เนื่องจากทาง LINE ทำการบ้านข้อนี้มาดี เพราะถ้าเราเข้าไปในหน้า LIFF detail ใน Developers console วันนี้ จะพบว่ามันมีส่วนที่ให้ตั้งค่าเพิ่มเข้ามา


เดิมทีการดึงไฟล์ทั้งหมดจาก Cloud Storage for Firebase นั้น นักพัฒนาจำเป็นจะต้องเก็บ URL ของไฟล์ไว้ใน database แล้วจึง query ข้อมูล URL ออกมาใช้งาน

แต่ก็มีบาง use case ที่นักพัฒนาต้องการเพียงแค่อัพโหลดไฟล์ไปเก็บไว้ แล้วดึงไฟล์ทั้งหมดออกมาใช้ โดยปราศจากการ query ข้อมูลจาก database

นั่นจึงเป็นที่มาของบทความนี้ที่จะมาเฉลยวิธีการ list ไฟล์ทั้งหมดจาก path ที่เราต้องการออกมา ซึ่งถือเป็นภาคต่อของบทความก่อนหน้า และผมแนะนำให้ผู้ที่ยังไม่ได้อ่าน ให้อ่านก่อน เพื่อที่จะสามารถประติดประต่อระบบที่เรากำลังจะสร้างให้สมบูรณ์

ถึงตรงนี้ คิดว่าทุกคนน่าจะมี LINE Chatbot สำหรับการอัพโหลดและ resize รูปกันเรียบร้อยแล้ว ถัดไปเราจะมาสร้าง LIFF ที่ให้ดึงข้อมูลรูปทั้งหมดจาก Cloud Storage for Firebase มาแสดง พร้อมทั้งเพิ่มฟีเจอร์ให้ผู้ใช้สามารถแชร์รูปไปยังเพื่อนๆ หรือกลุ่มต่างๆได้ โดยขั้นตอนในการพัฒนามีดังนี้

  1. สร้าง LINE Login Channel และลงทะเบียน LIFF app
  2. แสดงรูปทั้งหมดจาก Cloud Storage for Firebase
  3. พัฒนาระบบแชร์รูปใน LIFF ด้วย Share Target Picker
  4. Deploy และทดลองใช้งาน

1. สร้าง LINE Login Channel และลงทะเบียน LIFF app

ขั้นตอนนี้ใครที่ยังไม่มี LIFF app ให้ทำตามบทความด้านล่างนี้ในข้อที่ 2 และ 3 ก่อน แต่สำหรับใครที่มี LIFF app แล้วก็ให้ข้ามไปลุยต่อในข้อถัดไปได้เลย…

Jirawatee

Technology Evangelist at LINE Thailand / Google Developer Expert - 🔥Firebase

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store