This is a follow up project which will make use of the Arduino Webserver we build in my last post . (Refer Here).
Introduction:
In this Project we will build a simple Android Applicaton using MIT App Inventor which will be used to turn our device on and off .
CODE:
The entire project code (.aia file) and the .apk file we will make in this post is available at this repository: https://github.com/htgdokania/Arduino_Webserver
So Let’s Begin:
First : Visit MIT app inventor website at : https://appinventor.mit.edu/
- click on Create Apps!
- Next, Sign in using your Google Account:
- Start a new Project:
- Give a project name and click on OK.
- First We Add
- Four Buttons to turn On and OFF our two Devices
- 1 Text box to enter the Local IP address of the device
- 1 Label to write the info
- We also Change the color and Text of these buttons, Text box, and Label from the properties tab.
- Simply select a component and change its properties as per your desire.
- Set the Default Text of text box to your Local IP. (We can change this whenever we want in the app.)[Under Properties].In my case it was (“192.168.31.88”).
- Also, set the Text for the label as shown below. (Your choice)
This is How Our App Looks like when We have completed editing the properties.
- Now, we add a web component to create HTTP requests when we click our buttons:
- You will Get this Under Connectivity Tab. (Simply drag and drop it on the phone screen.)
Now We Will See The Logic Part .And join the wires to make the buttons working.
- So First CLick on Blocks (Located just above properties tab).
Now we create our Block as shown below :
- What we did was make the logic for 1 button and then simply duplicate it 4 times(For Four different buttons) and modify the URL and button name accordingly.
This is how our Logic Blocks looks like Once we are done with all the four buttons.
So With this our app is ready, Now Let’s test it first before developing the final Apk.
Fir this We first need to download an This Android application:
Goto Play Store and download MIT AI2 Companion.
Open the MIT AI2 Companion app and click on Connect Tab on Your Project Page and select AI Companion.
Next Scan the QR Code From your mobile camera to Connect.
- Now You will See Your Project Screen on your Mobile Screen in real-time, and
- Now you Can test the buttons whether they are working or not.
We can modify anything we want in our project and see the changes in real-time. This Makes working on the app real easy, responsive, and fun at the same time.
Finally once you are happy with the app, Go Ahead and Build the apk file to install in your Android Device.
Simply Go to Build Tab and select either of the two options.
This will compile and soon the QR code will be provided or the Apk file will download as per your selection.
Now simply transfer this file on your android device and install it.
