Serverless! 使用 AWS 開發 Slack Slash Commands


本文介紹如何使用 AWS Lambda & AWS API Gateway 搭建一個不需要伺服器的環境，提供 Slack Slash Commands 查詢豆瓣電影。
2016-01-24 Update：New – Slack Integration Blueprints for AWS Lambda
在 Slack 輸入 /movie 絕地救援，會顯示相關的電影資料。

這篇文章使用到的技術：
閱讀這篇文章需要具備什麼能力：
  • Node.js 的基本能力
  • Amazon Web Services 的基本操作
接下來我會逐步講解這些東西：
  • Slack Slash Commands 的運作機制
  • 建立一個簡單的 AWS Lambda function
  • 建立一個簡單的 AWS API Gateway 執行 Lambda function
  • 使用 Lambda 呼叫豆瓣電影 API
  • 測試 AWS API Gateway
  • 將 API Gateway endpoint 加入至 Slack Slash Command

Slack Slash Commands 的運作機制

當你在 Slack channel 輸入 /movie 權力的遊戲，Slack 會發出一個 content-type Header 設為 application/x-www-form-urlencoded 的 HTTP POST 請求，格式如下：
token=YOUR_SLASH_COMMAND_TOKEN
team_id=YOUR_TEAM_ID
team_domain=YOUR_TEAM_DOMAIN
channel_id=YOUR_CHANNEL_ID
channel_name=YOUR_CHANNEL_NAME
user_id=YOUR_USER_ID
user_name=YOUR_USER_NAME
command=/movie
text=權力的遊戲
response_url=YOUR_HOOK_URL
然後 Slack 需要收到的 JSON 回應格式如下（詳見 Attachments）：
{
  "response_type": "in_channel",
  "attachments": [
    {
      "title": "權力的遊戲 第五季",
      "title_link": "http://movie.douban.com/subject/25826612/",
      "text": "Game of Thrones\n2015年",
      "fields": [
        {
          "title": "導演",
          "value": "Michael Slovis\n...",
          "short": true
        }, ...
      ],
      "thumb_url": "https://img1.doubanio.com/view/movie_poster_cover/ipst/public/p2230256732.jpg"
    }
  ]
}
responsetype: inchannel 表示 channel 內的使用者都可以看見，若只想給使用命令的本人看的話可以改成 ephemeral
Slack Slash Commands 有 3000 ms 的 response timeout 限制

建立一個簡單的 AWS Lambda function

  1. 前往 AWS Lambda
  2. 點選 Create a Lambda function
  3. 填寫 Configure function，例：slackFunction
  4. Runtime 選擇 Node.js
  5. Code entry type 選擇 Edit code inline，輸入簡單的測試程式碼：
exports.handler = function(event, context) {
  context.succeed("你好世界!");
};
  1. Role 使用 lambdabasicexecution
  2. 點選 Next 完成建立
  3. 點選 Test 測試結果：
你好世界!

建立一個簡單的 AWS API Gateway 執行 Lambda function

  1. 前往 AWS API Gateway
  2. 點選 New API
  3. 填寫 API name，例：Slack API
  4. 點選 Create API 完成新增
  5. 點選 Create Resource
  6. 填寫 Resource Name & Resource Path，例：movie
  7. 點選 /movie
  8. 點選 Create Method
  9. 選擇 POST
  10. Integration type 選擇 Lambda Function
  11. 選擇 Lambda Region
  12. 填寫 Lambda Function，例：slackFunction
  13. 點選 Save 完成建立
  14. 點選 Test 測試結果：
你好世界!

使用 Lambda 呼叫豆瓣電影 API

