Line bot專題

紀錄一下這三個月接觸Linebot的心得

前言

這學期因專題開始接觸聊天機器人，覺得Line是大家都在使用的通訊軟體，算挺好發揮的主題，於是捲起袖子開始研究。若結合一些金融服務應該還不錯，也不需要另外裝APP，多好!

市面上已經有許多基於聊天機器人開發的產品，越來越多企業採用聊天機器人作為服務項目，接觸當紅聊天機器人後發現蠻多有趣的應用，相信未來聊天機器人的生態圈會更加蓬勃。

開發用到的程式語言、工具、第三方服務

• Python、Flask(開發框架)
• Linebot API
• Heroku: 雲端主機，部署機器人用
• mongoDB: 雲端資料庫，儲存個人股票、外匯清單
• Imgur: 儲存遠端圖片
• yfinance、twder、talib: 股價、外幣資料來源、技術分析工具

實作成果

回顧近三個月的時間，經過不斷討論、設計後實作出一個不錯的成果。基本上這次實作用到Line的API幾乎都是Flex Message，還有部分的Quick Reply。

Flex Message: 提供設計師彈性設計的空間，達到客製化服務，靈活排版讓畫面更好看(後面會有後台操作介面的圖)。

Quick Reply: 灰色的小型按鈕，會顯示在視窗下方，可滑動，是一個簡單好用的功能。

不過有個缺點: 只能在手機端瀏覽，而且點擊後就會消失，不像Flex Message可一直保留，後來解決方法是再多傳一則訊息，下面再放上相同Quick Reply。

圖片有點多，但有刪減一些

個股相關資訊:即時股價、K線、KD指標、成交量、籌碼面、新聞

股票健診

這項功能的靈感來自財報狗，所以我們也做了類似功能，不過介面是組員設計。主要針對個股進行股票健診，到各大財金網站爬取目標財務比率，將結果以報告的形式回傳給使用者。

股票健診(圖片是舊的，通過未通過顏色的部分還沒修正，新版已做修改)

爬的資料來源是博客來理財新書榜、暢銷榜的連結，使用者點擊後可到購買頁面(這沒有業配)

配合資料庫做個人股票清單、外匯清單

使用者在查詢股票或外幣時，下方都會出現加入清單的按鈕，點擊後即可新增至個人清單中，也可做刪除、修改等操作。確定新增成功後，輸入”我的外幣”或是”我的股票”，可以一次查詢儲存在個人清單中的外幣或股票。

到價提醒

使用者可透過指令設定到價提醒，若該檔股票當前股價達成使用者設定的門檻條件時，機器人會跳出通知提醒。

回顧三個月以來的收穫:

技術面

• 爬蟲:
  一直都沒有深入研究過爬蟲，藉此機會練習用爬蟲去爬網站資料，實作機器人用到許多爬蟲技巧，除了靜態網頁的之外，也有爬動態資料渲染出來的網頁。
• 資料視覺化:
  之前只有用JavaScript做前端的資料視覺化，這次用Python把爬到的資料繪圖，認識Python一些常用視覺化工具，實作起來非常方便，很快就能做出美美的圖XD
• 資料前處理:
  有些爬下來的資料格式不是那麼好看，需要經過一些方法把資料整理成我們要的格式(JSON、DataFrame)

接觸更多社群討論

在line developers臉書社群看到很多活躍的開發者，大家都不吝分享自己的開發心得，看到其他人做的應用都非常有趣，社群還有定期舉辦小型聚會交流意見。這次開發Linebot過程除了看官方文件外，還有前輩們的教學文，幫助我避開不少坑XD

LINE TAIWAN TECHPULS

這學期適逢每年都會舉辦的Line台灣開發者大會，有幸參與這麼大型的盛會，整個活動安排的滿滿滿。主題包含AI、資安、公司未來方向等。

當天有不少企業來分享公司如何將Linebot運用在產品，有醫療、旅遊、美食、交通旅遊、個人學習及購票系統等應用，Line也藉此推廣Line protostar計畫，希望能建立夥伴關係，幫助更多公司透過Line開發平台推出服務。

所有議程中最有感是由LINE技術傳教士之稱的Evan分享他們在改善UX/DX(使用者經驗/開發者經驗)上所做的努力，其中包含:

• 降低開發門檻：

目的要讓chatbot能夠接觸更多使用者

• 更新Flex Message：

提供更友善的介面，推出Beta版，降低UI Designer設計門檻

• LIFF: 可結合Web Application、整合Line其他的平台：

