Communicate with Particle Devices using MIT App Inventor 2

We at Team Practical Projects would like to let the Particle community know that we are developing apps to communicate with Particle devices (via the Particle cloud) in MIT App Inventor 2 (AI2). We currently have an AI2 app development template available at: https://github.com/TeamPracticalProjects/Particle_App_Template. This template provides an app developer with the infrastructure to login to the Particle cloud and select a device to use with the app. Opening the app automatically pings the last selected device and displays its online status, as well as making the credentials (user access_token and deviceID) available for use by the user’s app code. We also have an example of how to code Particle cloud function calls and cloud variable access in AI2, see: https://github.com/TeamPracticalProjects/MIT-App-Inventor-Particle-Photon-test. We hope to incorporate the latter example into the former template shortly.

AI2 is an easy to use, graphical programming system for creating Android apps. MIT has announced AI2 support for iOS this year (2018). We hope that the tools and examples that we are developing will assist hobbyists, makers and students in creating their own apps to interact smoothly and seamlessly with the Particle infrastructure. This work might also assist product developers with a quick app prototyping capability for use during IOT product development.

If you are interested in this activity, please drop us a line at: teampprojects@gmail.com or post your ideas and comments as issues in GitHub.

Enjoy,
Bob and Jim; Team Practical Projects

9 Likes

Thank you for your work!

Thank you for sharing your work. Have you played around with a method of capturing published events from a photon or electron within AI2? I was thinking it would be nice to capture published events from the device, but it appears the components within AI2 do not handle Server Sent Events in a way to pragmatically capture them. Again… :+1: Thanks for sharing!

@rhino: the short answer is no, be we have thought a little about this. The main issue is that we are talking about client side apps and Particle publications need a server to catch them – at least something that is always live and available on the Internet. It wouldn’t do any good to send published events to a closed app on someone’s phone.

This having been said, I’ve looked just a little bit into Google Firebase. Firebase is a cloud service that has support in AI2 (in beta right now). Perhaps Particle publications could be sent to Firebase and users can have apps with Firebase support. The AI2 Firebase components have an event block that executes when anyone updates some data in a Firebase DB. So Google provides the necessary cloud service with Firebase and users can be notified of data change events in their app.

