Day 7: To Do List / TinyDB

What We're Going to Learn Today

In today's tutorial, we are going learn how to work with the TinyDB. TinyDB means "Tiny Data Base." A data base stores information made by the app so it can access it even after the app has been closed and reopened. We are going to make a simple To Do List app.

Getting Started

1. Go to the MIT App Inventor and log in using your google account
2. Click on "My Projects" on the top and then press the New button.
3. Name the new project Day7
4. Click on Day7 to open it
5. Open an emulator or connect your phone to app inventor using the MIT Companion App

Let's Start

1. Drag a Notifier to the viewer.
2. Drag label onto the view. Rename it "Title1" and set its Text property to "To Do" and the fontsize to 20.
3. Next, drag three HorizonalArrangements onto the viewer. Do not stack them in each other.
4. Add two labels in each HorizonalArrangement. Rename each label and set their Text up like this:

1. It is REALLY important for this tutorial that the Task#_Labels all have their text set to a single dash -
2. Next add a Horizonalarrangement under everything.
3. Place a label in HorizontalArrangement4. Set its text property to Change item:
4. Place a Listpicker to the right of Label1. Set its ElementsFromString property to 1, 2, 3
5. Change Listpicker1's Selection property to 1
6. Set Listpicker1's text property to #

1. Next add a textbox under HorizontalArrangement4. Delete everything under its Hint property. Set its width to fill parent.
2. Finally add a button under textbox1. Rename it "set_button" and change its text property to "Set"

Blocks Editor

1. Bring up the Blocks Editor
2. First, make it so the when ListPicker1.AfterPicking do set ListPicker1.Text to ListPicker1.Selection

1. Next, drag when set_button.Click do onto the board
2. Add the set Task1_Label.Text to the piece
3. Add TextBox1.Text to finish the block
4. Test the app. When the set_button is clicked, whatever you've typed in the text field should be moved to the Task1_Label.Text
5. We want to be able to set more than just one Do To task though. Set up some If statements using the listpicker1 to tell the app where to set the text
6. Try it out. You should be able to use the listpicker to set text to the right To Do label

1. Let's add a confirmation, so the user doesn't accidentally sets text to the wrong Task#_Label
2. Grab the first If block and detach it from when Set_Button.Click do. This should unhook everything from the block. Do not throw away all of your If blocks, just leave them unattached to anything right now.
3. Under Notifier1, find the call Notifier1.ShowChooseDialog block. Add it to the now empty when Set_Button.Click do Be careful to pick the right one.
4. Every piece that fits into Notifier1.ShowChooseDialog will be a text block.
5. First, under "message" snap in a join block. A join block is a special kind of text block. It takes two different blocks and smashes them into a single text.
6. On the left half of the join add a text block. Set the text block to say "Change To Do #"
7. Add ListPicker1.Selection to the right half of join. Now the join block will make a new message that reads "Change To Do #ListPicker1.Selection" so as the selection changes, so will the message.
8. Add a text block that says "continue?" to the title
9. Add a text block that says "Yes" to the button1Text
10. Add a text block that says "No" to the button2Text
11. Add a false block to cancelable (this will prevent the user from canceling the popup)

1. Now drag out when Notifier1.AfterChoosing choice do from the side and place it on the board
2. You will see that this block comes with a choice bubble attached to it. Make an ifelse block and test if the choice = Yes. We will use "Yes" every time the user picks "yes" on the pop up. If they pick anything other than "yes" (no) then the ifelse won't do anything.
3. Now add an ifelse block to when Notifier1.AfterChoosing choice do
4. Make sure you get the Choice value from My Definitions

1. Before you move to the next step, try it out. Make sure you can enter text in each field and only if you select "Yes" on the pop-up. If you select "No" it shouldn't enter text.

The Problem With Memory

1. We are going to do something different now to show you the difference between saving information as a variable or saving information in the TinyDB
2. Package the app for your phone
3. When the app has finished packaging, disconnect your phone from the app inventor and unplug your phone
4. Open your phone's app drawer and run the "Day7" app
5. Try entering in text into each field
6. Now, press you menu button and press "stop this application"
7. Once your app is closed, open the "Day7" app again
8. When it opens a second time, notice that all of the text you entered the first time is gone
9. This is because we didn't save the information in the TinyDB
1. Only information saved in the TinyDB will survive an app reboot!

TinyDB

A To Do List app that can't remember your To Do List isn't a very good app. Let's learn to save information in the TinyDB

1. Drag TinyDB from the palette to the viewer. TinyDB1 should appear on the bottom
2. Return to the Blocks Editor. Reconnect your phone.
3. Drag call TinyDB1.StoreValue out and snap it into the if ListPicker1.Selection = 1
4. Add a text box to the call TinyDB1.StoreValue tag section. Change this text to say Todo1.
5. Add TextBox1.Text value to the valueToStore section of call TinyDB1.StoreValue
6. Now, not only does the Task1_Label get set to TextBox1.Text, but TextBox1.Text gets stored in the TinyDB1 under the tag Todo1. If we ever want to call this information out of the TinyDB1 we need to ask for whatever is under Todo1.

1. So the problem was, when we first open the app the app forgot what information each of the Todo_Labels should have. Let's make it so when the app starts up, it looks for the right information in the TinyDB1.
2. Drag when Screen1.Initialize to the the board. when Screen1.Initialize happens when your app first opens.
   1. Create a set Task1_Label.Text to call TinyDB1.GetValue text. Set the text to Todo1. Remember that Todo1 is the value we saved the info under in TinyDB1.

1. Now, when the app starts up, it will set Task1_Label.Text to the information we saved under the TinyDB1 tag of ToDo1.
2. Take a second to remember when we saved the new information in the TinyDB.
3. Repeat all of the steps in this section for Task2_Label and Task3_Label. You will need to make new tags names for each of the labels you want to save. If you don't, you'll mix up your data in the TinyDB.

Challenge Stuff

Here are some hard things to try to do. If you don't want to try any of these, or are finished:

Regular Challenge: Add a more text fields

Super Hard Challenge: Add a way to enter dates along with your To Do lists.

Developers Challenge: Create an icon for your app. Rename the app to something a To Do app should be named as.

Middle School Android App Inventor Tutorials by Richard Incorvia is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.