Sunday, September 1, 2019

Web Page Visitor Counter Part 2 - Adding Thingspeak

ThingSpeak main page

In my last post, I stated that I wanted to build an IoT device that would display the number of visitors to this very website.

As I mentioned in my last post, I was finding it a bit difficult to find an easy way to read my visitor count via an API call to the IoT device that I would use to display the visitor count.  After some poking around I figured that I could obtain that data via a combination of Google Sheets reports and a ThingSpeak API application.

In my last post, I focused on the building of the Google Sheets report. This time around I will be focussing on building the ThingSpeak logic to read the Google Sheets report and to create a data pipe that my IoT device can use.

Again, this is going to be more of a post about software than spending quality time in the shop, but trust me, we will be back in the shop soon enough.


ThingSpeak is an open-source IoT web-based application that is used to store and retrieve data from things using the HTTP protocol over the Internet. ThingSpeak really excels in the creation of sensor logging applications, location tracking applications, and a social network of things with status updates.

To use ThingSpeak you first need to access the ThingSpeak website and set up a user account (which is free)

ThingSpeak Account page

Once you have set up your account, the first thing to do is to set up a public channel that will serve as the API "pipe" that we will use to retrieve our data.  

This can be done by clicking on the New Channel button on the My Channels dashboard. 

Setting up a Channel

Once I've clicked on the New Channel button, I was presented with a screen with a series of tabs at the top of the screen. Clicking on the Channel Settings tab opens up an input screen that had a series of values such as Name and Field 1 to 8.

At this point in time, I just wanted to give my channel a name - so in this case, I called my channel "Pageview". I then clicked on the Save button at the bottom of the page and returned to the ThingSpeak dashboard.

API details

With the Channel now defined, the next step is to create an app with the logic to read the Google Sheets report that I had created earlier. 

One of the nice features with ThingSpeak is that it features MATLAB functionality. 

MATLAB is a multi-paradigm numerical computing environment and proprietary programming language. Its main purpose is to perform matrix manipulations, plotting of functions and data, implementation of algorithms, creation of user interfaces, and interfacing with programs written in other languages. 

So in our case, we would be utilizing the user interface functions to transmit our data. 

To start building our interface, we first click on the Apps menu on the ThingSpeak dashboard and select MATLAB Analysis in the submenu.

Once I got into the MATLAB Analysis screen, I then clicked the green New button

MATLAB Analysis screen

This put me into the MATLAB programming screen. I gave my app the name of "Getting pageview" by filling in the Name field. 

In the MATLAB Code text box, I then placed the following code:

url = "https://tinyurl.com/yxb4mo3h";
output = webread(url);
Pagecount = str2num(output);
thingSpeakWrite(763419,Pagecount,'WriteKey','2Y99FBCVI3M3X55L')

The" URL =" value is the link to my Sheet's report. In this case, I created a tiny URL of the link to my Google Sheets report since I found that the actual URL to the report was quite lengthy and I found that the MATLAB text box wasn't quite able to handle it properly.

The "Pagecount =" will be the variable that will store the value that is read from the Google Sheets report. 

The "thingSpeakWrite" command puts an API wrapper around the returned value by attaching the API key for my Channel (which can be found on the right-hand side of the screen).  

With the code in place, the next step was to tell ThingSpeak when to pull the data from Google Sheets. In my case, I wanted to have ThingSpeak check every 30 minutes.
To do that I scrolled down the MATLAB page until I see a Scheduled Actions dialogue box  Here I created a New TimeControl to run my MATLAB code every 30 minutes. 
Once that is complete, I clicked on the Save button to save my App.

Now that I have my App all coded up, the final step was to add my Pageview value to make it part of my ThingSpeak channel in order to make it easily accessible to the outside world.

Scheduled actions dialog

To accomplish this, I returned to my Channel settings by again clicking on the Channel tab on the ThingSpeak dashboard. 

Once in the Channel dashboard, I then clicked on the "Pageview" Channel that I had created

Once in my channel screen, I entered my Pageview variable from my MATLAB App into the "Field 1" field of the settings screen. 

I then clicked on the Save button. 

Back to the Channel page again

Now that I had set up my Channel and Apps, it was now time to test my ThingSpeak channel. 

While I was still in my Channel screen, I clicked on the Public View tab, (which acts as a test of what would be retrievable through an API call to my Channel). 

If everything worked out right, I should see my current site visitor count displayed in a dialogue box. 

View counts are displayed

And as simple as that, I now have a way to pull my web page visitor count via an API that can be accessible by an IoT device. 

I don't know about you, but I think we've done enough IT stuff - Finally we can head to the shop...

No comments:

Post a Comment