Track Your Dev.to Metrics with no-code

This article lays out a simple no-code solution for automatically tracking your dev.to metrics.

You will need:

• An Integromat account(free).
• An Airtable account(also free).
• A Dev.to profile, and at least one published post... You've got one of those, right? 😄

No-code Isn't Just For No-coders

I'm sure that an article advocating no-code on a site for developers is going to raise some eyebrows.

I'm glad.

I want developers, devops engineers(like myself), and anyone in a technical role to realize that no-code isn't some way to lower the bar or trivialize the hard work of turning ideas into software.

In fact, it's an incredibly powerful abstraction that allows you to quickly prototype ideas, and implement time-saving automation that might have otherwise taken hours to set up.

No-code lets you quickly deal with the boring stuff so you can work on the interesting stuff instead.

In this article, we'll walk through getting some dead simple automation set up to automatically pull your Dev.to metrics(post-views and reaction count) into an Airtable base.

Don't let the simplicity fool you. Taking a number you can already see(on your Dev.to profile) and moving it somewhere else seems pretty silly, but basic ideas like this can grow into something more powerful. Imagine building a social metrics dashboard without actually having to code it.

If you're still interested, go ahead and sign up for the services mentioned at the beginning of the article. While they offer paid plans, the free offerings are plenty to get started with.

Where Are My Keys?

The first thing you'll need are some API keys, which if you're not familiar are long alphanumeric strings that allow the "bearer" of the key to use whatever API issued it. You'll grab the Dev.to one first.

Get Your Dev.to API Key

The Dev.to team provides some great documentation on how to issue an API key:

https://docs.dev.to/api/#section/Authentication

Save the API key in a text file somewhere, you'll need to refer to it again shortly. One other thing to note is the header details:

Header parameter name: api-key

Save that in the same spot, you'll need it later when we set up the Integromat scenario.

Get Your Airtable API Key

Again, we can lean on some great existing documentation, this time from the Airtable team:

https://support.airtable.com/hc/en-us/articles/219046777-How-do-I-get-my-API-key-

Save the key in the same spot, you'll need it later.

Setting Up

Even though this is pretty dead-simple, there is still some setup involved. You'll need to get an Airtable "base" set up, and then configure the Integromat scenario to pull from the Dev.to API and update the data inside the base.

Set Up Your Airtable Base

Before we get started, we should briefly explain some basic Airtable concepts.

Anyone who has ever used Microsoft Excel, Google Sheets, or any spreadsheet software should be immediately familiar with the rows and columns contained within a typical Airtable base.

However, Airtable provides features that extend its capabilities beyond that of a simple spreadsheet and into a fully featured database, complete with API.

Some basic terms:

• Workspace: The top-level of the organizational hierarchy in Airtable. Think of this as a "folder" for a project in your account.
• Base: This behaves like a spreadsheet "file".
• Table: This is a "sheet" within a base.

The power of Airtable comes from being able to turn any base into an API-callable database/datasource, which is what we're going to utilize today.

First, let's create a base to use for our Dev.to metrics:

Name the base something recognizable, I'm calling mine "Dev.to metrics".

Click on your newly created base, and you should see something similar:

This table will be where we store the metrics we get from our Dev.to profile.

Before we do that, you'll need to make a couple of changes. The first thing I do with any table I might want to call/update externally is to make the "Record ID" visible.

Remember how any Airtable base can be turned into a database with it's own API? That's what you'll be doing here, using this table as your own metrics database. Since you'll be continually updating the same record(row), we're going to need some way to identify it from our external tool(Integromat).

That's where a "Record ID" comes in. Each row in a table has its own, unique Record ID to help identify it. Unfortunately, it's not terribly obvious how to access that data. Luckily, we can simply add a field(column)to our table that will do it automatically.

Add a field:

Name it "Record ID" and choose field type: "Formula":

In the formula field, you'll enter the following:

=RECORD_ID()

It should look like this:

If so, go ahead and save it.

Now, we've got a field that will automatically display the Record ID of each record, even new ones that are added later:

Hopefully at this point you're comfortable moving around and making changes in the Airtable UI. I'll lay out the next steps in quick succession:

1. Delete the 3rd record, we won't need it for now
2. Change the 2nd field(currently a text field called "Notes") to the "Number" type, choose "Integer"(instead of "Decimal"), and call it "Count".
3. Delete the 3rd field called "Attachments".
4. Under the "Name" field, in the first record, type "Dev.to Total Post Views".
5. Under the "Name" field, in the second record, type "Dev.to Total Reaction Count".

