จัดการ Dynamic Flex Message ด้วย PHP(EP.5)

สวัสดีครับทุกคนนน น้องกวิ้นกลับมาแล้วว หลังจากหนีไปเที่ยวรอบโลกมา(ใช่เหรอออ!!) เมื่อน้องกวิ้นกลับมาแล้วก็ต้องมาพร้อมกับเทคนิคเขียน LINE Chatbot ด้วย PHP แน่นอน ส่วนวันนี้เรามีเทคนิคอะไรมานำเสนอนั้นมาดูกันเลยย

เนื่องจากช่วงนี้มีคนถามน้องกวิ้นเข้ามาเป็นจำนวนมากว่าทำอย่างไรดีที่เราจะสามารถส่งข้อความ Flex Message ที่เรา design ใน LINE Bot Designer และได้ JSON มาแล้ว นำมาใช้ได้เลยใน PHP วันนี้เรามีคำตอบ แถมด้วยทริปเล็กๆ ที่หลายๆคนอาจจะรู้แล้ว และ หลายคนอาจจะยังไม่รู้วิธีในการ เปลี่ยนแปลงข้อมูลหลังจากที่เราแปลง JSON ให้เป็น array แล้วอีกด้วย ถ้าพร้อมแล้วก็ไปกันเลย

PART 1 — Download LINE Bot Designer

ขั้นแรกเราต้อง download เครื่องมือในการช่วยเราออกแบบ Flex Message ซะก่อนโดยให้เข้าไปที่ https://developers.line.biz/en/services/bot-designer/ (ถ้าใคร download แล้วสามารถข้ามไปได้เลย)

หลังจากนั้นให้กดปุ่ม Download now

กรอกข้อมูลดังนี้
Occupation : ให้ทำการเลือกอาชีพของตัวเอง
What will you use the Bot Designer for? : ให้ทำการใส่ข้อมูลว่าเราจะนำ LINE Bot Designer ไปใช้เพื่อทำอะไร
หลังจากนั้นกดปุ่ม Submit

เมื่อทำการ download มาเรียบร้อยแล้วเราก็จะได้โปรแกรมสำหรับช่วยเราในการสร้าง Flex Message สวยๆ เพียงปลายนิ้วสัมผัส มาใช้งานแล้วฮะ หลังจากนั้นให้ทำการเปิดโปรแกรมขึ้นมาเลยเราจะเจอกับหน้าจอนี้

ให้เราทำการ Login ให้เรียบร้อย หลังจากนั้นเราจะเจอหน้าจอนี้

ถ้าหากเราต้องการสร้าง Project ใหม่ให้ทำการกด Start a New Project แต่ถ้าเราเคยเข้ามาสร้าง Project ไว้แล้วก็สามารถเลือก Open an existing project เพื่อเลือกไฟล์ที่เราได้เคยทำการบันทึกไว้ได้เลย แต่วันนี้เราจะมาสร้าง Project ใหม่กันดังนั้นให้กดไปที่ Start a New Project จะขึ้นหน้าจอแบบนี้

Bot Name : ชื่อบอท
Company : ชื่อบริษัท
Category : หมวดหมู่
หลังจากที่ทำการกรอกข้อมูลเหล่านี้ (หรือ จะไม่กรอกก็แล้วแต่ ศรัทธา) ให้ทำการจิ้มปุ่ม OK เบาๆ หนึ่งที

เอาละหลังจากที่เราได้ทำการ download โปรแกรม LINE Bot Designer มาแล้วงั้นก็มาต่อที่การสร้าง Flex Message กันเลย

หลังจากนั้นให้กดไปที่ เมนูที่ 2 จะขึ้นหน้าจอแบบนี้

เมื่อเข้ามาในหน้าจอนี้แล้วให้เราสังเกตว่าจะมีให้เราเลือกสร้าง Flex Message ได้ 2 แบบ นั่นก็คือ แบบ Bubble message (แบบ bubble เดียว) และ Carousel message (แบบหลาย bubble ที่สไลด์ไปข้างๆได้)

PART 2 — Create Bubble Flex Message

ขั้นแรกเรามาเริ่มทำการสร้าง Flex Message แบบ bubble กันก่อนเลย

ให้ทำการกดปุ่ม + ตรงนี้ เพื่อทำการเริ่มสร้าง Flex Message แบบ bubble หลังจากกดแล้วจะขึ้นหน้าจอให้เลือก template เบื้องต้นที่มีมาให้

