Introduction: Simple ThingSpeak Android App With Firebase Cloud Messaging

By

I have a few ThingSpeak channels collecting data from sensors. Wouldn't it be great to be able to make your own Android app that can notify you when new data has arrived in your ThingSpeak channel?

I've found learning Android development a very hard and stony road, so I've just discovered a simplified way with huge potential though: MIT Appinventor - a simple app builder - Blockly style - that can give you a functional Android app within 10 minutes! You don't worry about lengthy manifests and all other headaches that come with Android Studio.

Firebase is a very powerful cloud computing service by Google that includes the Firebase Cloud Messaging service. This is essentially the backbone of most Android notification that you receive on your phone.

Supplies

  1. You should have a ThingSpeak channel receiving data. Free to sign up with up to 4 channels (each channel can have multiple fields, i.e. data columns). On a free account, you can send up to 8000 channel updates daily.
  2. Google Account for access to the Firebase console.
  3. Account with MIT Appinventor. Free to sign up

Step 1: Preparation of ThingSpeak Channel

You need your channel ID, which you find by selecting My Channel > click on the relevant channel.

If your channel is private, you will also need the API Read Key, which you find under My Channels > API Keys.


Step 2: Create a Firebase Project

  1. Enter the Firebase Console.
  2. Add Project
  3. Choose name
  4. Choose or select Crash Analytics account (might have to create one first). Finish. Your project will be created
  5. On the Project Overview page, go to settings (cogwheel icon) and choose Project Settings
  6. In the General tab, note down the Project ID
  7. On the Cloud Messaging tab, you need to enable Cloud Messaging API (Legacy). Once enabled, you might need to refresh the page, go to Cloud Messaging tab again and note down the Sender ID and also copy the very lengthy Server Key
  8. You need to create an API key. On the APIs and Services page, if there is already a "Browser Key", view that one and copy it. Otherwise choose "Create credentials > API Key"
  9. You need to create an App within your project. On the Project Overview page, go on "Add App" > choose the Android icon. You have to select an Android Package name, which you can make up here (e.g. com.stuff.myproject). Proceed with next until the App is created. You will then get an AppID

This should be everything you need from your Firebase project.

Step 3: Create App in MIT AppInventor

You can download a simple app template here. This is a basic functional app that allows you to receive and display one data field from your ThingSpeak channel, and allows you to subscribe to channel updates via Firebase Cloud Messages (Android notifications)

  1. In AppInventor, select Projects > Import project from my computer (AIA) file, and specify the file you downloaded from the paragraph above.
  2. In AppInventor, you basically toggle between Designer and Block mode. In Designer mode, from the "non-visible components" at the bottom, click on FirebaseCloudMessaging1. You will then get to change its properties.
  3. API Key: enter the Browser Key from Step 2. Similarly, paste the AppID, ProjectID and SenderID accordingly.
  4. Compile the app into an APK, scan the barcode and install! As this is not on the Play Store, there will be security warnings. You will get "Unsafe App Blocked", choose Details and go "Install anyway". Your app should be installed!
  5. In the App, if you switch on "Subscribe", the App will receive notifications, otherwise it is not listening to notifications.

Step 4: Automatically Send Firebase Message When New Data Arrives

Now this step brings it all together. Your ThingSpeak Analysis script will run every time there is new data and send a notification to the app.

  • In ThingSpeak, go Apps > Matlab Analysis. Create New Empty script
% Enter your MATLAB Code below
data1 = thingSpeakRead(YOURCHANNELID, 'numpoints',1,'Fields',[1:4],'OutputFormat','table')
t=data1.FreeText{1}
text1=strcat('{"data": {"title":"Sensor event","body":"', t,'"},"to":"/topics/topic2"}')
options = weboptions('KeyName','Authorization','KeyValue','key=YOURSERVERKEY','RequestMethod','POST','ContentType','auto','MediaType','application/json','ArrayFormat','json','CertificateFilename','')
url='https://fcm.googleapis.com/fcm/send';
res = webwrite(url, text1, options)

  • In the code above, replace the YOURCHANNELID with the channel ID of your ThingSpeak channel.
  • Also replace YOURSERVERKEY with the server key from section 2.
  • Save and Run the script to test. If it's successful, a very large number as the message_id will be returned.
  • If everything has worked well, you should a get notification for your App.

Finally, create a React (Apps > React > New React).

Condition > String. Test Frequency > On Data Insertion. For the condition, do something sensible like Field1 is not equal to 0 (something that is always true).

Any feedback or questions very welcome. This took me a few days to figure out. Getting the authorisation correct was a nightmare...

I'm only beginning to discover the powerful functions of MIT AppInventor and despite it being a non-coding environment, you can easily see its massive potential.