豆瓣電影搜索 API 的格式如下：
GET https://api.douban.com/v2/movie/search?q={text}
例：https://api.douban.com/v2/movie/search?q=權力的遊戲
{
  "count": 20,
  "start": 0,
  "total": 130,
  "subjects": [
    {
      "rating": {...},
      "genres": [...],
      "collect_count": 47770,
      "casts": [
        {...}, ...
      ],
      "title": "权力的游戏 第五季",
      "original_title": "Game of Thrones",
      "subtype": "tv",
      "directors": [
        {...}, ...
      ],
      "year": "2015",
      "images": {...},
      "alt": "http://movie.douban.com/subject/25826612/",
      "id": "25826612"
    }, ...
  ],
  "title": "搜索 \"權力的遊戲\" 的结果"
}
取代 Edit code inline，在本地建立一個 Node.js Lambda project：
$ npm init
加入一個支持 promise 的 XMLHttpRequest 庫：
$ npm install request-promise --save
新增 index.js：
var rp = require('request-promise');
exports.handler = function(event, context) {
  // 從傳進來的參數之中提取要搜尋的字串
  var text = event.text ? event.text.trim() : null;

  // 向豆瓣 API 發出 HTTP GET 請求
  rp('https://api.douban.com/v2/movie/search?q=' + text)
    .then(function(data) {
      // 回傳成功的結果
      context.succeed(data);
    }).catch(function(error) {
      // 回傳失敗的結果
      context.fail(error);
    });
};
將檔案壓縮成 lambda.zip：
./index.js
./node_module/request-promise
  1. 回到 AWS Lambda
  2. 點選之前建立的 function，例：slackFunction
  3. 將 Code entry type 從 Edit code inline 改為 Upload a .ZIP file
  4. 上傳 lambda.zip
  5. 點選 Actions > Configure test event，加入測試用的請求
{
  "text": "權力的遊戲"
}
點選 Test 測試豆瓣回應的結果：
{
  // ...
  "subjects": [
    {
      // ...
      "title": "权力的游戏 第五季",
      // ...
    }, ...
  ],
  "title": "搜索 \"權力的遊戲\" 的结果"
}

測試 AWS API Gateway

  1. 回到 AWS API Gateway
  2. 點選 /movie 的 POST method
  3. 點選 Test，並在 Request Body 加入測試用的請求：
{
  "text": "權力的遊戲"
}
點選 Test 測試 Lambda 回應的豆瓣結果：
{
  // ...
  "subjects": [
    {
      // ...
      "title": "权力的游戏 第五季",
      // ...
    }, ...
  ],
  "title": "搜索 \"權力的遊戲\" 的结果"
}

將 API Gateway endpoint 加入至 Slack Slash Command


因為 Slack 發送的請求 Header 格式是 application/www-form-urlencoded，所以需要在 AWS API Gateway 之中將它轉換成為 application/json 格式：
  1. 點選 /movie 的 POST method
  2. 點選 Method Execution
  3. 點選 Integration Request
  4. 點選 Mapping Templates
  5. 點選 Add mapping template
  6. Content-Type 填寫 application/www-form-urlencoded
  7. 將 Input passthrough 改成 Mapping template
  8. 貼上 Ryan Ray 提供的 template gist
  9. Save
  10. 最後，一定要記得把 API Gateway 部署給外部使用：
  11. 點選 Deploy API
  12. Deployment stage 選擇 New Stage
  13. 填寫 Stage name，例：development
  14. 點選 Deploy 完成發佈
  15. 然後會得到一個 Invoke URL 格式如下：
https://{hash}.execute-api.{region}.amazonaws.com/{stage}/movie
接下來的步驟，把 AWS API Gateway endpoint 整合進 Slack：
  1. 前往 https://YOURTEAMDOMAIN.slack.com/apps/manage
  2. 在 Search app directory 搜尋框輸入 Slash Commands 並進入
  3. 點選 Add Configuration
  4. 填寫 Choose a Command，例：/movie
  5. 點選 Add Slash Command Integration
  6. 填寫 URL，貼上 AWS API Gateway Invoke URL
  7. Method 選擇 POST
  8. 點選 Save Integration 完成新增

