APP INVENTOR FOR ANDROID

APP INVENTOR FOR ANDROID

You can build many different types of apps with App Inventor. Often people begin by building games like MoleMash or games that let you draw funny pictures on your friend's faces. You can even make use of the phone's sensors to move a ball through a maze based on tilting the phone.

But app building is not limited to simple games. You can also build apps that inform and educate. You can create a quiz app to help you and your classmates study for a test. With Android's text-to-speech capabilities, you can even have the phone ask the questions aloud.

To use App Inventor, you do not need to be a professional developer. This is because instead of writing code, you visually design the way the app looks and use blocks to specify the app's behavior. 

The App Inventor team has created blocks for just about everything you can do with an Android phone, as well as blocks for doing "programming-like" stuff-- blocks to store information, blocks for repeating actions, and blocks to perform actions under certain conditions. There are even blocks to talk to services like Twitter.

SIMPLE BUT POWERFUL!

App Inventor is simple to use, but also very powerful. Apps you build can even store data created by users in a database, so you can create a make-a-quiz app in which the teachers can save questions in a quiz for their students to answer.

Because App Inventor provides access to a GPS-location sensor, you can build apps that know where you are. You can build an app to help you remember where you parked your car, an app that shows the location of your friends or colleagues at a concert or conference, or your own custom tour app of your school, workplace, or a museum.

  

You can write apps that use the phone features of an Android phone. You can write an app that periodically texts "missing you" to your loved ones, or an app "No Text While Driving" that responds to all texts automatically with "sorry, I'm driving and will contact you later". You can even have the app read the incoming texts aloud to you (though this might lure you into responding).

 App Inventor provides a way for you to communicate with the web. If you know how to write web apps, you can use App Inventor to write Android apps that talk to your favorite web sites, such as Amazon and Twitter.

REMEMBER THE BETA TAG

As a Google Labs, beta product App Inventor still has rough edges and missing features. In some cases the rough edges include un-pleasantries such as:

·         Installing Windows device drivers

·         Installing Java on your computer

·         Fiddling with settings on your phone

We are working hard to smooth out the rough edges and we appreciate your use of App Inventor while we are in this beta state. It may sound a bit cliche but it really is true, your use of App Inventor today will help us make it better for the future!

ON THE SHOULDERS OF GIANTS!

In creating App Inventor for Android, we're fortunate to be able to draw upon significant prior research in educational computing, and work done in Google on online development environments.

The blocks editor uses the Open Blocks Java library for creating visual blocks programming languages. Open Blocks is distributed by the Massachusetts Institute of Technology's Scheller Teacher Education Program and derives from thesis research by Ricarose Roque. We thank Eric Klopfer and Daniel Wendel of the Scheller Program for making Open Blocks available and for their help in working with it. Open Blocks visual programming is closely related to the Scratch programming language, a project of the MIT Media Laboratory's Lifelong Kindergarten Group.

The compiler that translates the visual blocks language for implementation on Android uses the Kawa Language Framework and Kawa's dialect of the Scheme programming language, developed by Per Bothner and distributed as part of the Gnu Operating System by the Free Software Foundation.

The educational perspective that motivates App Inventor holds that programming can be a vehicle for engaging powerful ideas through active learning. As such, it is part of an ongoing movement in computers and education that began with the work of Seymour Papert and the MIT Logo Group in the 1960s.

APP INVENTOR SETUP

App Inventor runs through a Web browser. If you're using a phone, you work with the phone connected to your computer by a USB cord. Your app will emerge on the phone bit by bit as you work. If you don't have a phone, there's a phone emulator included with the App Inventor setup package that you can use instead. When you're done building, you can "package" your finished app to produce an "application package" (Android apk file) that can be shared around and installed on any Android phone, just like any other Android app.

To get started you need to complete the following steps:

Ø  Step 1: Set up your computer

Ø  Step2: Do one of the following, depending on whether you will develop on an Android phone or with the emulator:

