App Inventor for Android
 
Search this site

Information on this site about App Inventor for Android is open to everyone.  However, the ability to use the androidblocks development environment is restricted to students and faculty at participating colleges and universities.  Use this form for questions or comments.

License

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License,

Contributions

If you submit a contribution to this wiki, please note that Google will make your contribution available publicly under the Creative Commons Attribution 3.0 License.
Tutorials‎ > ‎

TinyWebDB Demo

Contents

  1. 1 Introduction
  2. 2 The TinyWebDBDemo Application
    1. 2.1 Components
    2. 2.2 Blocks
  3. 3 The AppInvTinyWebDB Service
  4. 4 Implementing the TinyWebDB Component in Java


Introduction

This demo introduces the TinyWebDB component and demonstrates how to use it to save and retrieve information.  The demonstration application, TinyWebDBDemo, lets you save values, each identified by a tag, and to retrieve the data associated with a tag.   That might seem to be nothing more than setting variables and getting their values.  But there's a big difference: the data is being stored on the Web.  As a consequence, you can quit the application and shut off your phone, and the data will still be there when you come back.  And others can access that same data, so long as you agree on the tags.   You can use TinyWebDB in applications whose data needs to persist over time and applications that involve sharing information across multiple phones.

To make this work, we need a place on the Web where the data resides.  So together with the demo application, there's also a demo Web service called AppInvTinyWebDB, which resides on the Web at http://appinvtinywebdb.appspot.com.   This is a working service, but it's for demonstration purposes only: anyone can visit it on the Web.  And anyone who visits it on the Web and manipulate the data there.   Thus, while you're invited to use TinyWebDBDemo exactly as presented here, don't be surprised if your data disappears as a result of other people experimenting with the AppInvTinyWebDB website.  For serious use, you'll want to create your own  version of the Web service.  You or your instructor can set this up using the Web service code provided here, although doing so requires some familiarity with Google App Engine.

The TinyWebDBDemo Application

We'll start by showing how to create the application.  Later we'll discuss how to change from the demo Web service to a different one, and even how to modify the TinyWebDB component.

Components

TinyWebDBDemo is a bare-bones application on phone:

The Store button saves information on the Web using the tag and value that you specify; the Get button retrieves the value stored under the specified tag.  The components are:

  • StoreButton, the button you press to store the tag and the value
  • TagToUse, a TextBox where you fill in the tag
  • a subform to align StoreButton and TagToUse horizontally
  • ValueToStore, a TextBox where you fill in the value
  • GetButton, the button you press to retrieve the value
  • ValueReceived, a label that shows the received value
Go ahead and set these up in the Designer.  Notice how we've used the Hint property in the two text boxes to indicate what should be entered there; and we've set the initial text of ValueReceived to the message "waiting for value".



The final component is non-visible: a TinyWebDB component called WebDB.   You'll find it on the palette under Not ready for prime time.  Drag it to the Viewer.  It has only one property, called ServiceURL.  This is the URL where the component expects to find the Web service.   It's preset with a default value of the URL for the AppInvTinyWebDB demonstration service, and you should leave it at that now.   If you create your own service, you can change ServiceURL to point there.

Blocks

There aren't many blocks for this simple application.   Pressing the StoreButton tells the WebDB to store a tag and a value that come from what the user has entered in the two text boxes:
Similarly, pressing the GetButton asks WebDB to return the value for the given tag:
When WebDB receives the value, it will signal a GotValue event.  The corresponding event handler show the result with the ValueReceived label:


This event-driven style, where you make a request and set up an event handler to process the result, is the same approach used in the TwitterDemo tutorial, and which you should use for any application that has to wait for responses from the Web.

The application does one more thing, and it's optional.  When the Web service stores a value, it sends back a confirmation message. The TinyWebDB component signals a ValueStored event when it sees that message.   We'll have our application look for that event and gives some reassuring feedback to the user, by displaying a message that appears on the screen for a few seconds.
That's the entire application.   If you build it and try it, you can visit the Web service and check that the data from the phone is really being sent.

This simple application doesn't do enough by itself to be more than a demo.  But you can incorporate the TinyWbDB component and this technique into your own applications that need to store persistent data or share data among multiple phones.

The AppInvTinyWebDB Service


If you visit the Web service at http://appinvtinywebdb.appspot.com, you'll see this page:


It shows an introduction and then a list of the stored keys and value and the time each was stored, ordered alphabetically by key.  There's a red button for each pair that yo can press to delete the pair.  There are also two links right above the table that you can press to simulate store and get requests from the phone.  These can be  useful in debugging your applications.  It also means that anyone visiting the page can modify or delete the data.  So, as mentioned above, this particular Web service is useful mostly as an demo and for testing. 

For serious use, you'll want to set up your own version of the service.   To do that, you'll need to know a little about Google App Engine, or get help from someone who does.  You'll need the App Engine documentation and software.   Our demonstration application is written in Python, so you should look at the App Engine Python documentation.

To make your own version of the AppInvTinyWeDB you should download and unzip the App Engine application source folder and follow the instructions in the README file.  You can use the application as is (except for changing the name) or you can make whatever modifications you wish.   The simplest modifications could be changing the introductory text or increasing the limit on the number of key/value pair that can be stored.

You might also want to implement service calls other than storeavalue and getvalue.  For this you'll need to implement the operations in Python.   You'll also need a modified version of the TinyWebDB component, and you'll have to work with the App Inventor for Android Team to install that.  (Later versions of App Inventor may include components for which you can modify the web service without need to change the component.)

Implementing the TinyWebDB Component in Java


For Java developers:

We've included the Java code that implements the TinyWedDB component.  If you know Java, this will give you some insight into how App Inventor Components are implemented.   It could also serve as a guide in implementing other App Inventor components that communicate over the Web, although in our current system, you'll need to work with the App Inventor team to install them.


Revised: October 16

Attachments (4)