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

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

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

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
48. THANK YOU