app inventor crystalball hack - iridescentlearning.org · app inventor tutorial instructions!! 3...

App Inventor Tutorial Instructions

1

CrystalBall Hack In this tutorial, you’ll create an app that works like a crystal ball. Users think of a question such as “Will I win my soccer game?” and then shake your phone to see the crystal ball’s response. Getting Started

Login to App Inventor

• Go to http://appinventor.mit.edu/ • Login in using your Gmail account and password. • Click on the My Projects tab, and then click New. • Create a new project named “CrystalBall”.

Download the Assets

• Download the image file of the crystal ball from http://bit.ly/crystalballimage Designing the Application Interface in the Designer Change the Screen Title

• Click on the Screen component in the Designer. • In Properties panel change the Title field to “CrystalBall”. You should see this change when you

connect your phone, with the new title showing in the title bar. Add Instruction Labels

• Drag a Label from the Basic Palette onto the screen. • Click Rename and change the name to "QuestionLabel". • In Properties panel, change the Text field change the text to “What do you want to know?” • Drag a Label from the Basic Palette onto the screen. • Click Rename and change the name to "InstructionLabel". • In Properties panel, change the Text field change the text to “Shake the crystal ball and all will

be revealed” Add the Crystal Ball

• Drag a Button from the Basic Palette onto the screen. • Click Rename and change the name to "FortuneText". • In the properties panel, erase “TextForButton1” in the text box field. • In the Properties panel, set the BackgroundImage to the Crystal Ball Image that was

downloaded earlier. Click the None field and choose Add to upload the image file.

Add the Accelerometer • In the Sensor panel, drag on an Accelerometer component

Programming the App in the Blocks Editor Write code to print a response when the phone is shaken

• In the Blocks Editor under My Blocks, get the Shaking Event Handler for the Accelerometer. • In the My Blocks column, open the FortuneText drawer and drag out set FortuneText.Text.

Place the block inside the click event handler.


2

• In the Built-In column, open the Lists drawer. Drag out the block call pick random item. Connect the block to the set FortuneText.Text.

• In the Built-In column, open the Lists drawer. Drag out the make a list block and connect it to the call pick random item block.

• In the Built-In column, open the Text drawer. Drag out 4 Text boxes and add them to the list as items. Change the text to say “Yes”, “No”, “Maybe”, and “time will tell”.

Write code to clear the response when the screen is tapped

• In the Blocks Editor under My Blocks, drag out a when ... Clicked event handler for FortuneText button.

• In the My Blocks column, open the FortuneText drawer and drag out set FortuneText.Text. Place the block inside the click event handler.

• In the Built-In column, open the Text drawer. Drag out a Text box and connect it to the set FortuneText.Text block.

Test and download your application • Save your application in both the blocks editor and the designer • Connect your phone with the USB cable, and then click “Connect to Device” in the upper right

hand corner of the Blocks Editor. Select your phone from the list and watch as the yellow phone and arrow animation flash and eventually turn green. When they are green, you know your phone is connected and your app should show up on the screen.

• Test your app to make sure it works, and then download it: In the Designer, choose “Package for Phone” and wait for the app to download it. It could take a few minutes.

Hack your app!

• Change the fonts, colors, etc. • Add new responses to your list! • Add a “chimes” sound when your app is shaken

Post Questions and a screenshot of your “hacked” app on P2PU.


3

PaintPot Hack In this tutorial, you create an app that allows the user to draw lines and dots of various colors on the screen. Getting Started

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

Designing the Application Interface in the Designer Change the Screen Title

• Change the title of the screen to “PaintPot” in the properties panel of the Designer. Can you see the new title showing on your phone?

Add the Color Buttons • Now, you’re going to add 3 buttons to change the paint color. First, add a button to the

screen called “RedButton”. Change the background color to Red in the properties panel and the text to “Red.”

• Make another button named “GreenButton” with green for the color and “Green” for the text. • Make a third named “BlueButton” with blue for the color and “Blue” for the text.

Arrange Buttons

