LINE Developer Day 2019 現場筆記 (二) - 關於LIFF的改變與未來

作者： -

我在現場看到LINE日籍講師使用 VS Code作為主要的開發工具，還頗讓人驚豔的

緣起

前陣子，LINE推進了LIFF這個框架來到 v2的版本，v1到v2是一個很大的改變，一般來說，我們改變主版號(from 1 to 2)意味著新釋出的版本將跟前一版有著不相容性，也就是一個重大的breaking changes，也確實，v2版本增加了很多亮眼的新功能，像是QR Code掃描、外部瀏覽器支援…等。

還不只如此，LINE 11/11發布了一個我認為很重大的消息:

Users can no longer add LIFF apps to Messaging API channels

看到這個消息的第一眼，我只有一堆問號…，WHY? 為何LIFF 2未來只能從LINE Login新增LIFF，為何將要取消過去LIFF綁在Bot(Messanging API)身上的方式???

我相信不只我有這個疑惑，很多熟悉LIFF的開發人員也是。我心裡始終帶著這些問號，來參加了今年的LINE Developer Day，當然，我希望能找到答案。

LIFF的改變

在Day 2關於LIFF的場次中，講師不免俗地把LIFF的歷史交代了一下:

其實從v1到v2也不過就是一年的時間，但重點當然不是歷史啊，重點是改變。到底有那些改變呢? 那得看當前的LIFF有些什麼:

上面這三張看似平淡無奇的投影片，其實是接下來講者埋的梗，我得說，後面看到差異的時候，是頗讓人興奮的。上面第一張投影片的Easy Development是理所當然，LIFF可以透過純HTML方式開發，且運行上是無需伺服器端的，但我們也知道，當前的LIFF只能運行在LINE的WebView環境，即便是開發方式和一般的HTML頁面相同，你還是會碰到像是開發階段難以debug之類的困擾。

是的，v1的LIFF是很難偵錯的，因為你必須在手機環境上(LINE的內部WebView)才能執行。我忍不住直接破梗好了，講者在最後ending的時候，上面第一張slide變成了：

with LIFF v2，你可以在手機的外部瀏覽器上運行，這也表示，你有機會可以在一般的瀏覽器上進行開發和除錯。對，你沒聽錯，過去非得在手機裡測試偵錯的時代即將過去了，當你用LIFF v2架構開發搭配SDK，基本上你的開發根本就像是一個純Web Application(只是這個App可以取得用戶的LINE身分，可以在手機上透過LINE與用戶互動)…

這甚麼道理呢? 請看…

因為LIFF 2本質上做了很大的一個改變，過去的liff，網址是  line://app/{liffId} 這樣的形式，但改版後的v2，可以寫成 https://liff.line.me/{liffId}/  這樣的 web (https) scheme，這意味著你將有機會可以在一般的瀏覽器中運行和除錯，講者示範了用VS Code開發和單步執行偵錯的展示：

用VS Code來Run和Debug耶，我差點要站起來鼓掌了!!!

這件事情超級重要的啊，這有機會解決過去LIFF很難開發和除錯的問題，但這個技術的背後是什麼道理? 為何能夠讓原本不能在一般瀏覽器上運行的LIFF，可以同時在LINE內建WebView與一般的瀏覽器上都可以運作呢?

這是講師在上面那三張平淡且樸實無華的Slides中埋下的第二個梗：

v2的LIFF deeplink，可以自動handles不同的用戶環境。什麼意思? 這就是我個人認為(官方沒有明確這麼說)v2會開始與LINE Login綁定的一個很重大原因了。

請回頭想想第一版的LIFF，第一版的LIFF功能不多，充其量只是在手機中抓取當前用戶的身分(User ID)，但因為必須卡在LINE的手機WebView裡面，所以liff在很多環境是無法使用的(例如PC Desktop/iPad…etc.)，但從上面的v2改變中你可以發現，v2之後的LIFF，本質上真的變成了一個純Web Application，既然可以採用 https://liff.line.me/{liffId}/   這樣的deeplink，這意味著透過v2開發的LIFF將可以有機會跨出LINE手機上的WebView。

但，跨出去之後怎抓取用戶身分，與用戶互動呢? 這一刻我懂了，它骨子裡其實就是倚賴LINE Login嘛，當與LINE Login整合之後，LIFF將有更高的可能性，更大的自由度。在手機裡它就像是一小程序，而跨出了手機，就是一個可以透過LINE Login抓取到用戶身分的Web Application，這樣的發展方向，非常讓人期待!

什麼是 Mini App?

說到了發展方向，就不能不提到Mini App, 在day 2的keynote中，我們有機會驚鴻一瞥:

