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

Connect Your Emulator

    1. Select Connect from the menu bar at the top of the page and click on Emulator to launch it

    2. Once the Emulator is running go on to the next step

Let's Start

    1. Drag a Notifier to the Viewer.

    2. Drag a Label onto the Viewer. Rename it "Title1" and set its Text property to "To Do" and the fontsize to 20.

    3. Next, drag three HorizontalArrangements onto the Viewer. Do not stack them in each other.

    4. Add two labels in each HorizontalArrangement. Rename each pair of labels "Number1_Label" and "Task1_Label" , "Number2_Label" and "Task2_Label", and "Number3_Label" and "Task3_Label".

    5. Set the "Task1_Label" Text to have a single dash and do that for the other Task#_Labels as well.

    6. It is REALLY important for this tutorial that the Task#_Labels all have their text set to a single dash (-).

    7. Next add a HorizontalArrangement under everything.

    8. Place a Label in HorizontalArrangement4. Set its text property to Change item:

    9. Place a ListPicker to the right of Label1. Set its ElementsFromString property to 1, 2, 3 - these are the items you will select when you click ListPicker1

    10. Change Listpicker1's Selection property to 1.

    11. Set Listpicker1's text property to #.

    12. Next add a TextBox under HorizontalArrangement4. Delete everything under its Hint property. Set its width to fill parent.

    13. Finally add a Button under Textbox1. Rename it "set_button" and change its text property to "Set"

Your Viewer and Components panels should look like this:

Blocks Editor/ListPicker

    1. Drag out a when ListPicker1.AfterPicking do block. Snap a set ListPicker1.Text to block in the do slot and add a ListPicker1.Selection block. This sets the List selection to the current selection after picking.

    1. Next, we want our app to set our To Do list to some text item. Drag out from the Set_Button a when Set_Button.Click do block.

    2. From the Task1_Label drag out the set Task1_Label.Text to block and connect it to the when Set_Button.Click do block.

    3. Finish the command by connecting the TextBox1.Text block.

    1. Now check your Emulator by typing something in the text box and then click the Set button. Did you see the text become Task 1 in your To Do list?

    2. By using if/then blocks that evaluate the ListPicker's selection you can make the text appear in the label for Task1, Task2 or Task3. Drag out the if/then block and add the blocks from the Math blocks and the ListPicker1 blocks that will evaluate the ListPicker1 selection (recall that it was set to 1, 2, 3 in the Properties panel of the Designer). Your first If/then block should look like this and replace the blocks in the when Set_Button.Click do block.

    1. Now complete the if/then blocks for Task2 and Task3 labels in a similar fashion. Try out your code in your Emulator. You should be able to pick where you want your text to go on your To Do list. If you are having trouble, you can look at our code and the Emulator by clicking STEP 7 and an image will download.

Blocks Editor/Notifier

    1. Let's add a confirmation, so the user doesn't accidentally set text of the wrong Task#_Label. This requires the Notifier which will pop up on the screen showing a message.

    2. Grab the first If/then 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/then blocks, just leave them unattached to anything right now.

    3. From Notifier1 drag out the call Notifier1.ShowChooseDialog block and drop it into the when Set_Button.Click do block. All the blocks that go into the Notifier block are text blocks.

    4. From Text drag out a join block and plug it into the message slot. Drag out a blank text block, type in "You are about to change Task #" and plug it into the top join slot. From the ListPicker drag out a ListPicker1.Text block and plug it into the bottom join slot. Your message will be "You are about to change Task # 1, 2, or 3" depending upon which number you have selected.

    5. Drag out another text block which will be the title of the Notifier. Type "continue?" into this block and plug it into the title slot.

    6. The button1Text will be "Yes" and button2Text will be "No".

    7. Finally, you want the user to respond to the Notifier by selecting "Yes" or "No" so make cancelable "false"

    1. Try out the Notifier on your Emulator by clicking the "Set" button.

    2. You see that the Notifier pops up but when you click the "Yes" or "No" button, nothing happens except the Notifier disappears. Your text doesn't change.

    3. To get the text to change, you need to use a when Notifier1.AfterChoosing do block. Drag this block out from Notifier. As you can see it defines a variable called choice. You need to tell the Notifier what to do when you choose "Yes". You'll need an if/then block but since there are two possible answers ("Yes" or "No"), you need to expand the if/then block to be an if/then/else block. These will be your choice blocks.

    4. Drag out an if/then block from Control and click on the blue icon and slide the "else" option into the block as shown below.

    1. You want this block to tell your program that if a choice is Yes it should look at the blocks you place in the then slot. Otherwise (that is if the choice is No), it will do what is in the else slot. With a Yes we want the Notifier to do what we already programmed in those if/then blocks. You didn't throw them away did you? Place those blocks in the then slot. Drag out from the Math section an = block and snap it into the if slot. Configure the blocks so they evaluate if the Choice = Yes. If you don't recall how to do that here is what your completed when Notifier1.AfterChoosing do block should look like. Note: since you don't want anything to happen when you choose No, you don't need to program the else slot.

    1. Try out your new blocks in your Emulator. When you select Yes your text should change and when you select No if should not change.

Saving Data/TinyDB

A To Do List app that can't remember your To Do List isn't a very good app. At present if you wrote 3 items in your list and then turned off your Android phone when you turned it on again the list would not be there! Whoops. Let's learn to save information in the TinyDB (that is the database in the app on your phone).

  1. Return to the Designer and under Storage drag out the TinyDB1 and drop it on the screen.

  2. Return to Blocks and now you will find the TinyDB1 is listed under Blocks. Drag out the call TinyDB1.StoreValue block and place it in the then section for ListPicker1.Selection = 1. You need to tell the TinyDB1 where to store the selection which is called a tag in a database. Let's call it ToDo1 (a text block). Then place a TextBox1.Text block in the valueToStore slot. This is what your blocks should look like.

  1. Do the same for ListPicker1.Selection = 2 and 3.

  2. Finally, to get this to work when your phone is turned off, you need to program the app to look for the right information in the TinyDB1 when it starts up.

  3. Drag when Screen1.Initialize do to the the board. when Screen1.Initialize do happens when your app first opens.

    1. Create a set Task1_Label.Text to call TinyDB1.GetValue block. Set the tag to ToDo1. Remember that ToDo1 is the value we saved the info under in TinyDB1. Leave valueIfTagNotThere as a blank text block.

    1. Do the same to initialize Task2_Label.Text and Task3_Label.Text.

    2. Test your app by putting some items in your to do list. In the drop down menu under Connect (where you connect to the Emulator),select Reconnect. The Emulator will disappear (like turning off your phone). Select Emulator to see what happens to your to do list.

You should now have a To Do List app that keeps the items in the list even when you turn your phone off. Package your app for your phone (instructions are in the Day 2 tutorial).