The Basics
==========
Sign into `App Inventor `__ in your
browser, then download :download:`this lovely image ` to your computer.
.. tip:: Before you begin, we highly recommend that you :doc:`turn Autoplay off on YouTube `.
Follow the steps in the video below to create your first interface:
.. youtube:: Bz5FVfCF9uQ
To run the app on your phone, launch `MIT AI2
Companion `__:
.. youtube:: 2ZNdSvvhT5M
.. 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:
.. youtube:: svSpSzWOyio
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:
.. youtube:: Ypaul4tF0Jk
.. 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"*.
.. exercisehint:: You don't need to add a new ``Notifier`` component; 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:
.. youtube:: J6fclajz1v4
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:
.. youtube:: ZadTsaU_Mh4
.. 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:
.. youtube:: wMhzAF4pIDA
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.
.. youtube:: QTg_A97xkJc
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".
.. exercisehint:: Remember that the blue gear icon on an ``if`` block is used to open up a
little window that allows you to drag more ``else if`` blocks inside the ``if``
block. 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
the ``trim`` block:
.. youtube:: ZVH3VW_5HOo
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.
.. exercisehint:: The ``upcase`` block is a little weird, because once you've dragged it
into your program you can click on the dropdown to convert it to the
``downcase`` block. The easiest way to complete the exercise, incidentally,
is to use the ``downcase`` block.
.. 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!
.. youtube:: 0EvSiRYizS4
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!
.. youtube:: YOHR-rvPEes
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:
.. youtube:: -HngAmkASag
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 :doc:`camera `.