TinyDB - a persistent data solution

There are a few different alternatives for saving information in App Inventor.  The most common and, I think, easiest to use is the TinyDB, and I'm going to show you how to do it.

TinyDB is a data storage solution not a file storage solution.  You can use it to save text, a path to a file, numbers, lists, boolean values, etc.  This tutorial will show you how to create a contact list using TinyDB.

We will begin like always, with the design screen.  Here's the component list and a picture of how I have setup the UI: 

⦁ 4 textboxes
⦁ 2 buttons
⦁ 1 checkbox
⦁ 1 listpicker
⦁ 1 imagepicker
⦁ 1 image
⦁ 4 vertical arrangements
⦁ 1 horizontal arrangement
⦁ 1 Notifier
⦁ 1 TinyDB

As you can see in the picture of the emulator, the textboxes are the person's name, date of birth, phone number, and email address.  We give the user the option of choosing whether they want to set a picture for the person and if the person is a relative.  After your design is how you like it, switch over to the blocks editor.

The first thing we will do is define our variables, setup our Screen1.Initialize event and write our reset procedure.  

There will only be one variable needed for this app, and that's nameList, initialized as an empty list.  In the initialize event, we will tell the app to set the variable to the TinyDB tag of the same name, and set the "if tag not there" value to an empty list.  This second input in the TinyDB.GetValue method is new in App Inventor 2.  It removes the need for the if/else statement that was required in AI Classic, as shown in my previous TinyDB tutorial.  The value of this input varies from app to app: for this one, it needs to be an empty list, since the variable we're setting needs to be a list; in a high score procedure it might be set to a number to indicate that there's no score saved.  After we've checked the TinyDB for a list of names, we set the listpicker elements to the global variable so the names will be available to view every time the app runs.

Now that the initializing portion is complete, we'll write the reset procedure.  It needs to set all the textboxes to blank, clear any image that might be visible, and clear the checkbox value.  This procedure will be used after we save someone to the database, and if we press the reset button.  The procedure call is all that is necessary for the reset button, so best to get that out of the way now, and then set the AfterPicking event of the imagepicker; it should set the image to the selection of the picker.

The easy parts are done; now to the heavy lifting.  We'll tackle the save button next.  We need to first check that whatever the name the user is trying to save to the database isn't already there and pop a warning if it is.  Once we know the name is unique we can save it to the database.  We want to use the person's name as the tag for the TinyDB and save all the other inputs of the app as a list of values for that person.  After we save the name to the database we can add the name to the list of names, store the name list to the database as well, and set the listpicker elements once again to the name list variable.  After that, we reset the form and let the user know that they're work wasn't in vain: the database has been updated.

The final piece of the puzzle is the ListPicker.AfterPicking event, where we want the user to be able to see the information they have saved for each person in the contact list.  First we set the name to the selection, and then we use the selection as the tag for our TinyDB.GetValue method to set the rest of the components to their appropriate values.  Don't forget that these index values are specific: the position you save the phone number to needs to be specified here; that is, if the phone number is the first thing in the list for the person it would be at index 1.

And that's it!  Test it out.  When you save a name to the database does it let you save it again?  When you choose a name from the listpicker, do all the textboxes fill correctly with the values you set originally?

You can download the source code below.  Have fun!

TinyDB.aia