หลักสูตร LINE LIFF and MINI App Development เป็นการอบรมพัฒนาเว็บแอปที่ทำงานใน LINE ด้วย LIFF SDK และ React ตั้งแต่ Login ส่งข้อความ ตรวจสอบ ID Token ที่ Backend เชื่อม Messaging API จนถึงต่อยอดเป็น LINE MINI App เหมาะกับนักพัฒนาเว็บและทีมที่ดูแล LINE OA จบแล้วได้แอปจองคิวพร้อมบัตรสมาชิกต้นแบบ
LINE เป็นแอปที่คนไทยจำนวนมากใช้ติดต่อกับร้านค้าและบริการ ธุรกิจจำนวนมากจึงอยากให้ลูกค้าจองคิว สมัครสมาชิก สะสมแต้ม หรือกรอกแบบฟอร์มได้ในแชตเดียวกับที่คุยกับร้าน โดยไม่ต้องติดตั้งแอปเพิ่ม LIFF (LINE Front-end Framework) คือคำตอบของโจทย์นี้ เพราะทำให้เว็บแอปทำงานอยู่ใน LINE รู้ว่าผู้ใช้คือใคร และส่งข้อความกลับเข้าแชตได้ แต่การพัฒนาให้ใช้งานได้จริงยังมีรายละเอียดที่ต้องรู้ ทั้งการตั้งค่า Channel การยืนยันตัวตนผู้ใช้ที่ฝั่ง Server อย่างปลอดภัย และการเชื่อมกับ LINE Official Account
หลักสูตรนี้พาผู้เรียนพัฒนาเว็บแอปที่ทำงานใน LINE ด้วย LIFF SDK และ React หรือ Next.js ตั้งแต่สร้าง Channel และ LIFF App ใน LINE Developers Console การ Login และดึงข้อมูลผู้ใช้ การส่งข้อความ แชร์ และสแกน QR Code ไปจนถึงการตรวจสอบ ID Token ที่ Backend สร้างระบบสมาชิก และเชื่อมกับ Messaging API เพื่อแจ้งเตือนผู้ใช้ จากนั้นต่อยอดสู่ LINE MINI App ทั้งโครงสร้าง Channel ความต่างระหว่าง Verified และ Unverified MINI App และขั้นตอนยื่นตรวจสอบ ปิดท้ายด้วยการ Deploy และ Capstone แอปจองคิวพร้อมบัตรสมาชิกดิจิทัล (อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง ระดับ Intermediate)
รายละเอียดหลักสูตร
หลักสูตรนี้อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Lab ที่พัฒนาแอปจริงหนึ่งตัวต่อเนื่องตลอดหลักสูตรและทดสอบบนมือถือของผู้เรียน ระดับ Intermediate ใช้ LIFF SDK ร่วมกับ React หรือ Next.js และ Backend ด้วย Node.js ผู้เรียนสร้าง Provider และ Channel ด้วยบัญชี LINE ของตนเอง เนื้อหาครอบคลุม
LIFF App การตรวจสอบ ID Token ที่ Backend ระบบสมาชิก Messaging API และการต่อยอดเป็น LINE MINI App แบบ Unverified พร้อมอธิบายขั้นตอนยื่นตรวจสอบเป็น Verified MINI App ซึ่งผลการพิจารณาขึ้นกับ LINE ผู้เรียนจะได้ Lab Guide โค้ดตัวอย่างครบทุก Lab และโปรเจกต์ Capstone แอปจองคิวและบัตรสมาชิกกลับไปใช้งานต่อ
Section 1: รู้จัก LIFF และ LINE MINI App
LIFF คืออะไร ทำงานใน LINE และใน External Browser ต่างกันอย่างไร
ตัวอย่างการใช้งาน: จองคิว บัตรสมาชิก สะสมแต้ม และแบบฟอร์ม
ภาพรวมสถาปัตยกรรม: LIFF App, Backend, Messaging API และ LINE Official Account
ทิศทางการรวม LIFF เข้ากับ LINE MINI App และผลต่อการเริ่มโปรเจกต์ใหม่
Section 2: Lab: สร้าง Provider, Channel และ LIFF App
Provider และ Channel ใน LINE Developers Console
เลือกระหว่าง LINE Login Channel กับ LINE MINI App Channel
ตั้งค่า LIFF App: ขนาดหน้าจอ Full, Tall, Compact, Endpoint URL แบบ HTTPS และ Scope
Lab: สร้าง LIFF App แรกและเปิดผ่าน LIFF URL บนมือถือ
Section 3: Lab: ตั้งโปรเจกต์ด้วย React หรือ Next.js
ติดตั้ง @line/liff และเรียก liff.init() ครั้งเดียวต่อการโหลดหน้า
ใช้ Create LIFF App เป็นจุดเริ่มต้น และจัดการ LIFF ID ผ่าน Environment Variable
ทดสอบบนมือถือผ่าน HTTPS Tunnel และ Debug ด้วย LIFF Inspector
Lab: โครงแอป React ที่แสดงสถานะการเชื่อมต่อกับ LIFF
Section 4: Login และข้อมูลผู้ใช้
isInClient(), isLoggedIn(), login() และ logout() ในแต่ละสภาพแวดล้อม
getProfile(), getContext() และ getOS() สำหรับปรับการทำงานของแอป
Access Token กับ ID Token ต่างกันอย่างไร และทำไมต้องขอ Scope openid
Lab: หน้าโปรไฟล์ที่รองรับทั้งการเปิดใน LINE และใน Browser
Section 5: Lab: ส่งข้อความ แชร์ และเปิดหน้าต่าง
sendMessages() กับเงื่อนไขการใช้งานและ Scope chat_message.write
shareTargetPicker() สำหรับให้ผู้ใช้แชร์ไปยังเพื่อนหรือกลุ่ม
ส่ง Flex Message ที่ออกแบบเอง และใช้ openWindow() กับ closeWindow()
Lab: ปุ่มแชร์คูปองเป็น Flex Message ไปให้เพื่อน
Section 6: Lab: สแกน QR Code และออกแบบ UX ใน LINE
scanCodeV2() สำหรับสแกน QR Code และข้อจำกัดตามสภาพแวดล้อม
ออกแบบหน้าจอให้เหมาะกับขนาด LIFF และการใช้งานบนมือถือ
ลดขนาด SDK ด้วย Pluggable SDK และทดสอบด้วย LIFF Mock
Lab: หน้าเช็กอินหน้าร้านด้วยการสแกน QR Code
Section 7: Lab: ตรวจสอบ ID Token ที่ Backend
ทำไมห้ามเชื่อ User ID หรือโปรไฟล์ที่ส่งมาจากหน้าเว็บโดยตรง
ส่ง ID Token ไปยัง Server และตรวจสอบผ่าน LINE Login API
ตรวจ Channel ID และวันหมดอายุ แล้วสร้าง Session ของแอป
Lab: Node.js API ที่ยืนยันตัวตนผู้ใช้จาก LIFF อย่างปลอดภัย
Section 8: Lab: ระบบสมาชิกและฐานข้อมูล
ออกแบบตารางสมาชิกที่ผูกกับ LINE User ID
สมัครสมาชิกครั้งแรก เก็บความยินยอม และข้อมูลที่จำเป็นตามหลัก PDPA
บัตรสมาชิกดิจิทัลพร้อม QR Code และระบบสะสมแต้ม
Lab: หน้าสมัครสมาชิกและบัตรสมาชิกที่อ่านข้อมูลจาก API
Section 9: เชื่อม LIFF กับ Messaging API
ผูก LINE Official Account กับ LINE Login Channel และชวนผู้ใช้เพิ่มเพื่อน
Push Message จาก Backend หลังผู้ใช้ทำรายการใน LIFF
เปิด LIFF App จาก Rich Menu และลิงก์ในข้อความ
Lab: แจ้งยืนยันการจองเข้าแชตพร้อมปุ่มเปิดรายละเอียดใน LIFF
Section 10: ต่อยอดเป็น LINE MINI App
LINE MINI App คืออะไร และต่างจาก LIFF App บน LINE Login Channel อย่างไร
โครงสร้าง Channel สำหรับ Developing, Review และ Published
Verified กับ Unverified MINI App ฟีเจอร์ที่ต่างกัน และเงื่อนไขในประเทศไทย
ภาพรวมขั้นตอนยื่นตรวจสอบ นโยบาย และแนวทางด้านประสิทธิภาพ
Section 11: Lab: Deploy และเตรียมขึ้น Production
Deploy Frontend และ Backend บนบริการที่รองรับ HTTPS
แยก LIFF App สำหรับ Development และ Production
ความปลอดภัย: CORS, การเก็บ Secret และการจัดการ Token
Lab: นำแอปขึ้นระบบจริงและทดสอบบนมือถือของผู้เรียน
Section 12: Workshop: Capstone แอปจองคิวและบัตรสมาชิก
ออกแบบ Flow ตั้งแต่เปิดจาก Rich Menu จนได้รับข้อความยืนยัน
พัฒนาหน้าจองคิว หน้าบัตรสมาชิก และ API ที่ตรวจสอบ ID Token
ส่งแจ้งเตือนผ่าน Messaging API และทดสอบทั้งใน LINE และ Browser
นำเสนอผลงาน รีวิวร่วมกัน และสรุป Checklist ก่อนเปิดให้ลูกค้าใช้
ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770
LIFF (LINE Front-end Framework) คือแพลตฟอร์มสำหรับเปิดเว็บแอปภายในแอป LINE โดยใช้ LIFF SDK ดึงข้อมูลโปรไฟล์ผู้ใช้ ส่งข้อความเข้าแชต แชร์ไปยังเพื่อน หรือสแกน QR Code ได้ นิยมใช้ทำหน้าจองคิว บัตรสมาชิก สะสมแต้ม และแบบฟอร์ม เพราะผู้ใช้ไม่ต้องติดตั้งแอปเพิ่ม และเข้าใช้งานต่อจากแชตกับ LINE Official Account ได้ทันที
ข้อมูลอย่าง User ID หรือโปรไฟล์ที่ส่งมาจากหน้าเว็บอาจถูกปลอมได้ Backend จึงไม่ควรเชื่อค่าเหล่านี้โดยตรง วิธีที่ถูกคือให้ LIFF App ส่ง ID Token ไปยัง Server แล้วตรวจกับ LINE Login API ว่า Token ถูกต้อง ออกให้ Channel ID ของเรา และยังไม่หมดอายุ จากนั้นจึงใช้ User ID ใน Token สร้าง Session ของแอป ทั้งนี้การขอ ID Token ต้องเปิด Scope openid
LINE MINI App ใช้เทคโนโลยีเดียวกับ LIFF แต่สร้างบน LINE MINI App Channel แทน LINE Login Channel และมี Channel แยกสำหรับช่วง Developing, Review และ Published แบบ Verified ต้องยื่นให้ LINE ตรวจสอบและได้ฟีเจอร์มากกว่า ส่วนแบบ Unverified เปิดใช้ได้โดยไม่ต้องผ่านการตรวจแต่มีข้อจำกัดมากกว่า การเลือกจึงขึ้นกับฟีเจอร์ที่ต้องใช้และเวลาที่ยอมรอการพิจารณา
เหมาะกับ Frontend และ Full-stack Developer ที่พัฒนาบริการบน LINE นักพัฒนาที่ดูแล LINE Official Account และอยากเพิ่มหน้าสมาชิกหรือจองคิว และผู้ที่เคยทำ LINE Chatbot แล้วอยากต่อยอดเป็นเว็บแอป ควรเขียน JavaScript ระดับใช้งาน เข้าใจ HTML, CSS และ Fetch API มีพื้นฐาน React หรือเฟรมเวิร์กเว็บอื่น และหากมีพื้นฐาน Node.js จะเป็นประโยชน์
สร้างและตั้งค่า LIFF App ใน LINE Developers Console พัฒนาด้วย LIFF SDK ร่วมกับ React หรือ Next.js ใช้ Login ส่งข้อความ แชร์ และสแกน QR Code ตรวจ ID Token ที่ Backend และผูกกับระบบสมาชิก ส่งข้อความผ่าน Messaging API และ Deploy ขึ้น Production ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้
ควรมีโน้ตบุ๊กที่ติดตั้ง Node.js, Git และ VS Code ได้ และสมาร์ตโฟนที่ติดตั้ง LINE สำหรับทดสอบ เพราะ Lab ทดสอบแอปบนมือถือของผู้เรียน และผู้เรียนสร้าง Provider กับ Channel ด้วยบัญชี LINE ของตนเอง ผู้เรียนจะได้โค้ดตัวอย่างครบทุก Lab และโปรเจกต์แอปจองคิวและบัตรสมาชิกกลับไปใช้งานต่อ
LINE เป็นช่องทางหลักที่ลูกค้าในไทยใช้ติดต่อธุรกิจ Chatbot บน LINE Official Account จึงช่วยตอบคำถามที่ถามซ้ำ ๆ รับข้อมูล และส่งต่องานได้ตลอดเวลา Dialogflow ของ Google ช่วยให้บอทเข้าใจข้อความภาษาไทยที่พิมพ์ได้หลายแบบด้วย Intent และ Entity…
องค์กรไทยแทบทุกแห่งใช้ LINE เป็นช่องทางสื่อสารหลัก ทั้งไลน์กลุ่มทีมงานและ LINE Official Account แต่งานสื่อสารเหล่านั้นยังทำด้วยมือเกือบทั้งหมด ทั้งการแจ้งประกาศ การสรุปประชุมจากแชทกลุ่ม การติดตามงานที่มอบหมายกันในไลน์ และการทำรายงานส่งผู้บริหารทุกเช้า วันนี้…