最後一個步驟，更新 Lambda function，讓它可以處理 Slack 的請求與回應：
var rp = require('request-promise');
exports.handler = function(event, context) {
  /**
   * event 會收到來自 AWS API Gateway 轉換過的 Slack POST JOSN
   * {
   *   token=YOUR_SLASH_COMMAND_TOKEN
   *   team_id=YOUR_TEAM_ID
   *   team_domain=YOUR_TEAM_DOMAIN
   *   channel_id=YOUR_CHANNEL_ID
   *   channel_name=YOUR_CHANNEL_NAME
   *   user_id=YOUR_USER_ID
   *   user_name=YOUR_USER_NAME
   *   command=/movie
   *   text=權力的遊戲
   *   response_url=YOUR_HOOK_URL
   * }
   */
  if(event.token !== 'YOUR_SLASH_COMMAND_TOKEN') {
    return context.fail('未經授權的請求');
  }
  var text = event.text ? event.text.trim() : null;

  // 向豆瓣 API 發出 HTTP GET 請求
  rp('https://api.douban.com/v2/movie/search?q=' + text)
    .then(function(data) {
      // 提取第一筆電影的結果
      var subject = data.subjects[0];
      // 將豆瓣 API 返回的結果包裝成 Slack 支持的格式
      var result = {
        "response_type": "in_channel",
        "attachments": [{
          "title": subject.title,
          "title_link": subject.alt,
          "text": subject.original_title+"\n"+subject.year+"年",
          "fields": [
            {
              "title": "導演",
              "value": subject.directors[0].name,
              "short": true
            }
          ],
          "thumb_url": subject.images.small
        }]
      };
      // 回傳結果
      context.succeed(result);
    }).catch(function(error) {
      // 回傳失敗的結果
      context.fail(error);
    });
};
  1. 重新壓縮 lambda.zip 然後上傳
  2. 在 Slack channel 輸入 /movie 測試結果

總結

留言

張貼留言

這個網誌中的熱門文章

全遠端工作

圖片
每周分享第 21 期 全遠端工作 原文標題：All Remote 原文網址：https://about.gitlab.com/company/culture/all-remote/ 原文作者：GitLab GitLab 是一間實行 全遠端 （All Remote）的公司， 團隊成員 遍布全球 50 多個國家。 這裡 有介紹一些 GitLab 的工作原理。 遠端宣言 全遠端工作提倡： 從世界各地招聘和工作，而不是從都市地帶 彈性工時，勝過固定工時 寫下和記錄知識，勝過口頭傳授 寫下流程，勝過在職培訓 公開分享資訊，勝過僅知原則（need-to-know access，僅給予完成一件任務所需要知道的事項即可） 開放所有文件供任何人編輯，勝過自上而下的文件控制 非同步通訊，勝過同步通訊 工作的成果，勝過投入的工時 正式的溝通管道，勝過非正式的溝通管道 正式溝通 vs 非正式溝通（ 來源 ） 為什麼需要遠端？ 遠端不是一個需要克服的挑戰。這是一個明顯的商業優勢。 — Victor, Product Manager, GitLab 從節省辦公空間的成本到員工的日常生活更加彈性，全遠端工作為組織及其員工提供了許多好處。但我們也體認到，並非所有人都適合成為一家全遠端的公司。 以下是一些優點和缺點。 優點 對於員工 日常生活更加彈性（小孩、父母、朋友、雜務、運動、快遞） 不會浪費時間、精力和金錢在通勤上（捷運和公車、油價、維修保養、收費站等） 減少接觸同事的病菌 減少被打斷的狀態，提高 生產力 能夠在不請假的情況下遊歷各地（家庭、娛樂等） 自由移動 有些人發現遠端更容易與難搞的同事溝通 減少入職可能會有的社交壓力 在家吃飯（有時）更好、更便宜 某些國家的稅收可能更便宜 不用煩惱今天穿什麼 從家庭時間到旅行計劃，有很多關於遠端工作是如何影響全球 GitLab 團隊成員生活的 例子和...
閱讀完整內容

