Lesson Plan: User-generated Data and the NoteTaking App

This lesson introduces apps with user-generated data and specifically a simple note-taking app indicative of CRUD (create, update, delete). Student learn how to build a simple input form, put entered data into a list, display the list, and save the list to a database (on phone).

1. Explain dynamic data. Unlike, say the quiz app, the questions/answers aren't fixed, the lists begin empty and are populated with data entered by the users. Explain how such apps are harder to build because you have to imagine the data in the lists.

2. Create an app named Notes.
  • In designer, create a form: prompt label, textbox, button all in a Horizontal arrangement. Name the components (e.g., submitbutton)
  • Add a label below with Notes as a header. Add another label, NotesLabel where the actual data will appear.
  • In blocks editor, Add a variable NoteList with an empty makealist block
  • On submit.click event, add contents of textbox to list with add items to list block
  • Show list in NotesLabel simply (just set NotesLabel.text to the list)
3. Deploy the app by downloading to computer, uploading apk to a sites page, then using the resulting URL to get a qr code. Put the resulting QR code on the sites page. Do the same for the source code (just attach it to sites page)

4. Ask the students to download the apk and use it. What happens when they close the app and reopen it? Are the notes still there? (no)

5. Demonstrate how to add persistence to the app using TinyDB
  • Drag in a TinyDB component
  • Explain that the database works with tag-value pairs. tag is the "name" of the data. Value can be text or a list.
  • Explain that:
    • when item added, tinydb.StoreValue the list
    • when app opens, tinydb.GetValue the list.
    • Complication: what happens when you call GetValue the first time, before there are any notes
      • explain that you fix it by checking if the value returned from GetValue is a list
  • Complete app and re-deploy. Let students download it and test it.
  • Note that live testing cannot be used to test. Every re-start empties test database.
6. Activity: Have students complete their version of NoteTaking app using the zipped source code.
  • Add persistence as demonstrated
  • test it

© AppInventor.org 2012