สรุปบทเรียนการสร้าง LIFF จาก LINE x Skooldio [PART 1]

หลังจากได้ฟังความสามารถของ LIFF ในแอพพลิเคชั่น LINE มานาน แต่เราก็เป็นคนหนึ่งที่ไม่รู้จะเริ่มสร้างมันอย่างไร เพราะมีความรู้ Javascript น้อยนิด และ HTML นิดหน่อย แต่แล้วสวรรค์เปิดเมื่อทาง LINE Developers Thailand จับมือกับ Skooldio สร้างคอร์สออนไลน์ “Getting Started with LIFF Development เรียนรู้การพัฒนาแอปพลิเคชันด้วย LINE Front-end Framework” ขึ้นมา เราเลยมาเขียนบทความนี้เพื่อสรุปสิ่งที่ได้เรียนเก็บไว้อ่าน รวมลิ้งก์ทุกอย่างที่เกี่ยวกับ LIFF ไว้ที่เดียว และมาแชร์ปัญหาที่เจอระหว่างเรียนให้ฟังกัน

OUTLINE

• พาร์ทที่ 1
  — รีวิว
  — บทเรียนที่ 1: บทเกริ่นนำ
  — บทเรียนที่ 2: สิ่งที่ต้องมีในการสร้าง LIFF
• พาร์ทที่ 2
  — บทเรียนที่ 3: สร้าง LIFF App ใน LINE
• พาร์ทที่ 3
  — บทเรียนที่ 4: ฺTricks and tips for happy coding

รีวิวจากมุมคนที่มีพื้นฐาน html เล็กน้อย และ javascript ที่น้อยยิ่งกว่า

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

1. การเลือกใช้ Github Pages ในการสร้างเว็บที่ไม่ยากซับซ้อน
2. คลิปวิดีโอที่สอนให้ทำไปพร้อมกัน แยกบทเรียนแต่ละส่วนแบบละเอียด ทำให้เห็นการแยกเรื่องได้เป็นหมวด ๆ
3. ความยาวของแค่ละคลิปไม่เกิน 5 นาที ไม่มีหลับแน่นอน
4. การอธิบายแต่ละบท และโค๊ด แต่ละบรรทัดเข้าใจง่าย และสนุกสไตล์คุณตี๋ Jirawatee

เข้ามาเรียนแต่ตัวได้เลย เพราะคอร์สนี้จะพาเราไปทำความรู้จัก LIFF จากศูนย์กันเลยทีเดียว

แต่ …

ถ้ามีพื้น JS น้อย(แบบเรา) อาจจะสามารถนำฟังก์ชั่นต่าง ๆ ของ LIFF ไปใช้ได้แค่ในระดับการแสดงผลข้อมูลผู้ใช้เท่านั้น ยังไม่สามารถเอาไปผูกกับ Login แล้วสร้างเว็บที่ซับซ้อนได้ ถ้าจะพัฒนาต่อยอด คงต้องไปพัฒนาทักษะ Javascript ของตัวเองเพิ่มอีก (เยอะ) (คอร์สฟรีที่ดีมีมากมาย เช่น freecodecamp.org) ก็จะทำให้เข้าใจฟังก์ชั่นต่าง ๆ และเล่นสนุกกับมันได้เยอะขึ้น :)

ปัญหาที่พบระหว่างเรียน

บทเรียนบางตัว เนื้อหาอาจจะไม่อัพเดทเท่า LIFF เวอร์ชั่นปัจจุบัน ทำให้ตัวอย่างในคลิปสอน อาจไม่ตรงเวลาลองทำจริง เช่น

• LIFF URL ที่เป็น universal link ตั้งแต่สร้าง LIFF ครั้งแรกแล้วโดยไม่ต้องแก้อะไร
• API สำหรับเรียก LINE LIFF SDK ก็มีการเปลี่ยนแปลงตรงเลขเวอร์ชั่นนิดหน่อย
• จำนวนฟังก์ชั่นหรือปุ่มใน index.html อาจไม่เท่ากับในคลิปสอนของบทแรก ๆ ด้วยความที่โค๊ดมีความอัพเดทกับ LIFF ปัจจุบันกว่าคลิปช่วงต้น ๆ

