David Briddock introduces a new Android App coding series with App Inventor 2
In December 2010, Google launched App Inventor, an interesting and innovative attempt to open up Android app development by removing the need to learn or use a traditional coding language. Instead, apps are created by snapping together colourful interlocking blocks.
However, this initial version had a number of frustrating shortcomings, so in 2011 Google handed over the code and development responsibility to a Mobile Learning team at the Massachusetts Institute of Technology (MIT).
To fix these shortcomings, MIT initiated a major upgrade. The new App Inventor 2 (AI2) is just as simple to use, yet it offers an even more powerful solution to building apps for Android smartphones and tablets.
In this series we’ll discover how to use AI2 to design, code, test and deploy Android apps.
What You’ll Need
It’s easy to begin creating Android apps with AI2. All you’ll need to get started is a PC, a web browser and a Google account. Ideally, you’ll also have an Android smartphone or tablet, but even this isn’t essential to design and code apps.
Being browser-based means that any Windows, Mac or Linux PC or laptop will do fine. As for the web browser itself, the best choice is Google Chrome, but Mozilla Firefox or Apple’s Safari work well too.
And if you don’t already have a Google account, don’t worry. It’s a quick and free process to sign up for a new one (myaccount.google.com).
Only when it comes to testing your app with an emulator or a physical Android smartphone/tablet will you need to download anything (as we’ll see later).
Of course, you’ll need an app idea. And there’ll be plenty to get you thinking in this series. Start by roughly sketching out the app’s interface design and then jot down its desired behaviour. This makes it easier to identify the AI2 components needed to bring the app to life.
Getting Started
To begin, just point your browser at ai2.appinventor.mit.edu, then sign in with your Google account.
Once signed in, the main AI2 web page appears. At first glance, it’s a busy-looking interface crammed full of functionality, but don’t worry, it’s straightforward to master.
The key to AI2’s rich potential is the two construction views, namely Designer and Blocks. We can switch between these views with the Designer and Blocks buttons, located on the green menu bar towards the top right of the web page.
The Designer View is used to define the app screens. Here we can set the screen properties, then drag and drop any number of components from the left-hand side Palette panel onto the screen; some of these are visual components like labels and buttons, while non-visual choices include sensors and data store options.
In the Blocks View, we define the app’s behaviour. It’s done by dragging and dropping colour-coded, interlocking blocks onto the main coding area. These blocks are then ‘snapped’ together to form a program. The blocks themselves sometimes have data values, which help determine the app’s behaviour.
Designer View
First let’s take a closer look at the Designer View.
There are four main panels on the screen. These are, from left to right, the components Palette, screen Viewer, screen Components and selected component Properties. Lower down, there’s a small panel for imported media items.
Drop a component onto the screen and it appears in the screen’s component list. This process is the same for both visible and non-visible components.
You’ll notice AI2’s palette component collection is pretty comprehensive. In addition to the User Interface and Layout groups, there are others that handle drawing, social messaging, on-board sensors, connectivity and data storage.
Animation blocks control drawing and image movements on a custom canvas. The media section blocks include camera control, video handling and even speech recognition or text-to-speech. Sensor elements provide access to the internal clock, accelerometer, orientation and GPS. Connectivity options include the web, Bluetooth and, if your device supports it, near field communication (NFC).
Did you notice a small circled question mark beside each component in the Palette panel? Click it to view a description of the component and a link to an online help page.
Blocks View
Once we’ve designed the screen, it’s time to define the app’s behaviour. Normally this would be done with an editor and a traditional coding language, such as C++, Java or Python, but with AI2 all we need to do is snap together coloured blocks and define some numeric or textual data.
You might think this is a rather limited strategy, but in this second incarnation of App Inventor there’s a large and comprehensive block collection. These blocks cover all the essential coding elements like logic, math, variables, control flow, event handling, variables and procedures.
All the generic-function blocks are contained in colour-coded groups, located in the left-hand Blocks panel. Function specific colours help guide the eye as the number of blocks in the Viewer coding area increases. There’s brown for control, green for logic, blue for math, cyan for lists, purple for procedures and so on.
However, that’s not all. Other blocks, of various types, appear when you click on one of the components previously added to the screen in the design stage. And it’s these component-specific blocks that really make AI2 such a friendly and flexible coding tool.
Menus
At the top of the AI2 web page we can see the green menu bar. The most commonly used ones are on the left and include options for managing projects plus testing and building apps.
Rather than discussing these now, we’ll cover them in a context-specific manner while building Android apps.
Nevertheless, it’s worth having a look at the extensive help information. The Guide menu, over to the right, has a ‘beginners-start-here’ function, while the Help menu has more contextual help information.
What’s Next
With AI2 we have everything we need to build native Android apps, which can be tested and loaded onto an Android smartphone or tablet and even deployed onto the Google Play store as a free or paidfor app.
Starting next time, we’ll build a collection of useful apps, which also have plenty of potential for further customisation.
App Inventor 2 Links
• AI2 website: ai2.appinventor.mit.edu
• AI2 installation/setup: goo.gl/4M64R7
• AI2 community: appinventor.org/appInventor2