แจกของค้าบบ!!! Library สำหรับแปลง Flex message ให้แสดงผลบน HTML ได้เสมือนอยู่บน LINE เรียกได้ว่าเอาใจเพื่อนๆ ชาว LINE Dev ที่อยากแสดง Flex message สวยๆ ที่ระบบหลังบ้านของตัวเองกันโดยเฉพาะเลยย 😃

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

แต่อย่างที่เรารู้กัน Flex message มี JSON ที่ค่อนข้างซับซ้อน และมีแนวโน้มจะซับซ้อนเพิ่มขึ้นเรื่อยๆ ตาม feature ที่เพิ่มขึ้นมา อย่ากระนั้นเลยเรามาช่วยกันพัฒนา lib ที่ไว้แปลง JSON ให้แสดงเป็น HTML สวยๆ กันดีกว่าครับ

ก่อนใช้งาน

ก่อนเริ่มใช้งานไป clone code มาจาก GitHub ตามลิงก์ด้านล่างนี้เลยครับ

git clone https://github.com/PamornT/flex2html.git

อธิบายวิธีใช้งานเบื้องต้น

วิธีใช้งานง่ายๆ ตามด้านล่างนี้เลยค้าบบ

1. include CSS file

<link rel=”stylesheet” href=”css/flex2html.css”>

2. include JS file

<script type=”text/javascript” src=”js/flex2html.min.js”></script>

3. create HTML layer

สร้าง div layer ที่ต้องการให้แสดงผล

<div id=”flex1"></div>

4. call function

เรียกใช้ function flex2html โดยส่ง parameter ไป 2 ค่าคือ 1. layer element ID ที่ต้องการแสดงผล 2. JSON Flex message…


ในยุคที่การพัฒนา Software แบบ Agile แพร่หลาย จะมีอยู่สิ่งหนึ่งที่เราต้องทุกๆ วันตอนเช้า คือ Standup Meeting หรือ Daily update นั่นเอง

การ Standup Meeting ปกติก็จะใช้เวลาไม่นานประมาณ 10 นาที และจะพูดถึงการทำงานของเมื่อวาน และ งานที่จะทำในวันนี้โดยดูงานที่ Update ผ่าน Kanban Board ซึ่ง Trello ก็เป็นหนึ่งใน Kanban board ที่ได้รับความนิยมมาก

แต่ Kanban board ยิ่ง Project ใหญ่ก็จะยิ่งมี List/Card มากมายทำให้การเลื่อนไปมาเพื่อหา Card ที่แต่ละคนต้อง update ก็เสียเวลาพอดู และเกิดความยุ่งยากในการสรุปว่าตกลงเมื่อวานนี้ทำอะไรไปบ้าง

อย่ากระนั้นเลยไหนๆ เราก็เป็น Dev แระ มาพัฒนาเครื่องมือที่จะช่วยให้การ Standup Meeting เราสะดวกขึ้นกันดีกว่าาา

ก่อนเริ่ม

ในบทความนี้จะมีการสร้าง LINE Webhook และการใช้งาน Cloud Functions for Firebase และ Cloud Firestore โดยในบทความนี้จะไม่ได้พูดถึงรายละเอียดในส่วนนี้ ถ้าใครยังไม่เคยสร้างอย่างใดอย่างหนึ่งแนะนำให้ศึกษาได้จากลิงก์ด้านล่างนี้เลยครับ

พร้อมแล้วไปเริ่มกันเลย!!!

1. Get Trello Developer API Key

เริ่มต้นเราต้องไปเอา API Key สำหรับ Trello มาก่อน เข้าไปที่ลิงก์ด้านล่างได้เลย https://trello.com/app-key


ปกติการพัฒนาโปรแกรมต่างๆ จะมีการเก็บค่า Config ต่างๆ โดยทั่วไปเราอาจจะใช้วิธีการสร้างไฟล์ .env มาเพื่อเก็บค่า หรือสร้างไฟล์ config.json ขึ้นมา ข้อเสียคือ ถ้าเรามีนักพัฒนาหลายคน อาจจะเกิดความลำบากในการ share ค่า config เหล่านี้เนื่องจากเราไม่สามารถเอาไฟล์ .evn หรือ config.json ขึ้นไปบน git ได้ ด้วยเหตุผลเรื่องความปลอดภัย และเนื่องจากมันเป็น Text file ทำให้ใครที่ได้ไปก็สามารถเปิดดูได้เลยทำให้ไม่ปลอดภัย

