IAN LANG ELECTRONICS

Once you've got all the software you need downloaded (If you are doing it the recommended way, by wi-fi on your router the it'll be AI2 Companion  and a QR code scanner on your Android device and nothing else) you are ready to start with AI2. You'll need your Google Account which you should have set up when you got your Android device up and running and is probably linked to your gmail address. When you're ready, go to the front page of AI2 which is here:

Go Back

Android

android

Getting Started with App Inventor 2  (AI2)

appinventor.mit.edu/explore/

and click on that big orange button in the top right hand corner that says "Create". Once you've done that it'll ask you to sign in. Use your Google account name and password. Next you should get to the project screen. It looks like this:

projectpage

That's the project page for the site's account (yep, the site's got its own account, I've created a monster) and there's only one in there at the moment, a sort of spacy-shoot-em-up I'm working on which is a bit complex and might be done by Easter 2014 if I'm lucky. What will happen is that it will take me to the last project I worked on, which is that shoot-em-up and my screen will show this:

spacy

If you haven't got any projects going, the screen will prompt you to open a new one and you'll see the same thing come up with just a blank view where the spacy thing is in my screenshot above.

 

The AI2 IDE  works in your browser and as you can see if you look in the top left hand corner of that screenshot above I'm using FireFox and I recommend you do too unless you've got IE 10 already installed. Can't have IE 10 on Windows Vista or XP, I don't know about Windows 7 but IE 10 definitely works on Windows 8 because my new, whizz-bang all singing all dancing laptop runs Windows 8 and I wish it didn't. C'mon Microsoft. Really. What were you thinking? Wasn't Vista bad enough?

 

The AI2 IDE (IDE stands for integrated development environment if you're wondering and is the piece of software above) works just like any other Windows Program in that you drag and drop the objects you want on to the viewer. Where it differs is in the layout. In this article we are going to make a hello world program later on but first we need to famaliarise ourselves with the components of the IDE.

 

There are six distinct parts to it. The first is the top bar, shaded red below:

spacy

Starting at the left end and going rightwards, we have the MIT logo and title. It says Beta. It is still very much in a Beta stage, which is where a product gets thrown out for general use, we find the bugs and report them back. It works very well but you will find the occasional blip here and there. It's a complex bit of kit and it'll never be finished as a final product as new bits are being added, old bits removed and technology is moving all the time. Next along is Project. If you click on it it lets you do a host of things, including saving and selecting the project you are working / want to work on. There's also exports and keystores. Don't worry about them just yet. That's much later.

Next is connect. You can collect to the AI companion on your device, an emulator, or by USB. If you are using the recommended wi-fi technique you need to connect to AI companion and when we do the hello world project you'll see how this works.

Next is build, and there are two options in that: App: (provide QR code for .apk) and App.(Save .apk to my computer).

The former of those two allows a direct download to your device. a .apk file is an Android package, and it's what Android devices use to install apps from the Play Store or anywhere else. Next along is Help- that's pretty self explanatory and so we'll draw a veil over it and go to the right hand side. My Projects is a bit of a redundancy as it does exactly the same thing as the My Projects sub-menu in the Projects menu, and guide takes you to help pages. Next along is Report an Issue- if you find any bugs you can tell MIT about it. The last in the row is your Google account name; this doesn't actually do anything except give you access to the cloud software itself and marks your project directory.

 

On to the next lot then. Here they are:

spacy

On that row you see your project name on the left, then next to that there are three buttons. These deal with the screens in your app. The first one navigates to the screen you want to work on, and of course if you've only one screen in your app then clicking on it will show only that one screen. If there's more, it will show all the screens and you click on the one you want to work on to bring it up in the viewer. The next two allow you to add more screens to your project and remove ones you no longer want.

 

Looking on the right hand side we see the view mode buttons, designer and blocks. Designer is the window that allows you to place components. It does not work in the manner of Visual Basic or Visual C or Delphi, it is a tad more complicated. But if you have any experience of the above, the MIT designer window will be familiar at least. The next button, and the last on this row, is blocks. I have to admit I am not comfortable with flow-chart programming because I've seldom done it. Once you get the hang of it it simplifies the job mightily, and those of you used to things like mini-bloqs will find it easy to adapt to the block-flows of App Inventor. The rest of us are in for a steep learning curve though, including me.

 

That's the two horizontal bars at the top done, and now let's look at the four vertical columns where most of the meat you'll need is.

More