INTEGRATING APP INVENTOR APPLICATIONS WITH SQL DATABASE SERVICES

Mihaela Sabin and David Meehan

University of New Hampshire, 400 Commercial Street, Manchester, NH 03101
(603) 641 4144, mihaela.sabin@unh.edu
(603) 454 6552, david.meehan.unh@gmail.com

ABSTRACT
This paper details the implementation of a mobile app, QuizPower, using MITs App Inventor
development platform. QuizPower was developed with two primary objectives in mind: (1)
provide students a learning tool for studying and practicing course material and (2) create a case
study that instructors in different courses can use to demonstrate integration of mobile, web, and
database services developed with free and open source software. QuizPower development
process produced a framework that integrates App Inventors Web component services with a
SQL database via a PHP web application. This framework has two advantages: (1) uses free and
open source software and (2) provides a streamlined and expressive alternative to App Inventors
native TinyWebDB services.

1 INTRODUCTION
1.1 Background
Starting Spring 2013, a mobile computing course for all majors became part of the general
education course offerings at our institution. The course teaches computational thinking in the
context of solving problems of social and environmental relevance. Its emphasis is on issues of
inclusiveness and diverse cultural backgrounds, life experiences, and talents that all students
bring to class. Students learn how to create apps for Android mobile devices with App Inventor,
a visual blocks-based programming language and development platform [1].
Coupled with a studio-based teaching and learning model [2], the use of App Inventor
and mobile devices suggests a positive effect on student motivation, creativity, achievement, and
attitudes towards computer science [3]. The pedagogy used in our mobile computing course was
further inspired by the scaffolding approach to learning supported by the course textbook, App
Inventor: Create Your Own Android Apps [4]. In this model, students progress through four
learning stages: Build Customize Conceptualize Create. From drafting the apps user
stories in the Designer and practicing with components and blocks while following tutorial steps,
students are then engaged in making their own customizations. At this learning stage, concepts
are introduced and explained more effectively, in a familiar context, for the purpose of enabling
learners to create their own apps.
Students in our course became proficient with building apps by following tutorial
instructions. The use of peer learning helped them meet customization requirements. What
remained a challenge was conceptualizing programming language constructs and design
techniques. Conceptualizing is critical for scaffolding competencies with which students create
apps from descriptions of user stories and apps functional features. To help students achieve
conceptual learning outcomes, homework assignments and creative project iterations were
enhanced with worksheets that required students to practice test questions.
Retrieval, as a learning activity, has been found to be a powerful way to enhance
conceptual learning in science [5]. We made retrieval practice an integral part of the class
learning activities. The course instructor (first author of this paper) created several worksheets
with over 100 questions. A senior in our computing program (second author of this paper), who
is also a student tech consultant in our department, assisted students with homework and
programming questions. Between the two of us, there were plenty of opportunities to learn about
student difficulties with concept comprehension from in-class activities, tutoring and help
sessions, and class forum discussions.

1.2 Objectives
Our quest for composing relevant questions and improving clarity and conciseness of the
answers gave us the idea of QuizPower, a mobile app to guide students through a self-directed
assessment and practice with test questions. Initially, the QuizPower project had two objectives:
(1) develop a self-quiz mobile app to engage students to study and practice and (2) formulate a
substantive case study of a mobile app project with educational relevance for students. The
resulting prototype (Figure 1) allowed students to:
Access questions organized by topics and select specific topics for study
Review questions from selected topics in random order
Answer question and compare with the apps answer
Self-assess answer quality and remove question from further study if answered adequately.

Figure 1 QuizPower user experience scenario.

The project had three non-functional requirements: (1) prototype QuizPower with App Inventor;
(2) use a web data store for quiz questions and answers; and (3) use only free and open source
software tools and applications.