วันนี้ผมจะเสนอวิธีการเก็บและเรียกใช้ค่า config แบบง่ายๆ ผ่าน firebase cli โดยสามารถเรียกใช้งาน config ได้ทุกๆ functions และยังสามารถกำหนดความปลอดภัยตามการ setting ของ project ได้เลยครับ

โดยบทความนี้ผมจะอ้างอิงการสร้าง LINE Bot จากบทความนี้นะครับ

มาเริ่มกันเลย!!! โดยโจทย์บทความนี้ผมจะสร้าง Functions Config เพื่อเก็บค่า LINE Channel Access Token แล้วเอาไปใช้ LINE Bot นะครับ

SET

เริ่มต้นเราจะทำการ set ค่า config กันก่อนนะครับ โดยรูปแบบคำสั่งจะเป็นแบบนี้นะครับ

firebase function:config:set key=”value”

ให้เปิด Terminal/Command line ขึ้นมาแล้ว เข้าไปที่ project ของเรา แล้วพิมพ์คำสั่ง ตามนี้เลยครับ ให้แทนค่า LINE-CHANNEL-ACCESS-TOKEN เป็น access token ที่เราได้จาก LINE นะครับ…


Dialogflow ออก Edition ใหม่แล้วนะค้าบบพี่น้อง โดย Edition ใหม่นี้มาในชื่อว่า Dialogflow CX (Customer Experience) โดยเวอร์ชั่นก่อนนี้จะเรียกว่า Edition ES (Essential) แทนนะครับ

ส่วนตัวผมจากแวบแรกที่เห็นเรียกได้ว่าตื่นเต้นมากๆ เพราะเปลี่ยนไปค่อนข้างเยอะ และตอบโจทย์ในหลายๆ เรื่องเลยทีเดียว

ผมขอเล่าความแตกต่างของเวอร์ชั่น ES กับ CX จากที่ได้สัมผัสใน 1 คืนนะครับ

1. Agent building blocks

เริ่มจากสิ่งสำคัญเลยคือ รูปแบบการจัดการ Conversation เปลี่ยนไปมากมายมหาศาล

โดยเวอร์ชั่น ES จะเป็น จะมีรูปแบบเดียวคือการสร้าง Intent เท่านั้น

ส่วนเวอร์ชั่น CX จะซับซ้อนกว่าคือ มีการสร้าง Flow, Pages และ Intent เพื่อจัดการ conversation ของ User ลองดูจากรูปนะครับ


ปัญหานึงที่เจอในการพัฒนา Chat Bot ก็คือ user ที่มาถึงก็ไม่พูดพร่ำทำเพลง แปะ link แล้วส่งมาให้ Bot เลย อาจจะไปเจอหน้าสินค้าหรือโปรโมชั่นอะไรมาสักอย่างก็ไม่สามารถรู้ได้ พอ Bot ไม่เข้าใจก็ส่งข้อความไปเลยว่า ให้ติดต่อเจ้าหน้าที่ หรือต้องรอให้ Admin มาช่วยตอบอีกที ทำให้การสื่อสารเกิดความล่าช้าไป

บทความนี้จะเสนอวิธีง่ายๆ ที่จะช่วยให้ Bot สามารถเข้าใจ link ที่ user แปะ มาว่าเค้าต้องการอะไร

โดยขั้นตอนการทำงานจะใช้วิธีตรวจสอบว่าข้อความที่ user ส่งมาเป็นประเภท URL หรือเปล่า? ถ้าใช่เราจะไป scraper หรือดึงข้อมูลจาก URL นั้นมา โดยบทความนี้จะดึงในส่วนข้อมูล Open Graph มาใช้นะครับ หลังจากได้ข้อมูลหน้าเว็บมาแล้วเราก็ส่งต่อให้ DialogFlow เพื่อตรวจสอบข้อความ หาความต้องการของ User อีกทีครับ

ผมขอข้ามขั้นตอนการสร้าง LINE Bot เลยนะครับ สำหรับใครที่ไม่เคยพัฒนา LINE Bot มาก่อนเลย แนะนำให้ลองทำตามบทความนี้ได้เลยครับ

เริ่มต้นกันเลยย!!

1. Install open-graph-scraper

ผมจะใช้ libraly ตัวที่ชื่อว่า open-grap-scraper นะครับ เริ่มต้นก็ติดตั้งก่อนเลยครับ

