20201017LIFF workshop at meichu

20201017LIFF workshop at meichu

20201017 梅竹黑客松賽前工作坊 with Coke

2102a6b8760bd6f57f672805723dd83a?s=128

line_developers_tw

October 17, 2020
Tweet

Transcript

  1. LIFF LINE Front-end Framework 1 LINE UIT Chien Cheng Yi

    (Coke)
  2. LINE UIT TEAM • User Interface Technology a.k.a Frontend •

    Covert business idea to real idea • Work with Japan, Korea, Thailand, Vietnam and China teams 2 JAPAN TAIWAN THAILAND KOREA VIETNAM CHINA
  3. LINE UIT TEAM Products 3

  4. LIFF LINE Front-end Framework • Combine your app with LINE,

    all together • LIFF is a platform make your web apps easily to be integrated into LINE app 4
  5. Agenda • LIFF Introduction • Start first LIFF app •

    LIFF Starter • Heroku • LINE Dev Console • LINE Flex message • Workshop • LIFF MEME • LIFF Campaign Invite 5
  6. LIFF Intro • Web application • HTML, CSS and Javascript

    • Integrate with LINE platform • LINE login • User Profile • Message API • JS SDK 6
  7. Start first LIFF app 7

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

  9. LINE LIFF Starter Deploy 9

  10. Heroku Create the 10

  11. Heroku 11

  12. Heroku Create New App 12

  13. OOPS! 13

  14. LINE Dev Console Create Channel, Create LIFF 14

  15. LINE Dev Console Create Provider, Create Channel, Create LIFF •

    https://developers.line.biz/console/ 15
  16. LINE Dev Console Create Channel 16

  17. LINE Dev Console Create Channel • Channel Type • LINE

    Login • Provider • Channel Name • Channel Description 17
  18. Channel Name Provider Channel Desc Chat Room Click 設定 ->

    我的帳號 -> 連動中的應⽤程式 18
  19. LINE Dev Console Create LIFF 19

  20. Create LIFF Scope • profie (user profile) • openid (user

    id) • chat_message.wrirte • liff could send a message 20
  21. Create LIFF Size 21

  22. Create LIFF 22

  23. Create LIFF Bot Link Feature 23

  24. Create LIFF Module mode (Only show when size is “Full”)

    • Disable • Show the share button • Enable • Hide the share button 24
  25. Create LIFF 25

  26. 26

  27. 27 https://engineering.linecorp.com/zh-hant/blog/new-liff-url-infomation/

  28. Create LIFF Copy LIFF ID Copy LIFF ID 28

  29. Back to Heroku 29

  30. Heroku Set LIFF ID 30

  31. Heroku Set LIFF ID 31

  32. Yeah! 32

  33. Heroku How to Deploy 33

  34. Wait a moment 34

  35. 35

  36. LIFF Starter 練習 • 在⼿機上開啟liff url (https://liff.line.me/…) 查看是否為liff web view

    • 使⽤ 到聊天室 • 參考 https://developers.line.biz/en/reference/liff/#client-api • 使⽤ • Deploy到Heroku liff.permanentLink.createUrl() liff.sendMesssage() 36
  37. LINE Flex Message 37

  38. LINE Flex Message 38

  39. LINE Flex Message • Messages with a customizable layout •

    LIFF can send flex by using 39 liff.sendMesssage() liff.shareTargetPicker() •Target picker is supported on 10.3.0 or later for both LINE for iOS and LINE for Android.
  40. LINE FLEX Message Simulator https://developers.line.biz/flex-simulator/ 40

  41. LINE Workshop 41

  42. Fork Repo https://github.com/cichien/liff-workshop-demo 42

  43. 43 Deploy new app in Heroku

  44. 44 Create new LIFF app

  45. How to Develop • git clone https://github.com/xxxx/xxxx • npm install

    • cp .env.example .env • set MY_LIFF_ID=${your liffId} • npm run dev • visit https://localhost:8000 45
  46. How to Login LIFF in localhost • Run https in

    localhost • ngrok • Self-signed certificate in localhost (Do not use it in production !!!) • Create the liff app for localhost 46
  47. git checkout liff-meme 47

  48. LIFF MEME 48

  49. liff.isApiAvailable() 49 if (liff.isApiAvailable('shareTargetPicker')) { //.... } else { alert('你的

    LINE App 暫時不⽀援 Share Target Picker ,將開始外部瀏覽器。'); liff.openWindow({ url: "{{.LIFFRedirectURL}}", external: true }); }
  50. git checkout liff-campaign 50

  51. LIFF Campaign Invite 51

  52. Campaign API • https://reurl.cc/VXWxjZ • 建立活動 • 參加活動 • 取得活動參加結果

    52
  53. liff.state • https://liff-workshop-demo.herokuapp.com/? liff.state=%2Fresult.html%3FcampaignId%3D32 • https://liff-workshop-demo.herokuapp.com/result.html?campaignId=32 53

  54. liff.state • Show Loading animation • Redirect by your server

    54 if (new URL(location).searchParams.get('liff.state') !== null) { document.body.style.display = 'none' //... } •
  55. Q & A 55