มาทำให้ Line มีมากกว่า Message ด้วย Flex Message และ Line Bot Designer

[PHP, NodeJS, Heroku] แบบ Step by stepอันนี้เป็น Blog แรกของผมในการมาช่วยแนะนำ ในการสร้าง Chat Bot ผ่าน Line แชทยอดฮิตในประเทศไทยที่มีผู้ใช้งานจำนวนมากและ…medium.

comข้อความที่แสนจะธรรมดาตั้งแต่เรามีการแชทเกิดขึ้นมาเราก็ได้แค่ส่งข้อความหากันไปมาด้วย ตัวอักษรเท่านั้นมาเป็นเวลาเนิ้นนานมาแล้ว (นานจนจำความไม่ได้) ซึงมันก็มีการปรับปรุงมามากมาย มีการเติม Emoji Icon ต่างๆ ทำให้รู้สึกว่าไม่น่าเบื่อแล้วสามารถแสดงอารมณ์ได้ และก็มีการพัฒนาอย่างต่อเนื่องจนมาถึงยุคปัจจุบัน มีการส่งสติกเกอร์ ส่งเป็นเสียงและ ฯลฯ จัดเต็มทุก Media ทำให้ข้อความจากที่มันธรรมดาอยู่แล้วยิ่ง ธรรมดาลงไปอีก จากที่ได้ไปศึกษามา ทาง Line ได้มี Message ตัวนึงชื่อ Flex Message ทำให้ Message ธรรมดาไม่น่าเบื่ออีกต่อไปปล.

