Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
20201017LIFF workshop at meichu
Search
LINE Developers Taiwan
PRO
October 17, 2020
Programming
0
31k
20201017LIFF workshop at meichu
20201017 梅竹黑客松賽前工作坊 with Coke
LINE Developers Taiwan
PRO
October 17, 2020
Tweet
Share
More Decks by LINE Developers Taiwan
See All by LINE Developers Taiwan
就讓AI幫你帶LINE好運
line_developers_tw
PRO
1
31
沒想過的前端錯誤處理可能比你有做的還多
line_developers_tw
PRO
0
50k
LINE 台灣實習計畫 2024 - TECH FRESH 介紹
line_developers_tw
PRO
0
500
LINE 台灣實習計畫 - 相關福利與面試流程
line_developers_tw
PRO
0
520
Navigating My Internship: A 5W1H Perspective
line_developers_tw
PRO
0
21
1001 號 到 333 號
line_developers_tw
PRO
0
15
關於我連線三年半的故事
line_developers_tw
PRO
0
870
LINE 電商部門實習分享
line_developers_tw
PRO
0
46
大學六年,我差點忘了畢業
line_developers_tw
PRO
0
540
Other Decks in Programming
See All in Programming
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
420
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
1k
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
440
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
240
Snowflakeで眠ったデータを起こそう!
estie
0
140
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
220
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
180
Node.js v22 で変わること
yosuke_furukawa
PRO
11
3.9k
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
120
Netty Chicago Java User Group 2024-04-17
sullis
0
200
Site Reliability Engineering for GMO
pyama86
8
1.1k
Milestoner
bkuhlmann
1
410
Featured
See All Featured
Web development in the modern age
philhawksworth
203
10k
What the flash - Photography Introduction
edds
64
11k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Product Roadmaps are Hard
iamctodd
45
9.7k
Navigating Team Friction
lara
179
13k
Building Your Own Lightsaber
phodgson
100
5.7k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Become a Pro
speakerdeck
PRO
13
4.6k
Building Adaptive Systems
keathley
32
1.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
Transcript
LIFF LINE Front-end Framework 1 LINE UIT Chien Cheng Yi
(Coke)
LINE UIT TEAM • User Interface Technology a.k.a Frontend •
Covert business idea to real idea • Work with Japan, Korea, Thailand, Vietnam and China teams 2 JAPAN TAIWAN THAILAND KOREA VIETNAM CHINA
LINE UIT TEAM Products 3
LIFF LINE Front-end Framework • Combine your app with LINE,
all together • LIFF is a platform make your web apps easily to be integrated into LINE app 4
Agenda • LIFF Introduction • Start first LIFF app •
LIFF Starter • Heroku • LINE Dev Console • LINE Flex message • Workshop • LIFF MEME • LIFF Campaign Invite 5
LIFF Intro • Web application • HTML, CSS and Javascript
• Integrate with LINE platform • LINE login • User Profile • Message API • JS SDK 6
Start first LIFF app 7
LINE LIFF Starter https://github.com/line/line-liff-v2-starter https://github.com/line/line-liff-v2-starter https://github.com/line/line-liff-v2-starter 8
LINE LIFF Starter Deploy 9
Heroku Create the 10
Heroku 11
Heroku Create New App 12
OOPS! 13
LINE Dev Console Create Channel, Create LIFF 14
LINE Dev Console Create Provider, Create Channel, Create LIFF •
https://developers.line.biz/console/ 15
LINE Dev Console Create Channel 16
LINE Dev Console Create Channel • Channel Type • LINE
Login • Provider • Channel Name • Channel Description 17
Channel Name Provider Channel Desc Chat Room Click 設定 ->
我的帳號 -> 連動中的應⽤程式 18
LINE Dev Console Create LIFF 19
Create LIFF Scope • profie (user profile) • openid (user
id) • chat_message.wrirte • liff could send a message 20
Create LIFF Size 21
Create LIFF 22
Create LIFF Bot Link Feature 23
Create LIFF Module mode (Only show when size is “Full”)
• Disable • Show the share button • Enable • Hide the share button 24
Create LIFF 25
26
27 https://engineering.linecorp.com/zh-hant/blog/new-liff-url-infomation/
Create LIFF Copy LIFF ID Copy LIFF ID 28
Back to Heroku 29
Heroku Set LIFF ID 30
Heroku Set LIFF ID 31
Yeah! 32
Heroku How to Deploy 33
Wait a moment 34
35
LIFF Starter 練習 • 在⼿機上開啟liff url (https://liff.line.me/…) 查看是否為liff web view
• 使⽤ 到聊天室 • 參考 https://developers.line.biz/en/reference/liff/#client-api • 使⽤ • Deploy到Heroku liff.permanentLink.createUrl() liff.sendMesssage() 36
LINE Flex Message 37
LINE Flex Message 38
LINE Flex Message • Messages with a customizable layout •
LIFF can send flex by using 39 liff.sendMesssage() liff.shareTargetPicker() •Target picker is supported on 10.3.0 or later for both LINE for iOS and LINE for Android.
LINE FLEX Message Simulator https://developers.line.biz/flex-simulator/ 40
LINE Workshop 41
Fork Repo https://github.com/cichien/liff-workshop-demo 42
43 Deploy new app in Heroku
44 Create new LIFF app
How to Develop • git clone https://github.com/xxxx/xxxx • npm install
• cp .env.example .env • set MY_LIFF_ID=${your liffId} • npm run dev • visit https://localhost:8000 45
How to Login LIFF in localhost • Run https in
localhost • ngrok • Self-signed certificate in localhost (Do not use it in production !!!) • Create the liff app for localhost 46
git checkout liff-meme 47
LIFF MEME 48
liff.isApiAvailable() 49 if (liff.isApiAvailable('shareTargetPicker')) { //.... } else { alert('你的
LINE App 暫時不⽀援 Share Target Picker ,將開始外部瀏覽器。'); liff.openWindow({ url: "{{.LIFFRedirectURL}}", external: true }); }
git checkout liff-campaign 50
LIFF Campaign Invite 51
Campaign API • https://reurl.cc/VXWxjZ • 建立活動 • 參加活動 • 取得活動參加結果
52
liff.state • https://liff-workshop-demo.herokuapp.com/? liff.state=%2Fresult.html%3FcampaignId%3D32 • https://liff-workshop-demo.herokuapp.com/result.html?campaignId=32 53
liff.state • Show Loading animation • Redirect by your server
54 if (new URL(location).searchParams.get('liff.state') !== null) { document.body.style.display = 'none' //... } •
Q & A 55