1.       Set up your Android phone and build your first app with the phone, OR

2.       Build your first app with the emulator

STEP 1 SET UP YOUR COMPUTER

System requirements:

Computer and operating system

·         Macintosh (with Intel processor): Mac OS X 10.5, 10.6

·         Windows: Windows XP, Windows Vista, Windows 7

·         GNU/Linux: Ubuntu 8+, Debian 5+

Browser

·         Mozilla Firefox 3.6 or higher

Note: If you are using Firefox with the NoScript extension, you'll need to turn the extension off. See the note on the troubleshooting page.

·         Apple Safari 5.0 or higher

·         Google Chrome 4.0 or higher

·         Microsoft Internet Explorer 7 or higher

TEST YOUR JAVA CONFIGURATION

Your computer needs to run Java 6 (also known as Java 1.6). You can download Java from www.java.com.

Test your Java configuration by performing both of the following tests:

1.       Visit the Java test page. You should see a message that Java is working and that the version is Java 1.6.

2.       Run the AppInventor Java test by clicking on this link. This will check that your browser is properly configured to run Java, and that your computer can launch applications with Java Web Start.

App Inventor will not work on your computer if these tests do not succeed. Don't go on to try to use App Inventor until you've dealt with the issue.

INSTALL THE APP INVENTOR SETUP SOFTWARE

Before you can use App Inventor, you need to install some software on your computer. The software you need is provided in a package called App Inventor Setup. Follow the instructions for your operating system to do the installation, and then go on to build the demo app (Hello Purr) with the phone or with the emulator.

·         Instructions for Mac OS X

·         Instructions for GNU/Linux

·         Instructions for Windows

INSTALLING APP INVENTOR SETUP ON MAC OS X

App Inventor consists of several different parts that work together. These parts live in various places: on Google's servers, on your computer, and on your phone. To install the parts that run on your computer, download and run App Inventor Setup. This document tells you how to do that.

1.       Download the installer.

2.       Double-click AppInventorSetup.pkg to start the installer.

3.       Click Continue.

4.       Read and accept the software license agreement.

5.       On the Standard Install screen. Click Install. Don't change the install location.

6.       If asked, enter your password to confirm that you really want to install software. Click OK.

7.       The installer confirms that the App Inventor Setup package was installed.

Locating the Setup software

In most cases, App Inventor should be able to locate the installed software on its own. But if it asks you to type in the location to look for it, the path name to enter is

/Applications/Appinventor/commands-for-Appinventor

INSTALLING THE APP INVENTOR SETUP SOFTWARE FOR GNU/LINUX

You'll need sudo privileges to do the installation.

For systems that can install Debian packages

Use these instructions for systems that can install Debian packages (e.g., Debian or Ubuntu):

1.         Download the Appinventor Setup installer Debian package. This is a file named appinventor-setup_1.1_all.deb (about 86 Megabytes). It is a Debian package installer file. The place it will end up on your computer depends on how your browser is configured. Typically, it will go into your Downloads folder.

2.         If your system can install packages simply by clicking on the package file, then do that.

3.         If your system doesn't support clickable package installers, then navigate to the directory where the file is located and run the command

sudo dpkg --install appinventor-setup_1.1_all.deb

With either method, you might need to ensure that the deb file as well as the directory it's in are world readable and world executable. On some systems, sudo does not have default privileges to read and execute all files.

4.         The software will be installed under /usr/google/appinventor-setup.

5.         You'll also need to configure your system to detect your device. See the Android developer instructions at Setting up a device for development. Follow the instructions under the step "set up your system to detect your device" in the bullet under "If you're developing on Ubuntu Linux".

For other GNU/Linux systems

1.         Download the Appinventor Setup installer tar file. This is a file named appinventor-setup_1.1.tar.gz (about 86 Megabytes). It is a Gzip compressed tar file.

