Web Database and the Song Sharing App

Consider an app that allows friends to record songs for each other. Any user can record a song and then "post" it to the web so that others can play it. 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 thus share data amongst phones and people. It is very much like TinyDB.

The Web component lets your app talk to any web service.

TinyWebDB is for talking to special App Inventor web services that store data in the same format as TinyDB.

  • It is in the Other Stuff drawer of the designer.
  • Provides similar functions to TinyDB: StoreValue and GetValue
  • GetValue works a bit differently-- it is asynchronous. It really should be called RequestValue.
    • from wikipedia:  asynchronous events are those occurring independently of the main program flow. Asynchronous actions are actions executed in a non-blocking scheme, allowing the main program flow to continue processing
  • GotValue  -- event triggered when data actually arrives.
       tagFromWebDB gives you the tag of the request. valueFromWebDB is the data you asked for.
Where is the data stored?
  • TinyWebDB has a property SourceURL. You can put a URL to any App Inventor compliant web service for its value.
  • By default, TinyWebDB stores data at http://appinvtinywebdb.appspot.com/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. 
  • Wolber has created http://usfwebservice.appspot.com and customtinywebdb.appspot.com as well. Note that all are for testing and may be down at anytime.
  • For your creative apps, you should create your own web DB. No coding is required. See http://appinventorapi.com/program-an-api-python/
Instructor demo: Modifying the note-taking app to use TinyWebDB instead of TinyDB
TinyDB Solution:
TinyWebDB Solution:

Your Turn
0. In a browser, go to usfwebservice.appspot.com or customtinywebdb.appspot.com. If the page loads for either one of these, use it below.
1. First play around with writing to a database with TinyWebDB. Create a new app and add a TinyWebDB component and  a "store" button. Set the ServiceURL to one of the URLS above. In the blocks editor, in StoreButton.Click, call TinyWebDB.StoreValue with some tag and value. Then open a browser to your appspot URL and see if your data is there.
2. Now play around with reading from a web database. Add a "get" button and a text box. Change the StoreValue so it stores what the user has put in textbox. Then in the GetButton.Click, call TinyWebDB.GetValue. Code the TinyWebDB.GotValue to put the data from the database into the textbox.

Now lets use it for real. Build a "Share your song" app.

0. Start with your song playback app. If you don't have one that works, have someone email you a zip file of their working version, and upload it into App Inventor.

1. Add a TinyWebDB to your app. Set the ServiceURL to an appspot url.

2. Now add the blocks to store a recorded song (musicNoteList) to the TinyWebDB. On the SaveButton.Click event, call TinyWebDB.StoreValue. Try it and open the browser to see if your data is at your appspot URL

4. Add another button that when clicked gets the current song at the web database. Remember, you'll need both a call to TinyWebDB.GetValue and you'll need to handle the TinyWebDB.GotValue function. In the GotValue, after you've retrieved the song, play it.
5. Test: Get a partner and each of you download one of your apps. See if you can play each others' songs.