Understanding the Basics of Creating Mobile Applications with Google App Inventor - Understanding Features

Google began working on creating a more simple way of creating applications shortly after they acquired the Android mobile OS. Their goal was to create a way for "non-programmers" to create impressive applications without previous programming knowledge. App Inventor has recently been released from beta testing to the public.

App Inventor comes packed with useful features and components that make application development easier than ever before. I played around with the visual and blocks editor for a few weeks, but I feel that some programming knowledge is beneficial. 

The visual editor allows you to easily add components, set up features, and display certain objects. When it comes to the blocks editor, App Inventor does a great job with creating a visual interface with blocks of code that fit together like puzzle pieces. Programming knowledge helps the developer with the logical part of developing, but once again isn't required. When you code programs or applications by using a Java developing program, you are required to know and type exact code snippets in a flowing manor. App inventor helps you organize your code and helps avoid logical errors by providing code blocks that can only be attached to certain types of code. This may seem sort of confusing since it's hard to put into words, but I'll try my best to thoroughly explain what I mean in this tutorial.

The visual editor makes adding, removing, and disabling components of your application ridiculously easy. All you do is add different components by dragging them from your palette to the display window in the middle. You can then customize that component in the 4th column called the properties window. The 3rd column is called the components window, which displays all of the components you have added to your application.

Screen Arrangements

Screen arrangements are exactly what they sound like. There are three different types: vertical, horizontal, and table. Each one of these arrangements serves the need for different purposes when displaying content for your application. Screen arrangements are usually used to fill the screen, but include other screen arrangements within that screen to organize the content. Select which screen arrangement you would like to use by dragging it onto the visual editor. You will now see a box on your screen. Click this new box, then navigate over to the properties column. Setting the width to "fill parent" extends the box all the way across to completely fill the screen. Setting the height to "fill parent" will set the arrangement to extend all the way vertically. You can add screen arrangements inside of other screen arrangements to get the look you're looking for.

I usually use a vertical arrangement that fills parent horizontally and vertically, but then I add horizontal arrangements to display my content in an orderly fashion. If you have ever made a website, using screen arrangements is similar to using tables.

Like web-designing, tables should really only be used to display data, not organize your "template" for your application. Using table screen arrangements can get confusing and tend to become complicated. Try to only use table arrangements for data that should actually be displayed in a table, such as highscores.

Changing the properties of these screen components can easily make your application appear to have multiple screens, which is needed in most applications. I'll post another tutorial explaining how to create multiple "virtual" screens.

Adding Components

App Inventor provides you with several components that can easily be added and put to use with your application. Google does a fantastic job by organizing the components into categories.

There is a category titles "basic," which is obviously all of the basic components. You will be using basic components quite a bit, especially when you first start a new application. If you are unaware of what the component does, click the "?" next the the title of the component for a more thorough explanation. It is key to rename the components you add to your application so you can easily distinguish them when you move on to the blocks editor.

When you want to add a component to your application, all you have to do is drag it from the palette to your visual editor. All of this visual editing is done online through Google's App Inventor page.

The blocks editor is where all of the logical and essentially the "hidden" parts of the application come into play. Each type of block is color coordinated for the type of coding it is used for.

Google's idea of programming with blocks creates an easy flow for new programmers. Each block type has its own distinct shape that can only be attached to certain other types of blocks. If two blocks don't "snap" together, that means that the combination you're trying won't work. This drastically helps you avoid syntax and logical errors.

Similar to the visual editor, blocks can be dragged from the left column into the editing area. The order that you program your application doesn't matter. When hardcoding just about anything, usually you build the code down in a logical order. This order usually flows by doing all of the important required events first. App Inventor automatically locates the block of code that the application prompts for. The block editor is downloaded each time its opened and is within a live sync between your desktop and the visual editor online. This means that whenever you make a change in the visual editor, it is automatically changed in your blocks editor.

I advise that you draw up a sketch design on a piece of paper first because it helps with the logical idea behind the blocks of code you will be using. The blocks editor is one of those things that you need to mess around with for awhile before you fully understand how to use it.

App inventor allows you to choose between three different ways of using the blocks editor. Whenever you launch the blocks editor, you will be prompted to choose from using the emulator, using a phone, or to code without testing.

If you choose to test by using a phone, you have to change your settings so that you can pair with a developing software. In this case, you will have to pair your phone with App Inventor. Please note that this tends to drain your phone battery quite faster than normal.

I like using the emulator the best because it offers an alternative device to test my applications on. The emulator simulates a default Android powered phone with accurate results of live testing of your application. The emulator takes a few minutes to load the first time, but is simple for frequent tests of your app.

Once you're ready to test your application all you have to do is click the button in the top right section of the blocks editor which will either say "connect to device," or "relaunch application on device." The more code you have will cause your application to take longer to relaunch on the device for testing. Each time you add new code to your application, a relaunch of your application is required to implement the new code blocks.

Since App Inventor is considered a new Google Lab feature, you may be exposed to some minor bugs. The most common bug I've come across is the failure to recognize a mobile device. Occasionally I will have to launch the block editor a few different times before it will recognize a mobile device or emulator to pair with.

I will be working on many other HUB's that will go more in-depth for serious developers. This HUB was created just to give a basic understanding of the usage and mechanics of App Inventor.

If you're interested in more HUB's outlining App Inventor, please subscribe to our Hubpages account.