Introduction to LIFF/LINE Mini App - Characteristics and Practical Development

Ching-Wen Hu
LINE / Developer Product Management team / Project Manager
Taiki Ikeda
LINE / Front-end Dev7 / Front-end Engineer

https://linedevday.linecorp.com/2021/ja/sessions/151
https://linedevday.linecorp.com/2021/en/sessions/151
https://linedevday.linecorp.com/2021/ko/sessions/151

Transcript

2. - Project Manager - LINE Front-end Framework (LIFF) / LINE Login - Former QA Lead of LIFF / LINE Login Hu Ching-wen (Maru) - Frontend Engineer - LINE Front-end Framework (LIFF) / LINE Design System Global (LDSG) Ikeda Taiki
3. What is LIFF?
4. - LINE Front-end Framework (LIFF) - Integration with LINE platform - Authentication - User profile - Messaging API - JS SDK - Lineup - LIFF App, LINE MINI App What is LIFF
5. LIFF vs MINI Excerpted from LINE API Use Case LIFF App LINE MINI App Tech Stack LIFF SDK LIFF SDK Operation Env LINE App (SP) General Browsers (PC, SP) LINE App (SP) LINE review and approval None Required Service Message chat room Not available Available to all apps
6. Samples for LIFF App① LINE Family Services LINE Official Account LINE NEWS LINE Stickershop
7. Samples for LIFF App② Third Party Apps プレイルーム THE BINGO enpay スマート相続アプリ
8. Samples for LINE MINI App① Table order system : アガリコ餃⼦楼 新宿⼩⽥急ハルク店 Step1: Scan code Order Reception Check out 80~90% of customers who visit the store use the LINE MINI app.
9. Samples for LINE MINI App② Reservation and membership card system: eimʢΤΠϜʣ Step1: Scan code Member’s card Service message Official account Coupon More than 70% of customers visiting shops have become members via the LINE MINI App
10. Characteristics of LIFF The strengths of LIFF as a platform Channel consent simplification Cross-browser support Modal window which enables users to focus on main tasks Provision of utilities Powerful and unique functions LINE Login integration
11. LINE Login integration Can get user profile information safely without complex settings Step1: Scan code
12. Initialization Process with LIFF SDK
13. Cross-browser support LIFF Playground
14. Powerful and unique functions -*''
    4IBSF
    5BSHFU
    1JDLFS Select multiple items at once
15. - liff.scanCodeV2 - Code scan function using WebRTC - liff.isApiAvailable - liff.getLineVersion - liff.getOS Provision of utilities
16. Modal window which enables users to focus on main tasks Improve UX of users leaving services unintentionally (coming soon)
17. Simplified user agreement Integrate the agreement process for LINE MINI App into one step When accessing LINE MINI App A for the first time When accessing LINE MINI App B for the first time
18. - “liff.referrer” query parameter - You can get the referrer of the page before transition between LIFFs from URL - Dark mode support (coming soon) What else?
19. - LIFF - https://developers.line.biz/en/docs/liff/#line-front-end-framework - LINE MINI App - https://developers.line.biz/en/docs/line-mini-app/ - LINE API Use Case - https://lineapiusecase.com/en/api/miniliff.html Visit LINE Developers for more details J
20. Getting Started with LIFF Development - Register your LIFF application on the LINE Developers Console - Create LIFF application with LIFF JavaScript SDK
21. Register LIFF App Create Provider Create Channel Create LIFF
22. Register LIFF App
23. :PVS
    "QQ
    /BNF :PVS
    "QQ
    PS
    8FCTJUF
    63-
24. Create Web App with LIFF SDK $ npm install @line/liff $ yarn add @line/liff How to install LIFF SDK
25. Create Web App with LIFF SDK How to write this on Next.js / Nuxt.js / Svelte…? Initialize LIFF
26. npx @line/create-liff-app
27. Deploy your app and make sure that you have right Endpoint URL
28. How to Debug on LINE
29. Summary - Register LIFF on Developers Console - Build LIFF App with LIFF SDK - Installation - liff.init - npx @line/create-liff-app - Debug on LINE
30. Pain Points on Developer Experience • Potential issues of documentation • Hard to debug • Cannot see the logs • Local development • Hard to customize Please check next session: For Improvement of Developer Experience of All LIFF App Developers
31. Thank You