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

Deep Dive into LIFF v2

Deep Dive into LIFF v2

B29f42636a5f1249b640473d49aa4514?s=128

LINE Developers Thailand

December 12, 2019
Tweet

Transcript

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

    Thailand
  2. 2 LIFF LINE Front-End Framework

  3. Multiple View Types Compact Full Tall

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

  5. Send Messages • Text • Sticker • Image • Video

    • Flex Message • Audio • Location • Template Messages
  6. Does it support in external browser?

  7. Paint point in LIFF v1

  8. What!

  9. Say hello to LIFF v2 The Next Generation of LINE

    Front-End Framework
  10. External Browser in LIFF v2

  11. Modern Browser Supported

  12. LINE Login v2.1 Integration

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

  14. Email liff.getDecodedIDToken().email

  15. Bot Link Normal Aggressive

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

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

    something } })
  18. Universal Link line://app/LIFF-ID https://liff.line.me/LIFF-ID

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

  20. 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!
  21. Share Target Picker • Share message to friends or groups

    • Image, Video and Flex Message are available • This API will coming soon
  22. ♥ LIFF v2

  23. How to develop LIFF v2

  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
  25. Create a Login Channel https://developers.line.biz/console/

  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
  27. Create a LIFF app https://developers.line.biz/console/

  28. 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
  29. Initialize LIFF with Login <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script> <script> liff.init({ liffId: YOUR-LIFF-ID

    }).then(() => { if (liff.isLoggedIn()) { liff.getProfile() } else { liff.login() } }) </script> 1 2
  30. LIFF v2 Starter https://github.com/line/line-liff-v2-starter

  31. 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)
  32. 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
  33. Publishing https:/developers.line.biz/console/

  34. How to debug it?

  35. vConsole A lightweight front-end developer tool for mobile web page.

    https://github.com/Tencent/vConsole
  36. 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()
  37. One more thing...

  38. LINE MINIAPP Publishing platform for apps developed by LIFF

  39. Better Discoverable • Listing in Services tab • Searchable in

    LINE Search Shareable to friends or groups • Deeplink sharing • Flex Message sharing Feature Highlight
  40. Pilot Launch with LINE ScaleUp

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