CIT4173 Mobile Application Development LAB 10

LAB 10 – Store data persistently in a web database

At the end of this lab, students should be able to:

• Store data persistently in a web database with the TinyWebDB

component
• Retrieve data from a TinyWebDB

Project: MakeQuiz app

Purpose of this App

You’ll build a MakeQuiz app that lets a “teacher” create quizzes using an input form. The quiz
questions and answers will be stored in a web database so that “students” can access a
separate TakeQuiz app and take the test.

ASSETS YOU’LL NEED

None

i. Getting started

Start a new project. Name it “MakeQuiz” and set the screen’s title to “Make Quiz”.

ii. Designing the Components

Use the Component Designer to create the interface for MakeQuiz. When you finish, it
should look something like figure below:

1
CIT4173 Mobile Application Development LAB 10

Set the properties of the components in the following way:

1. Set the Text of Label1 to “Question”, the Text of Label2 to “Answer”, and the text of Label3
to “Quiz Questions and Answers”.
2. Set the FontSize of Label3 to 18 and check the FontBold box.
3. Set the Hint of QuestionText to “Enter a question” and the Hint of AnswerText to “Enter an
answer”.
4. Set the Text of SubmitButton to “Submit”.
5. Set the Text of QuestionsAnswersLabel to “”.
6. Move the QuestionText, AnswerText, and their associated labels into TableArrangement1.

iii. Coding the block

Define some global variables.

o From Variables, drag two initialize global name blocks, and change the
name to QuestionList and AnswerList. The lists are defined with the
create empty list block.
o Drag another initialize global name block, and change the name to
answerIndex and set the initialize value to 1.
o Drag another initialize global name block, and change the name to
answer and set the initialize value to empty text.

iv. Recording the User’s Entries

The first behavior you’ll build is for handling the user’s input. Specifically, when the user
enters a question and answer and clicks Submit, you’ll use add items to list blocks to
update the QuestionList and AnswerList.

2
CIT4173 Mobile Application Development LAB 10

v. Blanking Out the Question and Answer

When a user submits a question-answer pair, you’ll want to clear the Question Text and
AnswerText text boxes so that they’re ready for a new entry instead of showing the
previous one.

Test your app

Test the behavior by entering a couple of questionanswer pairs. As you add them, do they
appear below the form in the QuestionsAnswersLabel?

How the blocks work

When the user submits a new question and answer, they are added to their respective lists
and displayed. At that point, the text in the QuestionText and AnswerText is blanked out with
empty text blocks.

vi. Displaying Question-Answer Pairs on Multiple Lines

In the app you’ve built so far, the question and answer lists are displayed separately and
using the default list display format for App Inventor. So if you were making a quiz on state
capitals and had entered two pairs of questions and answers, it might appear as:
(What is the capital of Malaysia? How many stripes are there on Malaysian Flag ?: Kuala
Lumpur 14)
This is obviously not an ideal user interface for the quiz designer. A better display would
show each question along with its corresponding answer, with one question-answer pair
per line, like this:
What is the capital of Malaysia?: Kuala Lumpur
How many stripes are there on Malaysian Flag?: 14

3
CIT4173 Mobile Application Development LAB 10

The task here is a bit more complicated because you’re dealing with two lists. Because of
its complexity, you’ll put the blocks for displaying the data in a procedure named
displayQAs, and call that procedure from the SubmitButton.Click event handler.
To display question-answer pairs on separate lines, you’ll need to do the following:
• Use a for each block to iterate through each question in the QuestionList.
• Use a variable answerIndex so that you can grab each answer as you iterate through the
questions.
• Use join to build a text object with each question and answer pair, and a newline
character (\n) separating each pair.

How the blocks work

The displayQAs procedure encapsulates all of the blocks for displaying the data.
By using a procedure, you won’t have to copy the blocks needed to display the list
more than once in the app—you can just call displayQAs when you need to display the lists.

The ‘for each’ only allows you to iterate through a single list. In this case, there are two lists,
QuestionList and AnswerList. The for each is used to iterate through the QuestionList, but you
need to select an answer, as well, as you proceed through the questions.

