LIFF v2, the latest Webview SDK lets you leverage LINE

Takuya Okamoto
LINE Kyoto Developer Division, UIT Team Frontend Engineer
https://linedevday.linecorp.com/jp/2019/sessions/S2-6

Transcript

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

   View Slide

2. > UIT Team1, Kyoto Developer Division
   > LIFF SDK / LINE Login

   Front-End Engineer
   Okamoto Takuya
   

   View Slide

3. Quick Questions
   

   View Slide

4. LINE Front-End Framework
   LIFF V2
   

   View Slide

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

   View Slide

6. 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
   

   View Slide

7. Integrated With LINE Platform
   LINE

   Login
   LIFF
   

   View Slide

8. To Use LINE Login
   

   View Slide

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

   View Slide

10. Use Cases

    With LIFF V2 Features
    

    View Slide

11. With QR Feature
    Fukuoka Marathon 2019 App
    

    View Slide

12. Ƃ
    With Cross Browser
    LIFF Playground
    

    View Slide

13. With Sharing Feature (Incoming)
    Coming Soon / Jorudan
    

    View Slide

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

    View Slide

15. Live Coding
    

    View Slide

16. > 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
    

    View Slide

17. Prepare Beforehand
    Login With Your LINE Account
    

    View Slide

18. 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
    

    View Slide

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

    View Slide

20. Set Login Redirect URL
    Set Your Website URL
    As Callback URL
    

    View Slide

21. How To Install LIFF SDK
    
    
    
    

    View Slide

22. Start Working!
    

    View Slide

23. 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
    

    View Slide

24. Result
    

    View Slide

25. Thank You
    

    View Slide