Hello!
Today I want to tell you guys how to create mobile application for Android using AppInventor.
AppInventor it is a open source project with no require programming skills for creating application for Android system. Everything what you have to have is web browser and google account.
More info about this project you can read: here and here
First you have to go to this website: http://appinventor.mit.edu/explore/# and click "Create apps!"
Then You will see empty window with your new project:
Our project consist 2 parts:
We can switch between this part here:
In the left side you have panel with all necessary user interface elements, like:
The basic element what we will be using is Layout and User Interface:
In the Layout tab we have 5 elements: horizontal, vertical, horizontal scroll, vertical scroll and table arrangement.
User Interface has all necessary elements like buttons, labels, image, ListView and much more.
Thanks this element we can create a view. First of all we have to choose layout and in this layout put some elements. To place an item on the screen, you must drag it and drop it on the screen.
When we have finished screen we have to put name into all elements. This is very helpful when we will make a logic for this application.
All visual properties we can set in Properties Window. In the Components Window we have list of all components in our view, clicking rename it we can change their name.
To create logic for application we have to switch our board to Blocks.
By browsing through the available blocks, we can drag them into the white box and create scripts that describe the behavior of our application. In the bottom right there is a trash can icon. By dragging scripts placed on it, we can delete them. In the left side we have Block panel with categories. After clicking to each category will open tab with elements from this category.
In Control category we have elements such as loop, if statement and other conditional statements:
In logic category we have logic Elements.
To place an item on the screen, you must drag it and drop it on the screen.
The application's logic is created by combining these elements. Any in this way we create function and activity. Below is simple example how to create button, with will change color after clicking.
I will create application witch will connect by Bluetooth with my Inteligent home controller and will be turning of and turning on light, lift and lower the blinds and turn on the windmill.
My Designer consists list of rooms witch I want to control. In each room i have buttons to turn on and turn off the light and lift and down blinds. At the top i module with Bluetooth connection.
In Components panel I have vertically arranged screens witch rooms:
Each layout is build in this way:
My Block page have a lot of elements and I think that is no sense to show it all, because the majority of them is repeating. I will show you the most important elements and describe how it works thanks then you will understand how it works and you will create your own app.
When we clink Button Bluetooth the modul will find all available devices with Blotooth.
After click the modul will connect with other devices and change connection_status to true.
It is very easy. When we click element responsible for turning on light the Bluetooth module will send text in my case it will be char "c" to my Inteligent home controller, then element Bedroom_light_block will set background to yellow color.
When we want to turn off the light application will do the same. Send signal to controller and change background to different color.
When we finish our application we can install this in our mobile phone in 2 ways:
That's all. Thanks for attention and have fun! :D