• Line up the buttons side-by-side by dragging them into a Horizontal Arrangement. You’ll have to set the width of the arrangement and buttons to “Fill parent…” to make the arrangement go all the way across the screen. Does the design look better now? How did it change?

Create a Drawing Space • Add a canvas named “DrawingCanvas”. Set the height to 300 pixels and the width to go

across the whole screen (Hint: You did the same thing for the Horizontal Arrangement).

Add an Erase Button • Add another button named “WipeButton” with the text “Wipe”. This button will be used to

clear all the paint off the image. Programming the App in the Blocks Editor

• Open the Blocks Editor and connect to your phone.

Program the Color Buttons • Program the color buttons. First, find the RedButton click event handler and drag it onto the

Blocks Editor. It will say “when RedButton.Click do.” Now you are going to fill in blocks to tell it what to do when the RedButton is clicked. Find the block to set the canvas paint color and put it in the RedButton event handler. It will say “set DrawingCanvas.PaintColor to.” Attach a red color block to it (hint: look under “Built-in” blocks). What does this code do?

• Now program the blue and green buttons in the same way.

Program the Wipe Buttons • Program the wipe button. Find the WipeButton click event handler (just like the ones for the

color buttons). Now program it to clear the canvas. (Hint: There is a block for the DrawingCanvas that calls DrawingCanvas.clear).


4

Add Code to Draw Dots

• Now you’re going to add code so that when the canvas is touched a dot is drawn at that spot. Find the DrawingCanvas touched event handler and drag it into the blocks editor. The x and y variables provided by the event handler represent the point that the screen was touched. Use the DrawCircle Procedure with the x and y values provided under “My Definitions to draw a circle at the point the screen was touched. The r variable of the DrawCircle procedure represents the radius of the circle in pixels. 5 is a good number to start with. (Hint: look under “Built-in” blocks).

Test Your App • Test the color buttons, wipe button, and touch features on the phone. Do the buttons change

the paint color? Is the circle drawn where you touched? Does the wipe button remove all the paint?

Add Code to Draw Lines • Now you’re going to add code so that when the user drags their finger on the canvas it makes

a line. Find the DrawingCanvas dragged event handler. A drag event comes with 7 arguments. These are three pairs of x and y coordinates that show the position of your finger back where the drag started, the current position of your finger, and the immediately previous position of your finger. There's also a sprite, which we'll ignore for this tutorial. Now find the DrawingCanvas procedure called DrawLine. The procedure draws a line from the previous position (x1,y1) to the current position (x2,y2). Set the arguments so that it draws a line from the previous finger position to the current finger position.

Test Your App • Test your work. Try drawing lines and curves.

Add Variables to Draw Dots of Different Sizes

• Now you are going to update your application to add two buttons to change the size of the dot drawn then the screen is touched. First let’s add a variable called DotSize. Set the starting value of DotSize to 8. Update the DrawCircle Procedure to draw a dot with the radius of DotSize (remember originally you set it to 5 pixels). Now when the screen is touched the circle drawn will be the size of whatever number the DotSize variable contains.

• Now return to the Designer to add the BigButton and SmallButton to the screen. Use another horizontal arrangement to line them up with the wipe button. Make the text “Big Dots” and “Small Dots.”

• In the Blocks Editor find the click event handler for the SmallButton and use it to set DotSize to 2 when the SmallButton is clicked. Now do the same thing for the BigButton, but set the DotSize to 8.

Test Your App • Test your work and package the application for the phone

Hack Your App!

• Customize your App: Use the Camera Component to take pictures of your friends and set them as the background so you can draw on them.

Resources YouTube Videos

• Professor Wolber’s Video Part 1: http://www.youtube.com/watch?v=gHPae2B5pN0 • Professor Wolber’s Video Part 2: http://www.youtube.com/watch?v=L1_ATVJiiLI


5

