By Warren de León Ofalla, Roger Soriano Tasso,

Alexis Toledo Ruiz & César Benites Rojas

INDEX

INDEX ................................................................................................................................................................................... 1

INTRODUCTION ................................................................................................................................................................. 2

TALK TO ME ....................................................................................................................................................................... 4

BALL BOUNCE ................................................................................................................................................................... 7

SMART EMPLOYABILITY PROGRAM QUIZ .................................................................................................................. 9

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.

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.

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.

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.

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.

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.

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.

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.

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.

8. At the end, your blocks (code) should look like this:

9. We added a block to open the next screen.

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.

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. 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

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.

18. The entire code should be like this:

Youtube video tutorial: http://www.youtube.com/watch?v=0koOsdX_M1E&feature=share&list=PLJFDqPMv012bDAcK8ew

2HJSl9BaNYxKkc