Using App Inventor
MIT App Inventor is a tool that allows you to create Android apps with a simple interface, using drag and drop and block-based programming to make complete apps, it also have a companion app that allows you to debug and see the realtime update on your cellphone.
I have used this app before too make a few test and play around, but I did not remember how easy it is to use, and also how powerful tool it can be (with obvious limitations), but with the new extensions it can have a lot of functionality, that I hope will be enough to develop the interface for my final project.
The idea to start
On this week I want to feel conformable with the environment and also explore a bit the possibilities with the layout and user interface building tools. Last time I use this tool I just followed a tutorial and didn't understand well how the layout was made and what you can do with it. The idea is to build a simple Bluetooth app that can connect with my light sensor board and display the value measured.
Layout
I created a layout based on a fixed 'header' and 'footer', with a scrollable body that change based on the tab you select from the footer menu.
The layout system is more powerful when you get each layout element as a div or container on web design and nest a bunch of them without fear, then the amount of user interface and media that you can place on your layout is actually big.
I also included non-visible components, Bluetooth and Serial for communications and a few timers for the code. Is important to name things as you create then to have some order and facilitate the code.
On the block tab you have a block based system that allows you to code you app, the easies approach is to click on the component you want to trigger an action and see the possible blocks for that.
As you can see on the example on the left are displayed the functions/events available for the disconnect button.
This code is used to display visual feedback about which tab is selected and toggle the visibility on the layout elements accordingly.
This blocks are used to prompt the user width the list of paired devices and connect width the selected. It also updates the state label.
This code is used to establish serial connection over the USB port and a OTG device. It also updates the label.
This function is used to update the light value label and display the data received over serial or bluetooth.
Get the AppInventor project file (.aia)Group Assignment
This week we compare the different methods used to develop applications and interfaces for our projects
Check more here!