Making Your Own App w/ MIT App Inventor

Written by Sarah Guller

Questions/ comments about this tutorial? Contact me at sarah.guller@icloud.com

1. Go to the following link: http://appinventor.mit.edu/explore/

-Click Create Apps in the upper-right corner (sign in when prompted)

2. Select Start New Project button to the far left

-Name it whatever youd like

3. You will see a blank screen called Screen 1.

-From the User Interface tab in the left-hand Palette, drag and drop a label onto the top
of the screen
-The panel to the right is called the Properties Panel. For each element that you
drag and drop, you can configure its properties here. Under Text in this panel,
type in: Welcome to (your name here)s App!
-Play around with the font size (size 24 recommended), background color of the
label, etc in the Properties Panel.
-From the Palette, drag and drop an image under the label. In the Properties Panel,
under Picture, click Upload File.
-You can upload any image of your own, or use the WelcomePic.jpeg in my
MITAppSession file folder (the one that you found this document in).
-Fix the dimensions of the image in the Properties Panel on the right

4. Under Components, select Screen 1

-In the Properties Panel on right, fill in the AboutScreen textbox with
Welcome Page. This will allows you to quickly remember what the purpose of the
screen is
-Under AlignHorizontal, select Center: 3 to center the labels/ image

5. Add a button that says Go to the Next Page. Then, in the blocks, drag out a brown When
Button.1 Clicked do: block, and plug in the open another screen screenName: block from
the Built-In Control tab on the left. Take out a pink block from the Text tab, and type in the
name of the screen you want that button to open. For example, if I want the user to click a
button so that the Warmup screen opens (thats the mini-ball game were about to make), my
blocks will look like this:
In the green bar near the top, click Add Screen. Name this new screen Warmup. Although this
screen doesnt really have anything to do with the animal app, its a great way to learn about all
the fun you can have with sprites/ animation. Consider this a random and quirky warmup for
yourself and for the user!

1. With your new screen open, go to Properties, and uncheck scrollable. We do this because
this screen will need to be a fixed size, and we dont want the user scrolling up and down.

2. From the Palette (on the left) find the Drawing and Animation tab (scroll down a bit, its a few
tabs below the User Interface one). Drag and drop a canvas from here onto the blank screen.
Under Properties, change the width and height from Automatic to Fill Parent.

3. From Palette again, drag and drop the ball sprite onto the canvas. Youll notice its very small;
go to Properties (on the right- you should know this by now!) and change the radius of the ball to
10. Change the PaintColor property too, if youd like.

4. Time for code! Click on the Blocks button in the top right, above the Properties Panel. On the
left, select Ball1. Drag out the block that says When Ball.1 flung...do.

5. We want the ball to move in the direction of the fling, and at the speed that matches how
quick the device was moved. Pull out the setter block (dark green) for the balls heading and put
it inside the other block. Under that, drag and drop the setter block (dark green) for the balls
speed.

6. From the flung event handler (the yellow block that is holding the other blocks of code), put
your mouse over the heading box. A pop up menu will appear: choose the orange get header
block and drop it next to the header setter block. Now hover your mouse over the speed box
from the Flung Event Handler. Choose the orange get speed block and place it to the right to
the speed setter block.

7. Try this out on the emulator or your device! Youll notice the ball gets stuck on the edges; we
need to tell it what to do when it hits the side of the screen.

8. After clicking Ball1 (still using code blocks), drag out the block that says When
Ball1.EdgeReached Inside of this block, add the block that says call ball1.bounce edge
block (it should be purple).

9. Looks like we need a value for edge. From the yellow block that holds the code, (called the
event handler), hover the mouse over the edge parameter. From here, drag the orange block
that says get edge and plug it into the edge value. Try the app now- your mini game is ready!

10. Go back to Designer (instead of Blocks) as your screen display. Change the color of the
background to make it more visually appealing.
11. Add a button at the bottom that says Im ready to learn about animals!. Add the neccessary
blocks so that this button, when pressed, will open up the next screen.

11. This mini-game is valuable for this tutorial as it will get you familiar with sprites and
animation. Now that you have created a fun, maybe random warm-up for the user, lets get
started on the animal app!

For a video of the tutorial so far check out: https://www.youtube.com/watch?v=w0yxJSlC00w

12. Click Add Screen. Name it Whale. This will be the first animal-themed screen of your app!

13. From the left, drag and drop a Label. Change the text (using the right hand side Properties
Panel) to say Whale. Under it, drag and drop an Image from the left User Interface Palette.
Under the Picture property, click upload file and upload the whale.jpeg.

14. Under this picture of a whale, drop a label. Change the text of the label to say Fun Facts.
(hint: you change the text using the Properties panel on the right).

15. Drag and drop a ListView under this label. Under Properties, there is a text field to enter the
ElementsFromString. These elements will be separated by commas, and each element will be a
string. A string is a collection of alphabetic letters (a word). We are using this feature so that we
can display 3 facts about whales. In the text field, type in: Whales are social animals, Whales
are mammals, Whales eat krill. You will see that each fact gets its own line on the screen!

16. Now we will integrate audio. From the Palette, find the Media tab and drag and drop a
Sound onto the screen. On the right, configure it so the source is whale.mp3, which you will
need to upload from my folder.

17. Add a button that says Listen to a whale!

18. Go to blocks mode (top right corner) so we can use code to make a connection between the
button and the sound it plays. Click Button1 so you can view options for button-related code.
Drag out the when button1.Clicked frame. Inside of this, insert the code that says call
sound1.play (purple block that appears when you click Sound1 from the left-hand blocks
menu).

19. Return to Designer mode. Under Components, click on Whale, which is the name of the
screen. From Properties (right hand side panel), change the AlignHorizontal value to Center:3.
This aligns your screen so everything is centered and more visually appealing.
20. From Components, you can change the size and fonts of various buttons and labels.
Change the background color to blue (to represent the ocean) or your favorite color. You may
want to enlarge the main title, or change the audio button to be a different color. Play around
with these features to make the screen look great!
-you can change each button/ list/ label by directly clicking on it in the screen, or
selecting it under the Components tab

Your finished animal screen should look something like this:

Click add screen and repeat steps 12-20 for different animals each time. You can find various
animal images/ audio files in my folder. Try using different elements from the Palette as you go
(videos, trivia quiz, etc)

I hope you found this tutorial fun and learned a bit about how to use MIT App Inventor.The goal
was to get you familiar with the environments various features/ functions so I hope you try
making a new app on your own- have an idea for an app? Go ahead and try creating it now.
There are ways to integrate sensors, display existing websites, and add practical functionality to
the app- get creative!
Good luck and happy coding!