1.3 Limitations
From the very beginning, we opted for using a web data store to reduce coupling between
the QuizPower application logic and representation of quiz questions, answers, and topics.
TinyWebDB enables communication between the app and a specialized database on the web that
stores data as (tag, value) pairs. As shown in Figure 2, its methods allow for tagged values to be
placed into and retrieved from a database. The database can be stored in a Python runtime
environment on the Google App Engine infrastructure using the appspot.com domain. There are
a number of limitations with this solution. The default web service that supports TinyWebDB
operations (http://appinvtinywebdb.appspot.com) limits the number of database entries to 250
and database values to 500 characters.
 When we made the design
decision to create a custom web
service1 (http://xxx-
apps.appspot.com), we observed
new barriers: (1) time performance
was deteriorating with the increase
of the size of the question pool
from selected topics; (2) web
service operations to manipulate
database content and structure
were tedious and time consuming.
Figure 2 Data web service with TinyWebDB component. Given these restrictions, our focus
shifted to a relational database
solution that integrates SQL with App Inventor. The choice of a SQL web data store brings to
bear all the advantages of an independently designed, implemented, and maintained SQL
database.
In the rest of the paper we describe the architecture and implementation of an application
that integrates App Inventor development - supported by App Inventor 2 programming language
and platform, with SQL database services - supported by a cross-platform software solution
stack, XAMPP, that bundles Apache web server, MySQL database server, and PHP processor.
The applications architecture can be easily generalized into a framework for enhancing App
Inventor applications with SQL databases. We conclude with outlining the frameworks
elements and some preliminary applications.

2 QUIZPOWER ARCHITECTURE
2.1 User Interface and Components
We developed the project in spring 2013 over a ten-week time period using an agile software
development approach with weekly sprints. After we sampled student questions and answers
from a variety of sources (class forum, in-class lab activities, student assignment self-
evaluations, and help sessions), we organized the questions into sixteen topics.
We wrote user stories, sketched user interface mock-ups, and came up with a user interface
organized by three pages: topic page with buttons for all sixteen topics and selection/start quiz
buttons; question page to display each question, and solution page to allow users to enter their
answers and do simple self-assessment: review correct answer, remove from further study if
answer was good enough, and continue self-quizzing.
The foundation of the apps developed in App Inventor is a rich library of component
classes. Component instantiations from these classes are objects that perform the apps work.
App Inventors Component Designer tool is used to design the structure of the app in terms of
components that define the user interface (buttons, text fields, layouts, etc.) and a wealth of built-
in, device-specific functional features (texting, phone calling, contact search, sensors, camera,
players, etc.). Figure 3 shows most of the components in the QuizPower app. Except for the
AnswerNotifier and WebService components, all the other components model the apps
interface.

1
http://appinventor.mit.edu/explore/content/custom-tinywebdb-service.html

Figure 3 QuizPower components with three corresponding UI elements

2.2 Web Data Store Integration

2.2.1 Interfacing App Inventor Web Component with a PHP Application
Google App Engine supports a SQL database instance with the Google Cloud SQL service. This
is a fully managed web service that offers a scalable MySQL database running on Google
infrastructure. Although it met
our performance and usability
needs, this was not a free and
open source software solution2.
The solution we were interested
in was to integrate our own
instance of a MySQL database
server with App Inventor. To
establish communication
between the QuizPower app and
a SQL database, we used the
App Inventor Web component.
Figure 4 Data web services with the Web component
The object WebServices
instantiated from the Web
component performs HTTP GET requests and retrieves all requested questions from the database
for the selected topics as shown in the sequence diagram in Figure 4.
WebService.get( ) request is executed with the URL of a PHP application that talks with
the SQL database, http://<hostname>/index.php?<query string>. When a response to the request
is received by the mobile app, gotText( ) event is raised with the following information: URL of
the original request, HTTP status code (e.g., 200 means OK), MIME type of the response, and
response content. The query string in the URL of the PHP application has (key, value)

2
At Google I/O in May 2013, Google announced support for PHP runtime in Limited Preview for Google App
Engine. By that time, though, we had already started implementation using the department infrastructure.
information that sets up and initializes the $_GET associative array in the PHP run-time
environment. For example, if selected topics are events and lists and the course is
CSXXX, then the query string has the following (key, value) pairs:
http://<hostname>/index.php?topics=events,lists&course=CSXXX
The corresponding keys and values of the PHP associative array $_GET are:
$_GET[topics]=events,lists, $_GET[course]=CSXXX.
2.2.2 Interfacing the PHP Application with a SQL Database
Course, topic, question, and answer related data are stored in a 3NF SQL database with four
relational tables, Course, Topic, QuestionAnswer, and QuestionTopicMapping (Figure 5).

Figure 5 SQL data model for representing questions and answers for various course topics.

To perform a SELECT query that uses data from columns in all four table: courseName,
topicName, question, and answer columns, the tables are first joined in a SQL view. The query
applies filtering conditions on the view and retrieves (question, answer) records.
CREATE VIEW questions_vw AS
SELECT qa.question, qa.answer, t.topicName, c.courseName SELECT question, answer
FROM QuestionAnswer AS qa FROM questions_vw
INNER JOIN QuestionTopicMapping AS qtm WHERE topicName=events
ON qtm.questionID = qa.questionID OR topicName=lists
INNER JOIN topic AS t ON qtm.toipcID = t.topicID AND courseName= CSXXX
INNER JOIN course AS c ON tcourseID = c.courseID
The PHP application has one file, index.php. Its main purpose is to prepare, execute, and
fetch results from the SELECT query. We used mysqli improved extension3 to establish a
connection from the PHP application to MySQL, and object-oriented style prepared statements
to protect from SQL injection4. In essence, retrieved (question, answer) records are stored in a
PHP indexed array of associative arrays with question and answer keys. The array is parsed
to create a dynamic page that the Apache HTTP server instance serves back to the App
Inventors Web component via responseContent argument of the GotText event (Figure 4). The
dynamic page uses special markers to separate question and answer content and separate
(question, answer) records. App Inventor parses the text in responseContent using the special
markers to create App Inventors question and answer lists.

3 FRAMEWORK TEMPLATE AND APPLICATIONS

QuizPower example can be easily generalized into a framework template that defines a simple
way of extending App Inventor mobile apps with SQL database services. The framework uses
free and open source software and integrates: (1) a mobile app developed and packaged with
App Inventor and running on Android devices, (2) web app running in an Apache and PHP
environment, and (3) SQL database running in a MySQL database server. Apache web server,
PHP processor, and MySQL database server applications are bundled in a web server solution
stack, XAMPP, from Apache Friends. The Web component in the mobile apps architecture

3
http://dev.mysql.com/doc/refman/5.7/en/apis-php-mysqli.html
4
Source code for the PHP and SQL scripts are available from the projects repository.
gives the mobile app web client capabilities. Thus, the mobile app makes HTTP GET requests to
a web resource specified in the Web components URL. The web resource URL identifies the
web apps host and has a query string to encode filtering conditions for the database search.
The web app is written in PHP and retrieves the filtering conditions data from the $_GET
associative array. The arrays keys and values are mapped to the query strings key and value
pairs. The PHP web app uses mysqli driver API to prepare SQL statements for the database with
the information from the $_GET array. The data retrieved from the database are assembled in a
dynamic page that Apache serves back to the mobile app. The content of the dynamic page has
records from the database. Each record has values from the table columns that are retrieved with
the SELECT query prepared statement. Successful arrival of page content to the mobile app
raises the App Inventors GotText event, which is handled by the Web component. The fourth
parameter of the Web.GotText( ) event handler has the text of the dynamic web page. The
mobile apps implementation parses the page content and builds appropriate lists for further
processing.
To use this framework we configured a virtual machine on a departments server that has
a XAMPP installation. Student accounts are set up to give remote access to MySQL database
server and document root folders on the Apache server. Students design and deploy databases for
their mobile applications and upload PHP code that translates URL query string (key, value)
pairs into filtering conditions for SQL prepared statements. In two courses in Fall 2013 student
team projects focused on water quality, resources, and management issues. Datasets from the
citys lake reservoir and water plant were migrated into SQL databases. Students prototyped
mobile apps to improve water plant operations by collecting and processing data of interest.

4 CONCLUSION
The end result of this project is a quizzing app for Android devices developed with App
Inventor and integrated with a SQL database via a PHP application. The advantage of this
architecture is that each user session is dynamically configured by the information in the MySQL
database. In its current state, QuizPower satisfied the initial objective of providing students a
self-directed learning tool. Furthermore, QuizPower offers students a relevant case study about
rapid prototyping a frontend with App Inventor and backend with MySQL by integrating
different free and open source software tools and applications. The proposed App Inventor and
SQL integration framework can be used in different courses, whether mobile computing,
database design and development, or web app development.

4 REFERENCES
[1] MIT Center for Mobile Learning, MIT App Inventor, http://appinventor.mit.edu. 2013.
[2] Brown, J.S., New Learning Environment for the 21st Century: Exploring the Edge, Change
(September/October), 2006.
[3] Ahmad, K. and Gestwicki, P., Studio-based learning and App Inventor in an introductory CS
course for non-majors, Proceedings of the 44th ACM technical symposium on Computer
Science education (SIGCSE13), 2013.
[4] Wolber, D., Abelson, H., Spertus, E., and Looney, L., App Inventor: Create Your Own
Android Apps, OReilly Media, 2011.
[5] Karpicke, J.D. and Blunt, J.R., Retrieval practice produces more learning than elaborative
studying with concept mapping, Science, 331 (6018), 772-775, 2011.