npm install open-graph-scraper

2. เปิดใช้งาน open-graph-scraper

import * as ogs from…


สิ่งหนึ่งที่สำคัญมากๆ ในการทำ Chat Bot หรือโปรแกรมอะไรก็แล้วแต่ คือ การนำข้อมูลที่เราได้จากกิจกรรมต่างๆ บนโปรแกรมมาทำ Report เพื่อใช้วิเคราะห์ข้อมูล เพื่อพัฒนาหรือปรับปรุง Service ของเราต่อไป

มาถึงขั้นตอนการทำ Report ถ้าเพื่อนๆ คนไหนใช้ FireStore ในการเก็บข้อมูลน่าจะประสบปัญหา หรือ พบความยากลำบากในการทำ Report ที่มีรูปแบบที่หลากหลาย และ มีเงื่อนไขที่แตกต่างกัน เนื่องจาก FireStore เป็น ​NoSQL คือไม่มีโครงสร้าง ไม่สามารถ Query ข้อมูลแบบหลากหลายได้

บทความนี้จะช่วยให้เพื่อนๆ หมดปัญหาเหล่านี้ไปครับ ผมจะพาไปรู้จักกับ Extension ตัวนึงที่จะช่วยเอาข้อมูลใน FireStore Collection ของเราไป BigQuery ให้อัตโนมัติทุกครั้งๆ ที่มีการเปลี่ยนแปลง

และสำหรับใครที่มีข้อมูลเดิมอยู่ใน Collection อยู่แล้ว ช่วงท้ายผมจะแถมเทคนิคที่จะขนข้อมูลทั้งหมดไปที่ BigQuery และให้เพื่อนๆ ออก Report สวยๆ ใน DataStudio ได้แบบไม่ต้องเขียนโค้ดกันเลยทีเดียว

ก่อนจะเริ่มต้น

บทความนี้ผมจะใช้ข้อมูล Chat Log จาก LINE OA เพื่อทดสอบนะครับ สำหรับวิธีการเก็บ Chat Log มาผมจะขอข้ามไปเลยนะครับ ถ้าเพื่อนๆ คนไหนยังไม่เคยทำสามารถทำตามบทความนี้ได้เลยครับ


สวัสดีครับเพื่อนๆ LINE Dev บทความนี้ผมเอาวิธีเอาข้อมูล Insight ไปแสดงผลบน Data Studio มาฝากครับ

โดยวิธีการ คือ เราจะสร้าง Schedule Functions เพื่อทำการตั้งเวลาและทำการดึงค่า Insight จาก LINE Messaging API ผ่าน Method Get user interaction statistics แล้วทำการ insert ข้อมูลเข้าไปที่ BigQuery แล้วสร้าง Report ใน Data Studio โดย connect มาที่ BigQuery นะครับ

สรุป Tech Stack ที่เราจะใช้กันในบทความนี้ครับ

  • Schedule Functions
  • LINE Messaging API (Get user interaction statistics)
  • BigQuery
  • Data Studio

เริ่มกันเลย!!!!

Schedule Functions

Schedule Functons คือ Functions ประเภทหนึ่งใน Firebase ที่สามารถกำหนดให้ทำงานตามเวลาที่ต้องการได้คล้ายๆ กับการตั้ง Cronjob

สำหรับใครที่ยังไม่เคยสร้าง Functions บน Cloud Functions for Firebase มาก่อนลองศึกษาจากบทความนี้ก่อนครับ

สร้าง Schedule Functions

เริ่มสร้าง Schedule Functions โดย code ด้านล่างนี้เลยครับ


หลังจากที่ LINE ได้ออก feature ใหม่บน LIFF ชื่อ Share Target Picker มาเมื่อวันที่ 3 มีนาคมที่ผ่านมา ผ่านมาครบเดือนพอดี LINE ก็ออก Method ใหม่ของ LIFF มาอีก 1 method นั่นก็คือ liff.isApiAvailable นั่นเอง

ก่อนจะไปต่อสำหรับใครที่ยังไม่รู้จัก feature Share Target Picker ติดตามได้ที่บทความนี้นะครับ เพราะผมจะยกตัวอย่างต่อจากบทความนี้นะครับ

liff.isApiAvailable คืออะไร?

