Baby Steps

What’s the quickest, simplest Android program you can create?

When you create your App Inventor 2 account, after you’ve signed off on the terms of service you are presented with this screen:

Welcome to App Inventor 2

Welcome to App Inventor 2

Click on the “Start New Project” button (towards the upper left) and you’ll get this:

Create new AI2 project

Create new AI2 project

Type in a project name – I’m going to use Test1. Click OK and you’ll see something like this:

First AI2 project

First AI2 project

This is the barest minimum “program” that you can create. You can build this into an Android installation APK file by clicking the Build menu, which will give you this:

Build your first APK installation file

Build your first APK installation file

The first menu item may be selected (green) but you want the second item (to save it to your computer so you can transfer the .apk to your Android device and install and test it). You’ll see a progress bar as the compilation takes place:

Build progress feedback

Build progress feedback

and then a Save As dialog:

Save APK locally

Save APK locally

The suggested name is already entered for you; all you have to do is decide where you want to save it and click Save.

The size of the .apk is remarkably large (over a megabyte) but the developers are working on reducing that (it’s almost certainly due to a lack of optimization during compilation).

While we’re at it, we’ll also save the project in another format using another menu – Projects:

Export locally to .aia

Export locally to .aia

and this time we’ll use the entry “Export selected project (.aia) to my computer”. AIA files are in fact ZIPped XML files containing references that are used on the server side to access JAVA libraries while building the APK file. The .aia file is really the only way to preserve the equivalent of the source file for your project (which you can send to others for them to work with and modify, if you wish).

Again we’ll be given the “Save As” dialog and again the suggested name is already filled in for you. All you have to do is click Save (assuming you want to save the file in the same location as the .apk version).

Save project (to the Cloud)

Save project (to the Cloud)

(Don’t forget to also save your project to your online project folder by using the same Projects menu and selecting the “Save project” entry.  While MIT do their best to keep your projects alive online, they don’t guarantee that their servers will retain your projects for all time, so it’s good practice to save all your projects locally to your computer as .aia files. That way you can always upload them again should they “disappear”…)

Here are the two saved files in their folder:

Locally saved APK and AIA files

Locally saved APK and AIA files

Note that the .aia file is 2K while the .apk file is 1.3M. The .aia file can’t be run on your device but the .apk can (once you transfer and install it).

I’ll leave you to do the transfer by whatever means you choose. I prefer using a USB cable to connect my device (which happens to be an elderly Android-based eBook).

Once you have transferred the .apk file, install it as you would any other app, then run it. The result should be rather uninspiring:

The "finished" product

The “finished” product

This is how it looks on my elderly NextBook3. The image suffers from distortion and moire patterns but you should be able to see that at the top of the display is the word “Screen1” – the name of the screen in our project. If your device allows you to pull up information “About” the app, you should see something like this:

About this app

About this app

If we go back to the App Inventor 2 web page that shows our current Test1 project, we can make some changes and see what impact they have on the finished result.

One simple thing we can do is to change the properties of Screen1. If you look at the right side of the App Inventor 2 window you can see some of the properties of that component that you can change.

AboutScreen lets you put in information about your app, which will be displayed above the default text (seen in the image above) and in a larger font. You should experiment with changing different properties (one at a time), rebuilding the APK file each time and transferring it to your device and running it to see the effect.

Other obvious candidates for change are the BackgroundColor and Title properties, for now anyway. Note that in the project the Title property is already filled in with a default value that is the same as the component name (i.e. Screen1).

This simple app gives you an opportunity to build and run an Android program within minutes of starting App Inventor 2, and without needing to know anything about including references to libraries, defining variables, or any of the usual baggage that comes with complex modern programming languages.

It doesn’t do anything of course, but it gives you something on which to build, experimenting as you go.

Here’s a (poor) screenshot of a real world example to whet your appetite:

Real world example

Real world example

More to come…

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s