LIFF v2, the latest Webview SDK lets you leverage LINE

Slide 1

Slide 1 text

2019 DevDay LIFF V2, the Latest Webview SDK Lets You Leverage LINE > Takuya Okamoto > LINE Kyoto Developer Division, UIT Team Frontend Engineer

Slide 2

Slide 2 text

> UIT Team1, Kyoto Developer Division > LIFF SDK / LINE Login  Front-End Engineer Okamoto Takuya

Slide 3

Slide 3 text

Quick Questions

Slide 4

Slide 4 text

LINE Front-End Framework LIFF V2

Slide 5

Slide 5 text

LIFF Is Available on LINE Developers Search Keyword: “LIFF”

Slide 6

Slide 6 text

Advantages of LIFF v2 > Works if LINE is installed > Deeplink automatically handles various user environments No App Installation Required Integrated with LINE platform > Profile API, Messaging API > OpenID Connect, Bot Link > New APIs (liff.scanCode, liff.shareTargetPicker, etc) Easy Development > Web application (HTML, CSS, JavaScript) > Build applications including serverless > Can be developed in the same way as a general web application In comparison with native application

Slide 7

Slide 7 text

Integrated With LINE Platform LINE  Login LIFF

Slide 8

Slide 8 text

To Use LINE Login

Slide 9

Slide 9 text

Login With LIFF liff.init({ liffId: myLiffId }) .then(() => { if (liff.isLoggedIn()) { liff.getProfile() } else{ liff.login() } })

Slide 10

Slide 10 text

Use Cases  With LIFF V2 Features

Slide 11

Slide 11 text

With QR Feature Fukuoka Marathon 2019 App

Slide 12

Slide 12 text

Ƃ With Cross Browser LIFF Playground

Slide 13

Slide 13 text

With Sharing Feature (Incoming) Coming Soon / Jorudan

Slide 14

Slide 14 text

Subtitle 30pt / Arial / Normal In the Near Future Provide type definition files And more features… Release NPM package

Slide 15

Slide 15 text

Live Coding

Slide 16

Slide 16 text

> User Name, User Profile Picture Show User Information Say Hello on Chatroom  > Only Supported on LIFF On GitHub Pages  > https://manyhotcakes.github.io/LIFF_LIVECODING_2019/ Target

Slide 17

Slide 17 text

Prepare Beforehand Login With Your LINE Account

Slide 18

Slide 18 text

Prepare Beforehand See Also: LINE Developers Channel Login AppType Web URL Your Page  Scope openId, Profile, Chat_Message.Write URL Your Page Create  Channel Create  LIFF App Set Login  Redirect URL Create  Provider

Slide 19

Slide 19 text

Create LIFF App LIFF ID = Last Part of LIFF URL = 1653399672-jWXpkKdz Your Website’s URL Scope

Slide 20

Slide 20 text

Set Login Redirect URL Set Your Website URL As Callback URL

Slide 21

Slide 21 text

How To Install LIFF SDK

Slide 22

Slide 22 text

Start Working!

Slide 23

Slide 23 text

How to Debug on LINE > line://app/1653399672-jWXpkKdz  OR https://liff.line.me/1653399672-jWXpkKdz Put Your LIFF URL on Some Chat Room and Open It