Hello App Inventor!: Android programming for kids and the rest of us (2015)

Chapter 1. Getting to know App Inventor

Any sufficiently advanced technology is indistinguishable from magic.

Arthur C. Clarke’s Third Law of Prediction^[1]

¹ In the essay “Hazards of Prophecy: The Failure of Imagination,” in Profiles of the Future (Gollancz, 1962).

First a little history ...

The first handheld cell phones were large, heavy, and very expensive. Here’s Martin Cooper, a technical wizard (note the white beard). He is one of the inventors of the first cell phones—and is holding his original prototype phone. In his other hand is a modern smartphone, but more than the size and weight have improved. Mobile devices today do an incredible range of jobs, from simple things like waking you up in the morning to complicated stuff like telling you where you are on the planet and providing anyplace access to the World Wide Web. Human beings have never before carried around so much power in their pockets. Even a basic smartphone operates hundreds of times more quickly and stores tens of thousands more bytes of data than the Apollo Guidance Computer that landed men on the Moon! Most of us just accept and use this power—thesethings happen as if by magic. App Inventor lets you become the magician, writing the spells that transform your world.

© Fundación Príncipe de Asturias

The language of spells (or programming, as we call it) can be hard to learn in some cases. Fortunately App Inventor was designed to help you bridge the gap between the complicated tasks that mobile phones do and learning to write simple but powerful computer programs.

What can an Android smartphone do?

In this illustration, you can see some of the smartphone features that you can take control of through App Inventor. The exciting thing is that it was previously impossible for beginning programmers to program a single device that has all these features.

Imagine building a Wish You Were Here app that uses the device’s camera and Global Positioning Satellites (GPS) to send photo-texts to people on your contact list. Or, using a combination of touch-screen technology and orientation sensing, you could create fun games that respond to you touching, shaking, and tipping the phone—and why not put the leader board of high scores on the internet for all to see? The possibilities are endless ... almost!

App Inventor setup

App Inventor was developed by Google and is now owned and developed by the Massachusetts Institute of Technology (MIT) and can be accessed through this website: http://appinventor.mit.edu/explore/. We suggest you head over there for the most up-to-date setup instructions, because things do change from time to time, but we’ll give you a brief rundown of the setup options at the time we’re writing this. If you’re already set up, you can skip this section.

You need three things to use App Inventor:

· A computer —Windows, Macintosh, or GNU/Linux.

· An internet connection and browser —Chrome, Firefox, or Safari. (Internet Explorer support is planned for the future.)

· A Google account —Free, and available at https://accounts.google.com/signup. Note that to set up your own account, you have to be age 13 or older in most countries. If you’re under 13, a parent can sign up for an account and work alongside you. (We know—the kids will teach the grownups!) Schools can manage groups of Google email accounts (which can include those under 13) by setting up Google Apps for Education: www.google.com/enterprise/apps/education/.

The fourth item we recommend that you have is an Android phone or tablet—but you can use an onscreen emulator if you don’t have one.

Next, we’ll tell you about the options you have for connecting to App Inventor.

Option 1: Using Wi-Fi with the App Inventor companion phone software

If you have access to Wi-Fi, then the good news is that you can run App Inventor without having to download any software to your computer. This is by far the easiest option.

You do need to install an app on your phone called AICompanion, which is available from the App Inventor website and the Google Play Store. And both your phone and your computer need to be able to access the same network router Wi-Fi network.

Before you begin, it’s always a good idea to completely uninstall any previous versions of App Inventor that you have on your system. Then follow these steps to configure your phone for working with App Inventor:

1. On your phone or tablet, go to System Settings > Applications and select Unknown Sources. This option lets you use a phone or tablet to “live test” apps that weren’t downloaded from the Google Play Store.

2. Choose Development on the Applications page, and select both the USB Debugging and Stay Awake options. It’s helpful for the screen to stay awake when you have it plugged in to your computer so you can program without having to constantly tap the screen.

3. Install the AICompanion app on your phone. This link will give you a QR code you can scan to download the free app: http://mng.bz/3eV2.

Option 2: using the onscreen emulator

If you don’t want to test on a phone or tablet, you can run a virtual phone called an emulator on your computer screen. To do this, you need to install the App Inventor setup software.

Once this software is installed, any time you want to test an app, you must run the aiStarter program (which will be installed automatically as part of the setup). We explain more about the emulator later in the chapter.

Before you begin, it’s always a good idea to completely uninstall any previous versions of App Inventor that you have on your system. Then follow these steps:

