Basics: Project 107k
Project name: Building Magic 8 Ball app with MIT App Inventor 2
Tags: MIT App Inventor 2, Magic 8 Ball, Android app
We will learn how to build magic 8 ball app with the MIT App Inventor 2 software so that when activated, your 8-ball will deliver one of its classic predictions, such as “It is decidedly so” or “Reply hazy, try again”.
We will learn how to:
- Navigate the App Inventor environment: Designer, Blocks Editor, Emulator and/or AI Companion on mobile device;
- Correctly use the following App Inventor components: AccelerometerSensor, Button, Player;
- Correctly use the following App Inventor concepts: making and using a list, responding to an event.
We assume that you have read our previous projects about MIT App Inventor 2.
Step By Step instruction
1.Go to appinventor.mit.edu and click on Create Apps! orange button.
2.Click on Start new project and give your project a name, you can name it as Magic8Ball. Click on OK button. Your project will be saved.
3.Download one image and one sound file from the beginning of this project to be used in your Android app. Save the media files to a convenient location on your computer that you will remember.
4.Go to Designer editor tab.
5. Select components to design your app. To use a component (button) in your app, you need to click and drag it from the User Interface palette onto the Viewer.
6.Click on Button1 component to see its properties in the Properties pane on the right. Under Image click on the word “None…” and a small selection window will pop up. Click on Upload File button and browse to where you saved the 8-Ball image. Select the file, then click on OK to close the selection window. Click on OK again on the properties pane to close the small popup window. Go to the Text field in the Properties pane and delete the display text of your Button1 component. Change Height and Width fields in the Properties pane to 300 pixels.
7.From the Media drawer, drag a Player component onto the Viewer. The Player component plays sound files. Notice that since the Player will not be a visible part of the app, it appears at the bottom of the Viewer, in the Non-visible components.
8.Set the Player component’s source file. Click on Player component to see its properties in the Properties pane on the right. Under Source click in the small box on the word “None…” and a small selection window will pop up. Click on Upload File button and browse to where you saved the sound file. Select the sound file, then click on OK to close the selection window. Click on OK again on the properties pane to close the small popup window.
9. From the Layout drawer, drag out a VerticalArrangement component. At first it will just look like an empty box, but when you put things in it, MIT App Inventor 2 will know that you want to line them up vertically (one on top of the other).
10.From the User Interface drawer, drag out a Label component (Label1) and drop it inside of the VerticalArrangement component. In the Properties pane, change the Text field of Label1 to “Ask the Magic 8-Ball a question”.
11.From the User Interface drawer, drag over another Label component (Label2) into the VerticalArrangement component so that it sits right below Label1. Change the Text field of Label2 to “Touch the Magic 8-Ball to receive your answer”. Then drag Button1 so that it is also inside the VerticalArrangement component between the two labels. This will cause them to line up with each other in a vertical line. (Note: this can be tricky mouse work, but get them in there just right and the VerticalArrangement will resize itself to fit everything.)
12.From the Sensors drawer, drag over an AccelerometerSensor component. Notice that it automatically drops down to the Non-visible components area of the Viewer.
13.Go to Blocks editor tab. So far you have been arranging your app’s screen and components in the Designer, which is in a web browser window. To start programming the behavior of the app, you need to go to the Blocks editor. Click the Blocks button in the upper right of your screen to go to the Blocks Editor.
14.We are going to tell your app how to behave when the Button1 is clicked. Under Screen1, click on Button1. Drag the when Button1.Click do event handler block into the work area. Then, click on the Player1 drawer, drag the call Player1.Start block into the work area and insert it into the when Button1.Click do block.
15.To test that it works, you either have to launch an emulator, or connect to a mobile device with the AI2 Companion. Emulator: click on the picture, you will hear the sound play. Device: tap the picture, you will hear the sound play. Note: If you don’t hear the sound, first be sure you have the volume turned up on your device (or computer if using emulator). Also, make sure your device has an SD card. MIT App Inventor 2 stores media files to the SD card.
16. As we want to extend that action to include giving the user a prediction. So we’ll need two Labels: Label1 will display the instructions, and Label2 will display the chosen prediction. We’ll use blocks to program a ListPicker to choose from a list of predictions. Each time the Button1 is clicked, the app will change the text of Label2 to display the chosen prediction.
17.From the Blocks palette, click on Label2 drawer to see all of its associated blocks. Drag over the green set Label2.BackgroundColor to and insert it just below the call Player1.Start block. Clicking on the word “BackgroundColor” will give you a dropdown menu so you can change the property that is being set. Choose Text so your block will be set Label2.Text to.
18.From the Built-In drawer, click on the Lists drawer. Drag over the pick a random item list block and connect it to the open socket of the set Label2.Text to block.
19.From the Built-In drawer, click on Lists again, then drag out the make a list block and plug it into the “list” socket on the right side of the pick random item block.
20. From the Built-In drawer, click on the Text drawer, drag out a text block and connect it to the item socket of the make a list block. Click directly on the space in the block. You can then type in text there. Think about the sayings you want in your list of predictions for the Magic 8-Ball. Type the first prediction into this new text block.
The 20 possible answers inside a standard Magic 8 Ball are:
● It is certain.
● It is decidedly so.
● Without a doubt.
● Yes – definitely.
● You may rely on it.
● As I see it, yes.
● Most likely.
● Outlook good.
● Signs point to yes.
● Reply hazy, try again.
● Ask again later.
● Better not tell you now.
● Cannot predict now.
● Concentrate and ask again.
● Don’t count on it.
● My reply is no.
● My sources say no.
● Outlook not so good.
● Very doubtful.
Notice after you plug in two text blocks, there are no more sockets to add more responses. To create more sockets, you need to click the dark blue mutator icon on the block. make a list is called a mutator block and thus can be expanded or shrunk by clicking the blue icon in the upper left corner. Snap each text block into the make a list block.
21. To test that it works, you either have to launch an emulator, or connect to a mobile device with the AI2 Companion. Emulator: Click on the picture of the 8-Ball, you should see one of your answers displayed in the Label2.Text field, followed by the sound. Device: Tap on the picture of the 8-Ball, you should see one of your answers displayed in the Label2.Text field, followed by the sound.
22.You can use the AccelerometerSensor component to make the phone respond to shaking instead of responding to a button click. This will make the app much more like a real Magic 8-Ball toy. Please note: This part can only be done with an actual phone or tablet equipped with an accelerometer.
23. From the Blocks palette, click on AccelerometerSensor, then drag out the when AccelerometerSensor1.Shaking do event handler block.
24. Duplicate all the blocks from inside the when Button1.Click do event handler block and add them inside the when AccelerometerSensor1.Shaking do event handler block. Just select the block with left mouse button and click on the selected block with right mouse button and choose Duplicate. Please note: you can move whole sections of connected blocks by clicking on the uppermost or leftmost block and dragging it. The connected blocks will come with it.
25. To test that it works, you either have to launch an emulator, or connect to a mobile device with the AI2 Companion. Emulator: Click on the picture of the 8-Ball, you should see one of your answers displayed in the Label2.Text field, followed by the sound; unfortunately, you can not simulate shaking the phone when using the emulator. Device: Tap on the picture of the 8-Ball, you should see one of your answers displayed in the Label2.Text field, followed by the sound; when you shake the phone it should show an answer and play a sound too.
26.While your device (emulator or phone/tablet) has been connected to App Inventor, your app has been running in real time on your device. If you disconnect the emulator/device from the Blocks Editor, the app will vanish. You can always make it return by reconnecting the device. To have an app running without being connected to App Inventor, you must “package” the app to produce an application package (apk file). To “package” the app to install on your device or to send to someone else, click the Build tab at the top of the screen. Under Build, select App (save to my computer) to download the app to your computer as an apk file, which you can distribute and share as you like by manually installing it on other devices.
We have successfully built the Magic8Ball app with MIT App Inventor 2.
Instead of (or in addition to) making the prediction appear as text, can you make the 8-Ball speak it aloud? You can use the TextToSpeech component is under the Media drawer in the Designer. Please note: Most Android devices have the text-to-speech (TTS) capability, but if you have trouble getting the TTS component in MIT App Inventor 2 to work, you may need to find out how to install TTS and/or enable TTS on your device. There some suggestions for next projects:
- Make the image rotate when the phone is shaken or have several images that the app rotates through while the phone is shaken. You could use this technique to make it look like the triangle piece inside the 8-ball window is surfacing. You could also make different images for different predictions and display the correct image for each prediction.
- Make a similar app but for a different purpose. The phone could be used in place of dice or yahtzee letters. It could simulate a coin toss or a random number or color generator for investigating probability.
- “Crowd source” for prediction choices: allow people to send text messages and have the app add them to the list.
- Make the 8 Ball app a “server” so that anyone who sends a text to it will receive a text message prediction in return.
- Completely change the list to humorous choices, or for useful purposes like randomly selecting a name from amongst people in the room.