Simple ThingSpeak Viewer App using MIT App Inventor 2

ThingSpeak.com is an easy-to-use IoT platform that provides an api to send sensor data to the cloud, a web interface to display the data, and MATLAB integration to perform and display the results of sophisticated analytics.

Although third-party apps such as ThingView have been created for ThingSpeak, it can be fun building a custom app for ThingSpeak.  For those of us who are not skilled app developers, MIT App Inventor 2 offers an easy way to develop custom apps for Android.

ThingSpeak provides a convenient way to display channel data using a url.  For example the MathWorks weather station at https://thingspeak.com/channels/12397 includes a number of charts that can be viewed independently.  As shown in the image below, the url for each chart is made available as part of an embeddable html iframe snippet.  The snippet of code is viewable by clicking on the callout at the top right of each chart.

For example the url for the temperature, humidity, and pressure charts can be extracted from each chart’s iframe snippet as follows:

Temperature: https://thingspeak.com/channels/12397/charts/4?&results=720&dynamic=true

Humidity: https://thingspeak.com/channels/12397/charts/3?&results=720&dynamic=true

Pressure: https://thingspeak.com/channels/12397/charts/6?&results=720&dynamic=true

This is very handy as MIT App Inventor 2 includes WebViewer user interface components that display a web site.  By combining these two features it is possible to very simply create an app that displays ThingSpeak charts of your choice as follows:

First place three WebViewers on the Designer interface.  Use the three urls listed above for the corresponding WebViewers.

Place the following code on the Blocks interface to initialize and display the charts. Note that it is not necessary to refresh the plots using code as the ThingSpeak plots refresh automatically with the option dynamic=true set in the url.

Following the MIT App Inventor workflow display the result on your Android phone.  It should look something like this:

It is as simple as this to create an Android App to view ThingSpeak charts.

3 thoughts on “Simple ThingSpeak Viewer App using MIT App Inventor 2”

Leave a Reply

Your email address will not be published. Required fields are marked *