1. Install the App Inventor setup software. Follow this link, and go to the Install the App Inventor Setup Software section of the page: http://mng.bz/tk58. Then follow the steps for your operating system.

2. Launch aiStarter. You need this piece of software to communicate between the computer and the emulator. When you installed the App Inventor setup software in step 1, aiStarter was automatically installed.

Windows and Linux users need to manually launch it from either the Start menu or the Programs menu every time you want to use App Inventor. Mac users will find that it launches automatically.

Option 3: connecting via USB cable

You can plug your phone directly into your computer via a USB cable. This has the advantage that your phone is charging while you’re working. You need the same setup as for option 2, plus you may need to install the right USB driver for your phone on the computer you’re using.

Before you begin, it’s always a good idea to completely uninstall any previous versions of App Inventor that you have on your system. Then follow these steps:

1. Install the App Inventor setup software. Follow this link, and go to the Install the App Inventor Setup Software section of the page: http://mng.bz/3eV2. Then follow the steps for your operating system.

2. If you are using a Windows PC, you’ll probably need to install the device driver for your Android phone or tablet. A device driver is a little program that lets computers “talk” to compatible devices like mice, keyboards, and smartphones. The App Inventor setup software includes drivers for some common Android phones, but if yours doesn’t appear on the list at http://mng.bz/YXxg, you’ll need to install a driver manually.

3. Configure your phone for working with App Inventor, as follows:

1. On your phone or tablet, go to System Settings > Applications and select Unknown Sources. This option lets you use a phone or tablet to “live test” apps that weren’t downloaded from the Google Play Store.

2. Choose Development on the Applications page, and select both the USB Debugging and Stay Awake options. It’s helpful for the screen to stay awake when you have it plugged in to your computer so you can program without having to constantly tap the screen.

3. Install the AICompanion app on your phone. This link will give you a QR code you can scan to download the free app: http://mng.bz/3eV2.

4. Launch aiStarter. You need this piece of software to communicate between the computer and the phone via USB. When you installed the App Inventor setup software in step 1, aiStarter was automatically installed.

Windows and Linux users need to manually launch it from either the Start menu or the Programs menu every time you want to use App Inventor. Mac users will find that it launches automatically.

Using all three options

