The Basics

Sign into App Inventor in your browser, then download this lovely image to your computer.

Tip

Before you begin, we highly recommend that you turn Autoplay off on YouTube.

Follow the steps in the video below to create your first interface:

To run the app on your phone, launch MIT AI2 Companion:

Note

If you are using an emulator, you'll need to select Connect > USB from the menu instead.

That's it! You should be able to see your app running now. It isn't much at the moment but we're just getting warmed up.

Right now there's no way for the user to interact with your program. Add a text box and some buttons to your interface:

Notice how you renamed the text box from TextBox1 to AnswerTextBox1. In general, you should give descriptive names to the widgets in your app that will interact with the user.

Exercise

Rename Button1 to SubmitButton, Button2 to Hint1Button, and Button3 to Hint2Button.

Right now nothing happens if you press the buttons. Let's give the user a hint if she presses the first hint button. We can do that by using the Notifier widget:

Note

The Notifier is not a component that is visible in your interface. However, you need to drag it onto the Screen because if you don't, it will not be available to use in the Blocks interface.

Run the app again and see what happens. Congratulations, your mobile app is now interactive!

Exercise

Show a different hint when the other hint button is pressed. For the message, you could use: My name rhymes with "big bee karma debt".

Now we need to add some behavior for when the user presses the Submit button. When that happens, we want to check if she entered the correct answer in the TextBox, and, if she did, we'll congratulate her. Here's how to do that:

Now run it again. Yay, you're program is now fully functional! Wasn't that easy?

Tip

You might have noticed that all the components and blocks in App Inventor are quite "chatty". That is, they love to tell you what they are and how to use them. To get more information on a component in the Designer interface, click the question mark next to it. To get more information on a block in the Blocks interface, hover your mouse over it (although please note that some blocks don't show any help text when you hover over them).

Although the app works now, we haven't given any thought to layout. There's no reason all the widgets need to be vertically stacked. Many times we'll want to put widgets on the same row to save space or increase coherence. Here's how to do that with the HorizontalArrangement component:

Exercise

Use HorizontalArrangement to also put the two hint buttons side by side on their own row.

Right now, the program only reacts if the user submits a correct answer, and does nothing if the answer isn't correct. That isn't very user-friendly! We can give a word of encouragement by adding an else block to our if block:

Nice! But this program could still be a bit more friendly. For example, what if the player entered an answer that was technically correct, but not the answer we are looking for? For example, let's say that the player entered "marmoset". We may want to give her a specific message in that case to let her know that she's on the right track. We can do that using the if else block.

Run the app again and see what happens when you submit "marmoset" as your answer.

Tip

When adding blocks to your program, you can save time by duplicating existing blocks and then changing them slightly to suit your purposes.

Exercise

App Inventor allows you to add as many else if blocks as you like. Add another two else if blocks that handle the cases of the player entering the words "animal" and "stuffed animal".

Run your app and try submitting "pygmy marmoset " (note the extra space at the end). Your program doesn't accept it as the right answer! That's because computers are very exacting about input values; they don't understand the concept of "mostly correct". We can address this by using the trim block:

Now your app will accept the right answer, no matter how many spaces there are around it. Try entering " pygmy marmoset " (spaces on both sides) and verify that it works.

Exercise

A similar problem exists for uppercase/lowercase. Try entering "PYGMY MARMOSET" as your answer to see what we mean. Use the upcase block in the Text section to address this.

Tip

You may have noticed by now that the program running inside your phone doesn't always change when you update your blocks. That may be because the version of your program on your phone is lagging behind. You can force an update by clicking on the Designer button, then clicking on the Blocks button.

Great, now our app is much more lenient with accepting correct answers. But what about the other conditions in our if block? For example, if you submit " Marmoset ", you can see that your program doesn't yet do the right thing. Based only on what you've learned so far, your first instinct might be to apply the trim and downcase blocks to every AnswerTextBox.Text block. That will certainly work, but App Inventor gives you a better way: the initialize local block!

The initialize local block creates a variable with a name of your choosing (in the video we called it "answer"). A variable is just a block that has a name and can store a value. In the video above we created a variable called answer and initialized it with the value of downcase[trim[AnswerTextBox.Text]]. You should use a variable whenever you want to use the same value more than once.

Exercise

Replace the other AnswerTextBox.Text blocks with the get answer variable block.

Your app is already pretty good, but now it's time to make it snazzy. Let's make your phone talk!

Run the app again. Voila, you now know how to make your phone say anything you want it to! (Please try to resist the urge to make it say swear words.)

Tip

App Inventor also allows you to use the keyboard to duplicate a block, which is quicker than the right-click method. Just select a block, and then perform a copy (Ctrl/⌘-c) followed by a paste (Ctrl/⌘-v).

OK, but what if we want our program to talk every time the player submits an answer, regardless of whether her answer was right? Of course, you can achieve that by copying all the call TextToSpeech1.Speak blocks and then modifying them. But if you have a lot of if else blocks, that's a ton of extra work!

Fortunately, programming is all about working smarter, not harder. We can use a procedure to make it easier for us to add speech functionality:

A procedure is basically a custom block whose behavior is defined by you. After you define a procedure, you can use it in any other block, as if it was one of the blocks provided by default. You should use a procedure whenever you notice that your program has a repetitive structure.

Exercise

Replace the remaining Notifier1.ShowAlert blocks with announce blocks.

Remember, variables are used to store values, while procedures are used to store other blocks. Often, a procedure comes with its own variables, which can be modified by adding or removing input blocks inside the procedure block. Don't worry, all of this will become more clear as we move forward.

Perhaps you've wondered to yourself what kind of person can create programs. Now you know the answer: You. Believe it or not, you now know 80% of what you need to know to work with App Inventor.

Next, let's play around with the camera.