3. INTRODUCTION
1. First of all, you have to access to the main page (http://appinventor.mit.edu)
2. Then click on Create to start.
3. The second step is to log on your own Google Account, you can use a school account.
4. Once you are logged on, you have to create a New Project and you will be able to start your own
application.
5. Install the emulator. http://appinventor.mit.edu/explore/ai2/windows.html
6. To test your app, with the aiStarter opened, click on connect and then click on Emulator.
4. 7. For connecting your phone with your computer, you have to click on Connect and then on All
companion.
8. The next step is to download the phone app and scan the QR code that will appear on your screen.
5. Talk To Me
1. Once you are logged on and you have created a new project, you just have to start developing your
app
2. In this app, when you click on “Press me” button the smartphone says something.
3. In Design part you can make the structure off your app. Drag a Vertical Arrangement in to the display
view.
4. Also you need to drag a button inside the vertical arrangement. You can change the text inside the
button in the properties panel.
6. 5. Select text to speech and drag it into the viewer display.
6. From the other hand, you have to specify what you want this design to do in Block part, such as
reading text or what you want to do when you click on the “Press Me” button. Use the same pieces of
puzzle as we used on the image down below.
7. This app is done, you can use the emulator or your smartphone to see the results.
8. Now we are going to add some new functions. In the design view add select accelerometer sensor
and drag it into the viewer display.
7. 9. The code is simple, just follow the image down below.
10. Now try it on your smartphone. This feature doesn’t work on the emulator.
8. Ball Bounce
1. This app is about animation in App Inventor, we are going to make a Ball bounce around on the
screen, so we will need to add a Canvas.
2. Go to Drawning and Animation and drag out a Canvas component and drop it onto the viewer.
3. When you are using a Canvas, you have to turn off the
"Scrollable" setting so that the screen does not scroll. This will
allow you to make the Canvas to fill up the whole screen.
4. Now we have to change the Height and Width of the Canvas to Fill
Parent, to do this select the Canvas component and then at the
bottom, set the “Height” property to "Fill Parent". Do the same with
the “Width” property.
9. 5. What we need now is a “Ball”. This can be found in “Drawing and Animation”. Drag out a Ball
component and drop it onto the Canvas. Also change the radius.
6. Now you need to specify what make your design work, go to the blocks view. And use the same
blocks as the image.
7. If you try the app now on your smartphone or on the emulator, you will see that when you hit the ball,
and this one gets an edge of you screen, it doesn’t bounce. To fix this, use the code below.
10. Smart Employability Program Quiz
1. This app consists on a game, that ask you questions and you have to answer it right. You need to be
two players for playing this game, because you both have to race with the other for earning points.
2. First, using AppInventor, you have to prepare the designing part, as you can see in the pictures
below.
3. Select the screen and disable the scroll. Put a vertical layout inside de screen. Select a label and
drag it into the vertical layout, we wrote inside this label “Welcome to the SEP Quiz”. Underneath the
label put two horizontal arrangements. Inside this two, there’s a label and a textbox. Below the
horizontals arrangements there’s a “Start” button. Finally, select and drag a TinyDB to the screen.
TIP: Rename all the objects with the
same name we used. That, will help you
with the code part.
11. 4. Go to the blocks editor. Select and drag two global
variables name and then, use the text piece and leave it
blank.
5. Now we are going to create the questions and answers. Create a global variable called questions with
a list inside and do the same for answers. Then you just have to fill the list with questions and
answers. We transform the answers text into uppercase because we don’t want to make the game
case sensitive.
6. The app saves this questions and the names of the players when the user clicks on the “start” button.
What we are going to do first is to save the names of the players into our global variables.
7. It’s time to save all the information inside our TinyDB. Use the same blocks as image down below
TIP: Click on the blue icon to add more ítems on the list.
12. 8. At the end, your blocks (code) should look like this:
9. We added a block to open the next screen.
13. 10. It’s time to design the next screen. Add a new screen, and use the same components that we used
to build the same user interface and remember to change the names.
11. We have to make that the app populate the names of player and also the question, when the game
starts. To do that go to the blocks editor and use the same blocks we used.
14. 12. Now, if you try your app on you smartphone or emulator you will see that all appears the way that
should be. But, if you press “SEND” doesn’t work and doesn’t change the player. Use the same
blocks we did to correct that.
When button “SEND” is clicked: if the answer the player wrote is equal to the answer on the list then we
show a message dialog also we sum 1 point depending on the player and we change the number
question. Else if the player didn’t write the correct answer we show a message dialog saying the player
failed.
13. Ok, we are cheking if the answer is correct, but what about changing the player? First right click on
the first if and select collapse, which will collapse all the blocks. Now add the same blocks we did.
14. Now it’s time to change the labels points, collapse
again this if you just made and add the blocks.
15. 15. Let’s change the turn label and the question:
16. As you can see we set the label text for the first player, just copy and paste these blocks inside the
else if. And change the name player 1 for player 2
16. 17. Now our app changes the turn player and also changes the question. But what happens when the
user answered all the questions? The app should show who won the game. There’s three
possibilities: The player1 won, the player2 won or player1 & player2 draw.
17. 18. The entire code should be like this:
Youtube video tutorial:
http://www.youtube.com/watch?v=0koOsdX_M1E&feature=share&list=PLJFDqPMv012bDAcK8ew
2HJSl9BaNYxKkc
