Creating a Team Dashboard with Smashing

Every now and then, I chose to work on a side project that could benefit our Development team or Hanley Wood in some way. I decided to create a team dashboard for Hanley Wood employees to see what the Business Media Development team is up to and learn about who we are. We used to have a dashboard that displayed on our TV monitors years ago, so the idea initially stemmed from that concept.

I started on this back in 2017, took a break from it, and then finally completed it just a few months ago. Many of the widgets created for the Smashing framework were outdated, so I had to read up on quite a few APIs to update the code. For the UI design, I decided to use Tachyons and Font Awesome.

What’s Smashing?

Smashing is an open-source dashboard framework that uses Ruby and Coffeescript.

It’s easy to add widgets, and there are many that a premade at https://github.com/Smashing/smashing/wiki/Additional-Widgets

Here’s a super simple one to display Twitter mentions, courtesy of Vanessa Henderson on Github:

twitter.rb

require 'twitter'

#### Get your twitter keys & secrets:
#### [https://dev.twitter.com/docs/auth/tokens-devtwittercom](https://dev.twitter.com/docs/auth/tokens-devtwittercom)
twitter = Twitter::REST::Client.new do |config|
  config.consumer\_key = 'YOUR\_CONSUMER\_KEY'
  config.consumer\_secret = 'YOUR\_CONSUMER\_SECRET\_KEY'
  config.access\_token = 'YOUR\_ACCESS\_TOKEN'
  config.access\_token\_secret = 'YOUR\_ACCESS\_TOKEN\_SECRET'
end

SCHEDULER.every '15m', :first\_in => 0 do |job|
  begin
    user = twitter.user
    if mentions
      mentions = mentions.map do |tweet|
        { name: tweet.user.name, body: tweet.text, avatar: tweet.user.profile\_image\_url\_https }
      end

send\_event('twitter\_mentions', {comments: mentions})
    end    
  rescue Twitter::Error
    puts "\e[33mThere was an error with Twitter\e[0m"
  end

end

Then insert the following HTML into the dashboard.erb file:

<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
      <div data-id="twitter\_mentions" data-view="Comments" style="background-color:#00afd7;" data-moreinfo="Tweets @sourceclear" ></div>
      <i class="icon-twitter icon-background"></i>
  </li>

More info on this widget can be found at this gist: https://gist.github.com/VanessaHenderson/9aa0823efdfc085f675d

What’s Included?

The goal for this dashboard was for it to be something that could display on the TV monitor near the dev team as well as be accessible to internal employees.

For this reason, I decided to include the following info to display:

• Links to helpful resources  — included our internal documentation site, our team availability calendar, and a link to email requests for interactives.
• List of team members  — this used the Slack widget and used an icon to display whether or not a team member is online.
• Sprint details  — this included the sprint dates, goal(s), and the status of bugs.
• Deployment details  — included the date of the next deployment and any additional information, such as if there is a delay.
• Code commits  — used separate modules to display code changes to our CMS system and code changes to our Continuing Education system.

What was Challenging?

Most of this project involved dealing with code I’d never dealt with before, so that was a challenge in itself. I had to learn Ruby, Coffeescript, and the APIs for Slack, Github, and Google. The problems that hindered me the most was trying to use a widget that initially didn’t work, only to realize I needed to update to a new API, and trying, and failing, to use the Vivify API to use sprint data.

Outdated Widgets

The list of user-submitted widgets provided by Smashing was super helpful, however many are were outdated.

For instance, the Slack API had changed since the creation of the Slack User Presence widget, so I had to familiarize myself with the API instead of being able to use the widget right out the box.

This line:

slack\_client = Slack::Client.new token: options[:api\_token]

ended up having to change to:

slack\_client = Slack::Web::Client.new token: options[:api\_token]

Vivify Scrum

I had a hard time working with Vivify Scrum’s API to display the info I wanted. I asked via Twitter if it was possible to obtain the current sprint using their API, and they said, “no.” To finally finish the project, I scrapped trying to use the API and opted to populate the sprint data using a Google Form, thus, I learned how to use the Google Drive and Spreadsheets APIs to populate the sprint data into the dashboard. I can always come back to utilizing the Vivify Scrum API later.

Conclusion

I had a lot of fun working on this. It was a side project meant for me to work on something outside of what I typically do at Hanley Wood. Not everything worked out as I expected, but I’m glad to have the experience under my belt.