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
35k
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
LINE 實習分享 & 國際黑客松參賽分享
line_developers_tw
PRO
0
19
在 GCP 運用 Parse 全家餐管理那堆 AI 應用的資料
line_developers_tw
PRO
0
22
40歲的我會給20歲的自己,關於軟體開發的7個建議
line_developers_tw
PRO
0
7.5k
從零到一:轉碼仔的實習攻略
line_developers_tw
PRO
0
31
如何在團隊發揮數據影響力: 以電商資料科學家為例
line_developers_tw
PRO
1
44
做Data超讚的 誰懂?
line_developers_tw
PRO
0
33
iOS Live Activity: Opportunities & Challenges
line_developers_tw
PRO
1
120
掌握 Feature Toggle 與 OpenFeature 規範
line_developers_tw
PRO
0
240
用 AI 和 LINE Bot 簡化生活:讓圖片告訴你何時該忙!-- LINE 工作坊
line_developers_tw
PRO
0
770
Other Decks in Programming
See All in Programming
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
最近のVS Codeで気になるニュース 2025/01
74th
1
250
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
時計仕掛けのCompose
mkeeda
1
280
Immutable ActiveRecord
megane42
0
130
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
30
11k
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
Spring gRPC について / About Spring gRPC
mackey0225
0
220
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
KATA
mclloyd
29
14k
GraphQLとの向き合い方2022年版
quramy
44
13k
How GitHub (no longer) Works
holman
313
140k
How STYLIGHT went responsive
nonsquared
98
5.3k
Code Review Best Practice
trishagee
66
17k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Scaling GitHub
holman
459
140k
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