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

20201017LIFF workshop at meichu

20201017LIFF workshop at meichu

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

LINE Developers Taiwan

October 17, 2020
Tweet

More Decks by LINE Developers Taiwan

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. Agenda • LIFF Introduction • Start first LIFF app •

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

    • Integrate with LINE platform • LINE login • User Profile • Message API • JS SDK 6
  5. LINE Dev Console Create Channel • Channel Type • LINE

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

    我的帳號 -> 連動中的應⽤程式 18
  7. Create LIFF Scope • profie (user profile) • openid (user

    id) • chat_message.wrirte • liff could send a message 20
  8. Create LIFF Module mode (Only show when size is “Full”)

    • Disable • Show the share button • Enable • Hide the share button 24
  9. 26

  10. 35

  11. 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
  12. 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.
  13. 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
  14. 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
  15. liff.isApiAvailable() 49 if (liff.isApiAvailable('shareTargetPicker')) { //.... } else { alert('你的

    LINE App 暫時不⽀援 Share Target Picker ,將開始外部瀏覽器。'); liff.openWindow({ url: "{{.LIFFRedirectURL}}", external: true }); }
  16. liff.state • Show Loading animation • Redirect by your server

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