When you're done, it should look like this:

Our base is now ready to accept data from Integromat.

Set Up Integromat

Integromat is a service, similar to Zapier or IFTTT, that allows you to automate manual processes involving various apps or tools. At the most basic level, Integromat works with just about any app or service that provides a REST API.

Go ahead and sign in to your Integromat account.

There's a lot to unpack here, so in the interest of simplicity and post length, we're only going to cover the bare minimum to get our automation working. Future tutorials will cover additional features in more depth.

As with Airtable, some basic terms to start us off:

• Connection: This is the fundamental "glue" that allows Integromat to connect to an app or service. This is generally where you place API keys, such as for our Airtable modules.
• Scenario: A scenario is where you craft the automation "flow" of Integromat, connecting apps, services, and data with their robust UI.
• Module: The basic building block of a scenario, each module performs some action, such as fetching data from an API, filtering the data, or posting it to another app or service.

Use the blue menu bar on the left hand side of the UI to select "Scenarios":

Click "+ Create a new scenario" in the upper right:

You're now presented with a searchable interface of services to integrate in your scenario. Choose "Airtable" as the first one:

Since Dev.to isn't a "service" per se, it doesn't have an entry. However, we know from the API docs that it is a standard HTTP REST API. Choose "HTTP" as the second service:

Click the "Continue" button in the upper right. You should arrive at a blank scenario, with a prompt to choose your first "module":

Our first module is going to be "HTTP", and will be what fetches our data from the Dev.to API. Choose "HTTP" and you should be presented with the following choices:

The choices have different implications depending on what type of service you'll be calling, and what type of authentication it implements. Since the Dev.to API uses header-based auth, we can choose the first option: "Make a request".

You should now see the configuration interface for your new module:

We're going to fill out some of these fields, and configure the module to request our data from the Dev.to API. The data we're specifically interested in is the total view count and total reaction count of all of our public posts.

Take a look at the API documentation for more detail: https://docs.dev.to/api/#operation/getUserAllArticles

In the "URL" field of the module configuration, you'll want to place the URL from the API documentation for fetching all published articles:

Leave the "Method" set to GET, as you'll be reading data from the API.

Remember the API key and header name you saved earlier? You'll need them now.

Click the blue text with a plus sign that says "Add a header":

Be sure to enter the text exactly for both fields. The header name should be: api-key, and the value should be your Dev.to API key, exactly as you copied it.

Wrapping up this module, go ahead and do the following:

1. Set "Body type" to "Raw".
2. Set "Content type" to "JSON (application/json)".
3. Check the box for "Parse response".

When you're done, it should look like this:

If you're not familiar with the structure of a RESTful HTTP request, I definitely suggest taking the time to learn a little bit, as the concepts will be valuable when you attempt to build more complex automation scenarios. In brief: we're telling Integromat what kind of data it should expect from the Dev.to API, that it's generally formatted like JSON, and that Integromat should parse the JSON and make it usable for downstream modules. That last bit is important, and you'll see why in a moment.

If you haven't yet, go ahead and click on "Ok" to complete the configuration of your module. You should see your scenario space, with an HTTP module in the center of it. In the bottom left of the interface is a button that says "Run Once":

You need to test that you can successfully pull data from the Dev.to API, so go ahead and click the button. The module should "run" for a few seconds, and then if it was successful will display a bubble above and to the right of it:

Go ahead and click on the bubble. If the request was successful, you'll see something similar to this:

If so, congratulations, you just successfully pulled your Dev.to data into Integromat! There's a lot of information here, but you're mainly interested in the the "Data" field:

Click the "+" icon next to "Data".

NOTE: What you see in "Data" is entirely dependent on how many published(public) posts you have on Dev.to. In my case, I only have two:

Click on the "+" icon next to one of your posts, you should see something similar to this:

That's all the metadata that Dev.to stores for any given post that a user publishes. In this case, we're specifically interested in public_reactions_count (which is 20 in this case), and page_views_counts (which is 1192 respectively).

There's nothing further we need to do in this module for the time being, so go ahead and close out of it. Next, you'll be adding some "Flow Control" to your scenario.

At the bottom of the UI, there's a green button with a white gear icon, called "Flow Control", go ahead and click it:

