MIT App Inventor is a coding program based solely in what’s called “block coding”. The drag-and-drop method is an easy way to start coding. It simplifies methods and logic to make it not only easier to read but to understand.
Download the source code here. You can upload the .aia right into App Inventor.
To start on the MIT App Inventor application for the Wifi Car, start by making a new Project.
In your new Project, add a few things to your home screen. First, add five buttons and two labels. These can be found as objects underneath the “Palette” then “User Interface” section.
The first button is on the top of the screen to the right of a label, then three buttons were placed in a “Horizontal arrangement” section, then one more button underneath them all to the right of another label. The labels should be long enough to “push” the buttons so that the buttons on the top and bottom of the row of 3 are centered (it should make an arrow-key-like shape, or easily identified up, down, left, right, and stop). The components section should look as follows:
(Horizontal arrangements can be found under “Layout”)
Next comes the abstract objects, or things that will NOT show up on the application when it is in practical use. There are two of them: a clock (under Sensors) and a web viewer(under User Interface). Drag and drop these two things onto the screen you are working on.
The Components section should now look like this:
Now that the visual and object side of the app is done, it’s time to code. Press the “Block” button on the top right hand corner of the work space to access the coding section.
Once in the coding section, click on the “Screen1” section on the left hand side of the work space.
That should open up a small window to the right of the “Blocks” section. From this, drag and drop the one that says “when Screen1.Initialize” onto the coding space.
Now you’ve placed your first line of code! Congratulations!
Next, go into the “Clock1” section (it should be at the bottom under the “Screen1” section you just went into) and drag and drop the dark green piece that says “set Clock1.Timerenabled to” into the “Screen1.Initalize” that you just placed. They should snap together with a small click! and stay there. Afterwards, go into the light green “Logic” section (which is ABOVE the “Screen1” section) and drag and drop a “true” block into the Clock1.TimerEnabled block you placed before(they should snap together too), as shown in the following photo:
Now, when the program starts and the screen initializes, the clock will start running which means that the clock will constantly be checking for anything new happening on the screen– in this case, whether or not a button is being pressed.
The next part is simple, as there are just a few variations. Start by clicking on the first “Button” section that you can (in my case, it was the UP button). There you will find a “when Button1.Click” (or whatever your button is named) block which is the same color as “when Screen1.Initialize”.
Then click on the “WebViewer1” section and drag out a purple “call WebViewer1.GoToUrl”. Click this into place under the .Click block, and they should click into place like the previous pieces.
Next go into the pink “Text” section above the “Screen1” section and drag and drop an empty pink block with quotations around it and snap it into place next to the small “url” part of the “WebViewer1.GoToUrl”.
Inside of the pink text block you’re going to type in something called an IP address. An IP address is a set of numbers that identifies a device, whether it connects to the internet or not. The IP for your car is 192.168.4.1, the universal code for a local IP address (also known as a device that is not connected to the internet). Your Wifi car creates its own wifi, though it does NOT connect to the internet. By creating its own wifi it makes its own local network of devices, which is what you connect to when you control the car.
The other part of the pink text in the box is going to be a piece of code. In the Arduino language, you can code things by breaking down the IP address into two pieces, split at a question mark(?), which is how your Arduino chip is coded by default.
So what you are going to put in is the following:
BUTTON WHAT TO INSERT INTO TEXTBOX
So the http:// is simply saying to the application that the following is done over some kind of network, whether it be the internet or not. The 192.168.4.1 is the local IP address, as explained above, and the ?c=0002\n (or which ever number instead of 2) is the code. The question mark (?) identifies that the letters which follow it are part of the Arduino code and the \n ends the line of code to send out. The c= and the 4 digit number are simply setting a variable inside of the Aduino’s code.
Once all of that is inserted, your code should look like this:
And that’s all of the coding! Now all you have to do is export the APK file to your phone(which is a file type that your phone reads as an application). You can do this by clicking “Build” and then “App (provide a QR code for .apk)” and letting the application “package”(AKA saving itself and becoming a usable application).
Once it loads you will be presented with a QR code to download the application. To load the app from the QR code, scan it with a QR scanner on your phone and download the APK, eventually installing it onto your phone. Then simply connect to your car’s Wifi, open the app, and start driving away!