Slackの投稿を分析する分析ダッシュボードを作る

K5 Playgroundのダッシュボード・テンプレートを使って、Slackに投稿されたメッセージを分析するアプリを作ります。

K5 Playgroundのダッシュボード・テンプレートは、初期状態ではモックAPIからダミーデータを取得して表示するだけの単純なアプリケーションです。このチュートリアルでは、それをカスタマイズして、Slack用の分析ダッシュボードを作ってみます。webhook用のAPIを新たに作成し、SlackのAPIロジックやPostgreSQLのAPIロジックを使うことで、Slackからメッセージを受信して分析するアプリケーションが短時間で作れます。

概要

材料

• テンプレート: Dashboard
• APIロジック: Slack, PostgreSQL
• 利用サービス: Slack, PostgreSQL

機能

• Slackに送信されたメッセージを全て受信する
• 受信したデータをPostgreSQLに格納する
• メッセージの統計情報をダッシュボードに表示する

アプリの作成

K5 Playgroundにアクセスします。

Frontend

1. Dashboardテンプレートを選択します。

Backend

1. 左メニューのWebAPIsからslack_eventというWebAPIを追加して、POSTを有効化してください。

2. POST slack_eventエンドポイントを選択します。

   1. MessagingメニューからSlack Receive EventAPIロジックを追加して、次のように編集します。

      var bodyData = req.swagger.params.data.value;
      
      if (bodyData.type === 'url_verification' && bodyData.challenge) {
        // @see https://api.slack.com/events/url_verification
        res.setHeader("Content-Type", "application/json");
        res.end(JSON.stringify({ challenge: bodyData.challenge }));
      } else {

   2. DatabaseメニューからPostgreSQL Save Data APIロジックを追加して、先頭を次のように編集します。

      var query = 'INSERT INTO slack_messages';
      var eventInfo = {
        event_type: results.type,
        user_id: results.user,
        message: results.text,
        create_date: new Date(results.ts * 1000),
        channel: results.channel
      };
      var columns = [];
      var valueParams = []
      var values = [];    
      Object.keys(eventInfo).forEach(function(column, index) {
        columns = columns.concat(column);
        valueParams = valueParams.concat('$' + (index + 1));
        values = values.concat(eventInfo[column]);
      });
      query += '(' + columns + ') VALUES (' + valueParams + ')';

3. APIロジック of GET sample_chartdata/lineエンドポイントを選択します。

   1. DatabaseメニューからPostgreSQL Fetch Document APIロジックを追加して次のように編集します。

      var query = 'SELECT date_part(\'hour\', create_date) AS hour, count(*) AS count_message FROM slack_messages GROUP BY date_part(\'hour\', create_date)';
      var values = [];
      	
      pgConnectionPool.query(query, values, function(err, result) {
        var daySummary = Array(24).fill(0).map((v, i) => ({ x: i, y: 0 }));	
        result.rows.forEach(function(row) {
          daySummary[row.hour].y = row.count_message;
        });
        next({chartData:[daySummary]});
      });

4. GET sample_chartdata/pie エンドポイントを選択します。

   1. DatabaseメニューからPostgreSQL Fetch Document APIロジックを追加して次のように編集します。

      var query = 'SELECT user_id, count(*) as count_message FROM slack_messages GROUP BY user_id';
      var values = [];
      
      pgConnectionPool.query(query, values, function(err, result) {
        // Set the data for response.
        next({
          chartData: result.rows.map(row => {
            return {
              x: row.user_id,
              y: row.count_message
            };
          })
        });
      });

5. GET sample_chartdata/number エンドポイントを編集します。

   1. DatabaseメニューからPostgreSQL Fetch DocumentAPIロジックを追加して、次のように編集します。

      var user_id = 'YOUR_USER_ID';
      var query = 'SELECT channel, count(*) AS count_message FROM slack_messages WHERE user_id = $1 GROUP BY channel';
      var values = [user_id];
      
      pgConnectionPool.query(query, values, function(err, result) {
        var sampleData = Array(4).fill(0).map((v, i) => ({
          title: 'empty',
          data: '0',
          unit: 'messages'
        }));
      
        result.rows.forEach((row, index) => {
          sampleData[index].title = row.channel;
          sampleData[index].data = row.count_message;
        });
      
        next({ chartData: sampleData });
      });

6. GET sample_chartdata/table エンドポイントを選択します。

   1. DatabaseメニューからPostgreSQL Fetch DocumentAPIロジックを追加して次のように編集します。

          var query = 'SELECT channel, create_date::DATE, count(*) AS count_message FROM slack_messages GROUP BY channel, create_date::DATE';
          var values = [];
      
          pgConnectionPool.query(query, values, function(err, result) {
      	next({
      	  tableData: result.rows.map(v => ({
      	    user_id: v.user_id,
      	    date: (new Date(v.create_date)).toDateString(),
      	    messages: v.count_message
      	  })),
      	});
      });

7. アプリケーションをダウンロードします。

アプリのカスタマイズ

Frontend

特にすることはありません。

Backend

1. Swagger api/swagger.jsonを編集します。

   "/slack_event": {
     "post": {
       "description": "",
       "parameters": [
         {
           "name": "data",
           "in": "body",
           "required": true,
           "schema": {
             "type": "object",
             "properties": {
               "challenge": {
                 "type": "string"
               },
               "token": {
                 "type": "string"
               },
               "type": {
                 "type": "string"
               }
             }
           }
         }
       ],
       "responses": {

2. config.jsにSlackやPostgreSQLの接続情報を設定します。

アプリのデプロイ

サービス

PostgreSQLにslack_messagesテーブルを作成してください。

Backend

cd backend
cf push [APP_NAME]

Frontend

cd frontend
npm install
set API_URL=[Backend URL] # for Windows
export API_URL=[Backend URL] # for Mac/Linux
npm run build
cf push [APP_NAME] -p public

ダウンロード

• Sample Application

Version

• Dashboard Template: v1.0.0