ถ้าคุณเคยเห็นภาพนี้แสดงว่าคุณเริ่มมีอายุแล้วนะFlex Message เป็นยังไงภาพนี้เป็นการส่งข้อความจาก Push message แต่ส่งเป็นแค่ข้อความเฉยๆ ดูเฉยๆไม่น่าสนใจ ไม่มีการเล่น Style อะไรเลย Text ล้วนๆtext อย่างเดียวไม่มีอย่างอื่นผสมส่วนภาพด่านล่างเป็นการใช้ Flex Message ทำให้ข้อความธรรมดาดูมีความน่าสนใจขึ้นดูง่ายขึ้นและยังมี View Detail ได้อีกเพิ่มลูกเล่นในการส่งข้อความธรรมดานั้นไม่ธรรมดาภาพนี้เป็นการใช้ Flex Message เข้ามาในการนำเสนอทำให้ข้อความน่าสนใจมากขึ้นเราจะทำ Flex Message ได้อย่างไรมีสองวิธีในการที่จะทำ Flex Messageด้วยจินตนาการ JSON ของเราลงไปตามคู่มือของ Flex Message อ่านเพิ่มเติมสร้างด้วย Line Bot Designer ดาว์โหลดLine Bot Designer คืออะไรเป็นตัวช่วยในการ simulation Flex message ให้ง่ายต่อการพัฒนาแทนที่จะต้องไปนั้งคิดว่าใน Flex เราจะ Custom ยังไงให้สวยงานโดยไม่ต้องมโนจากการคิด JSON ทำให้การพัฒนาเป็นไปได้ง่ายขึ้น เรามาดูกันเลยดีกว่าเปิดมาหน้าตาจะเป็นแบบนี้ก็ไป Start a New Project กันเลยเข้ามาจะมีให้ ตั้งชื่อต่างๆ และหมวดของเรา โดยหมวดธุรกิจ ตัว Line Bot Designer มีตัวอย่างของ Message ให้ดูด้วยถือว่าสะดวกมากๆและ ยังให้ idea ในการพัฒนาเราจะมาสร้างให้คล้ายกับของ Rabbit Line Pay ทำตามภาพที่ 1ภาพที่ 1หลังจากที่ทำตามภาพที่ 1 แล้วจะเจอ Popup ให้เลือก ว่าเราจะใช้ตาม Template หรือจะทำเอง แล้วแต่ความชอบของเราเลยแต่อันนี้เราจะมาทำกันเองนะครับ เลือกเป็น Blank แล้ว Create โลดดด!!!เรามาดูส่วนของ Header กันก่อน"header": { "type": "box", "layout": "vertical", "contents": [ { "type": "text", "text": "Purchase", "size": "lg", "align": "start", "weight": "bold", "color": "#009813" }, { "type": "text", "text": "฿ 100.

00", "size": "3xl", "weight": "bold", "color": "#000000" }, { "type": "text", "text": "Rabbit Line Pay", "size": "lg", "weight": "bold", "color": "#000000" }, { "type": "text", "text": "2019.

02.

14 21:47 (GMT+0700)", "size": "xs", "color": "#B2B2B2" }, { "type": "text", "text": "Payment complete.

", "margin": "lg", "size": "lg", "color": "#000000" } ] }ส่วนของ Body"body": { "type": "box", "layout": "vertical", "contents": [ { "type": "separator", "color": "#C3C3C3" }, { "type": "box", "layout": "baseline", "margin": "lg", "contents": [ { "type": "text", "text": "Merchant", "align": "start", "color": "#C3C3C3" }, { "type": "text", "text": "BTS 01", "align": "end", "color": "#000000" } ] }, { "type": "box", "layout": "baseline", "margin": "lg", "contents": [ { "type": "text", "text": "New balance", "color": "#C3C3C3" }, { "type": "text", "text": "฿ 45.

57", "align": "end" } ] }, { "type": "separator", "margin": "lg", "color": "#C3C3C3" } ] }ส่วนของ Footer"footer": { "type": "box", "layout": "horizontal", "contents": [ { "type": "text", "text": "View Details", "size": "lg", "align": "start", "color": "#0084B6", "action": { "type": "uri", "label": "View Details", "uri": "https://google.

co.

th/" } } ] }ปล.

อันนี้คือทั้งหมดของ Flex เพื่อใครไม่อยากลองแล้ว Copy ไปใช้เลย{ "type": "flex", "altText": "Flex Message", "contents": { "type": "bubble", "direction": "ltr", "header": { "type": "box", "layout": "vertical", "contents": [ { "type": "text", "text": "Purchase", "size": "lg", "align": "start", "weight": "bold", "color": "#009813" }, { "type": "text", "text": "฿ 100.

00", "size": "3xl", "weight": "bold", "color": "#000000" }, { "type": "text", "text": "Rabbit Line Pay", "size": "lg", "weight": "bold", "color": "#000000" }, { "type": "text", "text": "2019.

02.

14 21:47 (GMT+0700)", "size": "xs", "color": "#B2B2B2" }, { "type": "text", "text": "Payment complete.

", "margin": "lg", "size": "lg", "color": "#000000" } ] }, "body": { "type": "box", "layout": "vertical", "contents": [ { "type": "separator", "color": "#C3C3C3" }, { "type": "box", "layout": "baseline", "margin": "lg", "contents": [ { "type": "text", "text": "Merchant", "align": "start", "color": "#C3C3C3" }, { "type": "text", "text": "BTS 01", "align": "end", "color": "#000000" } ] }, { "type": "box", "layout": "baseline", "margin": "lg", "contents": [ { "type": "text", "text": "New balance", "color": "#C3C3C3" }, { "type": "text", "text": "฿ 45.

57", "align": "end" } ] }, { "type": "separator", "margin": "lg", "color": "#C3C3C3" } ] }, "footer": { "type": "box", "layout": "horizontal", "contents": [ { "type": "text", "text": "View Details", "size": "lg", "align": "start", "color": "#0084B6", "action": { "type": "uri", "label": "View Details", "uri": "https://google.

co.

th/" } } ] } }}หลังจากออกแบบเสร็จแล้วก็จะเป็นขั้นตอนการส่งผ่าน Line messaging ไปดูกันต่อเลยเข้าใช้งานรวมกับ APIดูตัวอย่าง Code ได้ที่นี่เลยครับ จริงๆเหมือนการส่ง Message API ธรรมดาเลย แค่เปลี่ยนจาก Type: text เป็น Type: Flex เอง ดูตัวอย่างโค๊ดได้ที่นี้เลยครับbenzintel/linebotLineBot.

Contribute to benzintel/linebot development by creating an account on GitHub.

github.

comอันนี้คือตัวอย่างที่ทำเสร็จแล้วจะได้หน้าตาแบบนี้ออกมา อาจจะต้องไปปรับกันอีกหน่อยเพื่อความสวยงานนะครับ ส่วนต่อไปที่เราจะแก้คือ altText นะครับส่งทั้งที่เวลา Noti เด่งก็ควรจะเป็นเรื่องนี้นั้น เราจะแก้ที่ไหนไปดูกันครับแก้ตรงที่เป็นชื่อ altText นะครับ ผมจะเขียนว่า “Hello Flex Message”{ "type": "flex", "altText": "Hello Flex Message", // แก้ตรงนี้นะครับ "contents": { "type": "bubble", "direction": "ltr", "header": { "type": "box", "layout": "vertical", "contents": [ { "type": "text", "text": "Purchase", "size": "lg", "align": "start", "weight": "bold", "color": "#009813" }, { "type": "text", "text": "฿ 100.

00", "size": "3xl", "weight": "bold", "color": "#000000" }, { "type": "text", "text": "Rabbit Line Pay", "size": "lg", "weight": "bold", "color": "#000000" }, { "type": "text", "text": "2019.

02.

14 21:47 (GMT+0700)", "size": "xs", "color": "#B2B2B2" }, { "type": "text", "text": "Payment complete.

", "margin": "lg", "size": "lg", "color": "#000000" } ] }, "body": { "type": "box", "layout": "vertical", "contents": [ { "type": "separator", "color": "#C3C3C3" }, { "type": "box", "layout": "baseline", "margin": "lg", "contents": [ { "type": "text", "text": "Merchant", "align": "start", "color": "#C3C3C3" }, { "type": "text", "text": "BTS 01", "align": "end", "color": "#000000" } ] }, { "type": "box", "layout": "baseline", "margin": "lg", "contents": [ { "type": "text", "text": "New balance", "color": "#C3C3C3" }, { "type": "text", "text": "฿ 45.

57", "align": "end" } ] }, { "type": "separator", "margin": "lg", "color": "#C3C3C3" } ] }, "footer": { "type": "box", "layout": "horizontal", "contents": [ { "type": "text", "text": "View Details", "size": "lg", "align": "start", "color": "#0084B6", "action": { "type": "uri", "label": "View Details", "uri": "https://google.

co.

th/" } } ] } }}หลังจากแก้แล้วจะเป็นแบบนี้นะครับง่ายแค่นี้เอง เราก็เปลี่ยน Text ธรรมดาให้มีลูกเล่นมาขึ้นสวยงามน่าอ่านมากกว่า Text ธรรมดาทั่วไปและ ทำให้คนที่ใช้งานสนุกไปกับการอ่านเนื้อหาที่มากขึ้น นำเสนอ Content ที่เกี่ยวกับข้อความได้มากขึ้นสำหรับ ครั้งหน้า ผมจะมาเล่าเรื่อง การทำ NodeMCU จากคนท่ีไม่มีความรู้ด้าน Hardware ก็สามารถทำได้ขอขอบคุณผู้ให้ความรู้ทั้งหลาย ทั้ง google และ Blog ต่างที่ทำให้สามารถมาถึงจุดนี้ได้ตัวอย่าง Code ของผมbenzintel/linebotLineBot.

Contribute to benzintel/linebot development by creating an account on GitHub.

github.

comตัวอย่าง Template Line Bot Designerbenzintel/linebotLineBot.

Contribute to benzintel/linebot development by creating an account on GitHub.

github.

comRef.

https://developers.

line.

biz/en/reference.. More details

Leave a Reply