มันก็คือตัวช่วยของเราในการตรวจสอบว่า API ของ LIFF ที่เราจะเรียกใช้มันสามารถใช้งานได้หรือเปล่า โดยมันจะตรวจสอบทั้งว่าเราเปิดการใช้งาน feature หรือไม่ และ ตรวจสอบไปถึง LINE version ของ User เลยด้วยว่าใช้งาน API นี้ได้หรือเปล่า

โดยเบื้องต้น API ที่มันสามารถตรวจสอบได้จะมีเพียงตัวเดียวคือ เจ้า Share Target Picker นั่นเอง

อ่านรายละเอียดของ method ได้ที่ลิงก์นี้ครับ
https://developers.line.biz/en/reference/liff/#is-api-available

liff.isApiAvailable ใช้งานยังไง?

ง่ายๆ เลยครับ แค่เรียก method นี้แล้วส่งชื่อ api ที่เราต้องการตรวจสอบเข้าไป เท่านี้เราก็จะได้ค่า return กลับมาเป็น Boolean True|False แล้วครับ

liff.isApiAvailable("shareTargetPicker")

Demo

ผมลองสร้าง LIFF ขึ้นมา 1 ตัวนะครับ โดนลอกจากบทความด้านบนเรื่อง Share Target Picker ของคุณ Jirawatee นะครับ แต่ผมทำการปิด feature Share Target Picker นี้ทิ้งไปจากหน้า LINE Developer นะครับ ผลลัพธ์ที่ได้เป็นดังนี้ครับ…


สวัสดีครับ เพื่อนๆ ชาว LINE Dev วันนี้ผมเอาลูกเล่นใหม่ล่าสุดที่พึ่งอัพเดทกันสดๆ ร้อนๆ มาฝากกันครับ

ลูกเล่นใหม่ที่ว่านั่นก็คือ ตอนส่งข้อความ push/reply/multicast/broadcast/narrowcast ผ่าน Messaging API

เราสามารถเปลี่ยน ชื่อ กับ ไอคอน ได้แล้ว !!!

วิธีการใช้งานก็ไม่ยากเลยครับ แค่ใส่ Property เพิ่มอีก 1 ตัวใน Message Object ตอนเราส่งข้อความแค่นั้นเองครับ

โดย Property ใหม่จะชื่อว่า sender นะครับ โดยสามารถกำหนดค่าได้ 2 ค่า นั่นก็คือ name กับ iconUrl นั่นเอง ดูจากตัวอย่างด้านล่างเลยครับ

{
"type": "text",
"text": "Hello, I am Cony!!",
"sender": {
"name": "Cony",
"iconUrl": "https://line.me/conyprof"
}
}

เข้าไปดูวิธีการใช้งานและเงื่อนไขต่างๆ ได้ที่หน้า LINE Developer ตามลิงก์ใต้รูปเลยครับ


สวัสดีครับเพื่อนๆ ชาว LINE Dev จากประสบการณ์ส่วนตัวที่ทำ ​LINE Chat Bot มาสักระยะพบว่า มีงานนึงที่สำคัญมากก็คือการออกแบบข้อความตอบกลับไปที่ User และข้อความที่ได้รับความนิยมมากๆ ก็คือข้อความแบบ Flex

และพอได้ลองพูดคุยกับเพื่อนๆ ที่ทำ LINE Chat Bot เหมือนกันก็คือต้องทำ Flex เหมือนกันอีก เลยเกิดไอเดียว่าเราน่าจะแชร์ Flex message รูปแบบ ต่างๆ เพื่อเป็น resource ให้เราสามารถประหยัดเวลาในการพัฒนา LINE Chat Bot ให้ผู้พัฒนาสามารถหยิบไปใช้ได้เลยครับ

โดยถ้าใครมีไอเดียอยากแชร์ Flex message สามารถเข้าไปแชร์ได้ที่ลิงก์ด้านล่างนี้เลยครับ แล้วผมจะรวบรวมเอามาไว้ในนี้ให้ครับ ขอบคุณเพื่อนๆ ทุกคนที่ร่วมด้วยช่วยกันด้วยนะครับ ขอบคุณมากครับ
https://www.facebook.com/groups/LINEDEVTH/permalink/497494880914423/

เชิญเลือกใช้กันได้เลยครับ ชอบอันไหน copy link gist ใต้รูป ไปใช้กันเลยครับ ^^

ทะเบียนรถ

(CR. Pamorn Trivorrarat)

PamornT

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