透過 Imgur api 及 Google Cloud Functions 架構超簡易 Line 回圖機器人, 連圖片流量費用都省了!

繼上篇 透過 Google Cloud Functions 部署一隻成本極低且 Serverless 架構的 Line bot,一直在思考如何將之前做的 LINE 早安機器人也用 serverless 架構重做 ( 這樣做的好處先前也大致整理在上述文章中 )。不過接著也會遇到一個問題,那就是換成 serverless 架構後我的圖片要放哪比較方便?除了放類似 Amazon S3Google Cloud Storage 的服務外還有沒有其他的選擇呢?再想想我這個早安機器人的使用場景,有沒有可能連圖片的儲存及圖片的網路流量費也省起來呢,嘿嘿..

關於之前 LINE 早安機器人的功能,這邊剛好有機會再介紹一下緣起

由於強者我爸每天都會固定在家族的 LINE 群組傳圖道早安,而且所傳的每張早安圖絕不會跟以前傳過的重覆,甚至還有假日專用、中秋節專用、天氣冷專用的等等.. 讓我每天早上都要從圖庫花幾秒鐘挑一下今天要傳哪張圖敷衍回應他 XD

於是那時開始有了做一隻 LINE 早安機器人的構想,概念是預先收集好一批充滿早安的圖片,而當機器人聽到我在群組說關鍵字時 ( 例如早安 ) 就會自動從圖庫中隨機挑一張圖幫我回應,當時效果就像下面這張圖這樣。還記得當時剛有了機器人幫我讚聲之後,真的讓我一大早就減輕不少心智肌肉的負擔呢..

15390886_10202616627853995_3644974989843196681_n

這邊再回到我的使用場景

在改寫成 serverless 版本時,當時想來想去,發現既然這些早安的圖片沒啥版權,也沒有任何個資的東西,那最好的方式就是放在免費圖庫空間啦,既不用自己儲存圖片,也不用為了圖片傳輸的流量付費,簡直超完美德 。而之前忘了在哪個場合下看過有人過用 imgur 的 api 做過一些東西,也看過 jPPT 讓使用者用畫圖推文也是透過串 imgur api 的方式,想必 imgur api 的服務應該是蠻 工程師-friendly 的,那就讓我們來試試看吧!

這邊順便也要提醒一下,使用 imgur 做免費圖庫的前提是你沒有拿他們的服務來營利,如果有商業用途那一樣要先去 mashape 申請一組 api 付費使用囉 ( 可參考 imgur api 關於商業用途的說明 )

Screenshot_20170405-222653

一樣先來一張白板流程圖

20170405_224828

基本上流程與之前介紹過的流程大同小異,如不懂 line 與 webhook service 的關係可先參考這篇,上面這張流程圖主要的重點在,我的回圖機器人 ( serverless bot ) 會透過 imgur api 拿到我已經預先上傳至 imgur 公開相簿的所有圖片連結,然後機器人只要從中隨機取一個圖片連結,就能再透過 line 的 message api 將圖片傳送回去,從此維護成本極低的 serverless line 回圖機器人就即刻開始為您服務啦。

關於 Imgur 部分以下分幾個步驟介紹

  1. 申請 imgur api key
    1. 先註冊 imgur 帳號 : http://imgur.com/
    2. 登入 imgur 後,在 setting 內註冊一個新的 application,並拿到 client id
      skitch
    3. 透過 imgur api 文件 可以看到,以我們的需求 ( 存取公開相簿及相片連結 ),我們僅需在 request 的 header 帶 client id 即可使用
    4. 直接做個測試,先用 imgur api 來取得我的帳號下的相簿清單試試,來透過 postman  發個 request ,  endpoint 參考
      skitch2
    5. 可以成功拿到,那代表 Imgur api 認證這邊都沒問題了!
  2. 建立 Imgur 相簿
    1. 依下圖步驟建立相簿,並上傳一些圖片到該相簿中
      skitch3
    2. 拿到該相簿的 id
      • 可以直接點進相簿看網址,相簿 id 就在網址上 ( 這個方式比較快, 格式像這樣 http://imgur.com/a/XXXXX ),不然其實也可以一樣用 imgur api 取得使用者相簿列表的方式查詢囉。
  3. Imgur 準備過程到這就結束啦!

而關於 Google Cloud Functions 基本部署步驟 及 Line 機器人註冊步驟 這邊請恕我略過,因為都可以在 透過 Google Cloud Functions 部署一隻成本極低且 Serverless 架構的 Line bot 內找到解答或連結,看完如果還有問題的話請再留言發問囉。

下面簡單用一張圖說明一下程式碼主要幾個部分

code_snipet

  1. 當聽到關鍵字時,則選用某本 Imgur 相簿內的照片
    // 當然這裡你也可以再 else if 下去,例如除早安外,聽到晚安時就改用晚安相簿內的照片 ( 有沒有這麼愛問候.. )
  2. 利用 imgur api 存取該相簿內的所有照片
  3. 將拿回來的照片陣列中先拿取其圖片網址,並從中隨機選一個網址
  4. 利用 line message api 將圖片網址作為圖片格式回傳回去
  5. 第五個比較特別需要說明一下,因為拿回來的圖片網址都只有 http,但是 line 只吃 https。而 imgur 剛好也很佛心地提供了 https 版本,所以這時候我們只要很簡單用字串取代將 http 改為 https 就可以啦!

本篇回圖機器人的所有程式碼我已上傳到 https://github.com/simonhsu/line-bot-with-imgur-image-reply-example,基本上只需要 :

  1. 將 repo 內的 index.js 及 package.json 的內容複製貼上至 Google Cloud Function 的內嵌編輯器
  2. 替換一下幾個變數
    • _KEYWORD1_  : 替換成要讓機器人聽的關鍵字,如"早安"
    • _IMGUR_ALBUM_ID_FOR_KEYWORD1_  : 替換成你在 imgur 上建的相簿 id
    • _IMGUR_APP_TOKEN_KEYWORD1_  : 替換成 imgur 上的 client id
    • _LINE_CHANNEL_ACCESS_TOKEN_  : 替換成你 line 機器人的 channel access token
  3. 在 Google Cloud Functions 部署完後大概會像這樣
    gcp
  4. 將上述部署完所獲得的 url 貼到所建立的 line 機器人 webhook url 內,如下
    ScreenClip
  5. 至此就大功告成啦!部署好之後趕快邀請你的早安機器人加入群組幫你說早安吧,哈哈

 

到這邊將早安回圖機器人改成 serverless 架構,又省圖片流量的部分就完成了!

是不是省時省錢又方便呢!而且試了一下發現 Imgur api 真的是蠻工程師-friendly的嘛

希望未來能看到更多像 imgur 的公司可以很潮地提供 api 接口讓我們做些有趣的應用,最重要的還是要提供免費額度給我們用啦,哈哈哈

後記

  1. 之前傳早安圖會發現,圖庫不大的話容易傳些重複的。也想過,既然我爸每天早上都會發早安新圖,那我乾脆再部一隻 line 機器人專門接收我轉傳過去的圖,然後一樣自動幫我透過 imgur api 上傳到相簿不就好了,哈哈,有趣有趣,有空再來試試!
    ( 或許未來也要多加些長輩的 line 收一點新圖,不然要找圖還真的不好找,真不曉得他們那些圖到底從哪來的..
  2. line 除了不只可以回最基本的訊息及圖片,還可以回 Video/ Audio/ Location/ Sticker/ Imagemap/ Template 等格式,或許未來也有機會可以多玩玩
廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s