Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

- 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

Slide 3

Slide 3 text

What is LIFF?

Slide 4

Slide 4 text

- 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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Samples for LIFF App① LINE Family Services LINE Official Account LINE NEWS LINE Stickershop

Slide 7

Slide 7 text

Samples for LIFF App② Third Party Apps プレイルーム THE BINGO enpay スマート相続アプリ

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

LINE Login integration Can get user profile information safely without complex settings Step1: Scan code

Slide 12

Slide 12 text

Initialization Process with LIFF SDK

Slide 13

Slide 13 text

Cross-browser support LIFF Playground

Slide 14

Slide 14 text

Powerful and unique functions -*''4IBSF5BSHFU1JDLFS Select multiple items at once

Slide 15

Slide 15 text

- liff.scanCodeV2 - Code scan function using WebRTC - liff.isApiAvailable - liff.getLineVersion - liff.getOS Provision of utilities

Slide 16

Slide 16 text

Modal window which enables users to focus on main tasks Improve UX of users leaving services unintentionally (coming soon)

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

- “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?

Slide 19

Slide 19 text

- 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

Slide 20

Slide 20 text

Getting Started with LIFF Development - Register your LIFF application on the LINE Developers Console - Create LIFF application with LIFF JavaScript SDK

Slide 21

Slide 21 text

Register LIFF App Create Provider Create Channel Create LIFF

Slide 22

Slide 22 text

Register LIFF App

Slide 23

Slide 23 text

:PVS"QQ/BNF :PVS"QQPS8FCTJUF63-

Slide 24

Slide 24 text

Create Web App with LIFF SDK $ npm install @line/liff $ yarn add @line/liff How to install LIFF SDK

Slide 25

Slide 25 text

Create Web App with LIFF SDK How to write this on Next.js / Nuxt.js / Svelte…? Initialize LIFF

Slide 26

Slide 26 text

npx @line/create-liff-app

Slide 27

Slide 27 text

Deploy your app and make sure that you have right Endpoint URL

Slide 28

Slide 28 text

How to Debug on LINE

Slide 29

Slide 29 text

Summary - Register LIFF on Developers Console - Build LIFF App with LIFF SDK - Installation - liff.init - npx @line/create-liff-app - Debug on LINE

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Thank You