Web Databases

Many apps have data that is stored in a web server and shared amongst users and devices. Facebook and Twitter are that way, of course. If you've built the Note Taker app, or the song recording app, they are not-- each user only stores the data on their device, privately. But both of those apps could be modified for sharing-- think of a note taking app in which notes are shared with a group of the public (Twitter!) or a song recording app that lets you share your songs with others. In this lesson, you'll learn how to build such apps with App Inventor.

TinyWebDB is the key component you'll need. It is an App Inventor component that let's your app store persistent data on the web and share data amongst phones and people. It has similar blocks as TinyDB, but the data is stored on the web instead of privately on the device. Key points about TinyWebDB:

Where is the data stored?

TinyWebDB has a property SourceURL. You can set it to any App Inventor compliant web service, that is, any site that has been setup especially for use with App Inventor and TinyWebDB. By default, TinyWebDB stores data at appinvtinywebdb.appspot.com. Be careful, though, as this web database is shared amongst all App Inventor programmers. It also has a limit of 100 total entries and thus is for testing purposes only.

For your creative apps, you should create your own TinyWebDB service. No coding is required. See appinventorapi.com/program-an-api-python for instructions.

How the the TinyWebDB blocks different than TinyDB's blocks

TinyWebDB provides similar functions to TinyDB: StoreValue and GetValue. StoreValue works exactly the same, but GetValue works a bit differently-- it is asynchronous. When you call GetValue, you're really just requesting the data and the data isn't immediately returned. Instead, you must code the GotValue event-handler, which is triggered when data actually arrives from the web.

Consider the following sample, which is taken from two version of a note taking app, one for private note taking, the other for sharing notes:

TinyDB Solution:
TinyWebDB Solution:

In the TinyDB solution, the app calls GetValue and checks if the data is a list (it won't be the first time the app is run, before any notes are added). If the data is a list, it is placed in the variable NoteList and the list is displayed (DisplayList is a procedure, not shown, that shows the notes in a label).

In the TinyWebDB solution, GetValue is again called from within Screen.Initialize, but note that it returns no data. The TinyWebDB.GetValue block doesn't have anything coming out the left that can be plugged in to a slot. Instead, the GetValue just sends a request to the web. Eventually, the data will arrive, and then the GotValue event-handler is triggered. When it is, the TagFromWebDB gives you the tag of the request and the valueFromWebDB is the data that was requested (the list of notes). As you can see, the data is processed in a similar manner to the TinyDB solution.

Your Turn: Play around with TinyWebDB

  1. In a browser, go to appinvtinywebdb.appspot.com. Click on /storeValue and add an entry with a tag of your first name and a value of your last name.
  2. Go back to the main page and click on /getValue. Enter your first name as the tag and see if your entry is displayed-- it should. Of course you'll be storing and getting values from the app you build, but this gives you an idea of how the TinyWebDB service works.
  3. First play around with writing to a database with TinyWebDB. Create a new app and add a TinyWebDB component and a "store" button. In the blocks editor, in StoreButton.Click, call TinyWebDB.StoreValue with some tag and value. Then go to appinvtinywebdb.appspot.com
  4. Now play around with reading from the web database. Add a "get" button and a Textbox. Change the StoreValue so it stores what the user has entered in the Textbox. Then in the GetButton.Click, call TinyWebDB.GetValue. Code the TinyWebDB.GotValue to put the data from the database into the textbox. Try storing various items with different tags and seeing if you can retrieve them.

Convert one of your apps to use TinyWebDB

Now use TinyWebDB for real. Take one of your apps you've built and convert it. To test it, you'll want to have your app installed on multiple devices, and see if the devices can share data. Check out the videos to the right as a guide.

  1. Start with some app that stores data with TinyDB. If you don't have one, download the NoteTaker app (click on the "download the source" button to get the source (.zip), then in App Inventor choose "More Actions | Upload Source").
  2. Add a TinyWebDB to your app.
  3. Add a call to TinyWebDB.StoreValue everywhere in your code that you call TinyDB.StoreValue. You'll eliminate the TinyDB.StoreValue calls soon, but leave them for now.
  4. Run your app, enter some data, then go to appinvtinywebdb.appspot.com. Is your data there?
  5. Now work on the GetValue part. Replace your call(s) to TinyDB.GetValue with a call(s) to TinyWebDB.GetValue, then add the TinyWebDB.GotValue event handler, as in the sample above.
  6. Test: Get a partner and each of you download your apps. First have one open the app and enter some data. Then have the other open it on the other device. Do you see the data that was entered on the first device?
  7. Test 2: Now have both devices running the app at the same time, and both of you enter some data. Does the data stay consistent-- do both users see the same data? Probably not! Can you figure out the issue?
best viewed in full screen HD best viewed in full screen HD