TinyDB: shopping list

[Scott Ferguson]

The TinyDB component allows us to save data between sessions. This data may be as simple as a single text value or as complex as multiple nested lists.

In this exercise we will create a simple shopping list which allows us to add items and save our list even if the app is not running.

The idea is that we can create our list of needed goods at home, then open the app at the store to view the items as we stroll along the isles.

Create a new project named lrn_tdb_shop.

Screen Designer:

Change Screen1.Title to Shopping list.

Drag and drop a label and change it's Text to New item:.

Add a TextBox.

 - the user will enter a new item into this textbox

Add a Button and change it's Text to Add item to list.

 - when the user has entered an item into the textbox this button will add the new item to the list

Drag and drop a ListPicker. Change it's Text to View shopping list.

 - this ListPicker will store the list of needed items

Drag and drop a TinyDB component in the center of the Viewer.

 - it will jump to the bottom of the Viewer under the Non-Visible Components heading

 - TinyDB will store the shopping list between sessions

Blocks Editor:

Drag out the Button1.Click block

 - it will hold the blocks used to add a new item to the shopping list

Drag and click an add-items-to-list block inside the Button1.Click block

 - this block takes two arguments, the list and the item to add

Drag and click the ListPicker1.Elements block into the list socket of add-items-to-list.

 - this block contains all the items in the shopping list

Drag and click the TextBox1.Text block into the item socket of add-items-to-list.

 - when the button is pressed, the new item will be added

Drag and click the TinyDB1.StoreValue block to the add-items-to-list block.

 - this block accepts a text tag name for the item being stored and a value to store

Drag and click a text block to the tag socket of TinyDB1.StoreValue.

Change its text to items.

Drag and click a ListPicker1.Elements block to the valueToStore socket of TinyDB1.StoreValue.

 - the TinyDB1.StoreValue block will copy the shopping list to the database

Drag and snap a TextBox1.Text block below TinyDB1.StoreValue.

Drag and click a text block to the 'to' socket of TextBox1.Text.

Delete the text in this block so that it is empty.

 - after the item entered is stored in the database this will empty the textbox to ready it for the next item

Drag and drop a Screen1.Initialize event block.

 - Screen1.Initialize will execute blocks contained within it when the app starts

Drag and click an if block (from the control section of the Built-In tab) inside the Screen1.Initialize block.

 - this will be used to ask the question: Is there an existing shopping list to load into the listpicker?

 - If the answer is yes, then the listpicker will be loaded with the items in from database

Drag and click a not block from the Logic section into the test socket of the if block.

Drag and click an is-text-empty? block to the socket of the not block.

Drag and click a TinyDB1.GetValue block to the text socket of the is-text-empty? block.

Drag and click a text block to the TinyDB1.GetValue tag socket.

Change its text to items.

 - since there is no 'is text full?' block to test the contents of our database we must negate the question 'is text empty?' with 'not is-text-empty?'

 - since we can have more than one bit of data in a TinyDB database we must use a text tag containing a unique name to indicate which bit we want - in this case, the one called 'items'

Drag and click a ListPicker1.Elements block into the if block.

Drag and click a TinyDB1.GetValue block into the ListPicker1.Elements 'to' socket.

Drag and click a text block into the TinyDB1.GetValue tag socket.

Change its text value to item.

 - now the completed 'if' block will load ListPicker1.Elements with the saved list data if the there were saved shopping list 'items' 

Now test your project in the emulator or connected device.

Enter a few items, then view the shopping list.

You will have to package and download the app to a device for testing the persistent data feature as projects run from the Blocks Editor do not maintain data between sessions.

Your app screens should be similar to these:

Challenge:

If you are familiar with how lists work in AI, you might try enhancing the project by adding a delete feature or a clear feature. (Don't forget to save the changed list in TinyDB!)