Activity: Saving User Preferences in TinyDB
Objective
Create an app where a user can enter their favorite color, save it, and see it displayed each time
the app starts.
Instructions
1. Set up the screen:
Open MIT App Inventor and start a new project.
Rename the screen to Screen1 and set the title to “Favorite Color Saver.”
Add the following components:
TextBox: Rename it ColorInput. Set its hint text to "Enter your favorite
color."
Button: Rename it SaveButton and set its text to "Save Color".
Label: Rename it DisplayColorLabel. Leave the text empty as this will
display the saved color.
2. Add a TinyDB Component:
From the Storage drawer, drag TinyDB onto the screen. It will appear as a non-
visible component.
3. Set up Blocks:
Open the Blocks editor.
Add the following logic:
When [Link]:
Store the text entered in ColorInput in TinyDB. Use
[Link] with “FavoriteColor” as the tag and
[Link] as the value.
Set the text of DisplayColorLabel to the saved color.
When [Link]:
Retrieve the color value from TinyDB using [Link].
Use “FavoriteColor” as the tag and “No color saved” as the default
value.
Set the text of DisplayColorLabel to the retrieved color.
4. Test the App:
Run the app on the emulator or a connected device.
Enter a color in the text box and click "Save Color."
Close and reopen the app. The saved color should appear in the label.
Expected Outcome:
When the user enters their favorite color and clicks “Save Color,” the color is saved. Each time
they open the app, their saved color is displayed in DisplayColorLabel.