App Inventor LadybugChase · App Inventor Tutorial Instructions ! 1 LadybugChase In this tutorial you will create a game where the goal is for a ladybug to eat aphids awhile

App Inventor Tutorial Instructions

1

LadybugChase

In this tutorial you will create a game where the goal is for a ladybug to eat aphids awhile avoiding the frog. Getting Started

• Login to App Inventor • Create a new project named “LadybugChase” • Download the images of the ladybug, aphid, and frog and the sound of the frog’s ribbit.

Designing the Application Interface in the Designer Create Screen1 Add Welcome Label to Screen1

• Drag a Label from the Basic Palette onto the screen. • Click Rename and change the name to "WelcomeLabel". • In Properties panel, change the Text field to “Welcome”

Add the Enter Button to Screen1

• Drag a Button from the Basic Palette onto the screen. • Click Rename and change the name to "EnterButton". • In Properties panel, change the Text field to “Enter LadybugChase”

Create LadybugChase Screen

• Click the Add Screen button located in the menu across the top of the Design tab. Name your new screen “LadybugChase.”

• Select the Screen component in the Designer. • In Properties panel change the Title field to “LadybugChase”. Can you see the title

showing now? Add the Canvas and Ladybug

• Add a Canvas and rename it to “FieldCanvas”. Set its Width to the whole screen and the Height to 300 pixels.

• Add an ImageSprite and rename it LadybugSprite. Set its Picture to be the ladybug image you downloaded.

• Set the Interval property to 10 milliseconds. This indicates that the sprite will move itself every 10 milliseconds. Leave the Heading and Speed properties. You will set those in the Blocks Editor.

Add the Orientation Sensor to Control the Ladybug’s Movement

• The ladybug’s movement will be controlled by an OrientationSensor, which detects how the phone is tilted. You’ll check the OrientationSensor every 10 milliseconds and use that to update the ladybug’s Heading.

• Add an OrientationSensor • Add a Clock and set it’s TimerInterval to 10


2

Add an Energy Level

• Add a Canvas below FieldCanvas and name it “Energy Canvas”. Set its Width to the whole screen and its Height to 1 pixel.

Add an ImageSprite for the Aphid

• Add an ImageSprite to the FieldCanvas and rename it to “AphidSprite”. Set its Picture to be the aphid picture you downloaded. Set its Interval to be 10 just like the LadybugSprite. Set its Speed to be 2, so that it doesn’t move too quickly.

Add a Reset Button

• Add a Button, rename it to “ResetButton” and change the text to say “Reset”. Adding an ImageSprite for the Frog

• Add an ImageSprite to the FieldCanvas and rename it to “FrogSprite”. Set its Picture to be the frog picture you downloaded. Set its Interval to be 10 just like the LadybugSprite. Set its Speed to be 1, so that it doesn’t move too quickly.

Programming the App in the Blocks Editor

• Open the Blocks Editor and connect to your phone. Write code to go from Screen1 to LadybugChase screen

• Use a When...Clicked event handler for EnterButton with call open another screen to transition to the LadyBugChase screen when the Button is pressed.

Switch to programming the LadybugChase screen • In the Designer select LadybugChase screen to be shown in the Viewer panel. • Go back to the Blocks Editor; it will now be blank.

Program the Ladybug

• Create a procedure called “UpdateLadybug”. When UpdateLadybug is called, set the LadybugSprite.Heading to the OrientationSensor.Angle and set the LadybugSprite.Speed to the OrientationSensor.Magnitude. This sets the Ladybug’s direction to the direction the phone is tilted, and the more tilted the phone is the faster the Ladybug will go.

• Use the Clock Timer block and call UpdateLadybug whenever the timer goes off Test Your App

• Test your work and package the application for the phone. Does the Ladybug move around when you tilt the phone?

Program the Energy Level

• You are going to display the Ladybug’s energy level a red bar on a second canvas. 200 pixels long means well-fed and 0 means dead.

• First, create a variable named “energy” , and set its initial value to 200. • Create a Procedure with Arguments named “DrawEnergyLine”. The Procedure should

have two arguments “color” and “length”. You’re going to use this procedure to draw an energy bar the length and color passed in.

• In DrawEnergyLine, set the EnergyCanvas paint color to “color”. Then use the EnergyCanvas.DrawLine block to draw a line from 0,0 to “length”, 0.


3

