david wyatt

Posted on Dec 10, 2022 • Edited on Dec 31, 2022

Dev.to - How to Create Your Own Articles Dashboard

#tutorial #devto #api #webdev

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.

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"
    }
  }
]

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.

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

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,

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.

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):

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.