ซึ่งเราจะเลือกใช้ template ที่มีมาให้ หรือ เราจะสร้างเองโดยกดเลือก blank ก็ได้เช่นกัน ซึ่งในตอนนี้ ผมจะขอเลือกใช้ template News นะครับ เพื่อความรวดเร็ว เมื่อเลือก template แล้วก็กดปุ่ม Create ได้เลย

เมื่อเรากด create แล้วโปรแกรมก็จะทำการสร้าง Flex Message ขึ้นมาให้เราทันทีโดยในส่วนนี่เราจะสังเกตได้ว่า template ได้ทำการใส่ข้อมูลตัวอย่างมาให้เราเรียบร้อยแล้วเราสามารถที่จะดัดแปลงแก้ไขความสวยงามได้เลย

PART 3— Create Carousel Flex Message

เมื่อ part ที่แล้วเราพาไปทำ Flex Message เดี่ยวๆไปแล้ว ต่อมาเราจะมาทำ Flex Message แบบที่เลื่อนสไลด์ได้บ้างกัน

โดยให้เรากดปุ่ม + ตรงนี้ได้เลย พอกดแล้วจะขึ้นหน้าจอ แบบนี้

เมื่อขึ้นหน้าจอแบบนี้ก็อย่าพึ่งตกใจไปนะจ๊ะ ที่ไม่มีอะไรขึ้นมาเลย เป็นเพราะว่าเรายังไม่ได้เลือก bubble message นั่นเอง

ให้กดปุ่ม + ตรงนี้นะครับ แล้วจะมีข้อมูลของ bubble message ที่เราได้ทำการสร้างเอาไว้ขึ้นมาให้เลือกนำไปสร้างเป็น carousel

สามารถกดเลือก bubble message ได้เลย เมื่อเลือกแล้วก็จะขึ้นหน้าจอแบบนี้

แต่เอ๊ะ เราจะทำให้สไลด์ได้นี่นา มีอันเดียวจะสไลด์ได้ยังไง เพิ่มอีกสักอัน (ทำ part ที่ 2 ซ้ำอีกรอบ)

ซึ่ง carousel message นี้เราสามารถนำ bubble message มาใส่ได้สูงสุดถึง 10 อันเลยทีเดียว (อย่าใส่เยอะเกินไปนะจ๊ะ มือถือที่ spec ไม่สูงอาจจะค้างได้) แต่ๆ ถ้าเราเขียน JSON เองโดยไม่ใช้ LINE Bot Designer เราจะสามารใช้ bubble message ได้สูงสุด 12 อันเลยทีเดียว

PART 4— Send Flex Message by PHP

สำหรับคนใจร้อน สามารถไป download source ได้จาก link นี้ก่อนได้เลยจ้า https://github.com/aeknarinamn/pushFlexMessage ถ้า พร้อมแล้วเราไปลุย code กันเลย

ก่อน อื่นเรามาดู source code ตรงนี้กันก่อนนะครับ
line 2: ส่วนนี้เราจะทำการ require file sendMessage.php มาก่อนเพื่อที่เราจะใช้ function สำหรับในการ ส่ง Flex Message นั่นเอง
line 4: ส่วนนี้เราจะใช้สำหรับนำ JSON ในส่วนของ Flex Message มาใส่กันนั่นเอง
line 5: ตรงนี้เราจะทำการ convert JSON ให้กลับมาเป็น array
line 6: URL ที่ใช้ในการ push message
line 7: ในส่วนนี้ให้ทำการระบุ access token ของ account ตัวเองลงไป
line 8: ส่วนนี้ให้ทำการใส่ user id ของ user ที่เราต้องการส่ง message ไปหา
line 9: นำส่วนของ Flex Message ในรูปแบบของ array มาเก็บใน format ที่ LINE กำหนด
line 10: ก่อนที่เราจะส่งข้อมูลไปให้ LINE เพื่อให้ LINE push message ให้กับเราต้องอย่าลืม convert ข้อมูลกลับไปเป็น JSON ก่อนนะจ๊ะ
line 13: เรียกใช้ function sentMessage จาก file sendMessage.php เพื่อทำการ push message ออกไปหา user ที่เรากำหนด

ทีนี้เราจะเอา JSON มาใส่ใน line 4 ได้อย่างไร วิธีการนำมานั้นง่ายมาก โดยการใช้วิธีที่เราถนัดที่สุด command + c (ctrl + c เดี๋ยว window จะน้อยใจ) จาก ช่อง JSON ใน LINE Bot Designer นั่นเอง