To accomplish this, you use an index variable. In this case, the index variable, answerIndex, is
used to track the position in the AnswerList as the for each goes through the QuestionList.
answerIndex is set to 1 before the for each begins. Within the for each, answerIndex is used
to select the current answer from the AnswerList, and then it is incremented.

On each iteration of the for each, the current question and answer are concatenated to the
end of the QuestionsAnswersLabel.Text property, with a colon between them.

4
 CIT4173 Mobile Application Development LAB 10

vii. Calling the displayQAs Procedure

You now have a procedure for displaying the question-answer pairs, but it won’t help
unless you call it when you need it. Modify the SubmitButton.Click event handler by calling
displayQAs instead of displaying the lists, as was done previously. The updated blocks
should appear as shown in Figure below:

Test your app

Test the behavior by entering a couple of questionanswer pairs. As you add them, do they
appear on separate lines in the QuestionsAnswersLabel?

viii. Saving the QAs Persistently on the Web

You’re already familiar with using the TinyDB component to store and retrieve data in a
database. But in this case, you’ll use the TinyWebDB component, instead. Whereas TinyDB
stores information directly on a phone, TinyWebDB stores data in databases that reside
on the Web.

Here’s the general scheme for making list data (such as the questions and answers for
our app) persistent:
• Store a list to the database each time a new item is added to it.
• When the app launches, load the list from the database into a variable.
Start by storing the QuestionList and AnswerList in the database each time the user enters
a new pair.

5
 CIT4173 Mobile Application Development LAB 10

How the blocks work

The TinyWebDB1.StoreValue blocks store data in a web database. StoreValue has two
arguments: the tag that identifies the data, and the value that is the actual data you want to
store.
Figure below shows that the QuestionList is stored with a tag of “yournamequestions,”
whereas the AnswerList is stored with a tag of “yournameanswers.”

Test your app

Testing this part of the app is different from tests you’ve performed previously because your
app is now affecting another entity, the default TinyDBWeb service. Run the app, enter a
question and answer, and then open a browser window to the default web service at
http://appinvtinywebdb.appspot.com. Then click “get_value” and enter one of your tags (in
this sample, “asmaquestions” or “asmaanswers”). If things are working correctly, your
question and answer lists should appear.

ix. Loading Data from the Database

To specify what should happen when an app launches, you program the
Screen.Initialize event handler. In this case, the app needs to request two lists
from the TinyWebDB web database—the questions and the answers—so the
Screen1.Initialize will make two calls to TinyWebDB.GetValue.

When the TinyWebDB.GotValue event occurs, the data requested is contained in an

argument named valueFromWebDB. The tag you requested is contained in the argument
tagFromWebDB.
In this app, because two different requests are made for the questions and answers,
GotValue will be triggered twice. To avoid putting questions in your AnswerList, or vice
versa, your app needs to check the tag to see which request has arrived and then put the
value returned from the database into the corresponding list (QuestionList or
AnswerList).

6
CIT4173 Mobile Application Development LAB 10

In Screen.Initialize, the app calls TinyWebDB1.GetValue twice: once to request

the stored QuestionList, and once to request the stored AnswerList. When the data
arrives from the web database from either request, the TinyWebDB1.GotValue event is
triggered.

The valueFromWebDB argument of GotValue holds the data returned from the database
request. You need the outer if block in the event handler because the database will return
an empty text (“”) in valueFromWebDB if it’s the first time the app has been used and
there aren’t yet questions and answers. By asking if the valueFromWebDB is a list?,
you’re making sure there is some data actually returned. If there isn’t any data, you’ll bypass
the blocks for processing it.

If data is returned (is a list? is true), the blocks go on to check which request has arrived. The
tag identifying the data is in tagFromWebDB: it will be either “yournamequestions” or
“yournameanswers.” If the tag is “yournamequestions,” the valueFromWebDB is put into
the variable QuestionList. Otherwise (else), it is placed in the AnswerList.

You only want to display the lists after both have arrived (GotValue has been triggered
twice). Can you think of how you’d know for sure that you have both lists loaded in from the
database? The blocks shown use an if test to check whether the lengths of the lists are the
same, as this can only be true if both lists have been returned. If they are, the handy
displayQAs procedure you wrote earlier is called to display the loaded data.

Are you done? Wow, congratulations! You’re truly on your way to being an
amazing app designer.