LINE MINI App ตอนที่ 1 : ทำความรู้จัก MINI App Channel
หลายคนน่าจะเคยได้ยินข่าวหรือผ่านหูผ่านตาเกี่ยวกับ LINE MINI App มาบ้างแล้ว แต่ถ้าใครยังไม่รู้ว่า LINE MINI App คืออะไร ลองศึกษาได้จาก บทความนี้ก่อนได้เลยครับ
สำหรับบทความที่ผมจะเขียนเกี่ยวกับ LINE MINI App นี้ จะแบ่งออกเป็น 5 ตอน ดังนี้นะครับ
ตอนที่ 1 : ทำความรู้จัก MINI App Channel
ตอนที่ 2 : การทำ Custom Action เพื่อ Share Message (coming soon)
ตอนที่ 3 : การส่ง Service Messages (coming soon)
ตอนที่ 4 : การ Submit App เพื่อ Review (coming soon)
ตอนที่ 5 : เทคนิคอื่นๆที่ควรรู้ในการทำ MINI App (coming soon)
วันนี้เรามาเริ่มตอนที่ 1 โดยเริ่มต้นจากการสร้าง LINE MINI App Channel กันเลย
การสร้าง LINE MINI App ก็จะคล้ายๆกับการสร้าง Chatbot หรือ LIFF ที่ต้องสร้าง Channel ขึ้นมาก่อน
วันนี้เราจะมาสร้าง Channel อีกชนิดหนึ่งที่ชื่อว่า LINE MINI App Channel กันครับ
เริ่มจาก Create a New Channel ที่ LINE Developers Console แล้วเลือก channel type เป็น “LINE MINI App” เลย
บางคนอาจจะยังสร้างไม่ได้ เพราะต้องผ่านการรีวิวจากทางไลน์ก่อน มันก็จะมี Process เพิ่มเติมซึ่งทางไลน์ก็จะช่วยประสานงานให้ครับ ซึ่งเงื่อนไขเบื้องต้นในการสมัคร มีดังนี้
ผู้พัฒนาเป็นบริษัทหรือองค์กรที่จดทะเบียนอย่างถูกต้อง (จะมีการขอเอกสารภายหลัง)
ร่าง Proposal เบื้องต้นว่าต้องการทำบริการอะไร, Market size เท่าไร , มี Techstack หรือ Architecture คร่าวๆก็พอนะครับ
ส่งรายละเอียดและ Proposal ผ่าน Email มาได้ที่ dl_api_th@linecorp.com ครับ
เมื่อกดสร้างได้แล้ว ที่หน้าจอ Create a new Channel ให้ระบุข้อมูลดังนี้
- Channel type : ตรวจสอบให้แน่ใจว่าเลือกเป็น “LINE MINI App”
- Region to provide the service : เลือก “Thailand”
Channel icon แนะนำให้ปล่อยว่างไว้ก่อน เพราะมีข้อกำหนดที่ต้องใส่ใจ หลายประเด็น เดี๋ยวเราค่อยมาระบุกันในตอนหลังนะครับ - Channel name : ให้ตั้งชื่อ App ของเราได้เลย (ห้ามมีคำว่า LINE ในชื่อ)
- Channel description : คำอธิบายสั้นๆเกี่ยวกับ App ของเรา
- Email address : อย่าลืมระบุ email address ที่ติดต่อได้
- Terms of use URL : ใส่ภายหลังได้
- กดยอมรับเงื่อนไขต่างๆ ให้ครบ
แล้วกด “Create” ได้เลย
กด Accept อีกครั้งหนึ่ง เป็นอันเรียบร้อย จะได้หน้าตาแบบนี้ครับ
ส่วนประกอบของ LINE MINI App Channel
จากรูปด้านบน จะเห็นว่า ประกอบไปด้วย 5 state ดังนี้
- Developing : คือ state ปัจจุบัน ซึ่งคือ state ที่กำลังพัฒนา App นี้อยู่
- Review Requested : เมื่อนักพัฒนา พัฒนา App เสร็จแล้ว จะต้องทำการส่ง Submit เพื่อขอ Review จากทีมงานของ LINE
- Reviewing : คือ state ที่กำลังอยู่ระหว่างการพิจารณาของ LINE
- Approved คือ state ที่ได้รับอนุมัติแล้ว พร้อมที่จะปล่อยออกสู่งผู้ใช้งานจริง
- Published คือ state ที่ปล่อยให้ผู้ใช้งานจริง เข้ามาใช้งานได้แล้ว
วันนี้เราจะมา focus ที่ state “Developing” กันก่อนนะครับ
1. Developing State
หน้าจอนี้ จะแบ่งย่อยออกเป็นอีก 7 ส่วน ได้แก่
Basic Setting
ส่วนนี้จะเป็นข้อมูลพื้นฐานของ Channel นี้
โปรดสังเกตตรง Channel ID จะไม่ได้มีอันเดียว เหมือนกับ Messaging API Channel หรือ LINE Login Channel
แต่กลับให้มาถึง 3 อัน เนื่องจากตามโครงสร้างของ LINE MINI App นั้น จะสร้างสิ่งที่เรียกว่า Internal Channel ขึ้นมาพร้อมกันเลย 3 Channel เพื่อใช้ในโอกาสที่แตกต่างกัน ดังนี้
Developing คือ Channel สำหรับใช้ตอนช่วงกำลังพัฒนา
Review คือ Channel สำหรับทีมงาน LINE ใช้ตอน Review
Published คือ Channel สำหรับลูกค้าจริงๆมาใช้งาน
เมื่อมี Channel ID สำหรับ Internal Channel ต่างๆที่แตกต่างกันแล้ว Channel Secret ก็จะแยกกันใช้คนละชุดด้วยเช่นกัน
นอกจากนี้ LINE MINI App Channel ยังมี Linked OA เหมือนกับ LINE Login Channel ด้วย
Business information
หัวข้อเกี่ยวกับข้อมูลทางธุรกิจของ App นี้ ประกอบด้วย
- Customer support information เป็นข้อมูลติดต่อสำหรับ Customer Support
2. Service company information เป็นข้อมูลเกี่ยวกับบริษัทผู้ให้บริการ App นี้
3. Development company information ข้อมูลของบริษัทผู้พัฒนาระบบ
ถ้า Service company เป็นผู้พัฒนาเอง ก็ระบุเหมือนกันได้
หรือไม่ก็ระบุข้อมูลของบริษัทผู้พัฒนาแทน
4. Provider information เป็นการระบุว่า Provider ที่ใช้งาน เป็นของ Service company หรือ Development company
ส่วนนี้เราค่อยมากรอกตอนที่จะ Review ก็ได้
Contact information
ส่วนนี้เป็นข้อมูลติดต่อ สำหรับให้ทีมงาน LINE ใช้ติดต่อกับทีมผู้ให้บริการ/ผู้พัฒนาระบบ
ยกเว้นการแจ้งผล Review ซึ่งจะแจ้งไปยัง Email ที่ระบุไว้ใน Business information tab และ channel email address ที่ระบุไว้ใน Basic settings tab แทน
ส่วนนี้เราค่อยมากรอกตอนที่จะ Review ก็ได้
LIFF
ส่วนนี้เป็นส่วนที่คล้ายๆกับ LIFF tab ใน LINE Login Channel คือมีไว้สำหรับ config LIFF App นั่นเอง
อย่างแรกเลย จะมี Option “shareTargetPicker” เอาไว้ตั้งค่าการใช้งาน shareTargetPicker ได้ ใครยังไม่รู้จัก ลองศึกษาจากบทความข้างล่างนี้ได้ครับ
นอกจากนี้ยังมี option ให้เลือกเปิดให้ LINE MINI App ให้ทำงานบน browser สำหรับผู้ใช้ที่ไม่ใช่ LINE User อีกด้วย (ผู้ใช้นอกประเทศญี่ปุ่น ไทย ไต้หวัน เมื่อเปิด Link ของ LINE MINI App จะรัยบน browser แทนการเปิด MINI App)
ถัดมาจะเป็นส่วนของ LIFF App โดยจะมีแค่ LIFF App เดียว สำหรับแต่ละ Internal Channel เท่านั้น ไม่สามารถเพิ่ม LIFF App เองได้
สังเกตว่าในส่วนของ LIFF URL ระบบจะกำหนดมาให้เลย ไม่สามารถเพิ่มลบได้
รวมถึง LIFF app name ก็จะถูกกำหนดมาให้ตรงกันกับ Channel Name ด้วย
(หากมีการแก้ไข Channel Name แล้ว LIFF app name ของ Developing จะแก้ไขตามอัตโนมัติ
ส่วน LIFF app name ของ Review version กับ Published version จะแก้ไขตาม เมื่อมีการขอ review และ published เรียบร้อย)
ถัดมาคือส่วนของ Endpoint URL ระบบจะให้ค่า default มาด้วย
หากลองกด link ตรง LIFF URL เข้าไปดู ก็จะเห็นหน้าตาประมาณนี้
ตรงส่วน Endpoint URL นี้เอง ที่เราสามารถแก้ไขเองได้ เมื่อเราพัฒนา App เสร็จแล้ว ก็เอา URL มาระบุ ตรงนี้ได้เลย
อย่าลืมแยก URL สำหรับแต่ละ state ให้ถูกต้องนะครับ
ถัดมาก็จะเป็นส่วนที่เอาไว้ config LIFF app ตามปกติ
ถ้าสังเกตดีๆ จะเห็นของเล่นใหม่เพิ่มขึ้นมา นั่นก็คือ Header background color ส่วนนี้เอาไว้ให้เราสามารถแก้ไขสีของ Header ของ LIFF app ได้ เช่น ถ้ากำหนดแบบนี้
แล้ว LIFF app ของเรา ก็จะเปลี่ยนไปเป็นแบบนี้
ถึงตรงนี้ คงอยากเริ่ม dev กันแล้วใช่มั้ย อดใจอีกนิด ขออธิบายส่วนที่เหลือเพิ่มอีกหน่อย แล้วเดี๋ยวเราไปเริ่ม dev กันครับ
Service message template
ส่วนนี้เป็นส่วนที่เอาไว้กำหนดรูปแบบที่ระบบจะส่งข้อความหาผู้ใช้ เนื่องจากข้อความที่จะส่งหาผู้ใช้ จะต้องอยู่ใน template ที่ LINE MINI App เตรียมไว้ให้เท่านั้น
เดี๋ยวเราจะมาลงรายละเอียดกันในตอนที่ 3 นะครับ
Workflow
ส่วนนี้มีไว้อธิบายขั้นตอนการ Review ว่าเรายังต้องเตรียมข้อมูลอะไรอีกบ้าง และมาส่ง Submit Review ที่หน้านี้
เดี๋ยวเราจะมาลงรายละเอียดกันในตอนที่ 4 นะครับ
Roles
ส่วนนี้เป็นส่วนที่เอาไว้กำหนด User Role / Permission สำหรับ Channel ตามปกติครับ
เอาหล่ะ ทำความรู้จัก Console สำหรับ LINE MINI App Channel ในส่วนของ Developing กันครบแล้ว
ต่อไปเราจะเริ่มลงมือ dev กันแล้วครับ
สร้าง LINE MINI App แรก
ด้วยความที่เบื้องหลังจาก LINE MINI App ก็คือเทคโนโลยีที่ชื่อว่า LIFF นั่นเอง ดังนั้น ก่อนจะเริ่มพัฒนา MINI App ได้ เราต้องเข้าใจการทำงานของ LIFF ก่อน ซึ่งผมเชื่อว่า คนที่อ่านบทความมาถึงตรงนี้ คงต้องเคยพัฒนา LIFF App กันมาบ้างแล้ว
แต่ถ้าใครที่ยังไม่เคย ลองศึกษาเกี่ยวกับ LIFF ได้จาก codelab นี้ก่อนเลยครับ
เมื่อศึกษาเสร็จแล้ว เดี๋ยวไปต่อพร้อมๆกันเลยครับ
หลังจากที่เราเริ่มคุ้นเคยกับ LIFF แล้ว ลองเอา URL ซึ่งเป็นผลลัพธ์จาก codelab ตามรูป
มาใส่ตรง Endpoint URL ของ Internal Channel (Developing) ดูครับ
จากนั้นลอง copy LIFF URL ไปเปิดใน LINE ดู
ก็จะได้ผลแบบนี้ เลยยยยยยยย
เท่านั้น MINI App ของเราก็ทำงานได้แล้วววว แต่…
หลายคนอาจจะคิดในใจว่า LINE MINI App ต่างจาก LIFF ปกติ ตรงไหน ก็เห็นทำงานเหมือนกัน แค่เปลี่ยน Header color ได้ แค่นี้รึเปล่า
ต้องบอกว่า ใจเย็นก่อนนน นี่เแค่น้ำจิ้ม ยังไม่ถึงไก่ทอดหาดใหญ่
ยังมี features ของ LINE MINI App อีกเพียบ เช่น
- Action button ตรงมุมบนขวา นอกจากจะมี Share / Refresh แล้ว ยังมีปุ่ม
- Pin to Home tab : ปักหมุดในหน้า Home ของ LINE ได้
- Minimize browser : ย่อหน้าจอ LIFF ลงไปในห้องแชท
- More from this service provider : แสดง App อื่นๆจาก Provider เดียวกัน - Channel consent screen เป็น consent screen รูปแบบใหม่ สามารถกำหนดรูปแบบ และมีหน้าจอเปลี่ยนไปจากเดิม รวมถึงสามารถตั้งค่าให้ skip ได้ด้วย
- Custom action button สร้างปุ่ม action เพิ่มได้เอง
- Service Messages ส่งข้อความจากระบบหลังบ้านให้ผู้ใช้
- LINE Profile+ ดึงข้อมูลส่วนตัวผู้ใช้ได้เพิ่มเติม เช่น ชื่อ เพศ วันเกิด เบอร์โทรศัพท์ ที่อยู่ เป็นต้น
อย่างไรก็ตาม Action button / Channel consent screen และ LINE Profile+ ยังไม่เปิดใช้งานในประเทศไทย ตรงส่วนนี้ก็รอกันก่อนนะครับ
แต่เดี๋ยวตอนต่อไป ผมจะพาทุกคนไปลองทำ Custom action button กัน
จะเป็นการสร้างปุ่ม action เพื่อแชร์ข้อความลงไปในห้องแชท โดยใช้ความสามารถของ shareTargetPicker โดยใช้รูปแบบ Flex Message ตามที่ MINI App กำหนด
ใครสนใจ อย่าลืมกดติดตามกันไว้ แล้วพบกันในตอนที่ 2 เร็วๆนี้ครับ
ขอบคุณครับ