เมื่อเราทำการ copy JSON มาแล้วก็นำมาใส่ใน line ที่ 4 ได้เลย แบบนี้

แต่ๆๆๆๆ เดี๋ยวก่อน ถ้าใครเป็นแฟนพันธ์แท้ ที่เข้าไปอ่าน document มาก่อน จะเห็นผิดพลาด อยู่ 1 จุด นั่นก็คือ JSON ที่เราได้มาจาก LINE Bot Designer จะไม่ได้ระบุ ข้อมูลตั้งต้นของ Flex Message มาให้นั่นเองดังนั้นเราต้องทำการใส่ให้มันก่อน แบบนี้

หลังจากที่เราทำการใส่ JSON ไปแล้วก็สามารถที่จะทำการทดลอง push message ไปหา user ได้เลย ก็จะได้ message ที่สวยงามแบบนี้

ช่วงนี้ชี้แนะ มีคนถามว่าถ้าเกิดต้องการที่จะทำ dynamic data หรือ แสดงผลข้อมูลจากการดึงข้อมูลมาจะทำอย่างไรได้บ้าง จริงๆ แล้วสามารถทำได้หลายวิธี เช่น เราสามารถที่จะนำ variable ที่กำหนดไปใส่ใน JSON ได้เลย แบบนี้

หรือจะ hardcore กว่านั้นก็สามารถที่จะใส่ข้อมูลที่เราต้องการหลังจากที่ convert เป็น array แล้วก็ได้เช่นกัน แบบนี้

วิธีแบบหลังจะต้องทำการนั่งไล่ลำดับของ array ซึ่งค่อนข้างใช้เวลาเหมือนกันถ้าหากว่า Flex Message ของเรามีความซับซ้อนสูง แต่ถ้าเกิดว่า เราต้องทำการ dynamic ข้อมูลที่มากกว่านี้เช่น ต้องมีการ loop เพื่อแสดงข้อมูล หลายๆบรรทัด วิธีการเหล่านี้ก็ค่อนข้างยุ่งยาก โดยปกติผมจะทำการ แปลงจาก JSON มาเป็น code php ก่อนแล้วค่อยนำมาทำต่อ แต่ก็ใช้เวลานานทีเดียวกว่าจะแกะได้ แต่ละ Flex

PART 5— Special

มาถึง part สุดท้ายพิเศษสุดๆ วันนี้ผมมี ของขวัญพิเศษสำหรับ ชาว php ของเรากันนนน นั่นก็คือๆๆๆๆ ระบบ convert JSON เป็น php code โดยที่ไม่ต้องไปนั่งแกะ JSON ให้เมื่อยกัน ครับผมมมม วิธีใช้ก็สุดแสนจะง่ายดาย ก่อนอื่นเข้าไปที่ https://line.amn-corporation.com/convert/flex จะพบหน้าจอ แบบนี้

วิธีการใช้งานนะครับสุดแสนจะง่ายดายนำ JSON ที่เราได้จาก LINE Bot Designer มาวางเลยครับแบบนี้

หลังจากนั้นกดปุ่ม convert ครับ ระบบจะทำการ convert JSON เป็น php code ให้และ download ลงมาเป็น file .php

เปิด file .php ขึ้นมาครับ และ ทำการ copy source code ในส่วนนี้ไปวางแทนที่ได้เลยแบบนี้

ทีนี้เราก็สามารถที่จะปรับเป็น dynamic แบบไหนก็ได้ตามใจชอบเลย

เป็นอย่างไรกันบ้างครับกับ EP.5 ที่มาพร้อมกับของแถมที่จะช่วยให้เราสนุกไปกับการ coding มากยิ่งขึ้น หวังว่าเพื่อนๆ จะชอบ และ สนุกไปกับการ coding นะครับ สำหรับวันนี้ กวิ้น ขอหลบกลับไปทำงานก่อน สวัสดีครับ /\

ตอนนี้ LINE Developers เรามีแฟนเพจแล้วนะจ๊ะอย่าลืมไปกด LIKE กันด้วยนะ

https://www.facebook.com/LINEDEVTH

ส่วนใครที่ยังไม่ได้เข้าร่วมกลุ่มกับเรา คลิ๊กที่นี่ได้เลย

https://www.facebook.com/groups/LINEDEVTH

Resources

Developer console
https://developers.line.biz/en/

Messaging API Document
https://developers.line.biz/en/docs/messaging-api/

Messaging API Reference
https://developers.line.biz/en/reference/messaging-api/