Share Target Picker ฟีเจอร์ใหม่ใน LIFF(LINE Front-end Framework)
ในที่สุด Share Target Picker ฟีเจอร์สุดเจ๋ง ที่ให้คุณสามารถแชร์ข้อความรูปแบบต่างๆจาก LIFF ไปหาเพื่อนหรือกลุ่มของคุณก็ปล่อยออกมาแล้ว หลังจากที่ทีม LINE ได้ sneak peek ตัวฟีเจอร์นี้ในงาน LINE Developer Day เมื่อปลายปี 2019 ที่ผ่านมา
ก่อนหน้านี้ เราได้รู้จักกับฟีเจอร์การส่งข้อความกลับห้องแชท(ในนามผู้ใช้) หรือ liff.sendMessages() ที่มาตั้งแต่สมัย LIFF v1 ซึ่งตัวมันก็ดันมีข้อจำกัดที่ให้เราส่งข้อความกลับไปได้แค่ห้องแชทที่เราได้เปิด LIFF ตัวนั้นขึ้นมาเท่านั้น
จึงมีเสียงเรียกร้องให้ LINE เพิ่มความสามารถของ LIFF ให้สามารถแชร์ข้อความไปหาเพื่อนหรือกลุ่มได้ด้วย และนั่นก็คือที่มาของ liff.shareTargetPicker()
5 สิ่งที่คุณต้องรู้ก่อนการพัฒนา
- Share Target Picker จะถูกรองรับในแอป LINE ตั้งแต่เวอร์ชัน 10.3.0 เป็นต้นไป
- Share Target Picker มีใน LIFF v2 เท่านั้น
- ข้อความจาก Share Target Picker จะถูกส่งในนามของผู้ใช้(เหมือนเราส่งข้อความให้เพื่อน)
- Text, Image, Video, Audio, Location, Template Messages(URI Action เท่านั้น) และ Flex Message คือข้อความที่ส่งผ่าน Share Target Picker ได้
- การเรียกใช้งาน Share Target Picker ใน External browser สามารถทำได้แต่จะต้องผ่านการ authentication ด้วย LINE Login ก่อน
ลงมือกันเลย
ขั้นตอนการพัฒนาตัว Share Target Picker ขึ้นมานั้นไม่มีอะไรซับซ้อน บอกเลย แต่ผู้อ่านจำเป็นต้องผ่านขั้นตอนต่างๆในบทความด้านล่างนี้มาก่อน
เมื่อผู้อ่านได้ผ่านขั้นตอนต่างๆด้านบนมาแล้ว ก็ให้ไปเลือก Tab ที่ชื่อว่า LIFF ใน Login Channel ที่เราสร้างขึ้นมา จะเห็นว่าตอนนี้มี Toggle ให้เปิดใช้งาน Share Target Picker อยู่ โดยเมื่อกดเปิดจะมี agreement ให้อ่านและยอมรับก่อน ซึ่งการเปิดตรงนี้ จะเป็นการเปิดให้กับ LIFF ทุกตัวที่อยู่ใน Channel นี้
คราวนี้มาในส่วนของโค้ดกัน หลังจากที่เราทำการ Initialize ตัว LIFF ด้วยคำสั่ง liff.init() แล้ว จะต้องทำการ Login ซะก่อน โดยขอแยกเป็น 2 กรณี
- ถ้ารองรับการเปิด LIFF เฉพาะในแอป LINE ก็ไม่ต้องทำอะไร เพราะการเปิด LIFF ใน LINE จะทำการ Login ให้อัตโนมัติ
- ถ้ารองรับ External browser จะต้องเรียกคำสั่ง liff.login() ซะก่อน
ถัดมา เราจะเรียกตัว Share Target Picker ขึ้นมาด้วยคำสั่ง liff.shareTargetPicker() ซึ่งฟังก์ชันนี้จะเป็น promise ที่สามารถบรรจุ object array ของข้อความได้สูงสุด 5 bubbles
อัพเดท: หากนักพัฒนาใช้ LIFF SDK v2.3.0 เป็นต้นไป และผู้ใช้งานใช้แอป LINE v10.10.1 เป็นต้นไป การเรียกฟังก์ชันนี้จะมี return ตัว object กลับมาให้เราสามารถเช็คได้ว่าข้อความได้ถูกส่งสำเร็จหรือไม่
เสร็จละ แต่เพื่อให้เข้าใจมากขึ้น ผมขอเขียนโค้ดเพิ่มสักหน่อยให้พร้อมใช้ตามนี้
จากโค้ดด้านบน เมื่อเปิด LIFF มาจะตรวจสอบก่อนว่าผู้ใช้ได้ Login มาแล้วหรือยังด้วยคำสั่ง liff.isLoggedIn() โดยถ้า
- ยังไม่ได้ Login: ปุ่ม Log In จะแสดงขึ้นมา(ซึ่งจะเกิดเฉพาะในเคสที่เปิด LIFF จาก External browser)
- Login แล้ว: ปุ่ม Share Target Picker และปุ่ม Log Out จะแสดงขึ้นมา โดยมีเงื่อนไขเพิ่มอีกนิดว่าตอนนี้ผู้ใช้เปิดในแอป LINE หรือไม่ด้วยคำสั่ง liff.isInclient() เพื่อที่จะแสดงปุ่ม Log Out กรณีที่เปิดจาก External browser
และสำหรับข้อความที่จะแชร์ ผมว่าแชร์ Text มันไม่ท้าทาย ดังนั้นแชร์ Flex Message ให้เพื่อนๆและกลุ่มต่างๆน่าจะดูตื่นเต้นกว่า
สรุป
Share Target Picker ง่ายใช่มะ ใครจะหยิบไปใช้นี่เรียกได้ว่าเป็นการลงทุนที่คุ้มค่ามากๆ โดย use case ที่ผมคิดเร็วๆออก เช่น ถ้าเราทำระบบจองตั๋ว เมื่อผู้ใช้ซื้อไป 5 ใบแล้วอยากแชร์ให้เพื่อน ก็สามารถแชร์ตั๋วที่เป็น Flex Message ให้เพื่อนได้ แทนที่จากเดิมจะต้อง capture หน้าจอ ก็คงจะสะดวกไม่น้อย ซึ่งหวังว่าผู้อ่านน่าจะได้ไอเดียในการหยิบ Share Target Picker ไปใช้ และช่วยให้การใช้งาน LINE สะดวกมากยิ่งขึ้น
และเพื่อที่คุณจะไม่พลาดบทความใหม่ๆจาก LINE Developers Thailand ก็อย่าลืมกด follow ตัว publication กันด้วยนะครับ