• Professor Wolber’s Video Part 3: http://www.youtube.com/watch?v=XGXFJxrYBc0 • Professor Wolber’s Video Camera: http://www.youtube.com/watch?v=q39n6JwrdPk • Chris Groff’s Video Part 1: http://www.youtube.com/watch?v=31bi9tWOLcY • Chris Groff’s Video Part 2: http://www.youtube.com/watch?v=JX8Gn7FLcHY

Post Questions and a screenshot of your “hacked” app on P2PU


6

MoleMash Hack In this app you will create a game that has a mole that jumps randomly around the screen every half second. If the user successfully touches the mole, then the score increases by one point. Getting Started

• Login to App Inventor • Create a new project named “MoleMash” • Download the Mole Image from bit.ly/moleimage


• Change the title of the screen to “MoleMash” in the properties panel of the Designer. Can you see the new title showing on your phone?

Add the Canvas, Buttons and Sound • Add a canvas named “MyCanvas”. Set the height to 300 pixels and the width to go across the

whole screen (Hint: You did the same thing in Paint Pot). • Now, you’re going to add a button to reset the game. Add a button to the screen called

“ResetButton”. Change the text to “Reset.” • Now add a label. You’re going to use this label to show the score of the game, so let’s rename

it to “ScoreLabel”. Change the text to “Score: ---“ • Next, add a sound component. Notice that when you drag it on the canvas it appears below

the screen. Can you think of why? It’s because sound is a non-visible component. Rename the sound component to “Noise.”

Add a Clock Component • Now, you’re going to add a clock component to use as a timer, so the app knows when it’s

time to move the mole around. Rename the clock to “MoleTimer”, and set its TimeInterval to “500” milliseconds to make the mole move every half second.

• Make sure that TimerEnabled is checked, so that the timer is active.

Add the Mole • Using the Animation Palette, add an ImageSprite to the canvas, and name it “Mole”. Set the

picture to the Mole Image you downloaded earlier. Make sure that the ImageSprite is enabled, and Visible is checked. Height and Width would be set to automatic.

• Now, you’re going to set the properties that control how the mole moves. The initial position (represented by the coordinates X and Y) was determined by where you placed the mole when you dragged it onto MyCanvas. Go ahead and drag the mole some more. You should see X and Y change.

• The Heading represents the direction the mole will move. Let’s set that to 0. Also set the Speed to 0 since you don’t want your mole to move in a line. You’re going to make him jump around by changing the position instead. Set the Interval to 500 since you want it to move every 500 milliseconds.


7

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

Write the Procedure to Make to Mole Move

• Add a procedure block from the definition drawer. You can click the text “procedure” to rename the block. Rename it to “MoveMole”.

• In the do part of the MoveMole procedure, add the block that moves the Mole to a new x and y location. Hint: It’ll be under the Mole section.

• Next set the x and y coordinates to control where the mole is going to move to. The coordinates can be can be any number as long it is on the canvas. For the x coordinate it can be between 0 (the left edge of the canvas) and the width of the canvas minus the width of the mole. For the y coordinate it can be between 0 (the bottom edge of the canvas) and the height of the canvas minus the height of the mole. You want the mole to move around to a different unpredictable location each jump, so you’re going to set the x and y values to be random numbers in the ranges described above (between 0 and the edge of the screen). You can find the random block in the Math drawer. Set the from number to 0. In the to slot, delete the number block and instead add a subtraction block. Set the values to subtract Mole.Width from MyCanvas.Width for the x coordinate and MyCanvas.Height minus Mole.Height for the y value.

• Now (with either your phone or emulator connected to the Blocks Editor), test your procedure by right clicking (command click on a Mac) and choosing Do It. What does it do? Is this what you expected?

Add Code to Call the MoleMove Procedure Every Half Second • Get the MoleTimer.Timer block and set it to call your MoleMove procedure from My

Definitions. What does this code do? How does it know to do it every half second? Hint: what did you set the properties to?

Test Your App • Test the app. Does the mole move around randomly every half second?

Write the Procedure to Change the Score

