In PaintPot projects, we added a Camera button to take a photo with the device’s Camera and use that photo as the Canvas’s background image. In this tutorial, we will learn how to save that photo to a database on the device, so that whenever the app is run, the photo can be retrieved from the database.
By using a database in this way we will turn the photo into an example of persistent data -- i.e., data that persists between different uses of the app. We will use Thunkable 's stored Data Source to allow the app to save the user’s photos on the device.
Objectives: In this lesson you will:
create an app that saves images between sessions;
learn about the concept of persistent data;
learn how to access Thunkable 's stored Data Source;
Up until now, the data in our apps has been stored either in variables or as the value of the properties of the app’s various components. For example, when you store a piece of text in a Label, that data is stored in the computer’s main memory, in its RAM — random access memory. And as we’ve learned, RAM is volatile, meaning that any data stored there will be destroyed when the app is exited.
By contrast, data stored in the computer’s long-term storage — e.g., on the phone’s flash drive — will persist as long as the app is kept on the device. There are various ways to store data permanently on a computer. For example, you could store it in a file, such as a document or image file. Another way to store persistent data is in a database. Thunkable provides us a very simple, easy-to-use database stored Data Source. Any data that we store in the stored Data Source, will not disappear when the app is exited. Instead, it will persist between uses of the app -- even if you turn off the device.
8.8.3. Incorporating Stored Data Source into Paint Pot
To get started, click here to open Thunkable with the PaintPotTinyDbTemplate in a separate tab and follow along with the video tutorial.
In the projects below, you will extend this version of PaintPot to save multiple photos for the canvas background in a list in stored Data Source. The simplest data abstraction in programming is a variable, but there are more complex data structures available in all programming languages. Thunkable has a data structure called list which allows the storage of multiple items under one name in memory. The items are indexed which means they are numbered from 1 to the length of the list. The Lists drawer contains all the blocks available for manipulating lists. We first create a variable to hold a list which can be an empty list or a list of items using make a list:
In the projects below, you will use List blocks such as insert item into list and select random item from list.
In the AP CSP exam pseudode, lists are represented using square brackets [ ] like below. The assignment operator ← can be used to assign a list to a variable. The list items can be numbers or text which are called strings; strings are usually indicated by quotes "" to distinguish them from variables.
list ← [ "kitty.png", "android.png" ]
8.8.5. Creative Mini Projects
Now that you've learned the basics of using stored Data Source, it's time to add some additional features and enhancements to the Paint Pot app. Working in pairs, implement each of the following enhancements.
As we saw in the overview video, one can also store lists of data in a stored Data Source. So rather than just having a single photo to use as the Canvas background, we could have a selection of photos to choose from. As a first step, initialize a global variable for this list of backgrounds to the create empty list block from the Lists drawer. In the When button click event handler, add the photo from camera to that list using the add items to list block. Store the variable for the whole list in the stored Data Source.
If/else Algorithm. What about when the app starts up? This can be a little tricky because now you'll be retrieving a list of photos, rather than a single photo. So you can't assign the list as the background image. You could select a random item (photo) from the list and make that your background. But what if this is the first time the app runs? When the list is empty? This would be a good place for an if/else algorithm controlled by whether or not the list retrieved from the stored Data Source is empty or not. To solve this problem, you'll have to look through the Lists drawer in the Blocks Editor for some useful functions to use.
Add a Simple List component to the app's user interface to let the user select the background image. Read more about the Simple List component here. In its blocks, it has a When Simple List Item Click event handler. One of the Simple List properties is the text items property which is the list of choices shown to the user. You can set this text items property to your list of background photos in the BeforePicking event handler. Note that what will appear in the Simple List are the file paths of the images, not the images themselves. There's no easy way around this. After the user has picked an element from the Simple List, their choice will be in When Simple List Item Click item block and can be put on the Canvas background.
8.8.6. Self-Check
8.8.7. Reflection: For Your Portfolio
Create a page named Persistent Photos Tutorial in your portfolio and give brief answers to the following questions:
What does it mean to say that data is 'persistent'?
What's the difference in terms of where data is located between data stored in an app variable and data stored in a stored Data Source?
When and how often does Thunkable's When Screen Starts block fire and what is its purpose?
Include a screenshot of your if/else algorithm for retrieving photos from the stored Data Source.