• Now you’re going to create a Procedure that calls DrawEnergyLine twice – once to draw a white line all the way across the canvas to clear the line and then once to draw the new energy line in red.

• Name this procedure “DisplayEnergy”. First call DrawEnergyLine with the arguments the color white and EnergyCanvas.Width and then call it with the color red and the global variable energy.

Program GameOver • Now you’re going to write a Procedure that disables the Ladybug. Call this Procedure

“GameOver”. Inside GameOver set Ladybug.Enabled to false, and Ladybug.Picture to the picture of the dead ladybug you downloaded

Program Starvation

• Now update the UpdateLadybug procedure to decrease the energy level by 1 each time its called.

• Call DisplayEnergy to display the new energy value • Add an if statement to check if the energy value is 0 and if the value is 0 call GameOver •

Test Your App • Test your work and package the application for the phone. Does the energy level

decrease? When the energy level gets to zero does the ladybug die? Does the ladybug still move properly?

Program the Aphid • You’re going to program the aphid to change directions randomly 20% of the time the

clock timer goes off. • Create a procedure named “UpdateAphid”. Get an if block. Set the test block to test if

a random fraction is less then .2. This means the block will be true about 20% of the time.

• In the if block, set the AphidSprite.Heading to a random integer between 0 and 360. • Set the timer block to call UpdateAphid.

Test Your App

• Test your work and package the application for the phone. Does the aphid change directions?

Program Eating the Aphid

• Create a procedure called “EatAphid”. Inside EatAphid, increase the energy level by 50. • Next set AphidSprite.Visible to false so that the aphid disappears. Set

AphidSprite.Enabled to false so that the aphid stops moving. • Finally, use the Aphid.MoveTo to move the Aphid to a random location. Set the x value

a random integer between 0 and the canvas width minus the aphid width. Set the y value a random integer between 0 and the canvas height minus the aphid height. Remember we did the same thing in MoleMash?

Detecting a Ladybug-Aphid Collision

• You are going to use the built-in collision detection system for the Sprites to determine when the ladybug has hit the aphid.


4

• Get the block When Ladybug.CollidedWith. Inside the block place an if block. Test if “other” equals the aphid component AND if the aphid component is visible. If both things are true then call EatAphid.

Test Your App • Test your work and package the application for the phone. Does the aphid disappear if

it collides with the ladybug? Does the energy level go up? Program the Return of the Aphid

• You’re going to change UpdateAphid to bring the Aphid back if its not visible. • Add an ifelse block that checks to see if the aphid is visible. If the aphid is visible then

execute the changing direction 20% of the time code you already wrote. • However if the aphid is not visible then create an if block that checks if a random

fraction is less than 0.05. If the statement is true, then set AphidSprite.Enabled to true and AphidSprite.Visible to true. This code should bring the aphid back 5% of the time.

Test Your App • Test your work and package the application for the phone. Does the aphid return after

the ladybug eats it? Program the Reset Button

• When the ResetButton is clicked, set the energy variable back to 200. Set the aphid to visible and enabled. Set the ladybug to enabled and set the ladybug picture back to the live ladybug.

Test Your App • Test your work and package the application for the phone. Does the ResetButton reset

the game? Is there anything you missed resetting? Program the Frog to Move Towards the Ladybug

• You are going to program the frog to head straight towards the ladybug 10% of the time to try to eat the ladybug.

• Create a procedure called “UpdateFrog.” Inside UpdateFrog, create anif block that checks if a random fraction is less than 0.1.

• Inside the if statement change the FrogSprite.Heading to call atan2 and set the y value to be FrogSprite.Y – LadybugSprite.Y. Set the x value to be LadybugSprite.X - FrogSprite.X. Notice that the order is different for x and y.

Test Your App • Test your work and package the application for the phone. Does the frog change

directions and move towards the ladybug randomly? Have the Frog Eat the Ladybug

• Modify the LadybugSprite.CollidesWith code to add a second if statement that tests if the Ladybug collided with the frog. If the ladybug did collide with the frog, set energy to 0, call DisplayEnergy and call GameOver.

• In the ResetButton click event handler add code to move the ladybug to a random location on the canvas, so that the ladybug is not touching the frog when the game restarts.


5

Test Your App • Test your work and package the application for the phone. Does the game end when

the frog eats the ladybug? Does everything else still work? Adding Feedback

