Building a Mobile-based Data Visualization Block

This tutorial explains the steps involved in building a Mobile App-based Data Visualization Block to visualize data from a Temperature & Fire Monitoring & Alerting Tinker Block Application. You will specifically learn how to display live sensor data on a mobile app screen.

Before building Mobile-based Data Visualization Block, please make sure to build:

1. Temperature Block, Fire Block, Buzzer Block, Processor Block and Power Block

2. IoT-based Server Block 

3. IoT-based Device Control Block

4. Web-based Data Visualization Block

5. Web-based Device Control Block

6. Device Integration Block 

1. Visit the Web Data Visualization Block tutorial in this portal and follow the step-by-step instructions to create a web-based dashboard that displays live sensor readings and actuator control buttons in Google Sites website builder. 

2. Publish the website and copy the published link to your website and keep it aside.

3. Go to MIT App Inventor and click to "Create Apps".  Sign-in with your Google Account.

4. Once you sign-in, click on "New project" button to create new project and give it a name such as "Mobile Dashboard".

5. Once the new project is created, open the "User Interface" section of the panel on the left side of the screen. 

6. Within the "User Interface" section, drag and drop the "Web Viewer" element into the blank mobile screen shown in the designer.  Re-name the web-viewer component as "Web Dashboard".  

7. Scroll down through the "Properties" section of the "Web Dashboard" element (right-side panel) and locate the "HomeUrl" field.  Add the link to your website (which you copied in step 2) in the "HomeUrl" field.

8.  The Mobile app is now complete and is ready for testing.  Create an Android "apk" file by clicking the "Build" --> "Android APK (.apk)" menu option.

9. Once the build is complete, you will see a QR code displayed on the screen.  Scan this QR code with an Android phone.

10. The Android phone downloads the App to your smartphone.  If necessary, change the settings on your Smartphone to allow downloading an App from an unknown source.

11. Once the app downloads to your Smartphone, install the same and open the app.

12. The App displays the temperature and humidity sensor readings as shown in the screens shots below:

13. One can also control the actuator using the "Turn On" and "Turn Off" buttons in the App dashboard.