จบพาร์ทการรีวิว ต่อจากนี้จะเป็นการสรุปสาระที่ได้เรียนจากคอร์สไว้เป็นคติเตือนใจค่ะ

บทเรียนที่ 1: บทเกริ่นนำ

LINE Front-end Framework (LIFF) คือ เว็บที่เปิดใน LINE โดยที่ไม่ต้องเด้งออกไปแสดงบน external browser หรือ in-app browser ช่วยให้เพิ่มประสิทธิภาพให้ LINE OA ได้ดีขึ้น เช่น การสร้างฟอร์มสมาชิก การทำเว็บ e-commerce การเลือกซื้อสินค้า จำนวนมาก ๆ มี 3 ไซส์ คือ Compact (50%), Tall (75%), Full (100%)

ปัจจุบันมีตัวอย่างของ LIFF ใน LINE shopping, LINE melody, LINE Career, และ Tenor GIF ที่เอาไว้ส่งในห้องแชท

LINE mini app: บริการที่พัฒนาจาก LIFF ที่สามารถมาอยู่ในหน้า home ของแอพ LINE ได้ด้วยในอนาคต ข้อดีของ mini app คือช่วยให้ผู้ใช้เข้าถึงบริการของเราได้ง่ายขึ้นจากหน้า home หรือ search bar และยังสามารถส่ง deeplink ในแต่ละหน้าเพจ หรือ แชร์ flex message ไปให้เพื่อนหรือกลุ่มก็ได้ ปัจจุบันมี 2 บริการเปิดให้ใช้บน LINE แล้ว คือ FINNOMENA และ Seekster

ความสามารถของ LIFF

1. support external browsers: นำ LIFF URL ไปเปิดบน Google Chrome, Safari, Firefox, Microsoft Edge ได้หมดเลย

ตั้งแต่ LINE login v2.1 …

2. สามารถยืนยันตัวตน (log-in) โดยใช้ LIFF ได้เลย เพราะเวอร์ชั่นใหม่ได้ integrate LINE login SDK เข้าไปด้วยกันเเล้ว

3. สามารถเก็บข้อมูลผู้ใช้ที่เปิดใช้งาน LIFF ได้เลย เช่น userId, displayName, pictureUrl, statusMessage, email

4. สามารถส่งข้อความทุกรูปแบบ (ยกเว้น imagemap) กลับเข้าไปในห้องแชทได้จาก LIFF

5. Bot Link: แนะนำ LINE OA ผ่าน LIFF ได้ ถ้าเกิดผู้ใช้ยังไม่ได้เป็นเพื่อนกับบอทของเรา

6. QR code reader: สามารถเปิดกล้องแสกน QR code ผ่าน LIFF แล้วรับข้อมูลมาเปิดบนหน้าเว็บเราได้ แต่ตอนนี้ยังใช้ได้กับแค่ android ส่วน ios ต้องรออัพเดทจากทาง LINE ก่อนนะ

7. Share Target Picker: การส่งข้อความจาก LIFF มาที่ห้องแชท คล้าย ๆ กับข้อ 4 แต่ในข้อ 4 จะเป็นการส่งได้แค่ห้องแชทที่เปิด LIFF ขึ้นมาเท่านั้น แต่เจ้าตัวนี้จะทำให้เราส่งออกไปหาเพื่อนหรือกกลุ่มอื่น ๆ ได้ด้วย

ทั้งหมดทั้งมวลนี้จะมี code tutorial ในบทต่อไป ๆ หมดเลยยย

บทเรียนที่ 2: สิ่งที่ต้องมีในการสร้าง LIFF

1. Provider and Login Channel

ก่อนจะสร้างผลิตภัณฑ์ใด ๆ ของ LINE ได้ ก็ต้องไปสมัครบัญชี LINE developer ก่อนโดยใช้บัญชี LINE ของเรา ที่นี่

