Tuesday, April 5, 2011

Android App Inventor - TinyWebDB

The next post in my series on Android App Inventor makes use of one the 'Not for Primetime' components. The TinyWebDB component allows you to store data on a web service. This means that the data can be accessed by the Android phone as well as a web application.

For testing purposes Google have provided a test web service at http://appinvtinywebdb.appspot.com/.  This service is a limited service and will only store 1000 entries. Due to these limitations it should NOT be used for your applications. Google provides instructions on how to create your own web service using Python and the Google App Engine.

The following example uses the application I built for the Android App Inventor - Lists post. This post will show how to store the contents of a list to the TinyWebDB web service and also retrieve the contents of a list from the TinyWebDB web service.


To begin we need add two buttons (btnStoretoWeb & btnGetListfromWeb).



We also need to add the TinyWebDB component. I have also added a Notifier component to allow us to return a message to the user when the data is stored.

 The TinyWebDB1 control needs to have the ServiceURL set to the debug URL: http://appinvtinywebdb.appspot.com/


Once the GUI has been configured we start the block editor and create the logic to save the list to the TinyWebDB.

To store a value on the web service we add the btnStoretoWeb.Click event. Within the event we call the TinyWebDB1.StoreValue method. This method has two parameters. The 'tag' parameter allows you to assign a key to the data. The second parameter is the list you are going to store.

The second event shown above is the TinyWebDB1.ValueStored event. When a value is stored in the TinyWebDB this event is triggered. I have used it to provide a notification to the user that it worked.

The next step is to retrieve the values from the web service and repopulate the list. In this case I have used a button to manually trigger the load of the list. In a production application you may want to put this code into the Screen.Initialize event.

In the btnGetFromWeb.Click event we call the TinyWebDB1.GetValue method with the name of the 'tag' we want to retrieve. In this case it is the MyStoredList tag.

Once the GetValue call is sent we need to wait for the TinyWebDB1.GotValue event to be called. This ensures that our application can remain responsive even if the call to the web service is slow to respond. When the event is triggered the application has access to the parameter valuefromWebDB. This contains the list we stored previously.

We can then store this value into the list. We also update the label to show the number of items in the list. I also load the ListPicker1 component.

I hope this tutorial has been helpful. Please feel free to comment if you need further information.

I have added a link to the App Inventor source here.

My other App Inventor tutorials are:
App Inventor - Simple SMS
App Inventor - Location Services
App Inventor - Lists

12 comments:

  1. Nice. Can you share your source code?

    ReplyDelete
  2. I will be packaging up the AppInventor source code and publishing on here. I need to sanitise and clean up my projects before I can do this.

    ReplyDelete
  3. Hey,
    Great tutorial!
    I want tinywebdb to interact with my server(http://discountkhj.appspot.com/) n database and return me some related content.
    For this , do i have to manually enter all the values content corresponding to various searches using the method you explained above??
    Thanks,

    ReplyDelete
  4. It is possible to enter data from the AppEngine Dashboard. If you go to the Datastore Viewer/Create tab you can use the wizard to enter data. If you have a large amount of data to enter there is a bulkloader tool. The AppEngine documentation includes the instructions. (http://code.google.com/appengine/docs/python/tools/uploadingdata.html). Thanks for reading.

    ReplyDelete
  5. Dave - Nice tutorials. I'm trying to create an app that will take input from the phone (probably 8 - 10 different numbers) and display them online so that others can view them remotely. I was trying to do this with Fusion Tables but that is proving to be rather complicating, since I want to be able retrieve and edit it on the phone too.

    Q1 - Have you done any work with Fusion Tables?

    Q2 - Do you know of a way to take info that is in an AppInventor list and display it online in a Google spreadsheet format?

    ReplyDelete
  6. Kevin, I found a great tutorial on Fusion Tables on Youtube (http://www.youtube.com/watch?v=vJUQgPHI-f0). I haven't had a chance to play with Fusion tables but it is something I will look into.

    In regards to your second question, it may be possible to use the Web component to access the Google Documents API through a HTTP GET.

    ReplyDelete
  7. hai dave, i'm newbie in android.. i want to make games that need database to store question, answer (multiple choice) and the right answer for the question..how i build the game ? would you help me dave ? thanks

    ReplyDelete
  8. Hey dave... i want to make an app using TinyWebDB... when i'm about to register on Google App Engine, i have to enter my cellphone (i'm from mexico) and my country isnt in the list and that's why i can't receive the SMS... how can i get access to App Engine??? any solution? Th

    ReplyDelete
  9. According to the Appengine documentation - https://developers.google.com/appengine/kb/supported_carriers#M there is one (1) carrier available to use in Mexico.

    ReplyDelete
  10. Hi there Dave!

    Just got started with app inventor last week. Im at the advance section of the tutorials right now and got to try tinywebdb, I figured I would want to setup my own custom tinywebdb service. Followed all instructions, downloaded python 2.5.4, the google app engine, and the customtinywebdb file. Installed both python and app engine on all default paths and settings. But when I tried to Run the customtinywebdb on the appenginelauncher an error happens, a yellow triangle with a (!) inside appears on the status icon of the cusyomtinywebdb line. The app launcher didn't provide any error messages just the icon change. When I tried launching localhost:8080 the browser didn't do anything, couldnt find a connection. I don't know what I did differently I followed all the instructions carefully but got a different results.

    Hope you can help me!
    By the way I have no knowledge of Python whatsoever.

    ReplyDelete
    Replies
    1. HI United E! !!! Did you ever fix the error you were getting? I have the same problem! please reply to my email : USTS08@yahoo.com thank you so much! you are a life saver.

      Delete
  11. The list works ok for saving and loading the first time. Next time i use the app and load the data appears as a single list item (101 102), rather than the 101 and 102 being as separate line items. Any ideas?

    ReplyDelete