DEV Community

Cover image for Dev.to - How to Create Your Own Articles Dashboard
david wyatt
david wyatt

Posted on • Updated on

Dev.to - How to Create Your Own Articles Dashboard

I love Dev.to, I've tried a few blog sites and none come close. But if I'm being picky the analytics aren't the best. I would love to be able to see a previous days total, which blogs had new views on a specific date, and an overall split by blog.

Fortunately Dev.to (forem) has a nice open API that we can use to gather the information we want, on top of that there are a couple of other free software tools we can use to pull all that data together into a nice (and I use that term loosely) dashboard.

We need an RPA tool to query the api, a place to store the data and present the data, there are lots of possible solutions, I looked at a few for each:

RPA Workflow

  • Power Automate
  • Zap
  • Make
  • IFTTT

Storage

  • Google Sheets
  • SharePoint/OneDrive
  • Ragic
  • Caspio

Dashboard

  • PowerBI
  • Google Data Studio
  • Excel
  • Google Sheets

I ended up with a couple of working tech stacks, but in the end I went with:

  • Make
  • Google Sheets *2

I'm pretty sure it wasn't the best, but it had 3 things going for it was:

  • Free
  • Quick
  • Covered Everything

Trying to find free tier's that had enough api calls, storage and free online publishing wasn't easy. Zap was great, but not enough runs on free tier, Ragic only 1000 rows, Power BI only had a trial license.

My ideal solution would have been:

  • Power Automate
  • SharePoint
  • Power BI

It was quick, covered everything, but very much wasn't free.


So here's the plan,

We use Make to create a scheduled automation, that runs at end of day, with a http request to dev.to api. It then writes the data to Google Sheets.

In Google Sheets I do some pivoting and data transformation.

Additionally I create some charts/dashboards I want, and publish them to a url.


1. Dev.to API

The api is very easy to use, it can be found here https://developers.forem.com/api. V0 is supposed to be deprecated, but currently I found all the key functionality missing from V1, so Im using V0 for now.

You need an api key, found in Settings/Extensions.

Image description

The getUserArticles api, as it comments_count, positive_reactions_count, public_reactions_count and page_views_count, all the info I wanted.

[
  {
    "type_of": "string",
    "id": 0,
    "title": "string",
    "description": "string",
    "cover_image": "string",
    "published": true,
    "published_at": "2019-08-24T14:15:22Z",
    "tag_list": [
      "string"
    ],
    "slug": "string",
    "path": "string",
    "url": "string",
    "canonical_url": "string",
    "comments_count": 0,
    "positive_reactions_count": 0,
    "public_reactions_count": 0,
    "page_views_count": 0,
    "published_timestamp": "2019-08-24T14:15:22Z",
    "body_markdown": "string",
    "user": {
      "user_id": 0,
      "name": "string",
      "username": "string",
      "twitter_username": "string",
      "github_username": "string",
      "website_url": "string",
      "profile_image": "string",
      "profile_image_90": "string"
    },
    "reading_time_minutes": 0,
    "organization": {
      "name": "string",
      "username": "string",
      "slug": "string",
      "profile_image": "string",
      "profile_image_90": "string"
    },
    "flare_tag": {
      "name": "string",
      "bg_color_hex": "string",
      "text_color_hex": "string"
    }
  }
]
Enter fullscreen mode Exit fullscreen mode

It defaults to most recent 30, but you can increase limit and/or add pagination.

2. Make

Make is a very user friendly RPA solution. The free account gives 1000 steps per month (the best I found). Unfortunately though this is a lot, it might not be enough. As the basic flow requires 2 steps, then one per row write (article). With a 31 day month that means we can only see most recent 30 articles. If your older articles still keep getting interactions, then you might need to have 2 accounts (paginate them) or purchase a paid account.

This is a little out of order as you will need your google sheets table setup before, so that you can link to it.

Click create a new scenario and your should be on your process canvas.

Image description

You just need 3 steps, HTTP to call the api, Iterator to loop of the array, and Google Sheets to write to the file.

Image description

Image description

Image description

Set the schedule time and turn it on, and you are done.


3. Storage

This one's easy, just depends on what data you want to record,

Image description

I have:

  • Article
  • id
  • Views
  • Comments
  • Likes
  • Date

To get useful data I did a few things,

Pivoted the data - so I had Date in first row, each article had a column with views per day

Ranked table - to see which was top articles

Rolling week - little more complex, but with some formulas I created a table of last 7 days showing any new views per day per article

4. Dashboard

For my dashboard I wanted a:

  • Bar/Column Chart showing rolling last week, showing daily total new views, split by article
  • Pie Chart with total views split by article
  • Bar/Column Chart showing total views by article
  • Yesterday's views
  • Total Likes

I wanted a Mobile and Desktop version, unfortunately Google Sheets isn't responsive, so I just created 2 tabs, one portrait, one landscape.

Image description

Image description

And here's the nice thing about Google Sheets, you can publish individual tabs as a webpage, where you can view from any device. Be warned, it isn't secured in anyway, but the odds of finding the url are slim to none.

You can even export as image, and embed where ever you want, check out my live rolling 7 day views below (it caches so for second look here):

Live Chart


Like I said, there are definitely better ways, especially if you are willing to pay a little. But for me, for now, this setup covers all my needs.

There's plenty more rpa solutions to explore, I also really want to look at flourish's api if it ever comes out of enterprise only usage, and other dashboard options.

Top comments (4)

Collapse
 
bcouetil profile image
Benoit COUETIL πŸ’« • Edited

Thank you for sharing !

You are storing data, so the stack is a bit heavy in my opinion for the need.

Since API already exist (and dev.to database), would it be possible to make a simple HTML/javascript page to get the data on the fly ?

Collapse
 
wyattdave profile image
david wyatt

You can definitely do all this in a web page, the reason for the data storage is dev.to only stores rolling total, I want daily total history.

Collapse
 
bcouetil profile image
Benoit COUETIL πŸ’« • Edited

I don't understand, we can see daily data in graph on regular dashboard.

Or maybe we don't have this data using the API ?

Thread Thread
 
wyattdave profile image
david wyatt

Yep the API unfortunately isn't like for like with dashboard