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

2022 新星挑戰賽-LIFF 介紹與相關應用

2022 新星挑戰賽-LIFF 介紹與相關應用

【活動簡介】
本次將由技術傳教士 Nijia Lin 線上與各位分享 LIFF 近期總整理,除了 Racap 上其內容外,也會帶大家了解其中究竟有什麼功能是能幫助大家日常整合用戶需求,在競賽前若想整合相關應用,歡迎各位參加這場線上分享會喔!

【活動時間】
19:30~21:30 LIFF 介紹與各式應用, Nijia Lin
【詳細資訊】https://protostar.line.me/zh/announcements/19

LINE Developers Taiwan
PRO

July 19, 2022
Tweet

More Decks by LINE Developers Taiwan

Other Decks in Technology

Transcript

  1. LIFF 介紹與各式應用 LINE Developer Rela/ons NiJia Lin

  2. NiJia Lin LINE Technology Evangelist Developer Rela+ons External Evangelism Internal

    Evangelism
  3. Recap Messaging API

  4. 什麼是 Channel? 內容

  5. 什麼是 Provider? • 獨立開發者、公司或組織 • Channel 建立之後是不能更動 channel 的 Provider

    • 請勿使⽤測試帳號到線上環境
  6. Message Event Imagemap message Flex message Text message Template message

    Location message Sticker message Image message Video/Audio Message 發送各種訊息格式
  7. Flex Message

  8. h6ps://developers.line.biz/en/docs/messaging-api/using-rich-menus/#introduc+on Rich Menu 範例

  9. New Rich Menu actions • Close rich menu • Open

    rich menu • Open keyboard • Open voice message input mode h"ps://developers.line.biz/en/news/2022/05/13/richmenu-keyboard/
  10. LIFF 介紹

  11. LINE Login 透過整合 LINE Login 能夠讓您的應⽤程式更快地連結 LINE ⽤⼾ https://developers.line.biz/zh-hant/docs/line-login/overview/

  12. LIFF LINE APP開啟 外部瀏覽器 LIFF 常⾒兩種開啟⽅式

  13. LIFF LINE APP開啟 外部瀏覽器 穿衣服要挑⼤⼩ - LIFF 尺碼

  14. LIFF LINE APP開啟 外部瀏覽器 LIFF 在哪兒 – 預約系統

  15. LIFF LINE APP開啟 外部瀏覽器 LIFF 在哪兒 – 會員卡

  16. LIFF LINE APP開啟 外部瀏覽器 LIFF 在哪兒 – ⽀付

  17. Functions liff.closeWindow() liff.use() liff.ready liff.isInClient() liff.getLineVersion() liff.getOS() liff.getLanguage() liff.getVersion() 使⽤之前,能做些什麼事呢?

  18. 發給 OA 互動的⽤⼾ - Send Message https://developers.line.biz/en/reference/liff/#send-messages • 各式 Message

    格式 • 最多⼀次發送 5 則訊息 • 從 OA 點過去的 LIFF 才能使⽤
  19. 分享很重要 - Share Target Picker h6ps://engineering.linecorp.com/zh-hant/blog/how-to-use-liff-in-vue3/ • 外部瀏覽器 ➡ liff.login()

    • LINE 10.3.0+ • liff.isApiAvailable() • 透過個⼈帳號發送
  20. 訊息太單調?就從 Flex Message 開始

  21. 動⼿做 - Flex Message Simulator h6ps://developers.line.biz/flex-simulator/

  22. h6ps://developers.line.biz/flex-simulator/

  23. h6ps://developers.line.biz/flex-simulator/

  24. https://developers.line.biz/flex-simulator/

  25. h6ps://developers.line.biz/flex-simulator/

  26. h6ps://developers.line.biz/flex-simulator/

  27. h6ps://developers.line.biz/flex-simulator/

  28. https://developers.line.biz/flex-simulator/

  29. liff.scanCodeV2() Recognize and parse QR Code data back to your

    LIFF app. • Powered by WebRTC • LINE v11.7.0+ • LIFF v2.15.0+ • External Browser/Android/iOS
  30. liff.scanCodeV2() 辨識 QR Code 並返回到 LIFF app • Powered by

    WebRTC • LINE v11.7.0+ • LIFF v2.15.0+ • External Browser/Android/iOS
  31. Plugin-based

  32. 增加 LIFF 彈性

  33. h"ps://developers.line.biz/en/news/2022/04/25/liff-plugin/ • LIFF SDK v2.19.0 ⬆ • Debug methods •

    DOM Inspection • Console logs • Network logs @line/liff-inspector
  34. 解決無法 unit testing, load testing 的問題 @line/liff-mock

  35. h"ps://developers.line.biz/en/news/2022/04/25/liff-plugin/ • LIFF SDK v2.19.0 ⬆ • LIFF APIs 被

    mock • 回傳預設資料 • 完全切開 LIFF server @line/liff-mock
  36. h6ps://github.com/line/liff-mock LIFF Mock – 設定回傳值

  37. https://github.com/line/liff-mock LIFF Mock – 清除設定回傳值

  38. Create LIFF App with a CLI tool • JavaScript •

    TypeScript • Next.js • Nuxt • React • Vue.js • Svelte h"ps://developers.line.biz/en/news/2022/?month=04&day=25&arLcle=create-liff-app-released
  39. 從哪開始呢? - Starter • LIFF starter app - https://github.com/line/line-liff-v2-starter -

    NextJS - NuxtJS - Vanilla • LIFF Playground - https://github.com/line/liff-playground - https://liff-playground.netlify.app/ - 外部/⼿機 瀏覽器皆可使⽤
  40. h"ps://github.com/line/liff-playground/blob/master/src/App.tsx LIFF Playground – React 範例

  41. • LINE iOS 版本 12.8.0 ⬆ • LIFF 必須要 Full

    size • 務必打開 LIFF 的 chat_message.write 參數 最⼩化你的 LIFF app
  42. LINE API Status 網⾴ h"ps://api.line-status.info

  43. 相關範例

  44. NFT Reward Example

  45. 相關技術⽂件 LINE Login Messaging API LINE Front-end Framework LINE Simple

    Beacon
  46. LINE API Experts

  47. None
  48. THANK YOU