Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Deep Dive into LIFF v2

Deep Dive into LIFF v2

LINE Developers Thailand

December 12, 2019
Tweet

More Decks by LINE Developers Thailand

Other Decks in Technology

Transcript

  1. Deep Dive into
    LIFF v2
    Jirawat Karanwittayakarn
    Tech Evangelist, LINE Thailand

    View full-size slide

  2. 2
    LIFF
    LINE Front-End Framework

    View full-size slide

  3. Multiple View Types
    Compact Full
    Tall

    View full-size slide

  4. Get Profile
    ● userId
    ● displayName
    ● pictureUrl
    ● statusMessage

    View full-size slide

  5. Send Messages
    ● Text
    ● Sticker
    ● Image
    ● Video
    ● Flex Message
    ● Audio
    ● Location
    ● Template Messages

    View full-size slide

  6. Does it support in
    external browser?

    View full-size slide

  7. Paint point in LIFF v1

    View full-size slide

  8. Say hello to LIFF v2
    The Next Generation of LINE Front-End Framework

    View full-size slide

  9. External Browser in LIFF v2

    View full-size slide

  10. Modern Browser Supported

    View full-size slide

  11. LINE Login v2.1 Integration

    View full-size slide

  12. Email
    https://developers.line.biz/console/

    View full-size slide

  13. Email
    liff.getDecodedIDToken().email

    View full-size slide

  14. Bot Link
    Normal Aggressive

    View full-size slide

  15. Enabling Bot Link
    LINE Login Tab
    LIFF Tab
    https://developers.line.biz/console/

    View full-size slide

  16. Get Friendship
    liff.getFriendship().then(data => {
    if (data.friendFlag) {
    // Do something
    }
    })

    View full-size slide

  17. Universal Link
    line://app/LIFF-ID
    https://liff.line.me/LIFF-ID

    View full-size slide

  18. Path and Query Parameter
    https://developers.line.biz
    liff://app/1234567890-XXXXXXXX
    https://liff.line.me/1234567890-XXXXXXXX/console/?param=value
    https://developers.line.biz/console/?param=value

    View full-size slide

  19. QR Code Reader
    Platform Version
    iOS On version 9.19.0 and later, liff.scanCode() is temporarily unavailable.
    Android Not affected for now
    * liff.scanCode() in Android supports any kind of text result by Today!

    View full-size slide

  20. Share Target Picker
    ● Share message to friends or groups
    ● Image, Video and Flex Message are available
    ● This API will coming soon

    View full-size slide

  21. How to develop LIFF v2

    View full-size slide

  22. Steps to develop LIFF v2
    1. Create Provider and Login Channel
    2. Create a LIFF app
    3. Develop a Website
    4. Deploy
    5. Update Endpoint URL and Publish

    View full-size slide

  23. Create a Login Channel
    https://developers.line.biz/console/

    View full-size slide

  24. Steps to develop LIFF v2
    1. Create Provider and Login Channel
    2. Create a LIFF app
    3. Develop a Website
    4. Deploy
    5. Update Endpoint URL and Publish

    View full-size slide

  25. Create a LIFF app
    https://developers.line.biz/console/

    View full-size slide

  26. Steps to develop LIFF v2
    1. Create Provider and Login Channel
    2. Create a LIFF app
    3. Develop a Website
    4. Deploy
    5. Update Endpoint URL and Publish

    View full-size slide

  27. Initialize LIFF with Login

    <br/>liff.init({ liffId: YOUR-LIFF-ID }).then(() => {<br/>if (liff.isLoggedIn()) {<br/>liff.getProfile()<br/>} else {<br/>liff.login()<br/>}<br/>})<br/>
    1
    2

    View full-size slide

  28. LIFF v2 Starter
    https://github.com/line/line-liff-v2-starter

    View full-size slide

  29. Steps to develop LIFF v2
    1. Create Provider and Login Channel
    2. Create a LIFF app
    3. Develop a Website
    4. Deploy
    5. Update Endpoint URL and Publish
    (HTTPS is required)

    View full-size slide

  30. Steps to develop LIFF v2
    1. Create Provider and Login Channel
    2. Create a LIFF app
    3. Develop a Website
    4. Deploy
    5. Update Endpoint URL and Publish

    View full-size slide

  31. Publishing
    https:/developers.line.biz/console/

    View full-size slide

  32. How to debug it?

    View full-size slide

  33. vConsole
    A lightweight front-end developer tool
    for mobile web page.
    https://github.com/Tencent/vConsole

    View full-size slide

  34. LIFF v2
    Cheat Sheet
    liff.init()
    SETUP & INIT
    COMMON APIs
    liff.getOS()
    liff.getLanguage()
    liff.getVersion()
    liff.isInClient()
    AUTH APIs
    liff.isLoggedIn()
    liff.login()
    liff.logout()
    liff.getAccessToken()
    liff.getDecodedIDToken()
    liff.getContext()
    HTTP APIs
    liff.getProfile()
    liff.sendMessages()
    liff.getFriendship()
    CLIENT APIs
    liff.openWindow()
    liff.closeWindow()
    liff.scanCode()
    PERMANENT LINK
    liff.permanentLink.createUrl()
    liff.permanentLink.setExtraQueryParam()

    View full-size slide

  35. One more thing...

    View full-size slide

  36. LINE MINIAPP
    Publishing platform for apps developed by LIFF

    View full-size slide

  37. Better Discoverable
    ● Listing in Services tab
    ● Searchable in LINE Search
    Shareable to friends or groups
    ● Deeplink sharing
    ● Flex Message sharing
    Feature Highlight

    View full-size slide

  38. Pilot Launch
    with LINE ScaleUp

    View full-size slide

  39. Thank You!
    @Jirawatee
    Tech Evangelist, LINE Thailand

    View full-size slide