本次分享將介紹 LIFF 如何順利的整合進 Angular 應用程式，並現場展示完整的建置過程。 https://linegroup.kktix.cc/events/20190524

1. LINE Developer Meetup
多奇數位創意有限公司
技術總監 黃保翕（Will 保哥）
https://blog.miniasp.com

2. @kne7624s

3. 什麼是 LIFF
• LINE Front-end Framework
• 幫助你在 LINE 聊天室中透過前端網頁進行互動
• 所謂的 LIFF app 就是你的前端應用程式
• LIFF 主要做兩件事
• 取得使用者資料
• 傳送訊息回聊天室

4. 開啟 LIFF app 支援三種視窗大小

5. Live Demo
• 建立 LINE 開發者頻道
• 建立 LIFF 應用程式
• 建立對外 HTTPS 端點
• 註冊 LIFF 應用程式

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. 建立 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. liff.init()
• 初始化 LIFF 應用程式 ( 必須初始化後才能執行其他 APIs )

9. liff.getProfile()
• 取得使用者個人資料 (顯示名稱、大頭照、狀態訊息)

10. liff.openWindow()
• 開啟特定網頁

11. liff.sendMessages()
• 傳送訊息到聊天室 (一次最多傳 5 筆訊息)
• Text
• Image
• Video
• Audio
• Location
• Template
• Flex Message

12. liff.closeWindow()
• 關閉 LIFF app 視窗

13. 建立對外 HTTPS 端點
• ng serve --disable-host-check
• ngrok http 4200

14. 註冊 LIFF 應用程式
• 登入 LINE Developers 網站並註冊成為開發者
https://developers.line.biz/console/
• 進入服務提供者 (Provider)
• 進入頻道 (Channel)
• 切換至 LIFF 頁籤
• 註冊 LIFF 網頁
• 只能接受 https 加密連線的網頁

15. 相關連結
• LINE Front-end Framework
• Developing a LIFF app
• LIFF API reference
• LIFF Starter App
• LIFF Snippets - Visual Studio Marketplace (VSCode)