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:
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
AnswerTextBox1. In general, you should give descriptive names to the
widgets in your app that will interact with the user.
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
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!
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".
Notifiercomponent; you can just reuse the existing one.
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?
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 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
block to our
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
if else block.
Run the app again and see what happens when you submit "marmoset" as your answer.
When adding blocks to your program, you can save time by duplicating existing blocks and then changing them slightly to suit your purposes.
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".
ifblock is used to open up a little window that allows you to drag more
else ifblocks inside the
ifblock. To close the little window, simply click the blue gear again.
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
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.
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.
upcaseblock is a little weird, because once you've dragged it into your program you can click on the dropdown to convert it to the
downcaseblock. The easiest way to complete the exercise, incidentally, is to use the
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
downcase blocks to every
AnswerTextBox.Text block. That will certainly work, but App Inventor
gives you a better way: the
initialize local block!
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
downcase[trim[AnswerTextBox.Text]]. You should use a variable
whenever you want to use the same value more than once.
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.)
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.
Replace the remaining
Notifier1.ShowAlert blocks with
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
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.