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

Go Web 程式設計入門教學:語法基礎之流程控制(flow control)篇

Go Web 程式設計入門教學:語法基礎之流程控制(flow control)篇

NPM (Node Package Manager)

NPM (Node Package Manager)

一看就懂的 React 開發環境建置與 Webpack 入門教學

一看就懂的 React 開發環境建置與 Webpack 入門教學

Finite State Machine (FSM) 介紹

Finite State Machine (FSM) 介紹

Vue.js 學習旅程Mile 6 – 資料單向綁定篇:v-text & v-html

Vue.js 學習旅程Mile 6 – 資料單向綁定篇:v-text & v-html

Day03_Origami學習筆記

Day03_Origami學習筆記



Comments