Submit Search
Upload
Angular 與 LIFF 共舞 (LINE Developer Meetup)
•
6 likes
•
5,078 views
Will Huang
Follow
本次分享將介紹 LIFF 如何順利的整合進 Angular 應用程式,並現場展示完整的建置過程。 https://linegroup.kktix.cc/events/20190524
Read less
Read more
Technology
Report
Share
Report
Share
1 of 16
Recommended
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
Will Huang
從頭打造 C#、.NET 與 ASP.NET Core 開發環境
從頭打造 C#、.NET 與 ASP.NET Core 開發環境
Will Huang
ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索
Will Huang
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
Will Huang
你一定不能不知道的 Markdown 寫作技巧
你一定不能不知道的 Markdown 寫作技巧
Will Huang
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)
Will Huang
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
Will Huang
Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)
Will Huang
Recommended
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
Will Huang
從頭打造 C#、.NET 與 ASP.NET Core 開發環境
從頭打造 C#、.NET 與 ASP.NET Core 開發環境
Will Huang
ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索
Will Huang
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
Will Huang
你一定不能不知道的 Markdown 寫作技巧
你一定不能不知道的 Markdown 寫作技巧
Will Huang
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)
Will Huang
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
Will Huang
Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)
Will Huang
從實戰經驗看到的 K8S 導入痛點
從實戰經驗看到的 K8S 導入痛點
Will Huang
RxJS 6 新手入門
RxJS 6 新手入門
Will Huang
极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)
Will Huang
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)
Will Huang
Protractor: The Hacker way (NG-MY 2019)
Protractor: The Hacker way (NG-MY 2019)
Will Huang
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)
Will Huang
Angular 开发技巧 (2018 ngChina 开发者大会)
Angular 开发技巧 (2018 ngChina 开发者大会)
Will Huang
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)
Will Huang
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)
Will Huang
AKS 與開發人員體驗 (Kubernetes 大講堂)
AKS 與開發人員體驗 (Kubernetes 大講堂)
Will Huang
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
Will Huang
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
Will Huang
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
Will Huang
以敏捷架構打造美國軟體外包專案的經驗談
以敏捷架構打造美國軟體外包專案的經驗談
Will Huang
開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018
開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018
Will Huang
迎接嶄新的Windows容器叢集架構:Kubernetes
迎接嶄新的Windows容器叢集架構:Kubernetes
Will Huang
TypeScript 綜合格鬥技
TypeScript 綜合格鬥技
Will Huang
Angular 5 全新功能探索 @ JSDC2017
Angular 5 全新功能探索 @ JSDC2017
Will Huang
Windows Container 101: dotNET, Container, Kubernetes
Windows Container 101: dotNET, Container, Kubernetes
Will Huang
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
Will Huang
More Related Content
More from Will Huang
從實戰經驗看到的 K8S 導入痛點
從實戰經驗看到的 K8S 導入痛點
Will Huang
RxJS 6 新手入門
RxJS 6 新手入門
Will Huang
极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)
Will Huang
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)
Will Huang
Protractor: The Hacker way (NG-MY 2019)
Protractor: The Hacker way (NG-MY 2019)
Will Huang
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)
Will Huang
Angular 开发技巧 (2018 ngChina 开发者大会)
Angular 开发技巧 (2018 ngChina 开发者大会)
Will Huang
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)
Will Huang
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)
Will Huang
AKS 與開發人員體驗 (Kubernetes 大講堂)
AKS 與開發人員體驗 (Kubernetes 大講堂)
Will Huang
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
Will Huang
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
Will Huang
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
Will Huang
以敏捷架構打造美國軟體外包專案的經驗談
以敏捷架構打造美國軟體外包專案的經驗談
Will Huang
開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018
開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018
Will Huang
迎接嶄新的Windows容器叢集架構:Kubernetes
迎接嶄新的Windows容器叢集架構:Kubernetes
Will Huang
TypeScript 綜合格鬥技
TypeScript 綜合格鬥技
Will Huang
Angular 5 全新功能探索 @ JSDC2017
Angular 5 全新功能探索 @ JSDC2017
Will Huang
Windows Container 101: dotNET, Container, Kubernetes
Windows Container 101: dotNET, Container, Kubernetes
Will Huang
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
Will Huang
More from Will Huang
(20)
從實戰經驗看到的 K8S 導入痛點
從實戰經驗看到的 K8S 導入痛點
RxJS 6 新手入門
RxJS 6 新手入門
极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)
Protractor: The Hacker way (NG-MY 2019)
Protractor: The Hacker way (NG-MY 2019)
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)
Angular 开发技巧 (2018 ngChina 开发者大会)
Angular 开发技巧 (2018 ngChina 开发者大会)
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)
AKS 與開發人員體驗 (Kubernetes 大講堂)
AKS 與開發人員體驗 (Kubernetes 大講堂)
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
以敏捷架構打造美國軟體外包專案的經驗談
以敏捷架構打造美國軟體外包專案的經驗談
開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018
開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018
迎接嶄新的Windows容器叢集架構:Kubernetes
迎接嶄新的Windows容器叢集架構:Kubernetes
TypeScript 綜合格鬥技
TypeScript 綜合格鬥技
Angular 5 全新功能探索 @ JSDC2017
Angular 5 全新功能探索 @ JSDC2017
Windows Container 101: dotNET, Container, Kubernetes
Windows Container 101: dotNET, Container, Kubernetes
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
Angular 與 LIFF 共舞 (LINE Developer Meetup)
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)