2.         Install the files using a method appropriate to your operating system. You need to extract just the appinventor-setup_1.1/appinventor directory, which needs to end up on your system with the full path name /usr/google/appinventor. If you have installed this correctly, the file /usr/google/appinventor/commands-for-Appinventor/adb will exist.

Locating the Setup directory

In most cases, App Inventor should be able to locate the installed Setup software on its own. If it does ask you where the software is located, the directory path you should enter is /usr/google/appinventor/commands-for-Appinventor

INSTALLING APP INVENTOR SETUP FOR WINDOWS

Installing the App Inventor Setup for Windows has two parts:

1.         Installing the App Inventor Setup software package. This step is the same for all Android devices, and the same for Windows XP, Vista, and 7.

2.         Installing the Windows drivers for your Android phone.

Installing the App Inventor Setup software package

We recommend that you perform the installation from an account that has administrator privileges. This will install the software for all users of the machine. If you do not have administrator privileges, the installation should still work, but App Inventor will be usable only from the account you used when you installed.

1.       Download the installer.

2.       Locate the file AppInventor_Setup_Installer_v_1_2.exe (~92 MB) in your Downloads file or your Desktop. The location of the download on your computer depends on how your browser is configured.

3.       Open the file.

4.       Click through the steps of the installer. Do not change the installation location but record the installation directory, because you might need it to check the driver. The directory will differ depending on your version of Windows and whether or not you are logged in as an administrator.

Locating the Setup software

In most cases, App Inventor should be able to locate the Setup software on its own. But if it asks for the location of the software, the path to enter is C:\Program Files\Appinventor\commands-for-Appinventor. If you are using a 64-bit machine, you should type Program Files (x86) rather than Program Files. Also, if you did not install the software as an administrator, it was installed in your local directory rather than in C:\Program Files. You'll need to search for it to find the correct pathname.

Phone drivers

The App Inventor Setup software includes drivers for these common Android phones:

·         T-Mobile G1* / ADP1

·         T-Mobile myTouch 3G* / Google Ion / ADP2

·         Verizon Droid (not Droid X)

·         Nexus One

·         Nexus S

Phones not listed here will require you to obtain and install a driver manually.

In some cases the Windows drivers do not always install automatically, in which case you'll need to do a manual driver installation.

STEP 2 SET UP YOUR ANDROID PHONE

In this section, we'll make sure your phone is ready for you to use with App Inventor. This involves checking a few settings and making sure they're set the right way, then connecting the phone to your computer with a USB cable. If you have a Windows machine, then you may also need to install a driver for the phone.

Compatible phones

There are hundreds of different Android phone models, and new ones are appearing all the time. Even we don't know about all of them. Here are a few of the phones that are being used successfully with App Inventor:

·         Google: Nexus One, Nexus S

·         Motorola: Droid, Droid X, Droid Incredible

·         T-Mobile: G1

·         HTC: Incredible, Hero, Desire, …

Note, however, that some of these phones will require the installation of drivers to work with Windows computers.

Whichever model you have, your phone must have an SD card installed, or else it won't work with App Inventor.

Even if your Android phone isn't on this list, it's still likely to work with App Inventor, but we can't say for sure. Follow the instructions on this page, and if you have any problems, see the troubleshooting page, or search the App Inventor User Forum under "Getting set up and connecting your phone" for advice from others who may be using the same phone.

Check your settings

To get your phone ready to work with App Inventor, follow these steps:

1.       Tap the Home button to go to your phone's Home screen.

2.       Tap the Menu button, then Settings, then Applications.

3.       If your phone has an Unknown sources setting, make sure it is checked.

4.       Tap Development.

5.       Make sure both USB Debugging and Stay Awake are checked.

If your phone is on the lock screen, unlock it as you would to get ready to run an app. Now get your USB cable and connect the phone to the computer. Two status messages appear on the phone in the notifications area at the top of the screen:

·           USB Connected means the phone is connected to the computer.

