How to create apps
If you have an application idea but you are not a programmer, App Inventor is your solution.
With this complete graphical environment, you will be able to develop software for Android in a very simple way.
If you are interested in the world of mobile application programming and are looking for a tool that makes your task easier, App Inventor is for you. App Inventor is a visual development environment for Android originally proposed by Google and finally implemented by MIT (Massachusetts Institute of Technology) with the support of the American giant.
Its great advantage over other similar platforms is the power of its working environment: you will find many functions already defined in the form of blocks and flexibility in combining them will allow you to maximize your creativity.
Its free character makes it recommendable for all types of users. However, if you want to make the most of all its possibilities, you will need some time to adapt and learn the tool.
Ideally, you should have a few general notions about programming in order to be able to more easily design the flow of actions and understand in depth the usefulness of each block, although you won’t need to modify the source code.
Learn in this hands-on how to get started in App Inventor and launch yourself into the app market.
If you also require more information, we recommend that you make use of the tutorials that you will find in the Learn section and in Reference Documentation, to know in depth each one of the blocks.
Fine-tune the program
First visit the official App Inventor website. You’ll need a Google account to access the service. App Inventor is composed of a set of tools that cover the different tasks in the construction of the application: design, definition of behavior and simulation.
Before using them, you must check that you have everything you need. Go to the official website and select Setup. Click on Test your system and check your browser.
When you’re done, click onDone? Lets move on! and you will be taken to the App Inventor desktop software download.
In the last step, choose if you want to test your applications with your own phone or use the emulator.
The latter will simulate an Android device that you can manage through the computer as if it were a real mobile.
The design panel is accessible from the browser. On the main page, click onInvent/Create Mobile Apps. In My Projects, select New and enter a name for the new project. Once inside, he explores all his options.
In Palette/Basic, you will find basic utilities such as buttons, image insertion, text boxes, labels…
The Media sub-section contains components such as access to the camera and video, photo gallery, sound, video player… Social includes the necessary elements to select contacts, telephone numbers from the calendar, e-mails…
Sensors, for its part, gives us the opportunity to use sensors to obtain information such as the geographic location or orientation of the device. To find out more about each of them, click on the question mark next to its title.
Your first screen
Click on Screen 1 in the Components section. Your properties will be listed in the right-hand column.
Set a background image by loading it with BackgroundImage. To avoid distortion, it is advisable to use a flat background or one of the default sizes for this type of screens.
Also load another image in Icon to serve as a graphic identifying the application and mark inScrollable if you want to allow the use of scroll.
Now, add a button by dragging Basic/Button to the screen. Select it in Components and add an image from Image.
Remove the default Text for Button 1 text that appears in the Text box and choose a Shape shape; you can choose between circular, rectangular or oval. Let’s also include a text box with Basic/TextBox with the legend Click on the icon.
Finally, if you want to redistribute the shapes on the screen, play with the Screen Arrangement options.
Create a table with TableArragement or set the horizontal or vertical alignment of multiple elements with HorizontalArrangement and VerticalArrangement, respectively.
They are called not visible because they are not physically displayed in the design pane, such as sound files.
Try adding a file through the Source option in Media/Sound. The procedure for adding these elements is the same as for those visible: drag it toward the viewfinder.
They will be listed at the bottom of the panel, under the heading Non-visible components.
Other similar elements are Camera, Camcorder or Player, as well as all those included in the LEGO MINDSTORMS section. The latter includes components, registered under the Lego brand, that will allow you to build robotic games.
Before we continue introducing elements, let’s illustrate the procedure to relate them to each other, using for it the button that we have created and the loaded sound file.
Click on Open the Blocks Editor. A Java JNLP connection file will be generated that you will have to save in your PC.
Open it and you will access the block editor. Now go to the My Blocks tab and you will see the list of all the blocks you have added in the design panel.
Select Button 1 and look at its options, which will appear in the form of puzzle pieces. There are types of parts that indicate actions and others for components.
Your mission is to fit them together to achieve the desired behavior. Let’s try to set that clicking on our button plays our music file. To do this, join the Button1.Click blocks in the editor with Sound1.Play and you’re done.
Use the emulator
Thanks to the emulator, we can develop our applications even if we do not have asmartphone or is another brand, and check its proper functioning.
In the block editor, click on New emulator and a typical Android phone will be displayed. To connect the editor to the phone, click on Connect to Device and select the emulator.
Information transfer can take two or three minutes, so be patient. Then, access the application menu as if it were a real device and try yours.
The procedure for using an Android mobile from the editor is analogous. Connect it to your computer via a USB port and, before starting the simulation, check that your settings are enabled for this type of phone use.
To do so, follow the steps you will find on the official application page. Remember that for now the files are exclusively on your computer.
Create a list
Let’s go back to the design panel to add the ListPicker element, which allows you to choose from a number of options.
This is associated with a button, with which we will invite the user to choose from the list. We will make our own with the current PC numbers.
Then go to the block editor to create a global variable, in our case Numbers, with Built-in/Definition/Variable. Then, add the Make a list block, which you will find in Built-in/Definition/Lists, to define several possibilities for the global variable.
Finally, we will include Text blocks with as many text strings as values to take. When you are finished, you must indicate that, when the initialScreen1 screen loads, the created list will be initialized.
To do this, join a block My Blocks/Screen1/Screen1.Initialize with another My Blocks/ListPicker1.Elementsy this in turn with our global variable through My Blocks/My Definitions/global Numbers.
When the user opens the application and clicks on our Choose a number button, the numbers of the magazine we have determined will be shown before him.
To indicate the action to be performed afterwards, you can use the block My Blocks/ListPicker1.AfterPicking.
Pack your app
Following procedures similar to those explained, little by little, you can add new functions. In the design panel, click Add Screen if you want your application to contain more than one screen.
Don’t forget to periodically save your work with Save and set a point to return to when you get a milestone through Checkpoint. When you think you’ve finished the app, look in the top right corner for the Package for Phone menu.
You’ll find three options. The first, Show barcode will generate a QR code associated with your account and application and for your own use.
To download the program to your computer, choose Download to this computer and the source code will be saved as an APK file.
To download it to your smartphone, choose Download to Connected Phone and remember that you will need to have the block editor open, as well as the device connected to your PC via the USB port.
Publish it to the Google Play Store
Publishing your application is not a mandatory step, but if you choose to open it to the general public, you should know that in order to publish it on the Google Play Store it must contain both a code and a version name.
The first is an integer number that indicates whether the app has been upgraded to a higher or lower version.
The second is a text string that typically specifies this same information as 1.0, 2.0, etc. You will be able to define both in the design panel, in the sections VersionCode and VersionName, and you will have to update it every time you want to upload a new version to the Net.
Then, as we explained in the previous step, you will have to download the APK file on your computer.
Finally, link to the Google Play Store at https://play.google.com/apps/publish/signup and follow the instructions to enter your data as a developer, upload the file to the platform, define a description and set a price.
The developer account has a $25 registration fee. Also, don’t forget to check Google’s commission policy if your app isn’t free.
- Features: Visual environment for creation of Android applications
- Contact: MIT App Inventor
- The best: Its wide range of functions and possibilities
- The worst: Mastering all its features is not easy
- Rating: 8,5
- Quality / Price: 8,5
- Price: Free