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 tap the screen to see the crystal ball’s response.

Getting Started

Login to App Inventor

·      Go to http://technovationappinventor.appspot.com

·      Login in using your Technovation Challenge gmail account and password.

·      Click on the My Projects tab, 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”

Line up Labels with a Vertical Arrangement

•       From the Screen Arrangement Palette, drag a VerticalArrangement component onto the Viewer area.

•       In the Properties panel click Width and change it to “Fill parent…”.

•       Put the 2 labels in a the vertical arrangement

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, set theBackgroundImage to the Crystal Ball Image that was downloaded earlier.  Click the None field and choose Add to upload the image file.

·      In the Properties panel, set the text to be “”.  What does this do?

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

•       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, create 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 clickevent handler.

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

Save and run your application

·      Save your application.

·      In the Designer, choose “Package for Phone”.

·      On your phone the Crystal Ball app will appear.

·      Test it!

Hack your app!

·      Change the fonts, colors, etc.

·      Add additional responses

·      Add a sound

·      Use the accelerometer so the responses appear when the user shakes the phone

Resources