·           USB Debugging Connected allows the App Inventor on the computer to control the phone.

Details for various phone models

If your phone model is listed below, click on the name of the phone for additional set up information:

+ Nexus One, Nexus S

+ Droid X

BUILDING YOUR FIRST APP WITH AN ANDROID PHONE (PART 1): HELLOPURR

This page will get you started building your first app: A picture of a kitty that meows when you pet it. You can also watch a video (http://www.youtube.com/watch?v=nC_x9iOby0g) of this app being built. When you're done building Hello Purr, you'll be ready to design and build apps on your own. Before starting, make sure that you've set up your computer.

As you build HelloPurr, you'll learn how the three key tools of App Inventor work:

1.       The Designer, the place were you design your app. It runs in your web browser.

2.       The Blocks Editor, the place were you set the behavior of the app. It is a separate application with its own window.

3.       The phone, connected to your computer via a USB cord.

To build Hello Purr you'll need a picture of the kitty and also a meow sound. Download these files to your computer:

·         kitty picture

·         meow sound

START THE DESIGNER AND CREATE A NEW PROJECT

In your web browser, go to the App Inventor website at http://appinventor.googlelabs.com. If this is the first time you've used App Inventor, you'll see the Projects page, with no projects in it yet. It should look like this:

Create a new project

1.       Click New on the left side, near the top of the page.

2.       Enter the project name HelloPurr (one word, with no spaces) in the dialog box that appears, click OK.

The browser will open the Designer, the place where you select components for your app, and should look like this:

              

SELECT COMPONENTS TO DESIGN YOUR APP

App Inventor components are located on the left hand side of the Designer screen under the title Palette. Components are the basic elements you use to make apps on the Android phone. They're like the ingredients in a recipe. Some components are very simple, like a Label component, which just shows text on the screen, or a Button component that you tap to initiate an action. Other components are more elaborate: a drawing Canvas that can hold still images or animations, an accelerometer (motion) sensor that works like a Wii controller and detects when you move or shake the phone, components that make or send text messages, components that play music and video, components that get information from Web sites, and so on.

To use a component in your app, you need to click and drag it onto the viewer in the middle of the Designer. When you add a component to the viewer, it will also appear in the components list on the right hand side of the viewer.

Components have properties that can be adjusted to change the way the component appears within the app. To view and change the properties of a component, you must first select the desired component in your list of components.

Steps for selecting components and setting properties

We want HelloPurr to have a Button component that has the Image property set to the kitty.png file you downloaded earlier. To set this:

1.       Drag and drop the Button component to Screen1. The Button component is located in the Basic section of the Palette.

2.       In the list of properties, under Image, click on none...

3.       Click Add….

4.       Select the the kitty.png file you downloaded earlier.

5.       Delete Text for Button1 listed under the Text property using the Backspace key.

Your Designer should look like this:

OPEN THE BLOCKS EDITOR AND CONNECT YOUR PHONE

The Designer is one of three key tools you'll use in creating your apps. The second is the Blocks Editor. The third is the phone. You'll use the Blocks Editor to assign behaviors to your components, such as what should happen when the user of your app taps a button.

The Blocks Editor runs in a separate window. When you click Open the blocks editor from the Designer window, the Blocks Editor program file should download and run. This process may take 30 seconds or longer. If the Blocks Editor never opens, it might be because your browser is not set up to run downloaded Java applications automatically. In this case, find the downloaded file named AppInventorForAndroidCodeblocks.jnlp and open it. The Blocks Editor window should look as shown below, with "drawers" for the program blocks to the left, and a large empty "canvas" space for placing blocks to assemble the program, which you'll do below.

Before continuing to build the app, you'll need to connect your phone. Make sure you've already set up your phone. Now connect your phone to the computer with a USB cable, and click the Connect to device... button at the top of the Blocks Editor window. You'll see a drowdown list with your phone listed, identified by its model type (e.g., HT99TP800054). Click on that. You'll see a yellow animated arrow move back and forth, showing that App Inventor is connecting to the phone. Creating this connection can take another minute or two. When it's all done, the arrow will stop moving and turn green, and if you look at the phone screen, you'll see the kitty there — this is the beginning of your app!

BUILDING YOUR FIRST APP (PART 2): COMPLETING HELLOPURR

Now that you've set up your computer and device, and you've learned how the Designer and the Blocks Editor work, you are ready to complete the HelloPurr app. At this point, you should have the Designer open in your browser, the Blocks Editor open in another window, and your chosen device (phone or emulator) connected to the Blocks Editor.

Here's a preview of the steps you'll do in this tutorial to complete the app:

In the Designer:

·         Add a Label component that reads "Pet the Kitty".

·         Upload the meow.mp3 file

·         Add a Sound component that plays the meow.mp3 file.

In the Blocks Editor:

·         Create an event handler that tells the Sound component to play when the user taps the button.

ADDING THE LABEL

Under Palette

1.         Drag and drop the Label component to the Viewer, placing it below the kitty. It will appear under your list of components as Label1

Under Properties

1.         Change the Text property of Label1 to read "Pet the Kitty". You'll see the text change in the Designer and on your device.

2.         Change the BackgroundColor of Label1 by clicking on the box

3.         Change the TextColor of Label1

4.         Change the FontSize of Label1 to 30

The Designer should now look like this:

ADDING THE MEOW SOUND

Under Palette

1.         Click on the header marked Media to expand the Media section of the palette of components.

2.         Drag out a Sound component and place it in the Viewer. Wherever you drop it, it will appear in the area at the bottom of the Viewer marked Non-visible components.

Under Media

1.         Click Add...

2.         Upload the meow.mp3 file to this project.

Under Properties

1.         For the Sound1 component, set its Source to meow.mp3.

The Designer should now look like this:

MAKING THE SOUND PLAY

Using the Blocks Editor we will define how the app is going to behave. We'll tell the components what to do, and when to do it. You're going to tell the kitty button to play a sound when the user taps it. If components are ingredients in a recipe, you can think of blocks as the cooking instructions.

The Blocks Editor has two tabs on the upper left hand corner: Built-in and My Blocks. The buttons under each tab expand and expose blocks when clicked. The Built-in blocks are the standard set of blocks that are available for every app you build. The blocks under My Blocks contain specific blocks that are tied to the set of components that you have chosen for your app.

To make the sound play, you'll need to drag and drop the Button1.Click block and the Sound1.Play block into the editor. The blocks connect together like puzzle pieces.

Steps for making the sound play

1.         Navigate to the Blocks Editor. It may be covered up by the web browser.

2.         Click the My Blocks tab at the top left hand side.

3.         Click Button1.

4.         Drag and drop the when Button1.Click do block onto the editor.

5.         Click Sound1.

6.         Drag the call Sound1.Play block onto the editor and drop it into the when Button1.Click do block.

7.         Click the kitty picture on your device. You should hear the kitty meow.

Your Blocks Editor should look like this:

PACKAGING YOUR APP

Congratulations, your first app is running! If you're using a phone, then the app is running on the phone, but it runs only while the phone is connected to App Inventor. If you unplug the USB cord, the app will vanish. You can reconnect the phone to make it come back. To get an that app runs without being connected to App Inventor, you must "package" the app to produce an application package (apk file). Pressing Package for Phone at the upper right of the designer page will present three options for packaging:

1.         If the phone is connected, you can download and automatically install the app on your phone.

2.         You can download the app to your computer as an apk file, which you can distribute and share as you like, and manually install on phones using the Android ADB program.

3.         You can generate a Barcode, which you can use to install the app on your phone with the aid of a barcode scanner, like the ZXing barcode scanner (freely available in the Android Market). This barcode works only for your own phone. If you want to share the app with others, you'll need to download the apk file to your computer and share the file.