• Create a variable named “score” to represent the score. Set the initial value to 0. • Get a procedure block and name it “UpdateScore”. Inside put the block that sets the text for

the ScoreLabel you made earlier. • You are going to set the text to display “Score:” and the actual score, so you need to use a join.

The join block can be found in the Text drawer. • Set the first half of the join to the text “Score:” and the second to the variable you made for the

score.

Add Code to Increment the Score when the Mole is hit • Find the event handler for when the Mole is touched. Remember event handlers from

PaintPot? • First you’re going to use the set global block to increment the score variable. You’ll need an

addition block to set the new value to the score (the previous value) + 1. • Next, you’ll want to display the new score, so you’ll need to call the UpdateScore procedure

you made to change the label from My Definitions. • Call Noise.Vibrate for 100 milliseconds to make the phone vibrate under My Blocks>Noise, • and call MoleMove to move the mole.

Test Your App

• Test the app by playing the game. Does the score increase if you hit the mole?


8

Program the Reset Button to Reset the Score • Find the click event handler for the reset button. Get the set global score block and place it

inside. Set the value of score to 0. Once again, you’ll need to call UpdateScore, so that the new score shows on the screen.

Test Your App

• Test the app by playing the game and using the reset button. Does the mole move around randomly every half second? Does the score increase if you hit him? Does the reset button work?

Hack Your App!

• Add a sound to the game, so that rather than vibrating the game plays the sound. You’ll need to update the sound component and the mole touched event handler.

• Can you add a second mole? Resources YouTube Videos

• Chris Groff’s Video Part 1: http://www.youtube.com/watch?v=X-0zwa-BqG8 • Chris Groff’s Video Part 2: http://www.youtube.com/watch?v=BOprKoivALQ • Chris Groff’s Video Part 3: http://www.youtube.com/watch?v=iNzLmqNtW5c • Professor Wolber’s Video Part 1: http://www.youtube.com/watch?v=uj8b19S1F50 • Professor Wolber’s Video Part 2: http://www.youtube.com/watch?v=sP30C29J44w • Professor Wolber’s Video Part 3: http://www.youtube.com/watch?v=NCgmyoHWiE4 • Professor Wolber’s Video Part 4: http://www.youtube.com/watch?v=3BWOE9Gulhk • Professor Wolber’s Video Part 5: http://www.youtube.com/watch?v=tkjjDfOa3ZA

Post Questions and a screenshot of your “hacked” app on P2PU


9

Invent Your Own App Hack

Work alone or in pairs to design and develop your own application Try to use the tools you’ve learned:

• Events • Variables • Lists • Procedures • Camera • Buttons • Accelerometer • Labels • Image Sprites • Timers • Sound

Get User Feedback

• Show your group, family, and friends. Do they like it? Would they use it? Is it easy to understand/use? Do they have suggestions for improvement?


• Look at the videos or instructions from the previous hacks if you want to remember how to use a certain component

Post Questions and a screenshot of your app on P2PU


10

No Text While Driving Hack In this tutorial, you’ll create an app that autoresponds to text messages while the user is driving. The user also has the option to have the app speak the message that was received. Getting Started

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


• Change the title of the screen to No Text While Driving” in the properties panel of the Designer. Can you see the new title showing on your phone?

Create the Interface

• Add a Label named “PromptLabel” with the text “The text below will be sent in response to all incoming texts.”

• Add a Label named “ResponseLabel” with the text “I’m driving right now, I’ll contact you shortly.” • Set the fonts, outlines, colors, etc. so that the screen looks how you’d like it to. • Add a Textbox named “NewResponseTextbox” and set the text to “”. What happens when you

set the text to “”? Set the Hint to be “Enter new response text.” • Add a Button name “SubmitResponseButton” with the text “Modify Response”.

Add the Non-Visible Components

• Add the following three components: Texting, TinyDB, and TextToSpeech. Programming the App in the Blocks Editor

• Open the Blocks Editor and connect to your phone. Programming an Autoresponse

• You’re going to write code so that when someone texts the phone, the application sends the autoresponse to the person that sent the message.

