Day 6 - 使用 Tenor API 讓惠惠傳送隨機爆炸 gif

這是「給不會寫程式的人的惠惠機器人開發攻略」的第六篇。

我們將會使用 Tenor API 來讓機器人傳送隨機爆炸 gif。

什麼是 API

什麼是 API 呢？這個是哈哈姆特官方文件寫的說明：

Application Programming Interface 應用程式介面 簡稱API，

在哈哈姆特不EY，我們開放大部分的聊天功能api給外部的程式設計者進行使用。例如：傳送訊息

以傳送訊息為例子：

未開放此api的情況下：要進行傳送訊息必須要使用者(巴友)登入帳號，並且使用哈哈姆特不EY提供的聊天介面自行打字發送訊息給對方。

而開放了傳送訊息api：使用者只要寫一個聊天程式就可以不用開啟哈哈姆特不EY的介面，也不用自行打字，使用api就能發送訊息出去。

這段大概的意思是如果沒有 API 的話，一定要使用哈哈姆特的介面才能傳送訊息給別人。
有了 API，我們就能使用自己寫的程式碼傳送訊息。

也可以參考這篇文章：API 到底是什麼？ 用白話文帶你認識

我們透過哈哈姆特傳送訊息給使用者，其實就是在使用哈哈姆特的 API。
接下來我們要使用 Tenor API 來讓機器人傳送隨機的 gif。

使用 Tenor API 傳送隨機 gif

STEP 1. 取得 Tenor API Key

到 Tenor 的開發者首頁註冊一個帳號。
https://tenor.com/developer/dashboard

註冊好了之後點Create New App，會進入 API Key Registration
這裡可以隨便填就好。

回到開發者首頁，複製你的 API Key。

丟到你的 GAS 裡面，設一個全域變數。

var TENOR_API_KEY = "你的API Key";

STEP 4. 寫一個取得隨機 gif 的函式

要使用 Tenor API，就要閱讀 Tenor API 的文件。
找到我們想要使用的功能，然後學習如何使用。

使用 Tenor API 跟使用哈哈姆特API很像，都需要傳送請求。
把下面的函式丟進 GAS 裡面。

function getRandomGif(tag){

  //var tag = "cat";
  var TENOR_URL = "https://api.tenor.com/v1/random?key=" + TENOR_API_KEY + "&q=" + tag + "&limit=1";
  var response = UrlFetchApp.fetch(TENOR_URL).getContentText();
  var response_json = JSON.parse(response);
  //Logger.log(response_json);
  //Logger.log(response_json.results[0].media[0].mediumgif.url);
  return response_json.results[0].media[0].mediumgif.url;
}

如果沒有串接API的經驗一定很難看懂這一堆程式碼是什麼。

接下來我們要分析這個函式。我覺得如果是新手的話，先跳過下面這一段分析也沒關係。

1. 這個函式會接收一個名為 tag 的參數，這個 tag 可以讓 Tenor 取得有這個 tag 的 gif。

2. 這個函式會回傳 gif 的網址。

3. 網址參數要按照 Tenor API 官方文件來設定
   var TENOR_URL =
"https://api.tenor.com/v1/random?key=" 這個是 API 的網址。
   + TENOR_API_KEY 加上你的 API Key
   + "&q=" + tag 這個是要使用的tag
   + "&limit=1" 我們只要一張 gif 就好

1. var response = UrlFetchApp.fetch(TENOR_URL).getContentText();
   你已經看過UrlFetchApp.fetch()這個函式了，這個函式可以用來傳送 GET 或 POST 請求。
   UrlFetchApp.fetch()的用法在GAS的官方文件都查的到。
   UrlFetchApp.fetch()會回傳一個名為HTTPResponse的 Class。
   
   我們再使用getContentText()取得回傳的HTTPResponse的字串。

2. var response_json = JSON.parse(response);
   把字串轉成物件。

3. return response_json.results[0].media[0].mediumgif.url;
   還記得 JSON 長怎樣嗎？它是一層一層的。我們只需要 gif 的網址，所以回傳這個東西。
   如果還是不太清楚它在做什麼的話，可以把註解的部份都去掉，然後執行看看這個函式。

STEP 5. 設計回覆的訊息

接下來要設計回覆的訊息

回到doPost(e)，加上一個else if

 else if (msg == "explosion"){
    botReply( getRandomGif("explosion") );
  }

如此一來，使用者只要輸入"explosion"，惠惠就會傳送一個爆炸 gif。

我們可以設計一個指令，讓惠惠傳送含有任意 tag 的 gif。
像是 "/gif explosion" 就會傳送含有 explosion tag 的 gif。

if(msg[0] == '/'){

    if (msg.indexOf("/gif") > -1 && msg.length >= 6){
        var slicedMsg = msg.slice(5,msg.length);
        botReply(getRandomGif(slicedMsg));
    }
}

首先要判斷 /gif 有沒有在訊息裡面。
目前 GAS 不能使用String.startsWith()這個函式，所以只好使用別的方法。

我們使用indexOf()來檢查訊息有沒有含有"/gif"，也要檢查字串的長度。

而如果沒有外面那一層判斷的話，像 "wryyyyyy/gif" 這樣的訊息都會觸發。

最後使用slice()切割字串，再把切割的字串當作是getRandomGif()的參數。

結語

我覺得這是最有趣的一篇了。
可以把隨機gif跟其他功能結合，要怎麼結合就是看自己的創意了。
學會了串接 API 之後，也可以嘗試串各種不同的 API。

下一篇教學會是這個系列的最後一篇。

上一篇 | 回到系列文 | 下一篇