• In the EatAphid Procedure, add a Sound1.Vibrate for 100 milliseconds • In the CollidesWith Procedure, add a Sound1.Play that is called just before GameOver

Test Your App

• Test your work and package the application for the phone

Hack Your App! • Customize your App: Display a score indicating how long the ladybug has remained

alive. Add ambiance with a background image and more sound effects.

Resources YouTube Videos

• PTSAndriod’s Video Part 1 http://www.youtube.com/watch?v=YVmjsWxf2Fs • PTSAndriod’s Video Part 2 http://www.youtube.com/watch?v=1INF91IBCM0 • PTSAndriod’s Video Part 3 http://www.youtube.com/watch?v=y74_1fKPjZc • PTSAndriod’s Video Part 4 http://www.youtube.com/watch?v=F1a_JuDkuzs • PTSAndriod’s Video Part 5 http://www.youtube.com/watch?v=3VfEOyDxwmw • PTSAndriod’s Video Part 6 http://www.youtube.com/watch?v=51Dsgkm7-5A • PTSAndriod’s Video Part 7 http://www.youtube.com/watch?v=Ie4qtxmob6U

Post Questions to P2PU

�� !��

�� #��#��'�$��"�� "��&��$!��#��$"�!��

( ��#!��'�$��'�#��#��#�� ( ��&��!�'��%��!��#��"�!��&��!��"�"��%�!�#��#��

"#�!%�#��( ��"��#�� "��!��!�#��!�'��%��"#�!%�#��( �%��!��#��#�&��#"�#��#��#�

�

�

�

�

�

�� "��!��#��

��$�"��$��&�!��#�!�$�� "��!��#��"�� #�!��"��#��""$��"�'�$��&��$#� !��$!��!��#��!��$��!��!�#��#�� #�� #"��#��#��!�%��&��#�!��!�� "��#��!� !�%��$"�� #�!"��#��"�� #�!��#!��$��"�

( �"��$�#� �� #"��#��#��"��"��#&��#��


6

QuizMe In this tutorial you will create a trivia quiz game. The game displays a question that the user is asked to answer. If the user answers the question correctly the game displays a new question If the user answers incorrectly then a message appears to try again. Getting Started

• Login to App Inventor • Create a new project named “QuizMe”




• Drag a Button from the Basic Palette onto the screen. • Click Rename and change the name to "EnterButton". • In Properties panel, change the Text field to “Enter QuizMe”

Create QuizMe QuizMeQuestion1 screen

• Click the Add Screen button located in the menu across the top of the Design tab. Name this screen QuizMeQuestion1.

• Select the Screen component in the Designer. • In Properties panel change the Title field to “QuizMe”. Can you see the title showing

now? Add Components for Question and Answer1

• Add a Label and change the name to “Question1Label”. Change the text of the label to say “What woman is the annual Women in Computing Conference named after?” or a question of your choice.

• Add a vertical arrangement and set the Width to be the whole screen and the Height to be 200 pixels. Drag the Question1Label into the arrangement. Can you see the whole question on the screen now?

• Now add a Textbox and change the name to “Answer1Textbox”. This is where the user is going to type their answer. Change the Hint to something helpful for the user like “Enter Answer Here”.

• Next add a Button and change the name to “Answer1Button” and the text to “Submit Answer”

• Add an additional Label that you’re going to use to tell the user if their answer is incorrect. Change the name of the label to “Wrong1Label” and delete the text.


7

Create Correct Screen

• Click the Add Screen button located in the menu across the top of the Design tab. • Select the Screen component in the Designer. • In Properties panel change the Title field to “CorrectAnswer”. Can you see the title

showing now? Add Components to Tell the User they are Correct and Go to the Next Question

• Now you are going to create a screen that tells the user they got the question right and has a button for them to go to the next question if they choose.

• Add a Horizontal Arrangement and set the Width to go across the screen. • Add a Label in the Arrangement and rename it “CorrectLabel”. Change the text to

“Correct!” • Add a Button and rename it to “NextButton”. Change the text to say “Next Question”

Add a Second Question Screen

• Add another Screen (name it QuizMeQuestion2) and make it just like the first question screen except set the question to “What is the annual starting salary of someone with a computer science degree?”

Add a QuizOver Screen

• Create a final Screen (name it QuizOver) with a label that says “Correct! The quiz is over.”

• Don’t forget to use a Horizontal Arrangement so you can see all of the Label. Programming the App in the Blocks Editor

• Open the Blocks Editor and connect to your phone. Write code to go from Screen1 to QuizMe Question 1 screen

• Use a When...Clicked event handler for EnterButton with call open another screen to transition to QuizMeQuestion1 screen when the Button is pressed

Switch to programming the QuizMe Question1 screen • In the Designer select QuizMeQuestion1 screen to be shown in the Viewer panel. • Go back to the Blocks Editor; it will now be blank. • Now you are going to program the page to test if the answer that the user enters is

correct • Create a Text variable called “Answer1Global” and set it to the answer for question 1,

“Grace Hopper”. • Program so that when the Answer1Button is clicked, it tests if the answer1 global

variable is equal to the Answer1TextBox. • If it is equal then change to the Correct Screen. • If it is not equal change the Wrong1Label to “Incorrect. Try again.” • Hint: Use a ifelse block.

Test Your App

• If you answer the question correctly, do you switch screens? If you answer the question incorrectly, do you see the wrong label?


8

• NOTE: You will need to “Package for Phone” in order to see the screens switch, since screen switching is not supported during development.

Switch to Programming the Correct Screen

• Program the NextButton to change to the QuizMeQuestion2 screen when clicked. Switch to programming the QuizMe Question2 Screen

• Program the Screen with QuizMeQuestion2 the same as the screen with QuizMeQuestion1 except using the answer “$61,000”. If the user gets the question correct, change to the QuizOver Screen.

Test Your App


Hack Your App! • Customize your App: can you change it to your own questions? Can you figure out how

to add more questions without adding more screens? (Hint: use a list or a database]

Resources YouTube Videos

• Chris Groff’s Video Part 1 http://www.youtube.com/watch?v=-qRQHm0m5O4 • Chris Groff’s Video Part 2 http://www.youtube.com/watch?v=px-nYnDa0qQ • Chris Groff’s Video Part 3 http://www.youtube.com/watch?v=JX2JA9MehvQ

Post Questions to P2PU


9

LotsOfCircles

In this app you will create a list of colors and use a for-loop to a make a circle of each color. In the second phase of this app, you will use a while loop to draw 100 circles of varying sizes and colors. Getting Started

• Login to App Inventor • Create a new project named “LotsOfCircles”




• Drag a Button from the Basic Palette onto the screen. • Click Rename and change the name to "EnterButton". • In Properties panel, change the Text field to “Enter LotsOfCircles”

Create Lots of Circles Screen

• Click the Add Screen button located in the menu across the top of the Design tab. Name the screen “LotsOfCircles”.

• Select the Screen component in the Designer. • In Properties panel change the Title field to “Lots of Circles”. Can you see the title

showing now? Add a Drawing Canvas

• Add a Canvas to the Screen. Set the Width to be the whole screen and the Height to be 300 pixels

Add the Buttons

• Add three Buttons named “DrawCircleButton”, “DrawCirclesButton”, and “Draw100CirclesButton” and change their Text to “DrawCircle”, “DrawCircles”, and “Draw100Circles”.

Programming the App in the Blocks Editor • Open the Blocks Editor and connect to your phone.

Write code to go from Screen1 to LotsOfCircles Screen

• Use a When...Clicked event handler for EnterButton with call open another screen to transition to the LotsOfCircles screen when the Button is pressed


10

Switch to programming the LotsOfCircles Screen • In the Designer select the LotsOfCircles screen to be shown in the Viewer panel. • Go back to the Blocks Editor; it will now be blank.

Create a List of all the Colors

• Create a variable named “colorList”. Now connect it to the make a list block, and then pull each of the colors from the Colors drawer and add them to the list

Program the DrawCircle Button

• Using the when clicked event handler, program the button to set the canvas paint color to a random color from the list. [Hint: set paint color is a canvas block, and pick a random item from the list is under lists]

• Next add a DrawCircle block to the when clicked event handler. Set the x location to be a random integer between 1 and the Canvas Width. Set the y location to be a random integer between 1 and the Canvas Height. Set the radius r to be a random integer between 5 and 30

• Test Your App

• Does the DrawCircle button make a randomly colored circle? Program the DrawCircles Button

• Using the when clicked event handler, program the button to draw one circle of each other from your list colorList. Use a foreach block for each item in colorList, set the paint color of the Canvas to the color in the list. Note that the foreach loop has a built-in local variable "var". You must plug colorList into the bottom of the foreach loop, where it says "in list”. This sets up the for loop so that each item in the colorList will get bound to "var", one at a time.

• The first call inside the for loop should be to set the Canvas1.PaintColor to "var". • Copy the Canvas1.DrawCircle block that you wrote in DrawCircleButton.Click into the

foreach block. Test Your App

• Does the DrawCircles button make one circle of each color?

Program the Draw100Circles Button • Using the when clicked event handler, program the button to draw 100 randomly

colored circles. Use a while loop block. The structure of a basic while loop is to have a counter that you initialize before the while loop, test the counter at the entry to the while loop, decrement inside the while loop, and after the while loop reset the value.

• First create a global variable "loopCounter" and set it's value to 100 outside of the click event handler.

• The test for the while loop should be "loopCounter > 0". The first statement inside the while loop should set the loopCounter to "LoopCounter-1".

• Within the while loop and under the loopCounter decrement, you will set Canvas1.PaintColor to a random color, just like in DrawCircleButton.Click. Below that, you will call Canvas1.DrawCircle, just like in DrawCircleButton.Click

• Outside the while loop, but inside the click event handler, set loopCounter back to 100. Test Your App



11

Hack Your App!

• Customize your App: Add a button that clears the screen. Allow the user to change how many circles are drawn.

Resources Post Questions to P2PU


12

Remember In this app you will be able to store and retrieve key-value pairs in a database. Getting Started

• Login to App Inventor • Create a new project named “Remember”




• Drag a Button from the Basic Palette onto the screen. • Click Rename and change the name to "EnterButton". • In Properties panel, change the Text field to “Enter Remember”

Create Remember Screen

• Click the Add Screen button located in the menu across the top of the Design tab. Name the screen “Remember.”

• Select the Screen component in the Designer. • In Properties panel change the Title field to “Remember”. Can you see the title showing

now? Add the Components to Store a Key and Value

• Add twoTextboxes and rename them to “StoreValueTextbox” and “StoreKeyTextbox”. Change the hints to say “Enter the Value to be Stored here” and “Enter the Key to be Stored here”.

• Add a Button below the two text boxes. Rename it “StoreButton” and change the text to “Store Data”.

Add the Components to Retrieve a Key and Value • Add a Textbox and rename it to “RetrieveKeyTextbox”. Change the hint to say “Enter

Key”. • Add a Button, rename it “RetrieveButton” and change the text to “Retrieve Data”. • Add a Label and rename it to “RetrievedValue” and set the text to be blank.

Add the Database Component

• Drag a TinyWebDB component from the Other Stuff Palette onto the screen. • NOTE: TinyWebDB is NOT the same as TinyDB (from the Basic Palette). • Change the ServiceURL to " http://techchallengetinydb.appspot.com".


13

Programming the App in the Blocks Editor • Open the Blocks Editor and connect to your phone.

Write code to go from Screen1 to Remember Screen

• Use a When...Clicked event handler for EnterButton with call open another screen to transition to the Remember screen when the Button is pressed

Switch to programming the Remember Screen • In the Designer select the Remember screen to be shown in the Viewer panel. • Go back to the Blocks Editor; it will now be blank.

Program the Store Button

• Using the StoreButton clicked event handler, add a TinyWebDB1.StoreValue block and set the tag to StoreKeyTextBox.Text. Set the value to StoreValueTextBox.Text. What does this code do? Where does it store the values?

Program the Retrieve Button • The RetrieveButton.Click event handler should call TinyWebDB1.GetValue with the tag

RetrieveKeyTextBox.Text. Write the Code to Display the Retrieved Value

• The TinyWebDB1.GotValue event handler should take the valueFromWebDB and set the RetrieveValueLabel.Text to it. You can find the value under “My Definitions.”

• Test the app by sending keys and values to the TinyWebDB and checking http://techchallengetinydb.appspot.com to see if the information was saved. You might need to search (Ctrl+F) for your data on the page, as it will not show up in order.

• For example, you could store your pet’s name as the key and its age as the value. Try doing it with multiple pets (or people).

Test Your App • Test your work and package the application for the phone. Does your app get the

correct values back?

Hack Your App! • Customize your App: Add multiple screens to make this app more user-friendly.

Resources Post Questions to P2PU

Documents

App Inventor LadybugChase · App Inventor Tutorial Instructions ! 1 LadybugChase In this tutorial you will create a game where the goal is for a ladybug to eat aphids awhile