• Using the Texting component find the Message Received event handler and Send Message function. Place the blocks so that the code sends a message once a message is received.

• You’ll need to set the PhoneNumber and Message properties of the Texting component before calling the Send Message function. There are set functions for both of these in the Texting drawer. Hint: you can use the number from the Message Received event handler to set the phone’s number (this is autogenerated in the “My Definitions” drawer. The Message should be set to your ResponseLabel.

Test Your App • Test the app by texting the phone. Does the phone that sent the message receive the

autoresponse? You can test it in the emulator by using the emulator id (e.g. 5554) as the phone number


11

Entering a Custom Response • Now you are going to write code that allows the user to change the response that is sent.

Find the click event handler for the SubmitResponseButton. Use the Set ResponseLabel Text block to set the text to NewResponseTextbox. Text when the button is clicked.

Test Your App • Test the app by entering a new response and texting the phone. Does the phone that sent the

message receive the new autoresponse? Storing the Custom Response in a Database

• What happens to the custom response when the app is closed and then reopened? In order to save the custom responses of the user, you’ll need to use a database. The TinyDB component allows you to store data (StoreValue) and get the stored data (GetValue).

• Modify the SubmitResponseButton click event handler that you already wrote to store the response as well. Set the tag field to the text “responseMessage”. You’ll use this tag to retrieve the message later. Set the valueToStore to the ResponseLabel.Text. Make sure you update the ResponseLabel to the new value before you store it.

Retrieving the Custom Response When the App Opens

• App Inventor provides a special event handler (Screen1.Initalize) that is run when the screen is opened. In this case, that’s when the app starts. You can use this to set the ResponseLabel to the custom response in the database when the app starts. However, it’s possible that no custom response was stored so you’ll have to check the response returned from the database before setting it to the ResponseLabel.

• Create a variable named “response” and set it to a blank text value. • In the initialize event handler, set the variable response to the value returned from Call

TinyDB1.GetValue. Remember you’ll have to set the tag to “responseMessage” to get the response from the database.

• Using an If then do block, test to see that the length of the variable response is greater than 0. There’s a Call Length text block you can you, and you’ll need a greater than (>) block.

• Set the then-do part of the block to set the ResponseLabel.Text to the variable response. Test Your App

• Test what happens when you open and close the app with no custom response saved. Does the default message appear?

• Test what happens when you open and close the app when you have saved a custom response. Does the custom message appear?

Speak the Incoming Texts Aloud

• Now you’re going to modify the app so that when the user receives a text, the phone number and message are spoken aloud. Add the TextToSpeech1.Speak block to the end of the Message Received event handler.

• To make the message that is going to be spoken, use a Call Make Text block. Set the first text value to “text received from ”. Notice that there’s a space after the “from”. Set the second text value to the phone number from the Message Received event handler. Set the third text value to “The message is “. Notice that there is a space after the “is”. Set the final text value to the messageText from the Message Received event handler. This creates one message that reads the phone number and the message to the user.

Test Your App

• Test the app by texting the phone. Does the phone read the number and message aloud? Remember to test all the other features to make sure they still work.


12

Hack Your App! • Write a version that allows the user to define custom responses for different phone numbers. • Challenge: Use the LocationSensor component to send the current address of the driver.


• Professor Wolber’s Video Part 1: http://www.youtube.com/watch?v=rrwrfX8T_c8 • Professor Wolber’s Video Part 2: http://www.youtube.com/watch?v=0FTdv1SxGmc • Professor Wolber’s Video Part 3: http://www.youtube.com/watch?v=7PmDsrGHIZI • Professor Wolber’s Video Part 4: http://www.youtube.com/watch?v=5RIdqkJgfn4 • Professor Wolber’s Video Part 5: http://www.youtube.com/watch?v=R9MPcbe_oo4

Post questions and a screenshot of your “hacked” app on P2PU

app inventor crystalball hack - iridescentlearning.org · app inventor tutorial instructions!! 3...

Documents