它是什麼? 不知道你有沒有注意到，在你的LINE個人主頁下，有一個『服務』圖示，該圖示底下其實有著各式各樣的額外功能，LINE Music、LINE TAXI、LINE購物…等。

如果，有一天我們開發的LIFF可以透過這樣的方式呈現，和LINE更多的整合在一起，甚至可以從市集當中找到，豈不是頗讓人期待？是了，這就是即將出現的LINE Mini App。而對於開發人員來說，我們在意的是，Mini App到底如何開發?

根據我們在Booth現場直擊詢問LIFF開發團隊的的第一手資料顯示，Mini App基本上就是LIFF的變形，雖然目前僅開放給LINE的合作夥伴，但未來將有很大的發展可能性，我們既然人在現場，當然也不客氣地為LIFF開發人員發聲，建議LIFF也能提供類似App Store這樣市集，讓大家可以自由的上架自己的LIFF(或未來的Mini App)，開發團隊也熱情的表示，將會傳達我們的聲音與需求：

NEW APIs

當然，如果LIFF改版沒有推出一些新的API，肯定無法滿足各界的期待的…

這些在路上的API相當多，不過由於部分涉及用戶權限的授予，某些API還需要一點時間才能陸續開放(我猜可能也是要搭配line developer後台的一些選項配置):

但這些APIs的出現將會很令人期待。