Flow Control modules probably merit their own tutorial, but the quick explanation is that they are specialized modules provided by Integromat to handle how the data in a scenario flows. Think of them like plumbing. Some act like valves, some are splitters etc...

In this case, you need to add a "Router" module, which will take the output of the HTTP module and send it to two separate modules in parallel. Your scenario should now look like this:

Next, click on the "+" icon that appears in the middle of the Router module when you hover over it. That should spawn two flows into modules with a "?" in each of them:

The question mark essentially means that those modules aren't doing anything yet, but will be receiving identical copies of the data flowing out of the HTTP module. What you'll be doing for each is configuring an Airtable module that will update one of the rows in our Dev.to metrics table.

Click on one of the "?" modules, and you'll be presented with a menu to choose what type of module you want, based on the selections you made when the scenario was created:

Choose the Airtable module, and then choose the "Update a record" option:

The first step is to add a "Connection" with Airtable, using your API key. Name it something meaningful and then copy the exact value of your API key from earlier in the tutorial:

NOTE: For the rest of the tutorial, I'll be using my already created Airtable connection, so it may appear with a different name.

Now you'll see the familiar module configuration UI, except with some different options from the HTTP module.

First, choose your "Dev.to metrics" base from the "Base" dropdown. Since the API key lets Integromat query your Airtable account, it should already be populated with your active bases:

Next, choose the table name from the "Table" dropdown. There should only be one table in the base, named "Table 1"(unless you changed it):

Now you'll need the Record ID to specify which record you'll be updating.

Go back to your Airtable base, and find the Record ID value for "Total Post Views", and enter it in the field:

Now the Integromat UI will display all the fields in the record that it can potentially update, in this case "Name" and "Count". You've already defined the name, so "Count" is what you'll have Integromat update:

The next part is a bit trickier. It involves utilizing some of the formula functions that Integromat provides, as well as parsing some of the data.

In summary: you'll be telling Integromat to run the sum function across the page_views_count field for each post in the Data[] object that the HTTP module outputs.

Whew! It sounds complicated, but as you gain experience with how Integromat handles data, it will become second nature.

When you click in the "Count" field, you'll see a pop-up UI that contains data, formulas, and other functions that Integromat provides. Again, a topic for another day. Thankfully, Integromat has a pretty good autocompletion system.

First, type sum(map(:

You'll know autocompletion is working when they turn into grey-background formula components.

Next, click the blue Data[] box in the pop-up UI:

To finish, type ;page_views_count)). It should look like this when completed:

All done! Go ahead and click "OK" to close out the module configuration.

Your scenario should now look similar to this:

You're not quite done, but the automation is ready for a test drive! Click the "Run Once" button again. Once the flow completes, click the bubble above the newly created module to verify the data passed through correctly:

Now, go take a look at your Airtable base:

Notice how the "Total Post View" "Count" field has been updated with a number? It works! Integromat can now pull that data from Dev.to and populate Airtable with it, automatically.

Next, you'll be doing nearly the same thing to update the "Total Reaction Count" record, using the remaining module. The steps are as follows:

1. Click the "?" module, and choose "Airtable"
2. Choose your existing Airtable Connection
3. Choose the same Base and Table from the dropdown.
4. Enter the "Record ID" from the "Total Reaction Count" record in Airtable(this will be different than the first module)
5. Enter the same formula in the "Count" field in Integromat, except change page_view_count to public_reactions_count.

Before clicking "OK", validate that it looks similar to this:

Congratulations, the hard part is over! Click "Run Once" to test once more, checking your Airtable base:

Now Integromat can update both records automatically.

All you've got left to do is some configuration, and you're finished.

Right-clicking on modules in the Scenario UI provides various options, in this case go ahead and rename each Airtable module to describe what it's doing. See my scenario after renaming:

First thing's first, go ahead and save all your hard work:

Next, you'll need to turn the Scenario "on", and set a schedule for it to run:

A note on schedule: Integromat tracks usage by data transfer and number of operations. A free plan allows for 1000 operations and 100mb of data transfer in a monthly period. For this use case, it's highly unlikely you'll hit the data cap(I'm still at 1%). However, operations can add up quickly. Set an interval to run that makes sense for your use case. If you're a prolific poster, and like a tight feedback loop, I'd recommend a shorter interval. If you're happy to check every couple of days, widen it a bit:

Click "Save" again, and you're all set. You've got automation to pull social metrics into an external datastore, with the potential of building out a complete, no-code social metrics dashboard.

Thanks for reading, stay healthy and safe!