Superb Dashboard with WordPress and Github widgets

The other day in the office with a gorgeous view full of sunlight, I was passionately stubbled on our metrics. I thought about statistics about how cool they might be looking on the screen. Imagine extracting all data from different sources like Github, some trending messages from Twitter and unique visitors of your WordPress blog. Then imagine showing it in one place, like some big TV screen for everybody, motivating all of your team members. – No sooner said than done! I thought.

If you have read the article Reverse Engineering using Chrome you probably remember that usually, I use Chrome to debug websites. It helps me to spot the particular request and actually lets me pretend as I am some modern browser using command line tool. It copies all the necessary stuff that usually is stored in your browser: cookies, user agent, authorization tokens and allows you to get the response. In short, recall the panel Networks in Chrome? Just find the request that interest you, copy as cURL, then pass to https://jhawthorn.github.io/curl-to-ruby/ and if you lucky enough you’ll end up with JSON out of which you can extract more or less useful information, otherwise it’s possible that you may need to parse whole HTML page with Nokogiri library.

Screen Shot 2018-02-15 at 08.37.36

In this article, we are going to build a simple widget displaying page views of your blog hosted on WordPress. Fortunately, it’s doable extracting data from JSON. Keep in mind that we have no access to the public API even if it’s not true.

I googled for a moment and have found github.com/shopify/dashing which should help us to build the control panel with our own widgets. Sad that Shopify has discontinued the support of the project, although the project still alive as fork called Smashing.

Screen Shot 2018-02-15 at 08.32.34.png

Code

So, first of all, you may want to install smashing and create your first application.

$ gem install 'smashing'
$ smashing new myapp

Then, in the lib folder, you may want to create two classes – Request and WordPress. I made a class that inherits Request class, this way it allowed me quickly to implement several requests for different resources. For conversion of particular curl request, I have used https://jhawthorn.github.io/curl-to-ruby/ which I recommend to give a shot if you have never tried.

What we have here, is simply response method that we are going to use in our child class.

Afterward, in the jobs folder, create a job named statistics.rb and put in there the following code.

Now what is left, is just to bring the statistics inside the widget like that and it’s ready!

Start the application using smashing start command

$ smashing start

Screen Shot 2018-02-27 at 21.17.59

Good enough, but how about tracking your Github repository stars?

As we already implemented request.rb, it needs just to create new child class named github.rb and as long as the response would be plain HTML body, we need to parse it using Nokogiri.

Now create an instance and extract stars_count and that’s pretty much all you need.

Simple as that. Let me know if you need any help, don’t hesitate to write DM on Facebook or Twitter. As always don’t forget to share if you found it useful and see you next time!

One thought on “Superb Dashboard with WordPress and Github widgets

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s