Hacking the Magic 8 Ball with TinyDB

Give your app custom touches as you learn to run it in a new way.




Introduction to Databases and Hacking a TinyDB into Magic 8 Ball

What is a database? You’ve probably heard that word before, but when or where would you see one used?

A database is a set of data held in a computer, especially one that is accessible in various ways. An app acting like a Magic 8 Ball can be run from a list, but it could also use a database. A lot of websites and apps use databases to keep track of information.

Now that you’ve created a Magic 8 Ball app with a list, we can hack it to run from a database instead.

To create Magic 8 Ball with a Database, you’ll use some new items in App Inventor:

-- Storage components, especially Databases (TinyDB)

storage components like tiny databases

-- Orange Blocks – Built-In blocks that create and deal with variables. Global variables can be used throughout your code. Local variables are only used in the statement you attach to it.

orange blocks orange blocks create and deal with variables

A variable is a value that can change, depending on conditions or on information passed to the program.

Ask members, “What’s a database?” Can members think of any websites that use databases? What might those databases store? Take notes on a whiteboard to make thinking visible.

Ask members: “What’s similar about a list and database? What’s different?” Again, write notes and bullet points to make members’ thinking visible.

Make sure your members know these terms:

Hack: to program with exceptional skill. A hacker produces code that not only accomplishes the task, but does so in an efficient and unique manner.

Database: a structured set of data held in a computer, especially one that is accessible in various ways.

Variable: a value that can change, depending on conditions or on information passed to the program.


Add a Database with TinyDB

Open the App Inventor and log in. Now open your Magic 8 Ball app from the previous session. If you haven’t built Magic 8 Ball yet, try it now.

Add a database on the home screen by adding a TinyDB from the Storage drawer in the Palette menu. It will appear in the Non-visible components bar. Each page that interacts with your app’s database needs to have the TinyDb on it.

magic 8 ball home screen

Open the Blocks Editor and click on the Database component to view your code block options.

What is the key thing your Magic 8 Ball needs to do? If you want your Magic 8 Ball to load responses, it needs to load responses from the database.

That means the database needs data! Specifically, it needs response data. If you have run this app on your device previously, it will remember what was already loaded. That’s the benefit of a database. 

To get the database ready the first time the app loads, you need to run a command immediately when the app opens. To do this, you can use the Screen.Initialize event handler, found under the Screen component. Add a Screen.Initialize event to your viewer.

screen initialize event

Add an If - Then control block from the built-in drawer. Say it out loud: If the database does not contain any data, then call in some new values.

Add a light blue is list empty? block, and snap in the purple component call TinyDB.GetTags block.

snap in purple block

When Screen1 initializes, if the list of TinyDb tags is empty, then...we want to call tags for the list. If it has already run TinyDB and stored responses on your device, it will use those instead.

Tiny DB stored responses block

There is room for two blocks in the .StoreValue block – a tag value and a valueToStore. What do you think the difference is?

The tag is the title of the information you are storing, and the value is the information. In this case, it will be the text that Magic 8 Ball gives you.

Now, use the pink built-in text blocks to fill out your database with a selection of tags and values. Add as many as you want, but make each tag and value different.

pink built-in text boxes

Members may work better in pairs or small groups to help problem solve and spot problems. These instructions can also be put on a projector to show the whole room and work as a group. Members who finish early can also act as troubleshooters for others, or work ahead to the next activity.


Run Magic 8 Ball From the Database

Now your database has been created, but your 8 Ball is still looking at the list you defined originally. Let’s change that.

First, we’ll create a global variable for the Prediction. Variables can change while the app runs, and can be any value. A variable is useful here because our app will likely get asked several questions, so the Prediction will need to change each time it’s needed.

Global variables can be called on anywhere in our code, so they are usually on their own line and don’t snap into other blocks. Our Prediction will be text, so this global variable needs a text box. We don’t need a Prediction until there’s a question, so leave it blank for now.

initialize global prediction block

We need a second variable to pick a random tag from our TInyDB tags list. This time, we’ll use a local variable that will run when a button is clicked. Can you recreate the code below?

local variable will run when a button is clicked

We need to tell Prediction that is should become the value of tag. Add the blocks below.

add blocks to tell prediction to become value of tag

The database will pick a value for Prediction, but how will we know what response Prediction becomes? We need to display it on our screen. What component showed us the response text? We can still use that same one. In this case, it’s Label2.

Set Label2 to display the text of Prediction using the blocks here:

set Label2 component to show the text of Prediction

Label2 will now display the text of whatever value the Prediction variable uses.

Look at that. Now you have a Magic 8 Ball driven by a simple list database.

This code gets a little more complicated and asks members to find several blocks on their own.

Remind members: “Some blocks are in Built-ins, and some are in components”

Members may also be confused by update to tags that don’t seem to show up. Remind them “Those tags are only read the first time the database runs, after that, they are always stored in TinyDB.”

For additional directions on editing the database, direct members to Activity 4: More Hacking Fun. .

Ask members who complete the activity early to assist anyone who is having trouble.


More Hacking Fun

Now that our Magic 8 Ball is using the database instead of the list, you can go in and add the options from the previous version. You can still play sounds, speak the message or use the accelerometer.

Here is an example of code that will play a sound when the button is clicked. Try to use our database code TextToSpeech to read the answer out loud or come up with your own ideas.

code that will play a sound when a button is clicked


Members may progress more slowly through this session than the previous ones. That’s OK.

If members do complete the activity early, press them to keep going and create their own additions. That might mean they don’t have step-by-step directions anymore, so they will have to be creative.

 Module Completed?

Notify your staff that you've completed this activity!

Ready to share your project?

Upload your favorite project to be featured!


Amazing Computer Science Projects




No Results Found...