可做跨平台服務，支援不同瀏覽器。LIFF過往在很多環境是無法使用的(如電腦桌面、iPad)，新版解決以往只能在手機端上查看的問題。此外，LIFF新增可做瀏覽器Debuger功能，開發者可以不用再通靈了(?)

上面提到UX/DX最有感觸的原因是Flex Message API，Line 提供設計介面，設計師不需要看枯燥的程式碼，只需滑鼠點擊操作即可完成美美的UI。更棒的是，設計完可以直接以JSON格式匯出，對開發者來說是一大福音!

後端只要把JSON資料放入Flex Message API內，將部分資料做動態載入即可完成。

與不同系朋友合作

這次與其他系的朋友一起進行。多虧有他們一同發想、設計UI及互動腳本，才能做出這樣的成果。受益於Flex Message Simulator，討論完規格需求後，介面設計與功能開發能夠同步進行。

善用工具可以加快工作效率

工欲善其事，必先利其器

使用後且覺得還不錯的工具，利用這個機會紀錄一下XD

• github

• trello

• xmind

• HackMD

發現編輯器新玩意兒-power mode

在某天深夜研究Line API，閱讀官方文件實在乏味，腦中閃過之前參加HackMD聚會，看到講者demo一個寫code的炫炮效果，又聯想到久遠之前軟工版上在討論類似的VSCode擴充套件，索性找來玩玩。

結果…….

一裝就上癮啊啊啊！！！

寫程式的快樂就是那麼樣的樸實無華且枯燥

其實還很多，可以到此連結找找有沒有自己喜歡的。(這算哪門子的收穫)

後記

在開發過程遇到幾個困難點:

• 有些工具本地可用，但部署的環境不支援:

有些工具在本地端開發時可以正常運作，但部署到Heroku上則無法支援，例如: selenium(爬蟲工具)、talib(技術分析工具)或是繪出的圖片不支援中文字，這些都要另外配置。

在不知情的情況下，很多時候部署上去，機器人就突然無法運作，terminal、Heroku後台的log都不會提示錯誤訊息，只好一個個找問題來源，再讀官方文件做環境配置，這部分花我一些時間…….

• Line免費商用帳號每月上限500則訊息

Line今年更改免費商用帳號方案從原本訊息量無限制到每月500則。若當月測試比較頻繁，就必須一直更換帳號，每次達額度上限就換token實在有點麻煩，付費方案則是學生難以負擔。

最後，個人覺得有點小可惜的地方是有些Linebot提供的API沒試過，例如LIFF，原本想做個選股服務，但篩選太多檔股票直接回傳給使用者的話訊息會拉太長，不適合在手機上瀏覽。

後來有想到用webview方式，透過LIFF在Linebot上嵌入網頁視窗，將篩選出的股票以table形式呈現在網頁視窗上，不過還需要研究、討論如何設計，因時間關係只好暫時作罷，之後再試試看囉。

webView的形式

專案程式碼地址: 點這裡 ，如果覺得有幫助的話請給我一顆星星～

拍手時間

你(妳)的鼓勵會讓我更有動力寫文章分享！
好像還不錯!👻 -> 拍10下
覺得有幫助!👍 -> 拍20下
學到新東西!🙋 -> 拍30下
期待下一篇!💪🏻 -> 拍40下
實在太棒啦!😍 -> 拍50下
 小提醒：長按拍手可以連拍哦！

Thanks for your reading.

鐵人賽剩最後三天啦！

話不多說，馬上來看看吧！

首先，建立一個新的聊天機器人

建立圖文選單。當點選木管或銅管時，系統會回應相對應的訊息；點選打擊時，則會直接連結到維基百科

再來是程式碼的部分，基本上就是前面練習過的功能東拼西湊組合而成，所以這邊就放一張當代表

接著到聊天機器人裡面看看成果吧！
點擊圖文選單的木管會出現提示文字及選項按鈕

範例是點選豎笛，就會出現豎笛的簡介以及圖片

點擊圖文選單的銅管會出現轉盤樣板，總共有五個

向右滑動可以看到其他的轉盤樣板

點選樂器的介紹，系統會回傳預設的文字訊息；點選連結則是連結到各個樂器的維基百科網頁

點擊圖文選單的打擊則是直接連結到打擊樂器的維基百科網頁

今天的小小專題就到這邊啦~我們明天再見！

參考資料：Python與LINE Bot機器人全面實戰特訓班-Flask最強應用

• 留言
• 追蹤
• 檢舉