• จากนั้นก็สร้าง Provider คนที่พึ่งเข้าวงการนี้มาใหม่อาจจะงงว่า Provider คืออะไร Provider เปรียบเหมือนเป็นบริษัทหรือเจ้าของ channel ภายใต้ Provider นั้น ๆ ส่วน channel ก็เป็นเหมือนผลิตภัณฑ์หรือบริการต่าง ๆ
• ในคอร์สนี้ภายใน Provider ก็จะได้ใช้ 2 Channels:
  1) LINE Login channel สำหรับสร้าง LIFF โดยติ๊กเลือก app type เป็น web app ตอนตั้งค่า
  2) Messaging API channel สำหรับสร้าง bot ไว้ทำ bot link feature (Optional)

2. Create LIFF app

• เข้าไปที่ LINE Login Channel >>> แถบ LIFF >>> แล้วกด add
  โดยช่อง Endpoint URL ให้ใส่ลิ้งก์เว็บอะไรไปก่อนก็ได้ เดี๋ยวสร้างเว็บของตัวเองเสร็จ แล้วค่อยมาเปลี่ยน
• ในช่อง Scope, Bot link, และ Scan QR จะมีการอธิบายเพิ่มในบทถัดไป

3. Develop a Website (HTML, CSS, JS)

พอไปตั้งค่า LIFF ใน LINE developer console เสร็จแล้ว เราก็ต้องมาเตรียมเว็บที่จะใช้

1) Create Web template

• ในคอร์ส จะใช้ Github Pages ในการสร้างเว็บขึ้นมาแบบง่าย ๆ เอาไว้เก็บ ไฟล์ HTML, CSS, Javascript ที่ใช้ในการเรียน พอเข้าไปในเว็บ เราก็กดสร้าง Project site แบบดิบ ๆ ไม่ต้องมี template เลย (เพราะทาง LINE เขาเตรียม source code บางส่วนไว้ให้เริ่มต้นไปพร้อมกันเเล้ว) จากนั้นสร้าง repository ใหม่สำหรับคอร์สเรียนนี้ขึ้นมา

• ระวัง!! repository name ให้ตั้งว่า “liff” (ตัวพิมพ์เล็กทั้งหมดนะ)
• จากนั้น download โฟลเดอร์ที่ชื่อว่า liff จาก repository ของคอร์ส ที่นี่ แล้วอัพโหลดโฟลเดอร์นั้นกลับเข้าไปที่ repository ของเรา

ส่วนใหญ่ไฟล์ที่เราจะได้ใช้ คือ index.html ที่อยู่ในโฟลเดอร์ liff ซึ่งตอนแรกที่ได้มามันก็จะเป็นฟังก์ชั่นโล่ง ๆ แล้วพอเรียนแต่ละบทมันก็จะเติมเข้ามาเรื่อย ๆ เหมือนต่อจิ๊กซอว์ให้เต็ม และทุกครั้งที่มีการแก้ไขไฟล์ เราก็จะ deploy ใหม่โดยการ upload ไฟล์ index.html ที่แก้ไขแล้วกลับไปที่ repository เรา หรือจะ commit มาจาก github desktop ก็แล้วแต่สะดวกเลย

2) Deploy

ขั้นตอนสุดท้ายกับ Github Pages คือเราต้องไปตั้งค่าให้มัน deploy ก่อน

• ในหน้า liff folder ของ repository ของเราให้ไปเลือก Setting
• แล้วสไลด์ลงไปที่ GitHub Pages แล้วเปลี่ยน Source จาก None เป็น Master branch
• มันจะรีเฟรชหน้าจอ แล้วเราก็สไลด์ลงมาที่เดิมจะได้ลิ้งก์ที่สามารถเอาไปเปิดเว็บของเราที่ browser ได้

4. Update Endpoint URL of LIFF

เราก็เอาเจ้าลิ้งก์ที่เรา deploy กลับไปอัพเดท Endpoint URL ในแถบ LIFF ของ LINE Login Channel ที่เราสร้างไว้

ข้อสังเกต จะเห็นว่าแม้เราจะเปลี่ยน endpoint URL แต่ LIFF URL ของเราก็ยังเหมือนเดิม

ต่อไป พาร์ทที่ 2
— บทเรียนที่ 3: สร้าง LIFF App ใน LINE

ต่อไป พาร์ทที่ 3
— บทเรียนที่ 4: Tricks and tips for happy coding