對了，人都已經到了會場，很多人關切LIFF的V2版本中，有一個掃描QR Code的API似乎在android手機上有些問題(android無法掃描非 https:// 開頭的QR Code內容，請參考這邊，你會發現iOS可以掃描電子發票，但此功能在android上卻無法實現)，這部分我們當然也不客氣地問了，現場LIFF PM承諾，將會在年底前的改版解決，我們當場拍照存證留念(哈~):

總的來說，LIFF v2對開發人員釋出了不少利多，Deeplink、新的API是我最感興趣部分，當然，還有TypeScript的支援、以及在外部瀏覽器上的supports，這些都讓LIFF開始朝向一個更有想像空間的方向發展：

而LIFF v2.1的LINE Mini App，是否會帶來市場上更多的騷動呢? 這也將是一個頗讓人引頸期盼的feature：

以為這樣就結束了嗎?

講者在最後的最後，丟出了這張slide:

果不其然，SDK發展的差不多之後，UI/UX將會是下一個階段的重點，如同bootstrap一般，估計LINE也會推出自己的LIFF UI框架，讓LIFF UI有著更一致且美觀的呈現效果。

而緊接著在UI/UX之後呢? 大概這一張slide可以讓粉絲們對LIFF的遠景更充滿期待了…

結語

要推出一套好的軟體產品不是最難(其實我覺得已經很難 >_< )，但軟體服務或產品想獲得長遠的成功，關鍵在於，周遭的生態系是否健全。

是的，你已經天天在使用LINE了，但這還不夠，當有更多的廠商，圍繞起LINE開發出更多的生活應用與服務時，才會建構出堅不可摧的城牆。

而這關鍵，就是LIFF...由此你不難得知，LINE對LIFF和Mini App將會有著如何的期待，對於開發人員來說，藉由一個成熟的平台，在足夠多且普及的用戶環境中，更能夠放手一搏，有機會將自己的應用創造更大的價值。

這一切，使LIFF的未來更讓人期待…


LINE Developer Day 2019 現場筆記 (一) - 看見LINE、開發者、未來
LINE Developer Day 2019 現場筆記 (三) – LINE Bot 與 DevOps

留言

Daniel表示…
請問我打開LIFF頁面進入登入授權頁時看到授權項目沒有(發訊息到聊天室) 這項.我看其他人測試都說會有這項授權.請問是哪需要設定嗎?

不知道是不是這樣導致我使用sendMessages函數會失敗
2020年4月1日 晚上7:05
張貼留言

這個網誌中的熱門文章

使用LM Studio輕鬆在本地端以API呼叫大語言模型(LLM)

作者： -
圖片
最近上課常被問到，如何在地端環境搭建出大語言模型(LLM)，並且呼叫其API。 一開始我不太理解為何會有這樣的需求(因為在地端自行搭建運行LLM的成本不一定比較低，即便可能比較安全)，但被問多了，也就開始遍尋相關的解決方案，看看有沒有什麼最簡單的方式，可以讓開發人員在地端測試大語言模型? 後來我選擇 LM Studio ，它就是一款設計來運行大型語言模型（LLM）的平台，有個算是挺優雅的整合環境，讓一般 end-user 或開發人員，都可以輕易地在 local 端進行模型的部署和測試。 LM Studio 本身支援多種模型架構和框架，當然，最重要的是，它是免費的。 下載安裝 都很容易，我就不多說。 安裝好之後，你可以看到首頁中已經呈現了許多 Hugging Face上的模型： 這顯然是因為Hugging Face是大部分免費開源模型的集散地。 你可以搜尋自己喜歡的模型，透過LM Studio下載到local之後，就可以直接載入(下圖一)： 隨手設定一下 system prompt(上圖二)，然後，就可以直接對談了。(上圖三) LM Studio會使用你的GPU進行運算(如果有的話)，你會發現，原來有好的設備(GPU)，運行的速度可以如此之快。 Local Server 對於開發人員來說，它還有個超級更友善的功能。 LM Studio本身還提供一個 local server，可以幫你把模型包裹起來讓你直接透過API呼叫該模型的功能，例如： 上圖是我們開啟 LM Studio中 Local Server功能後的結果，你可以透過 localhost 的 1234 port 來呼叫這個被 LM Studio 運行起來的大語言模型。(有沒有發現，我們用的也是 chat/completions API) 透過Postman簡單提供一下 JSON Body: { "model": "LM Studio Community/Meta-Llama-3-8B-Instruct-GGUF", "messages": [ { "role": "system", "content": "你是AI助理，請一律用繁體中...
Read more »

VS Code的字體大小

作者： -
圖片
身為.net developer，這年頭是什麼code都得要會寫的年代。 而雖然我的NB還沒從Windows淪陷為Mac OS，但寫Node.js和Python免不了要用VS Code，這是一種愛的表現。 但歲月不饒人，盡管微臣非常熱於配合，但VS Code預設字體的大小在我還沒錢買大尺寸螢幕的狀況下，實在讓老臣難以適應。當下的第一個反應是什麼? 當然是 Ctrl+滑鼠滾輪往上推…哇靠，沒用。看…這設計…恩，千錯萬錯一定是我的錯。 只好從選單 file –> Preferences –> Settings: 在出來的視窗中，你可以看到 editor.fontsize: 沒錯，改它就行了。改不動? 喔，不好意思，我沒仔細看說明，要copy到右邊是吧，沒問題，copy->paste->modify->Save…搞定。 好簡單啊…連ctrl+(mouse scroll up)都用不到了呢… 咦?這是一篇抱怨文嗎? 沒有，誰說的? 免費的tool我們還有什麼好抱怨的呢…要感恩啦。 啊….對了，如果你還是堅持要使用 Ctrl+滑鼠滾輪，請找關鍵字… "editor.mouseWheelZoom"
Read more »

使用 Dify 建立企業請假機器人

作者： -
圖片
八卦與未來 上個月，前Google執行長Eric Schmidt在史丹福有場演講，媒體關注的是八卦消息(如果你也曾關注，網路上有很多鐵定可以找到)，但我注意到的則是他提到了自己認為接下來 AI(特別是大語言模型) 可能的發展方向，包含: Large Context Window AI Agent Text-to-Action 底下這邊有這一個段落的影片： https://www.youtube.com/watch?v=zl3k1ksFZdY 為何我會關注這部分? 因為上述的三個方向，也是身為開發人員的我，過去這一年，來與LLM打交道後的感想。昨天，我在 twMVC 的研討會分享中，展示了一個其實我過去早做過了N百次的範例，就是企業的請假機器人。(唯一不同的是，這次我幾乎沒有寫任何程式碼) 場景是，員工在家裡生病了，想要透過語音或是app進行請假，你可以看底下這個運行的範例 (git圖檔會循環播放，開始是 『我好像感冒了』)： 用自然語言對談的方式，即可完成請假。 我說過，類似這樣的範例我做過很多次，用 LINE Bot 搭配 C# 做過，用MS Bot Framework 做過，前陣子也用 Semantic Kernel 框架做過，更早期，還沒有AI的時代，我也在EIP和HR系統裡做過。 但我想說的是，這 就是 Text-to-Action 的呈現，也是一個典型的 AI Agent 的例子，它讓我們透過自然語言(可以是語音或文字)，直接命令機器人(Chat Bot、AI 助理、Agent、Assistant …不管你叫它什麼…)幫你完成一件事情(請假、售票、查詢資料、做財務報表、統計圖表、寫程式…etc.)。 這是一直以來人類對電腦最底層的需求與期待。 隨著 LLM 能夠處理和記憶的 Context 愈來愈被放大，AI Agent 所能夠處理的任務就更加的不受限制。 自然語言才是最符合人類直覺的操作 順帶一提，我昨天在研討會中講了一個故事。 有天，你覺得自己需要聘請一位助理，因此上網張貼徵人啟事，沒多久，你找到了一位號稱上知天文、下知地理的高材生，來幫助你更有效率的完成工作。 他什麼都好，唯一的一個小缺點是，你不能直接對這個助理下達指令，你必須用一種只有這個助理看得懂的語法，才能要求這個助理幫你完成特定的工作。這些語法還挺...
Read more »

使用 Dify API 快速建立一個包含前後文記憶的對談機器人

作者： -
圖片
Dify 這個產品我就暫時先不介紹了，它找到了一個挺好的切入點跨入AI Agent市場。讓不喜歡(或不擅長)寫太多 Code 的開發人員，也可以快速的建立一個具有前後文、記憶的對談機器人。 其實若單就設計 Chat Bot 來談，它本質上和 GPTs 有那麼一點點像，你只需要給一個 system prompt ，再加上一點點的資料上傳做為 RAG 的數據來源，就可以生出一隻有模有樣的對談機器人。 但 GPTs 做出來的 Chat Bot 被綁在 ChatGPT 的 UI 裡面，你不容易把它跟 LINE Bot (LINE 官方帳號) 或其它 UI (例如 MS Teams) 串在一起，而 Dify 呢? 則給你了一個 chat-messages API，讓你能很快的實現這個功能，把你在 Dify 平台上做好的 Chat Bot 轉變成可以正式運行的 LINE Bot 或 其它 Bot。 這也是今天我們要介紹的部分。 建立 Assistant 我們先用 Dify 以底下這個 system prompt 建立了一個請假助理： 發佈後，你可以在Dify 內建的 Web UI 上測試： 你會發現，這個 chat bot 已經有著基本的記憶，然後可以依照 system prompt 完成對談和任務。 不要問我在這邊建立出一個假單有什麼用，正常情況下是要直接讓 chat bot 寫入資料庫(例如 HR 系統，直接完成請假)，只是我們還沒談到這一段，這部分以後再展開來談。 chat-messages API 好，透過上面那樣建立一個對談機器人超容易，且內建就有了記憶和前後文的功能。讓開發人員快樂的不得了。跟使用無腦 GPTs 生成術差不多。然而，如果只能在 Web 上用，不能串接 MS Teams、LINE…等介面，做了也是白搭。 但，Dify 貼心的提供了 API，我們來試試看。先Gen個 API Key： 生成了 API key 之後，你只需要透過底下這樣的 rest api，即可進行呼叫： 你會發現，開發人員只要使用單一的這一個 https://api.dify.ai/v1/chat-messages API 即可進行對談。每次只需要透過 query 輸入用戶說的話，response 中的 answer 則是 LLM (Assist...
Read more »

使用C#開發LineBot(3) - 使用LineBotSDK發送Line訊息

作者： -
圖片
新版的Line Messaging API，要主動發送訊息給用戶不是很困難，主要是透過Push API，可以參考底下的官方說明 : https://devdocs.line.me/en/#push-message 另外，如果你想申請一個Line Bot，可參考: 關於LineBot (1) - 用c#建立一個LineBot 前陣子說過，我們為了團隊開發方便，做了一個 Nuget Package 以便於讓撰寫C#的開發人員可以方便的進行Line Messaging API的操作。 所以，如果你想要透過該SDK來發送訊息給用戶，可以透過底下的指令: isRock.LineBot.Utility.PushMessage(               UserId, 要傳送的訊息, AccessToken); 別忘了使用前，要先引用linebotSDK這個套件: 當您在.net 4.x的專案中，安裝上述lintbotSDK，即可透過前面提到的指令發送訊息給用戶，但請注意，該用戶必須加你的bot為好友。 你可能在使用時會碰到一個問題，怎麼知道用戶的id呢? 請注意，PushAPI的Line用戶id並非你的line ID，而是一長串項是底下這樣的id: U6OX388eOX3634X2OX2e341OX06b8OX4123 這個ID會在你的用戶跟你的bot交朋友，或是對談的時候，由系統傳送給你所設定的WebHook網址(其本質上是一個asp.net WebAPI或類似的API服務)。你會在Line傳遞給該WebHook URL的封包中的JSON形式資料內獲得。 也就是說，當你的用戶傳訊息給你的Bot，或是與你的Bot做朋友(或封鎖)，你所在你的LineBot後台，所設定的這個WebHook，都會收到這些相關的訊息。其設定位置如下: 訊息內容是以JSON的格式出現。 但是，如果你還不知道怎麼寫一個WebHook，該怎麼辦呢? 寫個WebHook其實很簡單，以asp.net來說，就是寫一個asp.net WebAPI即可。(有空我再說明，但今天比較沒空) (2017更新，WebHook開發方式請參考 這裡 ) 如果你沒空寫，可以先用底下...
Read more »