If you want to be able to use all three options to test or teach, you need to ensure that you’ve downloaded the free App Inventor software from the website and installed the AICompanion app on your phone. You can either go straight to the website (http://appinventor.mit.edu/explore/ai2/setup.html) and follow the instructions or use the steps we just listed in option 3.

Troubleshooting

If you run into any problems along the way, the Web is a powerful tool for troubleshooting. The MIT App Inventor site has its own troubleshooting page as well as an App Inventor Forum where users and experts help each other overcome difficulties: http://mng.bz/FwKK.

The App Inventor juggling act

In this section, we’ll walk you through the main parts of App Inventor, and then you’ll build your first app. In all the App Inventor apps you build, you’ll use the same three steps with three different screens:

1. Design the app screen by using the app Designer.

2. Tell the app what to do by programming the Blocks Editor.

3. Test the program using your phone or emulator.

Here’s what those steps look like.

1. Designing the app screen

In the App Inventor Designer, you’ll start a new project. Then you’ll design the app screen (even if it’s only a rough draft).

The App Inventor Designer lets you

· Create a new project

· Add components

· Design the look of the app

You access the Designer through your web browser (such as Chrome, Firefox, or Safari) by clicking the Designer button.

2. Telling the app what to do

Next, you’ll program the Blocks Editor to tell the app what to do. The Blocks Editor lets you control how the app works by using programming blocks.

You write apps through your web browser by clicking the Blocks button. You can toggle between Designer and Blocks as you program.

3. Testing the program

Finally, you’ll test the program on your phone (shown on the left) or in the emulator (right):

You can see if the app looks OK and works by watching your phone or the emulator (a virtual phone that you see on your computer screen). Either way, you can test the program in real time.

Tip

If you lose the emulator window onscreen, look for the Android in your toolbar.

In the next three sections, we’ll look at each of these three steps in turn, and then you’ll put them together and build your first app: Hello World! It might help to have an example in mind, so imagine that you want to create an app that plays tic-tac-toe (or noughts and crosses).

How will it look? App Inventor Designer

The first step in creating an app is to set up a new project and then design it. Designing means both laying out what the app looks like and also deciding which small components you need to make the app work—things like buttons and labels and sounds (more on this in chapter 2). The place to do both of these jobs is the App Inventor Designer.

Think about tic-tac-toe. What do you need the game to look like? Probably a grid with nine spaces (3 x 3). You also need some way of letting the player touch a space in the grid; and then you’ll put an X or an O in that space (as long as it’s still free). You might also want to play some sounds and keep score.

To do these things in App Inventor, you would start a new project called TicTacToe. You’d put a grid on the screen, along with buttons to detect which box was touched, a score label, and some sounds. All these components would be dragged into the app from a section called the Palette, where there are more than 50 components to choose from. In chapter 2, you’ll see them all listed.

Component properties

In chapter 2, you’ll learn that components have properties like how big they are, their color, or what flavor they are when you lick the screen (we made the last one up—but one day, who knows?). Each component has its own unique set of properties. As you work through the book, you’ll use components from most of the component groups, so very soon you’ll be a component expert.

How will it work? The Blocks Editor

OK, imagine you’ve designed a beautiful interface full of buttons, backgrounds, and images. What can it do? As it stands, your app doesn’t do anything—you’ll become a programmer once you tell the app what to do using the Blocks Editor.

In tic-tac-toe, you would write a program to detect which box the player touched, display an X or an O, work out a countermove, and display an O or an X. You’d also detect when someone wins or there’s a draw, and play some sounds. These rules need to be programmed into App Inventor, and you can’t do that in the Designer part—you need the Blocks Editor.

Tip

The App Inventor screen has two buttons on the right side that let you toggle between the Designer and the Blocks Editor (shortened to Blocks onscreen).

The Blocks Editor is a drag-and-drop interface, which means you can begin programming right away without needing to learn lots of unfamiliar words. So in the tic-tac-toe example, you could drag programming blocks to detect when a button was pressed without having to write a bunch of code. Programming using blocks that are close to your natural language (in this case, English) is a form of abstraction (see the upcoming Learning Point).

The Blocks Editor screen is split in two, with all the blocks to choose from on the left and a large empty workspace on the right.

Some of the block drawers (like Math) are very deep, so you’ll need to scroll down once you’re in the drawer to see all the blocks. Also, there are two categories of blocks—built-in and component-specific—and they have an important difference:

· Built-in blocks are static. They’re always available, no matter what kind of app you’re creating. They include things like functions to add or subtract.

· Component-specific blocks are dynamic. They become available as you add components and definitions to your app (in the Designer screen). For example, if you add a button, you’ll see a new set of blocks appear, named after your button.

Built-in blocks

Here’s a brief overview of each of the tools in the Built-in blocks drawer.

^a You can also mix your own colors using the color chart at http://mng.bz/qhY3.

Don’t worry about understanding all of these right away. We’ll say a lot more about the blocks as you work through the book.

Component-specific blocks

The contents of the Blocks Editor change in response to the components you add to the Designer. Say you’ve created a simple interface with two components: a button called PressButton and a sound called BeepSound. When you look in the Screen1 drawer (which contains component-specific blocks) in the Blocks Editor, inside will be BeepSound and PressButton drawers.

Tip

You’ll always see Screen1 in the Blocks Editor. This component is there for all apps—it’s the blank screen that opens when you open the app.

Learning Point: What is abstraction?

Abstraction is a way of simplifying programming. It lets a programmer use or call high-level functions using a descriptive name such as “play sound”. Another way of saying this is that it lets programmers program using language which is closer to their “natural language.”

Behind each of the blocks is hidden Java code (Java is a programming language) that you can reuse lots of times. If it weren’t for the blocks abstraction, every time you wanted to play a sound you’d have to write some Java code like this:

import java.net.URL;

import javax.swing.*;

import javax.sound.sampled.*;

public class LoopSound {

public static void main(String[] args) throws Exception {

URL url = new URL(

"http://pscode.org/media/leftright.wav");

Clip clip = AudioSystem.getClip();

// getAudioInputStream() also accepts a File or InputStream

AudioInputStream ais = AudioSystem.

getAudioInputStream( url );

clip.open(ais);

clip.loop(Clip.LOOP_CONTINUOUSLY);

SwingUtilities.invokeLater(new Runnable() {

public void run() {

// A GUI element to prevent the Clip's daemon Thread

// from terminating at the end of the main()

JOptionPane.showMessageDialog(null, "Close to exit!");

}

});

}

}

Even this Java code is an abstraction of the binary 1s and 0s that turn things on and off inside your smartphone. Later you’ll learn how you can use abstraction to make your own programs efficient and quicker to write.

Running and testing programs

In App Inventor you test a bit of design and coding at a time—don’t wait until the end to make sure it all works (this is a useful tip, no matter what programming language you use). As you drag objects onto the screen in the Designer or make changes in the Blocks Editor, you’ll see the app on your phone or emulator change in real time. For example, in the tic-tac-toe game, as you developed the app you could check that buttons appeared in the right place or that the program detected a win and played a sound.

Running and testing: emulator vs. smartphone

Chances are, if you’ve bought this book, you already have a smartphone or tablet you can use with App Inventor. But there may be times when it’s not available or you want to show an app to someone who doesn’t have an Android device.

The emulator is a program that runs on your PC, Mac, or Linux machine and that acts like your phone. But some smartphone-specific features don’t work on the emulator. These include the following:

· Touch-screen technology (although you can use your mouse for some actions)

· GPS

· Texting and calling

· Camera

· Barcode scanner

· Internet connection

· Sensing and responding to what is physically happening to the phone

Throughout the book, when you come to a tutorial, we’ll tell you whether its functionality works fully on the emulator or the phone only (using the Phones Only Android symbol from “How to Use this Book”). For example, one of the games you’re going to program lets you move characters by physically tilting the phone from side to side—which isn’t going to work on a computer. Believe us, picking up your computer screen and tilting doesn’t work.

Your first app: Hello World!

Let’s jump right in and create your first app. You’ll start with something simple: a Hello World! app that displays a pop-up message saying “Hello World!” This isn’t going to make your fortune as an app designer, but after you’ve done it, you can rightly claim that you’ve written your own computer program (and not just any old program—an app!). You can also build on this basic app to learn more useful stuff later.

It’s kind of a tradition that programmers write a Hello World! program whenever they use a new language. This is because it’s very simple, and you can check that you’ve understood the basics before doing the hard stuff. (Carl used to sneak into computer shops in the 1980s to try to run the Hello World! program on as many computers as possible before the store manager threw him out!) The following sections walk you through the steps to create the app.

Tip

In this book we’ll often refer to the user. That means anyone who might use the app (you, your friends, or other people who download it).

1. Opening App Inventor

Once you’ve set up App Inventor on your computer, select the Create section of the App Inventor website (http://appinventor.mit.edu) to get started. This opens the App Inventor Designer.

If you’ve never used App Inventor before, you’ll see a blank list of projects and a welcome message like this:

2. Starting with a new project

Tip

No spaces are allowed in project names, and you’ll see the same is true of component names, too. One way to separate words is to use capital letters to indicate the start of each word. That’s what coders call camel case. See the humps in CamelCase?

Once you’ve created or opened an app, the design page opens. This is where you add components to your app and design the appearance of the app screen on the phone. You can return to the list of your apps in My Projects at any time by clicking the link at the top of the page.

3. Adding a Notifier component to the project

You see Notifiers in lots of computer programs and apps—they’re the little windows that pop up to give you information or warnings on your phone, consoles, computers, and TVs. Sometimes they just have an OK button, sometimes they give you a choice like OK or Cancel, and sometimes they ask for more information and provide a list to choose from or a box to type into.

4. Writing the program using blocks

Normally, apps do nothing until the user does something—such as clicking a button. This is called an event. The special blocks that detect an event and then do something are called event handlers. You can recognize an event handler because it has the words when and do at the left side of the block. After the when, you always see two words separated by a period (or full stop): the first word is the name of the component the event handler is working with, and the second word is the action the event handler is waiting for (also called a trigger). That might sound complicated, but we bet you can figure out what this event handler is looking for:

when StartButton.Click

Did you work it out? The event handler looks for when the user clicks StartButton—when they do, it will carry out whatever is in the do part of the block.

In this simple app, you want a message to appear as soon as the app starts. You’ll use a special event handler called Screen.Initialize to do this. This means the app will do something right away—even if the user hasn’t clicked a button.

What do you want the app to do? Pop up a notifier that says “Hello World!” You’ll see that there are lots of different kinds of Notifier actions (purple blocks). In this case, you’ll use one that shows a message until the user clicks an OK button to make it go away. It’s calledShowMessageDialog, and it displays an alert message with a single button. (You could probably figure that out from the name ShowMessageDialog—App Inventor blocks have logical, descriptive names.)

Now you join the blocks.

The message, title, and button text that the notifier needs are all pieces of text—in programming, we call them text strings. To make text strings, you use a Built-in Text block.

That’s it—you’re an App Inventor, computer programmer, and wizard! Now let’s see if your app works.

5. Testing the app

It’s incredibly easy to make a mistake when you’re programming—you can grab the wrong block, forget a step, or even miss plugging blocks together by a few millimeters. So it’s important to test the app yourself before you hand it over to users. You can test the app using a smartphone or the onscreen Android emulator. App Inventor will translate your Designer components and program blocks into a bunch of binary code that the emulator or phone can understand. You’ll test the app by using a direct connection between the Blocks Editor and your phone or emulator. This is the way you’ll test most of your apps while you build them—later we’ll look at how you can package an app so that it works even if the phone isn’t plugged in to your computer.

You connect a smartphone or run the emulator from the Connect menu at the top of your screen.

If you have a phone, you can connect wirelessly (Wi-Fi), which is the easiest option. Alternatively, you can plug it in via a USB cable (you probably got this when you bought the phone). If you don’t have a phone, then use the emulator. Do one of the following:

· For a wireless connection to your phone, choose AI Companion. A code will appear on your computer screen. You can enter or scan this code into your phone by running the AI Companion phone app.

· For a USB cable connection, the process depends on what kind of computer you’re using. Start by connecting your phone to your computer with a USB cable, and then follow the instructions for your operating system (Windows, Mac OS X, or GNU/Linux) at http://mng.bz/3eV2.

· If you don’t have a phone to test with, the process depends on what kind of computer you’re using. Follow the instructions for your operating system (Windows, Mac OS X, or GNU/Linux) at http://mng.bz/tk58. It takes a little while for the emulator to load, so let it complete this uninterrupted. You’ll see the Android icon appear at the bottom of your screen. Once the emulator is open, you can use your mouse to slide across the virtual screen lock.

You should see the Hello World! notifier appear on your phone or emulator. Here’s how it looked on our emulator:

If you wanted to run Hello World! a second time, you would need to quit the app on the phone or emulator, reset the phone or emulator connection by clicking Connect > Reset Connection, and then restart the whole process manually by going back to the start of step 5. This is clumsy and takes time; surely there’s a better way. How about creating a button the user can click to see the “Hello World!” message? To do that, you need to understand a little more about how the phone can detect when something happens—an event. In the next section, we’ll look at why understanding events is so important and how you can rerun the app at the touch of a button.

Computers never sleep: why you use events

App Inventor is an event-driven programming language. This means the app sits there constantly watching for an event to happen. An app is a bit like an alert watchdog: if you tell it to listen for an intruder and bark when it hears one, then it will spend all its time and resources doing just that. Unlike a watchdog, it never gets tired and will listen for an intruder thousands of times each second! Apps can watch for lots of different event triggers, so you could write an app that watches all the time to see when a user clicks a button or tips the phone or receives a text, and the app could respond differently to each event.

The problem in the Hello World! app is that the Screen1.Initialize event handler you use to trigger the app only happens once: when the app first runs. It would be better to have an event like a button press that the user can touch to trigger the event handler whenever they want to see the message.

Adding a button to the Hello World! program is simple, but before you get to that, it would be a good idea to save a new version of the Hello World! app. That way, you can always go back to the original version if you need to. Learning about saving projects now will save you from getting in a tangle later on.

Saving in the cloud and using checkpoints

Before we get to how to save, it’s important to understand what you’re saving. App Inventor projects contain your screen designs, blocks designs, and assets (graphics, sounds, videos, and so on that your app needs). App Inventor projects only work when opened in App Inventor running on your computer. To get an app to work on your phone without being connected to App Inventor, you need to turn it into an Android Application Package (APK) file—and we’ll look at these files at the end of the chapter.

App Inventor projects are automatically saved every few seconds as you work on them; you might have noticed that this happens in other programs you use, too, like word processors or graphics programs. One difference with App Inventor is that the projects are saved online out in the cloud—this means they’re on a server connected to the internet somewhere, and you don’t need to worry about the details. This is handy because you don’t lose much work if something goes wrong (like a power outage, for example). There are two potential problems, though:

· If you’re experimenting and making lots of changes, and you forget what you did and then want to go back to an earlier version, you’re often stuck with the last version that saved .

· If the server breaks (unlikely), you have no local copies of your projects on your own computer.

To solve the first problem, App Inventor lets you save projects and use checkpoints.

Using Save As and Checkpoint saves project copies in the cloud—but what if you want a copy on your own computer as a backup? You can save the project files of all your projects in one zip file; or you can select the one you want to back up, which is saved as an App Inventor App (.aia) file. To do that, click My Projects and then do the following:

The resulting .aia file will be saved in your computer’s Downloads folder. From there you can keep a local copy and share the project file with other App Inventors for them to work on, which they can do by importing your .aia file.

Button click: Hello World! app, version 2

Adding a button to the Hello World! program is a simple four-step process:

1. Save a new copy of the app.

2. Add a button to the screen in the App Inventor Designer.

3. Change the event trigger for the notifier so it watches the button (instead of the Screen1.Initialize event).

4. Test the app.

1. Saving a new copy of Hello World!

You call the new project HelloWorld1_Button so that when you look at the list of projects, you know what makes this version different from any others. Giving items sensible names will help you later when things get more complicated and you’ve created lots of different projects.

2. Adding a Button component

You need to tell the user what to do with the button. Change the button text to say Click Me!

3. Programming the blocks

You’ve already written the blocks to pop up the notifier. The only thing you need to change is the event trigger—instead of Screen1.Initialize, you’re going to use a Click event triggered by the button. You’ll add the event as a new block and then drag and drop the notifier’s code blocks from Screen1.Initialize into Button1.Click.

Switch to the Blocks Editor. Drag out a Button1.Click event:

Now drag the Notifier block’s code from Screen1.Initialize into Button1.Click:

4. Testing your app

Taking it further

1. Add a new button and notifier to your app. Make the notifier say “Goodbye World” if the user clicks the second button.

2. Try changing the color properties of Screen1 and Button1. Also change the Font and Size properties of Button1.

Packaging an app for your phone

Your first app or two are finished, and they run fine as long as you’re connected to App Inventor via Wi-Fi or USB. To get them to run independently on your phone, you need to package them as Android Application Package (APK) files. An APK is the same kind of file you download from the Google Play Store (the online shop where you can download apps to your phone).

You can either download your APK directly to your phone or download it to your computer and then transfer it to your phone over USB or via SD card. The first option (direct download) is an easy way to download a single copy onto a single phone. The second option (download to computer) is a good way to share your app with friends—you can email the APK to them to install on their own phones—or even upload it to a website.

Important

APK files can’t be loaded back into App Inventor. To change apps, you need to use the project .aia files in My Projects. Think of it this way: project files are like recipes and ingredients, and APKs are like the final cakes. If a baker wants to change the flavor of their cakes, they need to go back to the recipe and bake a new batch. Tinkering with the cakes once they’re baked and iced never ends well!

Downloading APKs directly to your phone or computer

To create an APK, do the following:

If you select App (Provide QR Code for .apk), you’ll see a progress bar. After a bit, you’ll see the QR code on your computer screen. You can scan it with the AI Companion app on your phone. When you scan the QR code, the APK will be automatically downloaded to your phone, ready for you to install:

Note that your steps may look slightly different depending on which version of the Android operating system is on your phone.

Once the download has finished and the app is installed on your phone, you don’t need to use App Inventor to run it. Click the new icon, which looks like this:

Downloading APKs as files to your computer

If you chose to download the APK file to your computer, do this:

You can now share the file with others via email and transfer the file to your phone. Opening it using a file browser on your phone will run the app installer.

Changing the app’s icon

The App Inventor icon is cute, but you probably don’t want all your apps to look the same. You can choose your own image as an icon before you package your APK. It’s best if you use an icon that’s about 48 x 48 pixels in PNG or JPEG format. Add it to your app like so:

What did you learn?

In this chapter, you learned about the following:

· The capabilities of Android smartphones

· The three parts of App Inventor: the App Inventor Designer, the Blocks Editor, and the phone or emulator

· The difference between the emulator and a phone

· Using the Notifier pop-up and Button components

· Event-driven programming

· Saving projects and packaging them for your phone and friends

Test your knowledge

1

What is the difference between Save As and Checkpoint?

2

Which of these actions can’t be tested using the emulator?

1. Getting GPS coordinates

2. Playing a sound

3. Clicking a button

4. Capturing a barcode

3

Which of these actions do you do in the App Inventor Designer, and which do you do in the Blocks Editor?

1. Starting a new project

2. Connecting to your phone

3. Using an event handler

4. Adding a button component

5. Changing the app’s icon

6. Saving a backup of your app

7. Packaging your app

Try it out

1

Try connecting your phone by USB and Wi-Fi. Which is fastest to connect?

2

Draw a world icon for your app in a simple drawing program, and then package your app using this icon.