One other approach is for an app to register with the phone’s notification service. Google used to have a CGM cloud service which can send notifications to both Android and iOS devices, but I think that they have now folded this in to Firebase. However, we have not yet researched how to register an app with the OS to receive notifications nor have we researched how to have a Particle device/cloud send notifications using CGM or Firebase or some other such service. We have used Blynk’s capability to publish notifications, via Blynk, to our phones with the Blynk app installed (see: https://github.com/TeamPracticalProjects/WaterLeakSensor). So, this clearly can be done, but at the moment, I don’t know (a) how to Particle.publish() to make this happen (Blynk uses their own library on the Particle device) nor (b) how to register an app created in AI2 with the Android (later iOS) notification service on the phone. But – this capability is on the radar; sometime …

@BobG - I’ve also thought about utilizing Firebase, but haven’t had much time to sit down and play with it. Seems to me that should do the trick. I’ve messed around with other “Push” style systems for notifications such as Pushetta.com. But recently it has become more and more unreliable.

@rhino: We have used IFTTT to publish notifications to a phone (e.g. https://github.com/TeamPracticalProjects/SISProject). It is super easy to set up and it works - mostly. The downsides of IFTTT are:(1) it is not 100% reliable (of course, cell phone notifications are not themselves inherently reliable), (2) it is often quite delayed, and (3) you need the IFTTT app on your phone and the notification comes from it and not the app that you want to launch to further communicate with your Particle device. Firebase is definitely on the “todo” list. Sadly, it’s not up at the top :frowning: Hopefully, you can use a webhook or something easy like this to publish from a Particle device to Firebase. Again - soemthing to be investigated.

@BobG I completely agree with your assessment of IFTTT. I’ll play around with Firebase and webhooks. Hopefully I can contribute to your project.

@rhino: EXCELLENT!

I just found an excellent tutorial for using Particle webhooks with Firebase to Particle.publish() data to a Firebase database. It is right here on the Community site:

Using this tutorial to create a webhook and publish data to Firebase, combined with the AI2 Frebase component, should allow Particle devices to store data in Firebase and an AI2 app to notify the user that new data has been stored and to access the data – when the app is opened. The only missing piece of the puzzle now is how to create an Android notification so a user is notified that new data is available even when the app is closed or running in the background.

Thanks @rikkas7 for this work!

4 Likes

@BobG @rickkas7
Oh this is perfect! I’ve been playing around with the Simple Notification extension from https://puravidaapps.com/notification.php
This seems to do what I want when the Firebase.DataChanged block executes. Testing on wifi, this block fires almost immediately. It’s all coming together nicely! :tada:

1 Like

@rhino: great news! Please publish your project when you have it completed and working. It’s great to collaborate and share the load.

@BobG
I hope to have something ready by the end of the weekend. I will definitely post something here once I have a project worthy of sharing. I must say, both you and @rickkas7 have set the bar high when it comes to sharing well documented projects!

1 Like

So I didn’t get the time I wanted to do a proper tutorial, but I think with the combination of @BobG & @rickkas7 projects this should be a pretty simple add on for “push” style notifications.
First go to https://puravidaapps.com/notification.php and download the Simple Notification add on (.aix file).
Next import it into you app inventor project by selecting the Import extension link in the Extension tab.
image
Add it to your project. I left all of the properties like this:
image
Then go to your blocks page and add it where you want to have a notification.


In this example I capture multiple Firebase data change events and call the appropriate procedure to process the data. In this case when the garage door data changed I call the notification block. One important thing to note is that the notification will only execute while your app is running. To “Close” the app without exiting it, you can hit the home button or add a button to the screen that calls the MoveTaskToBack method. The extension site has a lot of FAQs that answered pretty much all of my questions. Hope someone finds this useful!

@rhino and @rickkas7: thanks for doing all of this. Great work! With your permission (both of you), I would like to incorporate publication/notification into the work that I already published on accessing cloud variables and functions (https://github.com/TeamPracticalProjects/MIT-App-Inventor-Particle-Photon-test). I promise make proper attribution for your contributions here. This isn’t at the top of my to-do list, but I would like to move on it in the next few weeks.

@BobG
That would be awesome! I’m glad I was able to contribute.

@rhino: would you mind posting the JSON for the webhook that you created? Did you use a PUT or POST method? According to the Firebase documentation, POST adds items to Firebase, generating a key key for each item (as clearly seen in @rickkas7’s tutorial). My guess is that your app just want’s the most current temp and garage door status and not a cumulative database of each action - correct? I would think that PUT is the appropriate method in this case. Did I get this right?

Also, did you need to change the access rules in Firebase to use the Firebase ID token, or did you use some other method for authenticating the REST client?

I just got free to look at this is it is all very interesting!

@BobG
You are correct sir, use PUT to overwrite the value in the DB. Here’s an example of what I did for the current status of the light connected to a Belkin WEMO switch in my living room. BTW, I’m writing this value to firebase to animate the buttons in the app (red=off, green=on) so I don’t have to poll the particle variable… I’ll just let firebase tell the app.

{
"event": "LivingRoom",
"url": "https://yourRealTimeDB.firebaseio.com/LivingRoom.json",
"requestType": "PUT",
"query": {
	"auth":"########"YourDBSecretKey########"
},
"json": {
	"Light": "{{PARTICLE_EVENT_VALUE}}",
	"TimeStamp": "{{PARTICLE_PUBLISHED_AT}}"
},
"mydevices": true,
"noDefaults": true
}

Here’s a screenshot of what my DB looks like … for now.
image

As far as the access rules, I actually started with a different tutorial, but I think it’s set up the same way as @rickkas7’s tutorial where you use the secret key to authenticate. I’m not going to pretend to be an expert with firebase yet, but hopefully this will help people out.

@Rhino: thx much. I got this mostly working. One issue that I found: when attempting to display the TimeStamp: value as text in a label, AI2 truncates the string at the first :. In other words, your timestamp (above) displays as 2018-04-15T01, leaving off minutes, seconds and fraction seconds. AI2 document says that text strings handle special characters, but it seems that AI2 does not like the : character. Did you handle this in your code (perhaps you weren’t interested in the timestamp?).

@BobG
Hmmm… Yeah, I don’t use the timestamp, but I did throw in a block to show the tag and value of the data on a datachange event to see if I could replicate the issue. It sent back LivingRoom for the tag and {TimeStamp=2018-04-15T06:37:15.976Z,Light=ON}
The code looks like this
image

I just added to my project the timestamp. So as mentioned above the value returned from the .DataChanged event looks like {TimeStamp=2018-04-15T06:37:15.976Z,Light=ON}
Below is an image of how I handle that data and extract the timestamp and set the background colors of the buttons that control turning on/off the light. This project currently talks to 3 Photons and an Electron. I might start moving more data over to Firebase.