Chapter 7.6 - Clicker App with CloudDB
Time Estimate: 90 minutes
7.6.1. Introduction and Goals
In earlier apps that we designed in this course, we used TinyDB to store and retrieve data on our physical device (phone or tablet). In this lesson, we will build a simple Clicker App that will store and retrieve data from a cloud database on the web.
Imagine a teacher asking the class a question and students voting on it. We want to design an app that can not only store the results from each student in one central place but also allow the teacher and the students to view the results in real time.
Learning Objectives: I will learn to
differentiate between synchronous and asynchronous operations
create an app using the CloudDB component to store data on the web so it can be shared by different users
Language Objectives: I will be able to
describe and give examples of syncrhonous and asyncronous operations
describe how using a database helps reduce detail in an app
use target vocabulary while describing app features and User Interface with the support of concept definitions from this lesson
7.6.2. Learning Activities
Introduction: Abstracting an App's Data
We will create a polling app that enables students to answer a yes/no question then display the poll results in real time. When your code is completed, you will have a clicker app that stores all of its data on the Web using a cloud database for a high-level data abstraction.
Database Concepts: TinyDB vs. CloudDBs
Before working on the app itself, it is important to understand what CloudDB is and how it differs from TinyDB. As you know from a previous lesson, we can use a TinyDB component to persist data. TinyDB stores its data on the device itself—the phone or tablet—and access to the data is synchronous, which means that access to the data is immediate. It's good for sharing data between uses of the app on the same device, but it is not good for sharing data among users on different devices.
For example, consider a diary app which enables a user to record entries that contain personal information. The synchronous storage of a TinyDB would be effective for storing entries in this app that a user does not want to share with anyone on a different device. Next, consider a messaging app intended to allow users to communicate with other users of the app. If a TinyDB was used to store the messages, users of the app on different devices would not be able to access the messages and the app would not work as intended. For this app, a CloudDB would be a better choice.
CloudDB is a web-based database service. It is a non-visible App Inventor component that can be used to store and retrieve data values in a database located on the Web. It can be found in the palette’s Storage drawer. Whereas TinyDB stores data only on the device running the app, a CloudDB is shared among users on multiple devices running the same app because it stores data online, in the cloud. Access to the web data is asynchronous, which means storing and retrieving data may not happen immediately. Your program must request the data operation, and the CloudDB will signal the program when it is completed. The app can continue running other commands at the same time as the web database is doing the data operation, until it is interrupted by the event that the data operation is complete.
Note that App Inventor also has TinyWebDB and FirebaseDB which are also web databases that can be used the same way as CloudDB with slight differences in the blocks. TinyWebDB does not have a when data changed block to push updates to all the shared devices. FirebaseDB is a Google product and charges for some services. CloudDB is based on FirebaseDB with all the same blocks but it is hosted at MIT.
CloudDB is currently having connection problems due to server overload. If you get a socket connection error, switch to using the Experimental/FirebaseDB and its associated blocks for this tutorial!
The following video explains the basic concepts of using a web-based database like CloudDB.
CloudDB stores two types of records, individual data items in variables or lists. In this app, we will only be using it to store individual data items. Note that the tags are case sensitive in a CloudDB.
Getting Ready
Start App Inventor with Clicker App Template. Once the project opens use Save As to rename your project ClickerCloudDB.
Follow the video tutorial below or the text version or the short handout to complete this app.
CloudDB is currently having connection problems due to server overload. If you get a socket connection error, switch to using the Experimental/FirebaseDB and its associated blocks for this tutorial!
Activity: 7.6.2.1 YouTube (25WJLbsgIrM)
Testing the App
This app is best tested by forming a group of students where everyone in the group loads one student's app using Build/App (provide QR code for apk). Make sure that as each person's app loads, that the most recent data stored in the database shows up on their device. When one of student in your group votes, the latest data should update on everyone’s screen. Because this app is more easily tested using .apk files, we recommend it be built (and tested) on Android devices until iOS .apk files become available in App Inventor.
Exercises and Enhancements
To appreciate the increased flexibility and generality that we get from centralizing data on the web, here are some exercises to try.
Create a Percentage Display Using the Thumb Switches
Read the documentation on Thumb Sliders before proceeding.
The sliders or thumb switches are most frequently used to allow the user to set the value of some property by moving their thumb on a sliding scale. For our Clicker app, we will be using this component in reverse - to create a percentage display based on the ratio of “Agree” and “Disagree” votes recorded by the app.
This video provides additional details on how to program the sliders to display percentages.
Allow Users to Vote Only Once
Modify the app so that the app only allows the user to vote once (hint: there is an Enabled property for buttons). Votes will still be updated by the DataChanged procedure which is called automatically when the data in the database is updated.
Add re-enabling the voting buttons when the user hits reset. Note: For testing purposes, it might be easier to disable the "vote only once" feature while testing other enhancements.
Build a Teacher Version This special version of the app, the “Teacher” version, will update the question displayed on the screen in real time. First in the student app.
Change the student version of the app to accept new questions while the app is running. This will involve adding code to the CloudDB.DataChanged event handler to see if the question was changed in the database and changing the question label accordingly and re-enabling the voting buttons. Use the tag name "question". Note that the question data will consist of a string, whereas the agree and disagree data were numbers.
Remove the RESET button from the UI of the student side so that only the teacher can reset the counters.
Build a separate version of the app called "ClickerTeacher" (use Projects/Save As). Allow only this version to change the questions. Note that when you use Projects/Save As, the CloudDB token and ProjectID will both stay the same, so the student app and the teacher app can share the same database. Also, when testing the app, it may be easier to use QR codes to load the two versions of the app instead of trying to use the Companion. Note: If using Projects/Save As does not copy the CloudDB token, you may need to copy and paste the token from the student version into a text editor (e.g. a Google doc) and then copy and paste the token from the text editor into the teacher version.
Replace the question label in the teacher version of the app with a TextBox to allow the teacher to update the question field in real time.
Add an “Update Question” button to the teacher app that will store the new question into the CloudDB from where it will get pushed to all the users. Remember the tag name you used (question)! Also, reset the counters and store them in the database too.
Test with your group with one student using the teacher app and the rest using the corresponding student apps.
7.6.3. Summary
In this lesson, you learned how to:
Learning Objective DAT-2.D: Extract information from data using a program.
Programs can be used to process data to acquire information.
Learning Objective AAP-1.D.a: For data abstraction: a. Develop data abstraction using lists to store multiple elements.
Learning Objective AAP-1.D.b: For data abstraction: b. Explain how the use of data abstraction manages complexity in program code.
Data abstraction provides a separation between the abstract properties of a data type and the concrete details of its representation.
Data abstractions manage complexity in programs by giving a collection of data a name without referencing the specific details of the representation.
7.6.4. Self-Check
Q-2: To say that the operation of requesting data from a CloudDB is asynchronous means
A. that it must be performed on a clock.
B. that it cannot be performed on a clock.
C. that it can be completed immediately.
D. that the request cannot be completed at the same time as it was made and may take an unpredictable amount of time.
Q-3: Which of the following statements are true for a CloudDB component. Choose all that apply.
A. Data stored in a CloudDB are stored on the Internet.
B. Data stored in a CloudDB disappears when you quit the app.
C. Data stored in a CloudDB can easily be shared with other devices and users.
D. Data stored in a CloudDB will persist between different uses of the app.
Q-4: A TinyDb component does not have an event handler. Why do CloudDB need a GotValue event handler?
A. Because CloudDB data are stored in a complicated database whereas TinyDb data are stored in a simple database.
B. Because CloudDB data are stored on the Web and retrieved over the Internet whereas TinyDb data are stored on the device.
C. Because data stored in a CloudDB can store bigger chunks of data.
D. Because data stored in a CloudDB is stored on the phone's hard drive.
Q-5: When should an app's data be stored in a CloudDB as opposed to a TinyDb?
A. When you need to retrieve the data quickly.
B. When the data needs to persist between uses of the app.
C. When you need to store lists of data.
D. When the data needs to be shared among different devices running the app.
7.6.5. Reflection: For Your Portfolio
Answer the following portfolio reflection questions as directed by your instructor. Questions are also available in this Google Doc where you may use File > Make a Copy to make your own editable copy.
Describe and give an example of the difference between synchronous and asynchronous data operations.
True or False. When an app retrieves data from CloudDB, it first requests the data and then it stops whatever it is doing and waits for the data to arrive. Explain.
One aspect of abstraction is that it helps to reduce details to focus on what's relevant. How does the use of an external database in this app help reduce detail in the program?
Portfolio Reflection Questions
Make a copy of this document in your Portfolio Assignments folder and answer these questions in the spaces below. Once complete, turn in this assignment according to the steps given by your teacher.
7.6 Clicker App with CloudDB Curriculum Page
Answer the following questions:
1. Describe and give an example of the difference between synchronous and asynchronous data operations.
Answer
2. True or False. When an app retrieves data from CloudDB, it first requests the data and then it stops whatever it is doing and waits for the data to arrive. Explain.
Answer
3. One aspect of abstraction is that it helps to reduce details to focus on what's relevant. How does the use of an external database in this app help reduce detail in the program?
Answer
Last updated