影響我一生的十大遊戲（一）

圖片
每周分享第 19 期 影響我一生的十大遊戲（一） 自 1989 年的平成元年算起，持續了約 30 年的「平成時代」已於今年 4 月畫下句點，5 月起由新年號「令和」正式接班。 日本遊戲媒體 週刊ファミ通 日前 公布 由讀者票選的「平成最佳遊戲」前三名經典作品。 來源： ファミ通.com 拿下第一名的是 1995 年在 SFC（俗稱： 超任 ）平台發售的《 超時空之鑰 》。本作受到 30 歲以上玩家（包括我）一致壓倒性支持，高票獲選。 來源： ヤフオク 《超時空之鑰》是由 SQUARE （當時尚未合併 SQUARE ENIX ）負責製作發行，《 七龍珠 》作者 鳥山明 、《 勇者鬥惡龍 》之父 堀井雄二 ，以及《 太空戰士 》之父 坂口博信 聯手打造的夢幻級 RPG。無論是劇情、美術、系統或音樂，放到今天來看仍是經典的不朽名作。 創新的時空旅行與多重結局成為不少玩家一生難忘的回憶（來源： ヤフオク ） 作為一路走過昭和、平成、令和時代的三朝元老級玩家，見證了這 30 年間五花八門的遊戲作品問世。最近看了 YouTube 頻道 攻壳 Gamker 的《 十大影響我的遊戲 》影片之後，也想來寫一系列「影響我一生的十大遊戲」文章。 第十位：熱血行進曲（FC） ...
閱讀完整內容

無限環境（ㄧ）Netlify Deploy Previews

圖片
大綱 什麼是「無限環境」？ 什麼是 Netlify Deploy Previews？ 快速入門指南 步驟一、建立 React 網站 步驟二、建立 GitHub repository 步驟三、註冊＆配置 Netlify ⭐️ 最終步驟、玩轉 Deploy Previews ⭐️ 總結 附錄 參考資料 什麼是「無限環境」？ 大家常用的 GitHub flow 其實有一個常常被忽略的重點 —— 合併前部署。 我自己在前端開發的 Code Review 上，常常碰到下列兩個問題： PR 合併、部署到 staging 或 production 環境之後，才發現程式碼有問題 為了避免第一個問題發生，就必須先 checkout PR 到 local 環境，然後經過一系列繁瑣的步驟跑起來，最後才能開始驗收和測試 為了解決上述問題，就需要引入無限環境的概念。 所謂的無限環境，就是自動將目前 PR 中的最新 commit，部署到一個臨時環境中，並返回該環境的 URL 網址。[1] 如果能實現這個條件，將為開發團隊帶來兩點好處： Reviewer 有任何懷疑時，便可以直接在預覽環境中驗證，而非憑空猜疑。 Reviewer 也可以放心大膽的驗證自己的懷疑，不需要在 local 開發環境耗時費力地切換。 接下來我會寫三篇「無限環境」系列的文章，介紹一些可以達成這個目的的工具。 這是第一篇文章，介紹如何透過 Netlify 的 Deploy Previews 服務，建立靜態網頁的無限環境。 什麼是 Netlify Deploy Previews？ Netlify 是一個類似 Heroku 的 All-in-one PaaS ，提供各種現代 web 專案會用到的自動化服務，例如：靜態網站部署、CDN、持續交付和一鍵配置 HTTPS 等。 其中 Deploy Previews 這項服務，可以將 GitHub repository 中的每個 pull request 部署到 唯一 的 URL，與 staging 和 production 環境的完全不同。你和你的團隊可以在合併到主分支、並且部署到正式環境之前，提前看到更改的外觀以及驗收功能是否正確。 快速入門指南 這篇文章會以時下最流行的 Create React App 為例，示範如何實現 React ...
閱讀完整內容