Building with MIT App Inventor
- The MIT App Inventor Site
- Getting Inside an App
- Exercise: Sherlock Is Watching
- What Can You Build?
- Uploading to Google Play
- Summary
- Exercises
This chapter is from the book
This chapter is from the book
This chapter is from the book
Understanding the functionality of an app is only one part of programming. The programmer also has to focus on specific features and how to implement them.
Before the serious work of building apps begins, a brief overview of how applications perform is useful. Let’s get beyond the pretty screen and graphics that you interact with and start to look at what is really happening and how to make an app perform the way you envision. After doing this, you will be able to understand how apps can request information, pull in data from the Internet, and interact with other applications.
The MIT App Inventor Site
MIT App Inventor lives on the Web, just like other online productivity tools such as Gmail and Google Drive. You do not need to download any software or save work to your hard drive before you use App Inventor (see Figure 2.1).
)
Figure 2.1 The Designer interface in MIT App Inventor.
The choice of web browser is very important; the App Inventor team recommends using Google Chrome or Firefox. Choosing a different browser, such as Internet Explorer, could result in errors or other complications when working with App Inventor.
Exploring the App Inventor site is a good way to get a feel for what is available. To begin, launch your browser and go to appinventor.mit.edu (see Figure 2.2). The home page includes the portal to the App Inventor tool, along with many online tutorials and other helpful materials.
Signing In
To begin a session with App Inventor, click the Create button at the top of the home page (see Figure 2.2).
)
Figure 2.2 The App Inventor home page—click Create to get started.
Next, App Inventor asks permission to connect to your Google account. This can be a personal Google account (one that ends with an @gmail.com address) or a Google apps account managed by a university, business, or other type of organization (see Figure 2.3).
)
Figure 2.3 Add your Google account to connect to App Inventor.
After signing in with your Google account, you must authorize App Inventor to access your Google account so that it can verify your login information. If you select Remember This Approval for the Next 30 Days, then you will not need to repeat this step when you return to work on apps (see Figure 2.4). At the end of the 30 days, you simply need to reauthorize access.
)
Figure 2.4 Authorize your Google account.
The next screen is the file system where App Inventor projects are stored. As you create more projects over time, you can find them there, just as a folder on your computer holds a list of all your documents saved to that location.
Next, click New Project and then type CatWatch into the box (spaces are not allowed). This takes you to the Designer screen.
Designer
App building begins in the Designer. Here you create the user interface, or the “look and feel” of the app. You also add the components needed to receive input from the user, as well as the components needed to display output or information to the user. The Designer also is where you specify which nonvisible components the app will use, such as the dialer, GPS, or SMS. Notice that because we are in Designer, the Designer button in Figure 2.5 is slightly grayed out in the top-right corner of the screen. This button, along with the one next to it, labeled Blocks, indicates which editor you are using.
The left side of the screen features the Palette (see Figure 2.5), which, as the name implies, is the space for all the creation tools (the next chapter details the full suite).
)
Figure 2.5 The App Inventor Designer screen.
Blocks Editor
The Blocks Editor is where you will be programming an app’s behavior (see Figure 2.6). Here you will add the commands that do the work of the app. As just noted, you access it from the Blocks button at the top right.
)
Figure 2.6 More specific programming takes place in the Blocks Editor.
MIT App Inventor uses the metaphor of drawers containing puzzle pieces for programming. Each item in the Blocks palette under Built-in is considered a drawer. The drawers contain the puzzle-looking pieces. The programming is accomplished by connecting the puzzle-looking pieces. Despite its seeming simplicity, App Inventor has many powerful capabilities that enable the user to build complex applications.
To better understand what programming an app entails, it is useful to understand what is going on inside an application.
The AI2 Companion App
App Inventor has a useful tool for continuously seeing your app in real time on an Android device during each step of the development process.
You can find the MIT AI2 Companion app (see Figure 2.7) in the Google Play Store by performing a search for “MIT AI2 Companion.”
){kind=link}
Figure 2.7 The AI2 Companion Android app.
When you are building your app, the computer and Android device must be connected to the same wireless network (the desktop machine might have a wired connection). To connect your app to your device in App Inventor on your computer, click AI Companion on the Connect tab (see Figure 2.8).
){kind=link}
Figure 2.8 Connecting to the Companion app.
You can then type in a six-digit code or scan the QR code with your device (see Figure 2.9), using the App Inventor app. Doing so brings up a live view of your app. As you add elements to it with the MIT App Inventor software, those changes are reflected in real time on your device.
)
Figure 2.9 Connecting to the Companion app.
The Android Emulator
As another option, App Inventor has an Android emulator that puts a simulated Android screen on the computer desktop. This enables you to view the app’s progression if you do not have an Android device. It also is useful for anyone using App Inventor in a classroom environment.
An installer package is available for Windows or Mac. Choose the proper platform from the App Inventor site and download it to your computer (see Figure 2.10).
)
Figure 2.10 The emulator download package. The emulator can be downloaded to a Mac or a Windows PC.
To view your app, choose Emulator from the same menu in Figure 2.8.
USB Connection to Android Device
Another option is to connect your device to the computer with a USB cable. This method provides the benefit of seeing the app on your Android device just as if you were using the MIT App Inventor Emulator application. This option also does not require a wireless network connection (see Figure 2.11).
){kind=link}
Figure 2.11 The Android emulator.
First, you need to install the App Inventor setup software to your Mac or Windows PC. Many Android devices also require the installation of driver software (available at the device manufacturer’s website). Your device might require other changes to the device’s settings. Android has a web page that describes the potential changes and implications at http://appinventor.mit.edu/explore/ai2/setup-device-wifi.html.
After you have properly configured your device, select Connect and choose USB from the menu. After a few moments, the app should appear live on your device.