2019年1月5日 星期六

在LINE Bot中使用Imgur作為圖檔保存位置

先前介紹過Imgur.com可做為開發人員的圖檔上傳位置之後,就有學員們敲碗,要我們具體DEMO一下如何把Chat bot用戶上傳的照片或圖檔存到Imgur.com中。

別急,我們這不就來了嗎?

回頭先討論一下這個需求的背景,過去我們曾介紹過,在開發LINE Bot時若要抓取用戶傳來的圖檔或是照片時,由於該圖檔其實是保存在LINE的伺服器中,且有七天的保存期限,因此若我們要永久保存該圖檔,或做一些加工處理,所採用的方法是,將該圖檔(的binary資料)從LINE取得後,在我們WebHook所在的IIS伺服器上,直接複製儲存一份,然後取得該實體檔案的相對路徑轉為網址。

一般來說這樣做具體可行,但如果考量的進階一點,可能會有一些需要注意的問題,舉例來說,IIS伺服器的硬碟空間如果不足,可能就會發生意外狀況。或是,該WebHook希望能夠支援HA(High Availability)做負載平衡時,也可能會發生問題。雖然,這都是系統架構比較大的時候,才會碰到的狀況,但也不可不重視。

此外,有些圖檔根本是我們的Chat bot在跟用戶對談的過程中動態產生的,產生完後就Push/Reply給用戶,用戶看完可能根本就不打算再看一次(例如即時產生的圖表、照片…等),這類的圖檔儲存在WebHook所在的伺服器根本浪費空間,還得定時去清理,非常不經濟。

那這樣,我們有沒有其他更好的方式處理?

其實,我們可以考慮把圖檔上傳(保存)到第三方的雲端空間,而Imgur.com正好就符合我們的需求。開發人員可以透過Imgur提供的API,把圖檔上傳到Imgur.com並取得該圖檔的URL,如此一來,我們連空間和位置都無須擔心。

具體Imgur API該怎麼使用呢? 這個部分讀者可以參考底下連結:

https://studyhost.blogspot.com/2018/12/imgurcom-api.html

在了解其API的使用方式之後,我們就來看如果要把LINE Bot從用戶收到的圖檔上傳到Imgur.com上,該怎麼做。

我們先看底下這個範例的執行結果:

你會發現最上面一開始用戶傳來一個圖檔,接著LINE Bot把該圖檔上傳到Imgur並取得URL後,將URL顯示給用戶(同時也再一次把該圖檔顯示出來)

看來很不錯,該展示的功能都出現了,怎麼實現呢? 首先,參考上面連結的貼文,你必須先申請好Imgur.com的Client ID與Secret。有了這兩個重要資訊之後,我們來看程式碼怎麼撰寫。整個範例我們放在底下GitHub位置:

https://github.com/isdaviddong/Linebot-Demo-UploadImage2imgur

我們來看主要的WebHook部分:

我們看到WebHook程式碼,一開始幾行只是抓取Web.Config中的資訊,其中包含了我們需要的Channel Access Token以及Imgur的Client ID與Secret。

接著,我們看到下圖的程式碼片段,這部分是WebHook中判斷用戶傳來的是一個圖檔時,所要進行的動作。先看下圖一的部分,主要的動作是透過Client ID與Secret建立出ImgurClient物件,我們待會要透過這個物件把圖檔上傳。

下圖標示二的地方則是透過我們的LineBotSDK取得用戶上傳來的圖檔Binary資料,並存入ByteArray物件中:

最後,上圖三的部分是透過Imgur.API提供的UploadImageStreamAsync(…)方法,把抓取到的Byte資料上傳到Imgur.com並在完成後取得其URL位置。

後面的程式碼也不複雜,下圖A的部分是建立一個TextMessage與ImgaeMsg物件,這兩個物件是要回傳給用戶的訊息,其中包含剛才我們上傳到Imgur.com的圖片的URL(image.Link),這部分我們用TextMessage(文字訊息)物件的方式顯示。而ImageMsg這個物件則是用來顯示該圖片:

接著放入上圖B所定義的Messages集合物件,然後透過ReplyMessage(…)方法回覆(Reply)給用戶,就大功告成啦。

我們再看一次,執行的結果如下:

其實程式碼相當簡單不複雜,有興趣的開發人員可以參考Github上的範例實際製作一次。

--------------------------------------------
線上課程:https://www.udemy.com/line-bot/
電子書:https://www.pubu.com.tw/ebook/103305
LineBotSDK:https://www.nuget.org/packages/LineBotSDK
如果需要即時取得更多相關訊息,可按這裡加入FB專頁。若這篇文章對您有所幫助,請幫我們分享出去,謝謝您的支持。

1 則留言:

Unknown 提到...

照著範例做很容易就達成
不過有個疑問,上傳到Imgur後,我登入我的帳號卻看不到那張圖片
不知道他到底傳到哪了?

找不到圖片,我程式裡就要把每次返回的圖片連結存起來

Related Posts Plugin for WordPress, Blogger...

熱門文章