K5 Playground

Analytics dashboard for Slack

60 min
Saito
  1. 1. Information
    1. 1.1. Ingredients
    2. 1.2. Functions
    3. 1.3. Requirements
      1. 1.3.1. Database
  2. 2. Create the application
    1. 2.1. Frontend
    2. 2.2. Backend
  3. 3. Customize the application
    1. 3.1. Frontend
    2. 3.2. Backend
  4. 4. Deploy the application
    1. 4.1. Backend
    2. 4.2. Frontend
  5. 5. Download
  6. 6. Version

Slack Receive Event and Dashboard Template help you to handle events of Slack and display charts.

In this tutorial, I explain how to develop a dashboard application which shows statistics of events on Slack.

Information

Ingredients

  • Template: Dashboard
  • API Loigcs: Slack, PostgreSQL

Functions

  • Receiving events from Slack.
  • Storing event data in PostgreSQL.
  • Aggregating the events and showing the result on charts and tables.

Requirements

Database

To run this program, you need to create PostgreSQL tables.

  • tables
    • slack_messages

Create the application

Frontend

  1. Choose the Dashboard Template.

  2. Customize the UI in K5 Playground.

Backend

  1. Add a WebAPI.

    Create a new WebAPI named slack_event and activate POST method to receive messages from Slack.

  2. Edit the API Logic of POST slack_event endpoint.

    1. Add the Slack Receive Event API Logic from Messaging menu at the right pane.

    2. Change the code by adding a response for the url_verification.

      1
      2
      3
      4
      5
      6
      7
      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 {

    3. Add the PostgreSQL Save Data API Logic from Database menu at the right pane..

    4. Edit its code to save messages coming from Slack.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      var eventInfo = {
        event_type: results.type,
        user_id: results.user,
        message: results.text,
        create_date: new Date(results.ts * 1000),
        channel: results.channel
      };

      // @todo change tableName
      var query = 'INSERT INTO slack_messages';
      var columns = [];
      var valueParams = []
      var values = [];

      // constructs query from body.data
      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 + ')';

      pgConnectionPool.query(query, values, function(err, result) {
        if (err) {
          console.log(err);
        }
        next();
      });

  3. Edit the API Logic of GET sample_chartdata/line endpoint.

    1. Delete the Sample Data API Logic.

    2. Add the PostgreSQL Fetch Document API Logic from Database menu at the right pane.

    3. Edit the code to create a response data for the line chart.

      The line chart is going to be a day summary showing a hourly counts of messages.
      The logic would be as below, counting messages by hour.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      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) {
        // initialize the day summary.
        var daySummary = Array(24).fill(0).map((v, i) => ({ x: i, y: 0 }));

        result.rows.forEach(row => {
          daySummary[row.hour].y = row.count_message;
        });

        // Set the data for response.
        next({
          chartData: [
            daySummary
          ],
        });
      });

  4. Edit the API Logic of GET sample_chartdata/pie endpoint.

    1. Add the PostgreSQL Fetch Document API Logic from Database menu at the right pane.

    2. Edit the code to create a response data for the pie chart.

      Pie chart shows numbers of messages posted by users.

      The logic would be as below.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      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. Edit the API Logic of GET sample_chartdata/number endpoint.

    1. Add the PostgreSQL Fetch Document API Logic from Database menu at the right pane.

    2. Edit the code to create a response data for the number chart.

      Number Cards show totals of messages you posted. The logic would be as below, counting your messages by channels.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      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. Edit the API Logic of GET sample_chartdata/table endpoint.

    1. Add the PostgreSQL Fetch Document API Logic from Database menu at the right pane.

    2. Edit the code to create a response data for the table chart.

      Table shows totals of messages by channels and dates.
      The logic would be as below.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      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) {
        // Set the data for response.
        var tableData = {
          tableData: result.rows.map(v => ({
            user_id: v.user_id,
            date: (new Date(v.create_date)).toDateString(),
            messages: v.count_message
          })),
        };

        next(tableData);
      });

  7. Download the application.

Customize the application

Frontend

As long as your backend APIs stick with the response format,
you don’t need to do anything on Frontend code.

Backend

  1. Edit swagger(api/swagger.json) to receive slack events.

    Add parameter property to /slack_event.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    "/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": {

Deploy the application

Finally, you are ready to deploy your application.

Backend

1
2
cd backend
cf push [APP_NAME]

Frontend

1
2
3
4
5
6
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

Download

Version

  • Dashboard Template: v1.0.0
Tutorial React.js Flux Node.js Swagger BFF SPA Microservice K5 K5 CF Dashboard Slack PostgreSQL K5 RDS