Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular 與 LIFF 共舞 (LINE Developer Meetup)

2,066 views

Published on

本次分享將介紹 LIFF 如何順利的整合進 Angular 應用程式,並現場展示完整的建置過程。

https://linegroup.kktix.cc/events/20190524

Published in: Technology
  • Be the first to comment

Angular 與 LIFF 共舞 (LINE Developer Meetup)

  1. 1. LINE Developer Meetup 多奇數位創意有限公司 技術總監 黃保翕(Will 保哥) https://blog.miniasp.com
  2. 2. @kne7624s
  3. 3. 什麼是 LIFF • LINE Front-end Framework • 幫助你在 LINE 聊天室中透過前端網頁進行互動 • 所謂的 LIFF app 就是你的前端應用程式 • LIFF 主要做兩件事 • 取得使用者資料 • 傳送訊息回聊天室
  4. 4. 開啟 LIFF app 支援三種視窗大小
  5. 5. Live Demo • 建立 LINE 開發者頻道 • 建立 LIFF 應用程式 • 建立對外 HTTPS 端點 • 註冊 LIFF 應用程式
  6. 6. 建立 LINE 開發者頻道 • 登入 LINE Developers 網站並註冊成為開發者 https://developers.line.biz/console/ • 建立服務提供者 (Provider) • 建立頻道 (Channel) → 選擇 Messaging API • 取得頻道金鑰 (access token) • Channel access token (long-lived) • Issue channel access token ( 30 days )
  7. 7. 建立 LIFF 應用程式 • 建立專案骨架 • ng new demo1 --routing --style css • 設定網頁標題 • <title> … </title> • 載入 LIFF SDK • <script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script> • 呼叫 LIFF API • https://developers.line.biz/en/reference/liff/
  8. 8. liff.init() • 初始化 LIFF 應用程式 ( 必須初始化後才能執行其他 APIs )
  9. 9. liff.getProfile() • 取得使用者個人資料 (顯示名稱、大頭照、狀態訊息)
  10. 10. liff.openWindow() • 開啟特定網頁
  11. 11. liff.sendMessages() • 傳送訊息到聊天室 (一次最多傳 5 筆訊息) • Text • Image • Video • Audio • Location • Template • Flex Message
  12. 12. liff.closeWindow() • 關閉 LIFF app 視窗
  13. 13. 建立對外 HTTPS 端點 • ng serve --disable-host-check • ngrok http 4200
  14. 14. 註冊 LIFF 應用程式 • 登入 LINE Developers 網站並註冊成為開發者 https://developers.line.biz/console/ • 進入服務提供者 (Provider) • 進入頻道 (Channel) • 切換至 LIFF 頁籤 • 註冊 LIFF 網頁 • 只能接受 https 加密連線的網頁
  15. 15. 相關連結 • LINE Front-end Framework • Developing a LIFF app • LIFF API reference • LIFF Starter App • LIFF Snippets - Visual Studio Marketplace (VSCode)

×