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。

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

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

#Chatbot #Google Apps Script #API
在巴哈姆特的聊天平台「哈哈姆特不EY」製作聊天機器人。






Related Posts

[MTR04] W1 D3 Git 進階指令

[MTR04] W1 D3 Git 進階指令

git 狀況劇

git 狀況劇

從 V8 bytecode 探討 let 與 var 的效能問題

從 V8 bytecode 探討 let 與 var 的效能問題



Sponsored



Comments