【COSCUP throwback】日本團隊分享 | Verda, LIFF
前言
在 COSCUP 的安排中很幸運可以邀請到國外的同仁來為我們分享在當地工作的內容，本次文章則帶大家了解遺下在日本的團隊(Verda + LIFF)的工作內容，如果想回味當天講者實際分享的內容在稍後也可以看 youtube 影片回味一下喔!(當天也是有許多朋友前來詢問許多與日本工作相關的問題，生活、履歷等等)
標籤
LIFF
LIFF migration: from Replace to Concatenate mode
前言
於 1/18 釋出了一篇新聞 Reminder: On March 1, 2021, "Replace (Backward compatibility mode)" will be removed from the permanent link redirection settings for LIFF app and LINE MINI App，在這個新聞中提到將會在 3/1 移除 LIFF 的 Replace 模式:
移除後若尚未更新 LIFF SDK 的話可能會遇到以下問題：
- LIFF 打不開
- 空白頁面
- 打開了但出現許多錯誤訊息
- ...
於 2020/11/20 有發過即將移除的新聞，隨後也有相關文章敘述這件事，許多更改內容可以參閱：
- 您需要了解有關新 LIFF URL 的所有資訊
- LAE 戴均民 - LINE LIFF v2 的 replace 模式即將被移除及建議程式寫法
- LAE 卡米哥 - The Best Practice Of LIFF
LINE 開發社群計畫: 202010 Chatbot 社群心得分享
前言
大家好，我是 LINE Taiwan 的 Tech Evangelist - NiJia Lin。這次很開心受到 chatbot 社群的邀請，參加了 "Chatbot meetup 聊天機器人新手小聚 24 @ Gandi" 的聚會活動，並且分享 LINE API 更新與個人開發的心得。在此也跟各位分享本次參與的心得，並且也希望透過社群分享的力量能夠讓聊天機器人的開發動能更加的盛大。
- 社群 Chatbots Meetup： https://chatbots.kktix.cc/
- 本次活動網頁: 活動網址
- 本次活動的共筆紀錄： https://hackmd.io/@chatbot-tw/meetups-024
由於 Chatbots Meetup 本身屬於社群自主性的活動，所有內容也是相當的難得與有趣。也希望能夠透過本篇文章讓大家稍微了解 Chatbots Meetup 社群的魅力，讓更多朋友了解到打造自己的聊天機器人是如此讓人開心的事情。
梅竹黑客松賽前企業工作坊 - LIFF shareTargetPicker
前言
很開心能參加到梅竹黑客松的賽前企業工作坊，為了能夠讓各位學生朋友更快速上手 LIFF(LINE Front-end Framework)，並使用來打造更 WoW 的應用服務，因此在這天我們則找到 UIT(a.k.a 前端)部門專業的同仁 - Coke 帶領學生們來做實作相關內容，讓大家更了解 LIFF 以及 shareTargetPicker 個別是什麼、如何實作並且能應用在什麼地方，以下就來一步一步來介紹。
【翻譯】讓我們使用 Cypress 開始為 LIFF app 撰寫單元測試
前言
大家好，本篇將帶大家使用 Cypress 為您的 LIFF（LINE Frontend Framework）Application 寫單元測試。並且可以從本文的範例幫助來閱讀這篇文章的開發者朋友。若之前沒有嘗試過開發 LIFF App，建議您先閱讀以下文章。因為在本文中可能會有很多相關技術用詞，因此在使用它們之前必需要有 LIFF App 開發的相關基礎知識。
Article: https://medium.com/linedevth/liff-v2-release-85fdfb678cc6
在 Vue3 中引入 LIFF 的 ShareTargetPicker 分享 FlexMessage 訊息給 LINE 好友
前言
以往在 LINE 平台上發送公告相關訊息時都只能編排文字順序、傳另一個圖片、抑或是傳影片...anyway，而隨著 LINE 推出了 Flex Message 讓開發者可以將訊息當作網頁 CSS 樣式塑造出一個客製化的訊息格式，這在 Chatbot 的領域裡基本上可以算是殺手級功能了，Chatbot 可以在過程中可以依照對話流程釋出不同樣版的內容，讓使用者體驗更上一層。
隨著時間的演進 LINE 也 release 了自家的前端框架 - LIFF，開發者能夠很快速的使用到 LINE Login 的相關功能並且整合到 Chatbot 上面，讓整體服務的使用體驗更上一層，接著在近些日子釋出了本篇介紹的主軸 - ShareTargetPicker，其功能主要是能將之前只有 Chatbot 才能使用的 Flex Message 透過 LIFF 的這隻 API 使用發送者的名義將客製化訊息幫忙發送給 使用者/群組/聊天室，讓我在群組公布訊息時能有煥然一新的模樣呢！
- 也有 LINE API Expert 分享的 看起來很專業的 LINE 數位版名片 文章可以參考。
會寫這篇的原因也是因為最近寫了一個 Side Project - Announcer 讓我可以再公布訊息時可以發送漂亮的 Flex MEssage，而使用 Node.js 開發時因為需要使用 LIFF 的 ShareTargetPicker，當時只透過 EJS 幫我產生 html template 來發送 FlexMessage，一開始認為應該不會寫太多前端的邏輯，但隨著想增進更多的 UX 因此需要操作更多的前端邏輯(可以看看這個 tag 裡的 views 資料夾)，因此在多種考慮下決定使用 Vue 來簡化我的開發，但在 migrate 之前總是要先了解一下兩邊結合的可行性，本篇就給大家帶來 Vue3 結合 LIFF 的相關使用介紹。 🙂
FlexMessage 詳細介紹可以參考這篇 - Flex Message 的 Update 1 已公開
LIFF v2.3 更新內容 - Concatenate & Replace 模式
前言
大家好，我是 LINE Taiwan 的 Tech Evangelist – NiJia Lin。
在尚未更新前時常會遇到問題就是網址後面會接上 liff.state= 抑或是會在原始 target url 上加上 斜線(/) 這類相關的問題，開發者(包括我)都需要使用相關的 workaround 去解套，這邊提供之前我寫的 Twitch-Bot 的 Javascript workaround 來處理 liff.state 的問題：
const query = req.query['liff.state'].split('?')[1].split('&');
const notifyPayload = { code: null, state: null };
query.forEach(el => {
const queryObj = el.split('=');
if (queryObj[0] in notifyPayload)
notifyPayload[queryObj[0]] = queryObj[1];
});
const code = notifyPayload.code;
const userId = notifyPayload.state;
這樣的解法可以解決我的問題但會讓開發有點綁手綁腳的，但隨著 LIFF v2.3 改版上線後出現了兩個模式提供選擇，分別是 Concatenate 與 Replace 兩個選項，如下圖所示：
在 v2.3 的更新中將之前所會遇到問題以及已有對應 workaround 的版本變成 Replace mode，而新推出的 Concatenate mode 則已解決相關的議題。也許在使用上還是會有點困惑，以下就使用一些 Scenario 為各位介紹一下這兩個功能之間的差異以及解決了什麼問題 🙂。
【LINE API 的小眉角】feat. Flex message, LIFF, Richmenu, Provider
前言
因為遇到了很多不算坑的坑(說啥呢？)，有些是文件沒有寫而有些可能是我沒有注意到的，但既然都知道了就乾脆記下來吧！
LIFF reply 到底算不算收費？
字面上看起來很像 Push Message 的事件，但實際上是走 Flex Message，使用 Message api 的 Reply 功能來幫忙使用者發送條件引發 Bot 行為，並非是透過 Push api 發送讓 Bot 反應，這邊需要多注意喔！
liff.sendMessages([
{
type: "text",
text: "You've successfully sent a message! Hooray!",
},
]);
Twitch Bot 全面升級！ 增加 LINE Notify 綁定與推播實現 LINE 的三項之力！
繼續閱讀
Day24 - 簡單使用 LINE LIFF API
前言
以下就為大家帶來簡單的實作以及如何去使用它。
實作
在views/下新增一個liff_test.html並加入以下內容
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>
<script>
function initializeApp(data) {
$("#userid").val(data.context.userId);
}
$(function() {
liff.init(function(data) {
initializeApp(data);
});
$("#ButtonGetProfile").click(function() {
liff.getProfile().then(profile => {
$("#UserInfo").val(profile.displayName);
alert("done");
});
});
$("#ButtonSendMsg").click(function() {
liff
.sendMessages([
{
type: "text",
text: $("#msg").val()
}
])
.then(() => {
alert("done");
liff.closeWindow(); // 關掉頁面
});
});
});
</script>
</head>
<body>
<button class="liff_btn">Get user profile</button>
<label>user id:</label>
<input class="form-control" type="text" id="userid" /> <br />
<button class="btn btn-primary" id="ButtonGetProfile">Get Profile</button>
<input class="form-control" type="text" id="UserInfo" /><br />
<label>要傳送的訊息:</label>
<input class="form-control" type="text" id="msg" value="測試" /><br />
<button class="btn btn-primary" id="ButtonSendMsg">要傳送的訊息</button>
</body>
</html>
以上參考來自董老師的部落格
詳細的 LIFF API 文件可以參考
接下來按著之前做過的一樣把這個檔案送到S3裡，接著它的網址複製起來
接著來去之前建立機器人的開發者頁面裡按下最右邊的LIFF
按下去之後呢，再來按下add
跑出這個頁面後，Name好辨認為主、Size選擇滿版(Full)、Endpoint URL就把剛剛複製起來的 S3 網址放進去後按Confirm
大概內容會長得像這樣
建立成功後往下滑會看到 LINE 給你一個屬於他們的網址，接著可以把它貼到你的機器人上(或者任何聊天室)
點下去之後就會看到來自 LIFF 的 Webview 囉！
接下來就可以開始玩裡面的功能了 🤣
結論
LIFF 整合的功能讓開發者在 Bot 裡不好實現的功能透過 Webview 的方式讓使用者可以到頁面上做邏輯處理，透過兩種的結合讓整體的應用就有更多的變化，這邊若要給使用者個話就把 line://xxxoxx 製作成 flex message 或者乾脆傳給使用者，引導他點選，如此就能讓使用者到自己設計的頁面上了。
這邊額外補充一點，有看到程式碼裡面可以拉到Query string嗎？事實上可以透過Query string讓使用者帶些參數來做更多的判斷，像是卡米哥做的Kamiliff就是讓使用者在點選後判斷這個 LIFF 的 Size，在導去對應的路由去做處理，這樣子使用者在建立 LIFF 的時候就不用一個頁面弄一個，否則這樣在 dev 轉 prod 的時候應該會弄到很生氣 🤣。
Day23 - LIFF(LINE Front-end Framework) 簡介
介紹
LIFF (LINE Front-end Framework)顧名思義就是 LINE 開發在 LINE 這個通訊軟體裡面的 Web view(好饒舌)，他是一個很精簡的內建瀏覽器，主要是能夠讓開發者可以使用 HTML & Javascript 可以去處理一些在 bot 不好實現的功能，也讓開發者可以透過使用 JS SDK 去拉使用者的資訊，藉此可以做出更多種的應用。
網址的樣式都像是這樣line://app/ZZZZZ-AAAAAAA，透過 deep link 的方法讓 LINE 本身可以認得這個藉此去導向設定對應的網站，畢竟做平台的公司內部要互相溝通也是，就透過這種方法去讓不同部門的工程師可以互相使用好像也是不錯(?)
它也可以搭配在之前做的 LINE 服務上，Notify、Message api 上都可以串上去搭配不同種應用，而這個簡易的 Web view 有下面三種的顯示格式可以使用，開發者可以搭配不同應用場景去做搭配。
一開始都只能使用 curl 來增加項目，使用方法可以參考這篇，現在可以直接在 LINE Developer 頁面線上新增，像下圖片在這個頁面就可以新增了
curl -X POST \
-H "Authorization: Bearer YOUR_CHANNEL_TOKEN" \
-H "Content-Type: application/json" \
-d '{
"view": {
"type": "LIFF_SIZE",
"url": "URL_OF_YOUR_APPLICATION"
}
}' \
https://api.line.me/liff/v1/apps
這邊推薦一個 kamiliff，卡米哥就用一個路由帶著 query string 來判斷，再轉打去其他 controller，如此一來就不需要為了每個頁面去獨立建立 LIFF，如此一來測試跟上線都很好管理，推薦大家去參考卡米哥的 kamiliff 的實作方法～
這個功能最大的好處就是可以在 LINE 裡面就可以直接用，若是把使用者導出頁面基本上轉換率以及使用者體驗一定會變很差，所以若是有在開發 LINE Bot 的話很推薦使用這個。
結論
以前我曾嘗試過使用 LIFF 使用 websocket 去跟 MQTT 溝通( IoT 裝置常常使用的通訊格式)，只是他的 websocket 似乎有開，但是總是沒有收到數值，這部分實作也是年初時使用，現在這時候就不知道能不能用了 🤣，若不行就期待哪天他能提供出這個服務了～