Professional Documents
Culture Documents
FHTW Berlin
Fachbereich 4
Wirtschaftswissenschaften II
Internationaler Studiengang Medieninformatik
2 Objective ................................................................................................2
6 Analysis
................................................................................................16
6.1 Required Functionalities
..................................................................................16
8.9 Odds and Ends (or Close Encounters of the Third Kind) .................................41
9 Tests .....................................................................................................43
10 Summary ............................................................................................44
Glossary .....................................................................................................i
Bibliography ..............................................................................................iii
Illustrations ..............................................................................................vii
Appendix
..................................................................................................ix
List of Used Interface Design Patterns
....................................................................ix
Eigenständigkeitserklärung
......................................................................................1
1 Introduction
Computer science students are essentially facing two major tasks in their first semesters.
Matthew Butler and Michael Morgan, Faculty of Information Technology at Monash Univer-
sity, Melbourne, Australia state:
“It is one of the challenges of teaching programming that the balance must be found
between providing support for the low level issues, such as the syntax needed to im-
plement programming functions that allow students to see concrete examples of pro-
grams work in action, while still covering highly complex conceptual areas such as ob-
ject orientation, that allow efficient program design techniques.” [10, p.101]
No matter whether low level or high level—immediate feedback for learners is an extraordi-
narily important topic in every learning environment. No one wants to wait for hours or
even days to get to know the results of her work. Especially in the case of programming ex-
ercises where missing semicolons, commas or other hardly visible—sometimes even invisi-
ble—characters can be accountable for success or failure, immediate feedback is essential.
To obtain a working program, there is more than correct syntax. Syntactically correct code
can still provide completely wrong results. That is where test cases come into play. With their
help it is possible to verify if the expected results are according with the actual results.
Unfortunately test cases are not automatically available, they have to be written. This is a
difficult problem for programming novices. They are struggling with the odds and ends of
the programming language, so learning to use unit test frameworks at the same time is often
beyond their scope. Testing without using unit test frameworks is often tedious. Too often
the result is not testing at all.
The application to be developed not only provides teachers with the possibility to specify
relevant test cases for their programming problems, it even forces them to do so. Students on
the other hand are forced to run their code against those test cases. Thus they immediately
get feedback, still not on the quality of their code, but at least on its accuracy. Since they are
not yet familiar with the syntax of code they should not be additionally concerned with test-
ing. The application will support them to learn step by step and maybe they even get an idea
of the benefits of unit tests at an early stage in their careers.
1
2 Objective
Said Hadjerrouit points out one of the principles for the design of learning environments:
The objective of this thesis is to develop an application helping students to actively construct
and practice their low level routines. It will provide an interface for teachers by which they
can generate programming problems and supply them with descriptions for various human
languages, code samples in various programming languages, and test cases to verify the ac-
curacy of solutions provided by students. In the beginning this application will support Java,
Python, Ruby, and C++. Later on it will be possible to extend this list with more program-
ming languages. Section 5.1 will discuss this issue in depth. The application will manage all
the necessary file system and database operations. It also will operate security checks on the
provided student code. Section 8.2 will discuss this aspect in detail.
On the students’ side, the application will provide an interface to enter, save, compile, run,
and test methods. The application will embed these methods in a class. It will not be possible
to supply classes or other Object Oriented Programming (OOP) structures. From now on
these methods will be called solutions. Again, the student only has to enter her solution
while the application takes care of all the necessary file system and database operations.
Teachers also will be able to provide solutions. These will be called sample solutions or code
samples, depending on the context: a sample solution being a fully functional entity on the
server’s file system while a code sample is a string of source code stored in the database,
which optionally can be displayed to the student if she needs help. To generate a sample so-
lution, a code sample is mandatory.
A minimal user management will be provided. Available user roles will be either teacher or
student. Teachers will register as students first. They can then be upgraded to teachers from
the administrator.
Subsequent sections will use the terms front end and back end in a way that front end de-
scribes the components of the application that is directly visible to the users, no matter which
role these users have. Whenever necessary it will be differentiated between the teachers’
view and the students’ view. The term back end will be used to describe the part of the ap-
plication that handles the activities happening on the server’s file system.
From now on the application will be called SuperBat. Sections 3.1 and 4 will explain why.
2
3 Status Quo – Existing Applications
3.1 JavaBat
JavaBat, developed by Nick Parlante of Stanford University, Palo Alto, California, USA, is the
direct inspiration for SuperBat. It is a problem
based online live coding application. Each
problem consists of a problem statement or
description, which should be as precise and
unambiguous as possible, an input field where
students can enter their solution, and some
test cases against which the code is run. [36]
“By ‘large’ I mean the sweeping, strategic issues of algorithms, data structures, ... what
we think of basically as a degree in Computer Science. You also need skill in the ‘small’
-- 10 or 20 line methods built of loops, logic, strings, lists etc. to solve each piece of the
larger problem. Working with students in my office hours, I see what an advantage it is
for students who are practiced and quick with their method code. Skill with the
method code allows you to concentrate on the larger parts of the problem, or put an-
other other way, someone who struggles with the loops, logic, etc. does not have time
for the larger issues.” [36]
JavaBat’s intention is to train the skills of programming in the ‘small’. Later on in this section,
‘BlueJ’ will be discussed, which is aimed more at skills of programming in the ‘large’. JavaBat
tries to provide an environment where students can focus on these small things without hav-
ing to think about the ‘large’ at all. It is all about practicing the basic structures. The target
audiences are high school and first and second semester students at universities.
3
The following screenshots provide a survey for a typical workflow on JavaBat:
4
According to Nick Parlante:
“The name of the server is JavaBat, based on the Greek word ‘bat’ meaning ‘this do-
main was available’“1 [36]
JavaBat only supports English and Java, currently it does not provide an interface for other
teachers to add problems. This will be featured in JavaBat’s upcoming next version.
1 According to the Greek-English online dictionary kypros.org, this is not quite right. Bat or βατ in modern Greek
translates as Watt (as in James Watt). (http://www.kypros.org/cgi-bin/lexicon, Retrieved: 12/18/2008)
5
3.2 BlueJ
Another application to teach programming is ‘BlueJ’ by Michael Kölling. It was developed as
a part of a University research project about teaching object orientation to beginners. It is
currently maintained by a joint research group at Deakin University, Melbourne Australia,
and the University of Kent in the UK.
“One of the fundamental characteristics of BlueJ is that you cannot only execute a
complete application, but you can also directly interact with single objects of any class
and execute their public methods. An execution in BlueJ is usually done by creating an
object and then invoking one of the object’s methods. This is very helpful during de-
6
velopment of an application – you can test classes individually as soon as they have
been written. There is no need to write the complete application first.” [30, p.9]
These are just some basic features of BlueJ. It is a very interesting project, especially its auto-
mated testing feature is definitely worth having a look at. To do this is far beyond the scope
of this thesis. More information on this topic can be found at Kölling, The BlueJ Tutorial [29]
and Kölling, Unit Testing in BlueJ [30] .
A BlueJ plugin for ‘Netbeans’ is available which is meant to help students to switch from
BlueJ to a full-blown IDE at some point.
3.3 Greenfoot
Greenfoot is a learning environment developed, especially for animation and games pro-
gramming. It is another project by Michael Kölling, Deakin University, and the University of
Kent. To discuss it here is beyond the scope of this thesis. Further information can be found
on the Greenfoot homepage. [25]
7
4 Why SuperBat?
Currently JavaBat is free for anyone to use, but lacks the option for teachers to provide prob-
lems of their own and it does not offer multi-language support. The initial idea was to coop-
erate with Nick Parlante on JavaBat; to obtain the sources and to add the missing features.
This was presuming that JavaBat would be available under the terms of any flavor of open
source license. It turned out that this presumption was wrong. Mr. Parlante is planning to
commercialize JavaBat and therefore did not want to pass on the sources. He is working on a
new version himself, which will offer an elementary problem editor for teachers. It was
planned to cooperate in testing2 the application’s new features. As first, the new problem edi-
tor still would not offer multi-language support and second, working on the test cases alone
soon appeared to be a bit lean for forty pages of a bachelor thesis, it was decided to start
working on SuperBat instead. A simple reverse-engineering of JavaBat plus adding a prob-
lem editor would have been rather senseless as Javabat’s next version will provide this fea-
ture. Multi-language support was considered trivial. Therefore it was decided to spice things
up by adding not only multi-language but also multi-programming-language support. The
application’s name—SuperBat—has been chosen as a tribute to JavaBat, expressing Super-
Bat’s extended capabilities.
2 In the end, instead of supplying Nick Parlante with test problems for JavaBat, some of the JavaBat problems
were used to test SuperBat. The problems and code samples visible in some of the screenshots, etc., often are
derived from the following Javabat problems (http://www.javabat.com/prob/p187868, Retrieved: 02/20/2009),
(http://www.javabat.com/prob/p181646, Retrieved: 02/20/2009), (http://www.javabat.com/prob/p159531, Re-
trieved: 02/20/2009), (http://www.javabat.com/prob/p101230, Retrieved: 02/21/2009)
8
5 Technology Selected
It was decided to use a mix of technologies to use the advantages of each to optimize the
quality of the result as well as the length of the development time. Ruby on Rails was chosen
for implementing user interfaces (UI) and database operations. Server side file system opera-
tions are handled with simple shell scripts or—whenever things get more complex—with
Command Line Interface (CLI)3 PHP. The students’ solutions are tested with JUnit test cases.
The selected Database Management System (DBMS) is ‘SQLite’.
In 2008 three new candidates appeared on the scene. Google’s Protocol Buffers [21], Cisco’s
Etch [5], and Facebook’s Thrift [4]. The decision for Thrift was essentially based on a post on
Stuart Sierra’s blog [45] and the discussion of RPC packages on Steve Vinoski’s blog [58].
5.1 Thrift
Thrift was developed at Facebook, open sourced in 2007 and added to the apache incubator
in 2008. [4] The assets of Thrift were that it supports more programming languages than any
other candidate—as this was the original reason to work with some sort of RPC proto-
col—and its extremely lightweight nature. The drawback is the lack of documentation. The
Wiki on the Thrift homepage is very poorly maintained. There are hardly any tutorials to
find. Reading the sources helped a lot in this case as they contain a decent little demo project,
which can easily be adapted. Protocol Buffers and Thrift are said to be very similar; Mark
3 PHP used on the System command line. In contrast to the Apache module PHP. An introduction to CLI-PHP can
be found here: (http://www.ibm.com/developerworks/opensource/library/os-php-command/index.html, Retrieved:
02/14/2009)
9
Slee4 , Facebook’s technical lead on the Thrift project had worked on Protocol Buffers during
his internship at Google before5.
Thrift uses an interface description language (IDL) file to generate the bindings for a wide
range of programming languages. The concepts and constructs supported by Thrift are
namespaces, base types, constants, enumerations, structs, containers, typedefs, services,
asynchronous function invocations, and exceptions. The syntax is similar to C++. Thrift does
not support cyclic structs (structs containing themselves), inheritance and polymorphism,
and heterogeneous containers. A function cannot return NULL directly. To achieve an
equivalent result it (the NULL Object) either has to be wrapped in a struct or a marker value
has to be returned instead. Thrift supports the primitive types that are common in program-
ming languages such as bool, byte, i16, i32, i64, double, and string. Furthermore it supports
structs, which are equivalent to C/C++ structs. The struct concept is similar to the class con-
cept in OOP languages. Structs however, do not support inheritance. The elements and struc-
ture of a struct are described in the ThriftIDL file. Thrift supports three container types. List,
set and map. Each of these containers expects the type of its future content elements. The
elements may be of any valid Thrift type whereas the keys of a map should be of a primitive
type for compatibility issues. The list translates to a std::vector in C++, an ArrayList in Java,
and native arrays in the supported scripting languages. The set translates to a std::set in C++,
a HashSet in Java, or a set in Python. The map translates to a std::map in C++, a Java Hash-
Map, an associative array in PHP, or a dictionary in Python/Ruby. Thrift exceptions integrate
seamlessly with each language’s native exception handling. Services are Thrift’s equivalent
to Java interfaces and C++ pure virtual abstract classes. Void is a valid return type and func-
tions can be declared ‘async’ if they do not have to wait for a response. [46]
Having installed the Thrift compiler, it is a straightforward process to use Thrift in an appli-
cation. The minimal requirement is a single ThriftIDL—or .thrift—file. This has to be written
manually6. Recurring tasks can be outsourced to separate services in separate .thrift files. To
4 On blip.tv a video is available showing Mark Slee and David Reiss presenting Thrift at the Seneca FSOSS sym-
posium in 2007 (http://blip.tv/file/446822, Retrieved: 12/20/2008)
5 Amongst others, some of the comments on Stuart Sierraʼs blog are claiming this
(http://stuartsierra.com/2008/07/10/thrift-vs-protocol-buffers#comment-32039, Retrieved: 02/14/2009)
10
access the facilities of an external service, services can extend each other. This concept is simi-
lar to inheritance in object oriented languages. Once these files have been written they just
have to be processed by the Thrift compiler,
which will generate the necessary code for
each specified programming language. These
generated files are bundled into directories,
which are named according to the program-
ming languages: ‘gen-java’, ‘gen-py’, ‘gen-
cpp’, etc. While the number, the nature, and
the content of these files is dependent on the
programming language for which they are
generated, their purpose and mode of opera-
tion is always the same. They wrap around the
variables, constants, methods, etc. specified in
the .thrift files, thus translating the specific
data types of each programming language
into a common idiom. At this point the foun-
dation is set to write the server and the client
files.
“Appreciable reduction in the code lengths and volume that enhances the speed of the
project completion is seen with Ruby. Lessening the debugging pressure of the pro-
grammer, work moves at a smoother rate and more relaxed. Independent threading
facility, irrespective of the operating system and the highly portable nature enhances
the user-friendly nature of Ruby. [...] Ruby creates an environment that makes the pro-
11
grammers to work more clearly, faster and be more meticulous and highly imagina-
tive.” [1]
Ruby itself is an interesting language, but this alone will not speed anything up. It actually
slows down the development process if the developer has to learn a new language first. The
main reason why working with Ruby was supposed to speed up development was the Rails
framework. This turned out to be true only at the very beginning. Later on, the lack of expe-
rience with the language and the framework slowed down the proceedings by almost the
same amount. This lack of experience cannot be blamed on Ruby or Rails.
While the core of the Ruby language, as well as the Rails framework is documented ex-
tremely well, some of the plugins are documented rather poorly. This unfortunately, is a
problem known in all programming languages. Some aspects of Rails’ best known paradigm
‘convention over configuration’ sometimes tend to be a mixed blessing for novices when
they go astray from the trail blazed by Rails. With hindsight, from a speed of development
point of view, considering the developer’s previous knowledge, it might have been a better
idea to use one of the PHP alternatives to Rails such as cakePHP [11] or symfony [51]
During the development process the question of scalability in the context of Rails applica-
tions was raised a couple of times. Gary Pollice of Worcester Polytechnic Institute (WPI),
Worcester, Massachusetts, USA, a sceptic himself:
“I've seen too many tools that promise great productivity gains. They look good on
‘toy’ projects, but fail horribly when you apply them to real problems.” [42]
describes the excellent experience one of his colleagues at WPI made with Rails:
5.3 Mongrel
To deploy Rails applications various options are available. The most convenient one is to use
‘WEBrick’ as this is the default server that is delivered with Rails. According to various
benchmark tests [31, 34] Mongrel seems to be the faster and more scalable Ruby deployment
server. As little additional effort was required it was decided to switch to Mongrel right from
the beginning. Later on in the production version Apache2 could be used as a load balancer,
serving several Mongrel instances. [27]
12
5.4 SQLite
It was convenient to keep SQLite as the Database Management System in SuperBat’s devel-
opment version as it is Rails’ default DBMS. 7 On a productive system it probably should be
replaced by MySQL or another full scale database.
5.5 AJAX
Using AJAX, small portions of the page content can be updated while the larger part of the
page does not have to be reloaded. This of course improves the application’s responsiveness
as less data has to be sent from the server to the client. While at some points similar effects
might have been achieved using e.g. frame-sets, AJAX offers another advantage: using little
animations, the user’s attention can be directed to those parts of the webpage that have been
changed. If this technique is deployed very carefully it improves the application’s usability,
however it rapidly exhausts the user’s attention when it is overused. Both techniques, AJAX
and frame-sets, have similar drawbacks. Pages cannot be bookmarked precisely and the
functionality of the bowsers ‘Back’ button is reduced. Some clients, such as mobile phones,
also tend to have problems with AJAX sometimes. To support those, a separate, less complex,
more linear GUI will be necessary but this is not considered to be a major problem. Due to
Rails’ MVC architecture a separate view could be accomplished rather easily if the demand
for a mobile implementation will arise. It comes very handy that Rails has a convenient built-
in AJAX support. The ‘prototype’ framework and ‘script.aculo.us’ effects are delivered with
Rails as well as Rails methods such as link_to or form_for can easily be replaced by remo-
te_form_for or link_to_remote in case links or forms are not supposed to reload the com-
plete page.
5.7 JSON
Test cases and method arguments are stored in the database in JSON format. JSON is a
lightweight data interchange format. [13] Implementations are available for a very wide
range of programming languages. Its human-readability is sufficient, as Subbu Allamaraju,
Principal Engineer at Yahoo! Inc. notices:
7 One of SQLiteʼs drawbacks during development is that reliable SQLite User Interfaces, at least for Mac OS, are
hard to find. MesaSQLite, SQLite Database Browser, and the Firefox SQLite extension tended to stay out of date
when contents were inserted or deleted. The Terminal never failed.
13
“one could easily argue that JSON is as human-readable as XML - provided both are
pretty-printed” [2]
While creating JSON is as easy as creating XML, evaluating JSON is far less annoying than
fiddling about with XML in most programming languages. [2] In SuperBat’s current state,
teachers have to provide the method arguments and test cases directly in JSON notation.
This of course is not a usable solution. Several options to find a better solution to this prob-
lem will be discussed in section 7.1.
5.8 JUnit
As during the projects initial phase testing was a core task, several unit testing frameworks
were examined. Finally it was decided to use JUnit 3 to handle the testing of students’ solu-
tions. SuperBat uses only a fraction of its features anyway, so JUnit 3 is more than sufficient
to accomplish these simple tasks.
5.9 Ubuntu
It was decided to use an Ubuntu 64-bit server. Ubuntu is easy to install and very well docu-
mented. This server was installed on a VMWare Virtual Machine running on a Mac OS X
host system. The constellation promised faster development times than using an internet
based server. Furthermore, it provided the required privileges and could have been easily
restored if things had gone wrong. The drawback was that it would have required additional
effort to make it accessible by the internet. This never became necessary, however. Working
on a virtual machine turned out to be extraordinarily convenient. The state of the machine
can be paused and reloaded very quickly at any time. Lengthy system shutdown or boot
procedures could be omitted most of the time. Additionally by using ExpanDrive, an sshfs
client for Mac OS X, the functionality of a Linux server could be combined with the ease of
use of the Finder. To select the 64-bit version turned out to be a rather rash decision. The
amount of hardware able to run the virtual machine was thereby drastically reduced. There-
fore it has been decided to reconsider this decision and to set up a new development server
running a 32-bit Ubuntu server system.8
14
5.11 SVN
SVN has been chosen as the version control tool as it is well known to the author. More re-
cent developments such as Git have been considered but discarded as the project contains
enough experiments in other sectors. As only one developer was involved in the project and
all the development took place on a single machine, the advantages of Git would no longer
have much effect. Git had to be installed on the server later on as many Rails plugins are us-
ing it to distribute their downloads.
15
6 Analysis
This section will highlight the application’s essential functionalities and the database analy-
sis and design phases. Figuring out the essential front end functionalities, especially for the
students’ view, has been achieved by reverse-engineering JavaBat. The teachers’ view and
the way problems and solutions are stored on the file system, however, had to be developed
from scratch. Probably the most delicate task at the very beginning, was figuring out when
and in what hierarchy problems and solutions will be stored on the file system. Figure 11
shows an early attempt to structure this problem.
16
to be handled somehow. Logged in students
will be able to save their solutions. This can be
achieved in two ways: either the solution’s
complete file structure will be kept on the
server’s file system or only the piece of code
written by the student will be saved in the da-
tabase. The file structure will then have to be
generated anew each time the student runs
her code. Regenerating the file structure will
slow down the system, especially in stress
situations. On the other hand, this will save a
large amount of disk space when many stu-
dents are using the system frequently. An av-
erage Java solution claims approximately 100 -
150 KB. Solutions for scripting languages
claim a little less disk space. In an average
Moodle course9 at FHTW this would sum up
Figure 11 Model: First Attempts to Dispel the Dark- to approximately 300 MB of disk space for the
ness complete course. This seems not much at first,
but it will accumulate after several courses
and therefore will need to be watched closely in a future ‘public’ beta version. The problem
gets worse if the system is not constrained to students of a certain university, but is publicly
available instead, as is JavaBat.
When many students are compiling and running their code at the same time it will stress the
server. At this point it might turn out to be a good idea that all the file system operations
have been strictly separated from the front end application. It should be rather easy now to
distribute this part of the application to separate servers. Another possibility to speed up the
file generation process, would be to replace the PHP scripts with some kind of C code. Then
again the time consumed with file generation is nothing compared to the time spent compil-
ing the sources or generating the Thrift code, files, etc. Switching to a faster language would
not help at all in this case.
The Rails front end can be distributed as discussed in section 5.3 if necessary.
9 Given 20 students, each solving 100 problems. Admittedly the size of the course is probably bigger than aver-
age and these students are extremely diligent.
17
ring questions was whether to implement SuperBat as a standalone application or as an i.e.
Moodle plugin. This is reflected in the various stages of the database design. Figure 12 shows
the Entity Relationship Model (ERM) for the full scaled database version. This version in-
cludes assignment lists and a simple
user management. It was decided to
start with a leaner and less elaborate
model, however. The complete as-
signment list complex has been re-
moved. At the beginning of the de-
velopment process, the user man-
agement was also removed.
Finally a basic authentication and user management module was put back into the applica-
tion. The Rails plugins ‘restful_authentication’ [20] and ‘role_requirement’ [24] were in-
cluded to provide the application with more flexibility. These plugins added the tables
‘roles’, ‘roles_users’, and ‘users’ to the database.
In most cases there is no need to access the database directly when working with Rails and
SQLite. Operations that are meant to be persistent are better applied using migrations10, oth-
erwise they will be lost if the database is migrated the next time. [28]
10 So called migrations are Ruby scripts to do database operations such as creating tables, etc. The process of
executing these scripts is called to migrate the database.
18
A basic knowledge of how to access a SQLite database directly is essential, however. As pre-
viously mentioned all the tested GUI clients were unreliable. Therefore the Terminal was
used to peek into the database. The following provides the most basic commands to control
if the database is in the expected condition.
First, switch to the Rails project’s database directory and open the development database:
cd /path/to/railsroot/db/
sqlite3 development.sqlite3
sqlite>
The following commands retrieve the existing tables (please note the period in front), show
information about a certain table (note the semicolon), and exit the program (period again):
sqlite>.tables
sqlite>PRAGMA table_info(table_name);
sqlite>.exit
These commands plus the standard SQL statements such as ‘SELECT’, etc., will be sufficient
for the majority of cases. Further information can be found in the SQLite documentation. [47]
19
7 Design
To define a clear boundary between user interface and user interaction has been difficult in
some cases. Section 7.1 will discuss the more detailed aspects as to what happens if a certain
button gets clicked, while section 7.2 will highlight the larger scale aspects such as work-
flows, etc.
“Project methodologies often fail to take full advantage of what is known about inter-
face design. This omission can be the result of bringing in interface designers long after
much of the opportunity for improving the quality of interaction between user and
product has been lost. Designs are most flexible at their inception. If interface designers
are consulted only after the software has been designed and the software tools chosen
or when the software is nearly complete, the correct advice—namely, to start over—is
unacceptable.” [43]
At any time during the application’s development process it was attempted to synchronize
the application’s requirements with the users’ needs. Right at the beginning of the develop-
ment process several basic layouts had been
considered. Not least, depending on these
layouts, the tool to implement the applica-
tions’ front end has been chosen. In case the
front end would have become more complex,
it was considered to use Flex instead of Rails
to handle the front end tasks. It has been ob-
served during an earlier project that creating
complex interfaces can be done very effi-
Figure 14 GUI Design: Version 1—Studentsʼ View
The solution has successfully passed all tests. ciently with Flex. Finally the decision to use
The test results are on display Rails was made due to its ability of almost
➊ ʻSearchʼ for direct access to problems
automated generation of standard database
➋ Category short description. Appears when the user
hovers over the list entry with the mouse pointer. operations and the application’s rather simple
➌ Test result table (screenshot from JavaBat) user interface.
➍ The top navigation bar for additional functionalities,
such as about, help, login, register, etc. The design patterns that are used to describe
SuperBat’s UI elements in the following sec-
20
tion, are referring to Jenifer Tidwell’s book ‘Designing Interfaces - Patterns for Effective In-
teraction Design’ [56]11.
JavaBat’s user interface is very simple and straightforward. With a growing number of cate-
gories and problems this approach will eventually reach its boundaries. It was attempted to
keep this simplicity and straightforwardness, while expanding the scalability of the applica-
tion’s UI in the context of growing amounts of
content. The idea of bundling problems into
categories was kept, as well as the elements
that are displaying sample solutions and test
results. These two elements were separated
from the page’s main window into floating,
draggable layers, to make way for the addi-
tional necessary language and programming
language selectors. JavaBat’s ‘one-window
paging’ model [56, p.28ff], was replaced by an
extended ‘two-panel selector’ pattern [56,p 29,
31], which is familiar from various documen-
tation and reference pages as for example the
Java API Specification [50]. Instead of using a
frame-set, AJAX was applied to update the
contents of the panels. Additionally, at the top
Figure 15 GUI Design: Version 1—Studentsʼ View of the categories list, a search field is provided
Code sample on display.
as a short cut for more experienced users (Fig-
➊ List of categories
➋ List of problems, belonging to the selected cate- ure 14–➊). The categories and the problems
gory list make use of the ‘row striping’ pattern [56,
➌ Description of the selected problem
p.187ff] to visually separate the rows. The se-
➍ Text area to enter a solution
lected row will be highlighted with a third
➎ Floating layer displaying a sample solution (hidden
by default) color.
➏ Save, run, compile button
➐ Selectors for description language and program- The change in the main navigation model
ming language from ‘One-Window paging’ to a ‘Tiled Pane’
implies that there will be less room for some
elements. For instance there is not enough room left to initially display each category’s de-
scription. These descriptions will now be displayed in a floating layer when the user hovers
over the category’s list entry with the mouse pointer (Figure 14–➋).
Figure 15–➐ shows the two language selectors. Whenever a new language is selected the
contents of the according HTML element will be updated. The selectors are placed on large
21
arrows, indicating which parts of the page will be affected. Additionally an AJAX ‘Shake’
effect is applied to the affected element to focus the users attention on this area. Currently the
Figures 14 and 15 show an early version of Figure 17 Screenshot: Problem Creation Interface
Early unformatted Rails implementation..
the discussed elements and concepts ap-
➊ Category selector
plied to the students’ view of the applica- ➋ Text input: problem name
tion while Figure 16 displays the teachers’ ➌ Text input: return type (to be replaced by a selec-
tor)
view. At least in the students’ view the ba-
➍ Text input: method arguments
sics have not changed much during the de-
➎ Text input: test cases
velopment process. Of course some details ➏ Description table
had to be reconsidered continuously. The ➐ Sample code table
22
initially would be out of range of such a small screen12 . Diminishing the input text area
would possibly cause an awkward
user experience. Therefore it was de-
cided to apply a dynamically growing
text area as well as positioning the
button to the right of the text area.
These arrangements are supposed to
provide an optimal usability for both
small and large screens.
12 It might be reasonably argued that the vast majority of the target audience is not using screens of that size
anyway. Optimizing the page for more common sizes such as 1024 x 768 or 1280 x 800 would extinguish the
problem. Other clients such as Smartphones or PDAʼs require a completely different User Interface anyway, due
to their very small screens and possibly different means of User Interaction.
23
been placed above the descriptions and code samples tables. Buttons to edit and delete de-
scriptions or to edit, delete, and run sample solutions have been placed adjacent to each list
entry. The insights gained during the development process were applied to the GUI Design.
Figure 18 shows some of the most important modifications. Edit and delete buttons were
added to the categories and problems
list items. Due to the restricted
amount of space in those lists, these
buttons have been implemented as
little icons (Figure 18–➋). An add but-
ton, also implemented as an icon, was
placed at the bottom of the categories
and problems lists. When the user is
hovering over these icons, tool tips
are displayed (Figure 18–➊). In the
teachers’ view unpublished problems
are displayed in a different color in
the problem list (Figure 18–➌). In the
students’ view they will not be dis-
played at all. A category selector has
been added to the problem editor. The
category selected in the category list
will be preselected in the category
selector (Figure 18–➍). The text input
field to specify the problem’s return
type has been replaced by a selector.
This was decided because the possi-
Figure 19 GUI Design: Version 2—Problem Editor, Teachersʼ ble values are clearly defined and not
View
necessarily common to the audience
➊ Description editor in floating layer
as Thrift types are requested (Figure
18–➎).
The inconvenient JSON notation in entering the method arguments and the test cases, has
been replaced by the following:
• Test Cases: Assertion type, [return value,] argument 1, argument 2, … , argument n line
break (Figure 18–➏)
24
Possible values for ‘assertion type’ are true, false, and equals whereas equals requires a re-
turn value.
Providing the user with a more elaborate way to enter the method arguments was also con-
sidered: a selector to choose the argument type plus a text input field to provide the argu-
ment name was discussed as an alternative to the simple text area (Figure 20). This model
requires an additional ‘add argument’
button to generate more of those
selector/input combinations if neces-
Save and publish buttons, as well as a checkbox to specify whether code samples will be dis-
played in the students’ view, are placed between the text area to enter test cases and the de-
scriptions table (Figure 18–➑). Descriptions and sample solutions attached to a problem are
displayed in tables at the bottom of the problem editor. The button to add another descrip-
tion or sample code is positioned at the table header’s right hand side. Edit and delete but-
tons were added to each list item. Clicking on the sample solution’s language logo will exe-
cute the code. As this behavior is not really obvious, a tool tip will be added here as well. It
will have to be tested if this functionality is too obfuscated. In case it turns out to be unusable
an additional ‘run’ button will have to be added. If the user clicks on the description’s or
sample solution’s edit or add button, the description or sample solution editor will open in a
floating layer as displayed in Figure 19. The category’s and problem’s edit and add buttons
react in the same manner. Clicking one of the delete buttons will open a JavaScript confirm
dialog before finally deleting the according item.
25
Figure 21 shows some screenshots of the front end’s current state. They show that—at least
in terms of functionality—most of the changes discussed on the previous pages have been
implemented on the whole. However, the layout details still need to be adjusted.
While conducting some final tests, a couple of bugs were detected. First, the workflow to cre-
ate a new problem needs to be fixed. Currently it is a hybrid between the old and the new
version. Section 7.2 will highlight some of these changes.
Some actions produce errors on the newly created SuperBat installation on the Ubuntu 32-bit
server (see section 5.9). Clicking on the sample solution editors submit button produces an
‘Error Code: 500 Internal Server Error’. The solution is generated, however and can be exe-
cuted. When executing the solution the test results are not displayed. It has been tried to lo-
cate the cause of these errors but up to now these efforts were in vain. As these errors do not
occur on the original installation, it is suspected that they are raised by a missing file or di-
rectory, missing read or write privileges, or differently adjusted settings in the new installa-
tion.
26
7.2 User Interaction
Figure 23 shows a model of the
problem creation workflow. At the
time when this model was created,
the workflow was supposed to im-
plement the ‘wizard’ pattern [56,
p.42ff] , leading the user step-by-
step through the interface. Moving
forward in the problem creation
process is always well-defined.
Moving back is not so at some
points. A user moving back from
the sample code editor might not
expect to get back to the descrip-
tion editor but rather go back di-
rectly to the problem editor. The
Garrett IA Diagram in Figure 27
shows the same aspect from a
slightly different perspective. Fig-
ure 24 shows the same proce-
dure—plus the two additional
steps to get there—as it was im-
Figure 23 Model: Problem Creation Workflow plemented in Rails at an early stage
27
in the development process.
The following diagrams show the basic options for user interaction with the application’s
front end. They were created at an early stage of the development process, therefore at some
points they do not exactly represent the current state of the application’s interaction model.
Wherever necessary this will be indicated. In Figure 25 for instance, the user management
still is assigned to a hosting LMS only. The decision to implement a basic standalone version
is only partially reflected.
28
Figure 26 Model: Garrett IA Model—Part 2
Currently the application will not provide profile pages, neither for students, nor for teach-
ers. This is something to address in one of the application’s next versions. Profile pages are
meant to manage global user data such as name and password. They will also hold lists with
solved (students) and generated (teachers) problems. Preferences such as which user inter-
face version is preferred will be managed here as well.
Figure 26 implies that each teacher can edit only those problems that have been created by
herself, as they are accessed through the teacher’s profile page. This is an option that was
considered at the beginning of the development process. As it would have required a much
more elaborate user management, a different implementation was chosen. Each teacher can
access all the problems, no matter who created them. A more elaborate user management
will definitely be an option for a future version. Providing possibilities for each teacher to
handle decisions differently—such as if a code sample will be shown or not—will have to be
considered at the latest once assignment lists, etc., have been added. Currently as the appli-
cation will only be used for voluntary additional exercises, this option is not fundamental
and has therefore been omitted.
Figure 27 (1a) still shows the original idea to organize the problem creation in a wizard-like
pattern. [56, p.42ff] Because of the insights gained during the development process this was
replaced by a combination of several other patterns. Obviously, none of the used patterns can
be regarded on their own. In most cases, these patterns are a combination of not only one or
two, but a number of patterns, as Jenifer Tidwell defines very fine grained patterns. In this
29
Figure 27 Model: Garrett IA Model—Part 3
(1a) - Creating a new Problem is a comparatively straight forward process. Therefore it was decided to use the
ʻwizardʼ pattern. [32, p42]
(1b) - Due to the possibility to provide various languages and programming languages, editing an existing prob-
lem is not that straight forward at all. Going back stepwise is neither. Various solutions to step back have been
tested. All of these have been quite discouraging, where their usability aspect was concerned. It was therefore
decided to provide a view that contains a form for the problem core values as well as lists for those values that
might have multiple entries. (See also Figures 17–➏, 17–➐, 18–➒, 18–➓, and 24–➌)
case the patterns ‘animated transition‘ [56, p.84ff] , a form of ‘closable panels’ [56, p.111ff] ,
and a form of ‘moveable panels’ [56, p. 114ff] were combined to establish a more satisfying
user experience. The aforementioned patterns describe the essential behavior of the interface
element. This is a good example for the above mentioned statement that many—of the fine
grained—patterns are cooperating. To mention just a few of them: the ‘escape hatch’ [56,
p.86], to be seen in Figure 19–➊ (the close button at the top right of the description editor
layer) or the ‘button group’ [56, p.137ff] (see Figure 18–➌).
The topic does not fit seamlessly into the section’s principal theme: ‘Design’. There have been
reasonable arguments to place it at some other section such as ‘Implementation Details‘ or
maybe ‘Technology Selected‘. In this case—not selected, as currently SuperBat is neither lo-
calized nor internationalized. Finally it was decided to place it here as internationalization
30
implies a couple of aspects concerning user interface, user interaction, and user experience.
For instance the readability of certain fonts in different languages, possible required addi-
tional space in some languages 13, or the basic comprehension of user interface elements. The
use of icons instead of text on buttons is one way of internationalization. Unfortunately this
often arouses international incomprehension. This was discovered a long time ago. Jef
Raskin states in his book ‘The Humane Interface’:
There are a couple of localization plugins available for Rails. The plugin ‘gibberish’ [59] has
been considered as it seemed to be comfortable to use. There is not much to localize in Su-
perBat anyway. All elements that are related to the generated code, such as problem names,
code samples, and test cases are best internationalized if they remain English.
Category names and descriptions are user generated and will require a slightly more elabo-
rated data model than they currently have to be internationalized. Their localization will re-
quire bigger efforts from teachers, as, if they establish a new category, they will have to do so
in several languages.
Problem descriptions are user generated and can be provided in a wide variety of languages.
Adjusting the writing direction can be done easily with CSS: direction:ltr; direction:rtl;
This is supposed to work in all modern browsers. [14]
The remaining are some buttons as well as the global navigation. In an internationalized ver-
sion, new aspects of sorting and searching will emerge. Students might want to search only
for problems available in a certain language. Teachers might want to search for problems that
are not available in a certain language to provide a translation. Obviously the same applies to
programming languages.
Later it was discovered that Rails 2.2 will ship with a built in internationalization (i18n) API.
[18] Therefore it was decided to postpone this topic until later.
13 I.e. German, and even more French require much more space than English does for text based buttons or list
items.
31
8 Implementation Details
8.1 Application Structure
The applications front end is basically a typi-
cal Rails application. Only few parts of the
auto-generated structure have been changed.
Most of the changes concerning the user inter-
face and user interaction have already been
discussed.
32
_lib_misc contains some additional
required files such as build.xml to be
used by ANT, Makefile to be used by
Make, and a copy of JUnit.
Figure 30 Model: File and Directory Structure Finally the directory ‘problems’ con-
tains the file hierarchy for each prob-
lem. When the user in the front end clicks on the problem editor’s submit button, Rails stores
the submitted values in the database. Additionally—here in the back end—a directory hier-
archy for the new problem is generated. At the top of this hierarchy a directory is generated
whose name is derived from the problem’s name. This is why problem names have to be
unique and should not contain spaces, slashes, etc. In this directory the directories cpp, java,
py, and rb are generated, which will be holding the solutions later on. In each of these direc-
tories a samplesolution directory is generated. In each of those samplesolution directories a
src and a run directory are generated. Now the problem’s environment is set and the files
can be generated. The following sections will cover these operations in detail. The teachers’
sample solutions will be stored in the samplesolution directory later on. As previously men-
tioned, this is the point where things would get complicated if more than one code sample
per problem and programming language was allowed. The names of the directories that will
store the students’ solutions will be generated from the accessing IP address, a time stamp,
and the session id. If the student is logged in, her login name will be used as well. These di-
rectories are temporary and will be deleted when the session has ended. Whether the solu-
tions of logged in students will be stored here in the file system or if only the data necessary
33
to regenerate them will be stored in the database, will
have to be discussed in more detail before the application
goes into production.
14 Where {pl} is to be replaced by the symbol for the appropriate programming language
34
ies to be generated. These are the imports and the lines establishing the communication be-
tween client and server, to name a few. Another shady piece of code is the prophylactic im-
port of maps, sets and lists. To clean this up would require to parse the contents of the sup-
plied user generated data, checking if any of these containers have been used. It was decided
to do this the easy way. An annotation to suppress the resulting compiler warning was
added instead. Fortunately Java is not persnickety in this respect and abundant imports are
cheap. The following paragraph will describe the process of replacing the template’s place-
holders by user data in detail.
The client generator reads the template file’s content as a string. Then it performs a simple
string replacement on this string. The substrings delimited by <** **> are replaced by the
strings that have been preprocessed from the user generated data. The resulting string is
written to the new file JavaClient.java.
...
import com.facebook.thrift.TException;
...
import java.util.HashMap;
import java.util.HashSet;
import java.util.ArrayList;
import junit.framework.TestCase;
import junit.framework.AssertionFailedError;
@SuppressWarnings("unused")
public class JavaClient extends TestCase{
public void <**testMethodName**>() throws TException {
TTransport transport = new TSocket("localhost", 9090);
TProtocol protocol = new TBinaryProtocol(transport);
Executor.Client client = new Executor.Client(protocol);
transport.open();
<**testCaseBody**>
transport.close();
}
public static void main(String [] args) {
try {
JavaClient jc = new JavaClient();
jc.<**testMethodName**>();
...
Listing 1 JavaClientTPL.java—Excerpt
The following listing shows the client generator’s generateTestCaseBody() method, which is
35
replacing the template’s placeholder <**testCaseBody**> with JUnit assertions that are gen-
erated dynamically from the user generated input.
...
private function generateTestCaseBody ()
{
$testCaseBody = "";
for ($i = 0; $i <= count($this->testCases); ++$i) {
if (isset($this->testCases[$i])) {
$testCaseBody .= "try {\n";
switch ($this->testCases[$i]["assert"]["type"]) {
case "t" : $testCaseBody .= "\t\t\t\tassertTrue( ";break;
case "f" : $testCaseBody .= "\t\t\t\tassertFalse( "; break;
case "e" : $testCaseBody .= "\t\t\t\tassertEquals( "; break;
}
$testCaseBody.= "client.".$this->methodName."( ";
for ($j = 0; $j <= count($this->testCases[$i]); ++$j) {
if (isset($this->testCases[$i]["input"][$j])) {
$testCaseBody.= $this->testCases[$i]["input"][$j].", ";
}
}
//clean it
trim($testCaseBody);
$testCaseBody = substr( $testCaseBody,0,-2);
$testCaseBody.= ")";
if ( isset($this->testCases[$i]["assert"]["value"])) {
$testCaseBody.= ", ".$this->testCases[$i]["assert"]["value"];
}
$testCaseBody.= ");\n";
$testCaseBody.= "\t\t\t\tSystem.out.println(\"Test$i passed\");\n";
$testCaseBody.= "\t\t} catch (AssertionFailedError e) {\n";
$testCaseBody.= "\t\t\t\tSystem.out.println(\"Test$i failed\");\n";
$testCaseBody.= "\t\t}\n\t\t";
}
}
return $testCaseBody;
}
...
Listing 2 JavaClientGenerator.php—Excerpt
The methods replacing the other placeholders work analog to the preceding.
Arguments: {
"1":{"type":"bool","identifier":"weekday"},
36
"2":{"type":"bool","identifier":"vacation"}
}
Testcases: {
"1":{
"assert":{"type":"t"},
"input":{"1":"true","2":"false"}
},
"2":{
"assert":{"type":"f"},
"input":{"1":"false","2":"false"}
},
"3":{
"assert":{"type":"f"},
"input":{"1":"false","2":"true"}
}
"4":{
"assert":{"type":"f"},
"input":{"1":"true","2":"true"}
}
}
...
public void goToSchool() throws TException {
TTransport transport = new TSocket("localhost", 9090);
TProtocol protocol = new TBinaryProtocol(transport);
Executor.Client client = new Executor.Client(protocol);
transport.open();
try {
assertTrue( client.goToSchool( true, false));
System.out.println("Test1 passed");
} catch (AssertionFailedError e) {
System.out.println("Test1 failed");
}
try {
assertFalse( client.goToSchool( false, false));
System.out.println("Test2 passed");
} catch (AssertionFailedError e) {
System.out.println("Test2 failed");
}
37
try {
assertFalse( client.goToSchool( false, true));
System.out.println("Test3 passed");
} catch (AssertionFailedError e) {
System.out.println("Test3 failed");
}
try {
assertFalse( client.goToSchool( true, false));
System.out.println("Test3 passed");
} catch (AssertionFailedError e) {
System.out.println("Test3 failed");
}
transport.close();
}
...
Listing 3 JavaClient.java—Excerpt
...
namespace cpp shared
namespace java shared
include "../../_lib_thrift/shared.thrift"
service Executor extends shared.SharedService {
...
<**returnType**> <**methodName**> ( <**arguments**>)
}
The placeholders in the template above are replaced by the following code, which is as un-
spectacular as the template.
...
namespace cpp shared
namespace java shared
include "../../_lib_thrift/shared.thrift"
service Executor extends shared.SharedService {
...
bool goToSchool ( 1:bool weekday, 2:bool vacation)
}
38
8.4 Running the Thrift Compiler
The command thrift --gen cpp --gen java --gen py --gen ruby -r -o /path/to/
problemName /path/to/problemName/problemName.thrift will generate all the files and direc-
tories that are needed to translate between the Java client discussed in the previous section
and the solutions which will be provided in any of the sup-
ported programming languages during the following steps.
Due to the way the directory structure is organized, the Thrift
bindings—as well as the Java client—only have to be gener-
ated once per problem instead of once per solution. Figure 32
shows the files and directories that have been generated at this
point of the problem generation process.
•The ThriftIDL file has been generated and has been proc-
essed by the Thrift compiler—thus having generated the Thrift
bindings.
39
8.6 Generating the Server
The procedure is the same as generating the JavaClient and the ThriftIDL file from the tem-
plates. Server templates are available for each currently supported programming language.
PHP scripts preprocessing the user generated content, replacing the template placeholders
and writing the results to a new file also are available for each currently supported pro-
gramming language. To add support for another programming language that is supported
by Thrift the following steps will have to be taken:
40
first step, the user generated code will have to be parsed for keywords that imply an abusive
usage of the application. Candidates are ‘thread’, ‘fork’, ‘exec’ or similar commands that
might be used to start separate threads or processes. Each attempt to manipulate the file sys-
tem has to be prevented for all supported programming languages. As it is very easy to in-
teract with the system shell, at least from within Ruby or PHP applications, the usage of
commands such as ‘rm’, ‘chown’, ‘chmod’, ‘cp’, ‘file’ , ‘find’, etc. to mention just the tip of the
iceberg, has to be prevented as well. In Ruby an indicator for an attempt to interact with the
shell is the usage of back ticks ‘´’. In PHP the commands ‘exec’, ‘passthru’, ‘system’,
‘shell_exec’, ‘popen’, to mention just a few, are potential troublemakers. Any unauthorized
attempts to access the database also have to be prevented. Particular precautions have to be
taken if new programming languages are added as the keyword list possibly needs to be ex-
tended. Further possibilities to attack the server will have to be investigated very thoroughly
and an intensive testing with malicious users is strongly advised before bringing the applica-
tion to production. Even if all precautions have been taken, it is suggested that the applica-
tion be run on a separate server and regular backups are made on a daily basis.
Ruby offers a feature that might be advantageous to secure the application. Safe levels can be
set and Objects can be marked as tainted. In fact, every object that involved external data
somewhere in its creation history, or that is derived from such an object is marked as tainted.
If the safe level is set to 1, exceptions will be raised as tainted objects try to perform certain
operations, such as to pass form data to the eval method. [52] It has to be investigated how
far this might be useful for this applications purposes and if other languages provide similar
security mechanisms.
8.9 Odds and Ends (or Close Encounters of the Third Kind)
This chapter loosely couples some observations that were made while working on the appli-
cation respectively exploring the used tools and techniques.
Most of Ruby’s features are very straight forward and intuitive to learn. Often it consumed
more time than anything else to recognize that things are really as simple as they seem. Con-
structions such as the following example from The Pragmatic Programmer’s Guide are
amazing:
5.times { print "*" }
3.upto(6) {|i| print i }
('a'..'e').each {|char| print char }
produces:
41
*****3456abcde
[53]
In the very beginning of a project Rails takes care of many tedious standard tasks, which
normally a developer would have to take care of herself. The concept of scaffolding or auto
generating the basic structure of an application definitely speeds up the development proc-
ess. On the other hand Rails also provides some really hard to track traps for newbies. One
of these is that Mongrel needs to be restarted to recognize changes to almost anything out-
side of Rails’ app/controllers, app/helpers, app/views, app/models directories. Another er-
ror, which was very time consuming to track down is the so-called cookie overflow. The
cookie size is about 4 KB. flash[:notice] and flash[:error] are a means to send messages
from one action to another. It seems as if these messages are stored temporarily in a cookie.
When they are used to send long debug messages from one action to the next they raise a
cookie overflow error.
Python syntax uses indentation to delimit methods, loops, etc. This makes it much harder to
build a waterproof generator than for the other programming languages.
Fixtures are a means to provide test data for tests in Rails. Fixtures are files that are stored in
the YAML [16] format. The colon, indicating the end of a Python method signature caused
problems in these fixtures. Most likely, there is a possibility to escape colons in YAML files
but it has not been encountered yet.
The tab-key applied on a text input field of an HTML document makes the cursor jump to
the next form element instead of indenting the code in the text field. For most web forms this
is the expected behavior of course. In this case it is rather annoying as—while writing co-
de—the tab-key is expected to indent the line as it would do in a text editor. It has to be fur-
ther investigated if there is a chance to change this behavior in the desired manner. JavaS-
cript methods such as preventDefault() might be good candidates to start with. If a possibil-
ity to change this behavior has been found, it still has to be tested if the desired usability
boost becomes a reality.
42
9 Tests
Because bugs kept sneaking into the application during the development process, it was de-
cided to safeguard the application with unit tests. Rails supports testing very well; basic test
stubs are generated automatically. The tests are separated into functional, unit, and integra-
tion tests. The unit tests test the models: if the data is entered correctly into the database and
if the data is compliant to the specified constraints, etc. Functional tests test the controllers: if
redirects happen where they are expected and if pages are rendered as expected, etc. Rails
provides a variety of methods such as: assert_response, assert_template, assert_differ-
ence, assert_redirected_to. These assist the developer in writing useful tests.
‘autotest’ [22] is a very handy tool for testing Rails applications. In principle it is constantly
running—previously specified—tests against the application. This enables developers to
monitor the effects of their work roughly in real time.
Testing in the applications PHP component is handled with PHPUnit [6], a unit testing
framework for PHP derived from JUnit.
Writing tests before writing the actual code definitely leads to better results. It has been expe-
rienced that writing useful tests later on is rather difficult especially if the developer and the
tester are the same person. Writing the tests first requires a certain amount of self-discipline,
however, especially if the schedule is tight. In the end it not only reduces debugging time
later on, but also yields more thoroughly reflected code.
43
10 Summary
The applications current state is best described as an incomplete, almost alpha version. On
the teachers’ side the basic functionality is available. Categories, problems, sample solutions
can be generated, edited, and deleted. Sample solutions can be compiled if necessary and can
be executed. The compiler’s and JUnit’s response can be displayed to the user. Some trivial
functions such as the possibility to add a description for a category can be added with little
effort.
The basics of the user management are set. The controllers still need to be secured, which can
also be done with little effort. Two user roles are available: ‘Teacher’ and ‘Student’. Each of
these roles can be granted with separate privileges. Additional roles can be added with little
effort.
The UI needs to be finished. The foundations to do this are laid. The UI designs have been
reworked according to the findings during development. The changes in the UI that already
have been applied still need to be reflected in the functional test cases.
The bulk of the remaining work is securing the application. Possible vulnerabilities have to
be investigated thoroughly and plenty of testing has to be done. Not only the application’s
security has to be tested, but load testing of the server needs to be done as well. Generating
and compiling the sources requires numerous resources, so it might not take too many users
to slow down the system. Should this happen, various possibilities to distribute the system
are available. Which of those or which combination of those would be the best to apply will
have to be investigated in more depth.
When the application is secured, the integration into Moodle and if possible other LM Sys-
tems can be investigated.
In a future version the support for additional programming languages can be added. As far
as these languages are supported by Thrift this can also be done with very little effort.
The application is on the right track to be finished successfully. It enables teachers to supply
their students with exercises and it meets the requirements of novice programmers to learn
basic programming tasks in a straightforward, little time-consuming way. There are still
many tasks that have to be carried out, but for most of them a solution or at least a possible
approach has been found or indicated. The biggest issue left is the security problem; but on
the other hand, if the application is running on an isolated server there is only little to be
damaged. A testable alpha version can be finished in about half a human-month15 . To bring
44
the application to production will take another estimated 2 - 3 human-months, intensive al-
pha testing included.
The choice of some of the used tools is rated ambivalent. To select the 64-bit version of the
Ubuntu server definitely was not a brilliant idea as it leads to many hardware incompatibili-
ties. This is more a cosmetic issue concerning this thesis and its accompanying DVD than the
application itself. If necessary this decision can easily be fixed. The decision to use a wide
variety of programming languages requires a wide range of skills from possible future de-
velopers. This could of course become a cost factor. On the other hand the domain of the ap-
plication is multi-programming-language support, therefore these skills are required any-
way. As mentioned before, the anticipated gain in development speed by using Rails was
only partially fulfilled. Working with Ruby and Rails was very pleasant mostly. Learning
something new in the short term always requires additional time.
45
Glossary
A) I)
ANT - Another Neat Tool. Java based build tool, pro- i16 - 16 bit integer value (Thrift)
vided open source and for free by the ASF
i18n - short for internationalization
Apache - very popular web server
i32 - 32 bit integer value (Thrift)
Apache Software Foundation - nonprofit community of
i64 - 64 bit integer value (Thrift)
open source projects/developers
J)
B)
JavaBat - The inspiration for SuperBat
BlueJ - Learning environment for Object Oriented Prin-
ciples in Java JSON - JavaScript Object Notation, lightweight data-
interchange format
C)
D) K)
DB - Database L)
eCampus - Learning Management System Mongrel - web server for Ruby web applications
F)
N)
Facebook - Company based in Palo Alto, California, Netbeans - a free IDE, provided by Sun Microsystems,
issuing a community website
Inc.
G) P)
Garrett IA Model - Interaction Model for Web Applica- PDA - Personal Digital Assistant. Handheld mini com-
tions invented by Jesse James Garrett puter
Greenfoot - Learning environment for games and ani- PHP CLI - PHP Command Line Interface: A way of
mation using PHP scripts on the system command line rather
than on a web server
GUI - Graphical User Interface
prototype - JavaScript framework
H)
i
Q) T)
RMI - (Java) Remote Method Invocation Thrift - Software framework for scalable cross-language
services development
ROR - Ruby On Rails
UI - User Interface
RPC - Remote Procedure Calls
U)
Ruby on Rails - framework for agile web development
V)
S)
WEBrick - Ruby library program to build HTTP serv-
script.aculo.us - JavaScript effects framework
ers, default ROR server
ii
Bibliography
[1]
AESTechnologies, Developing web applications using Ruby on Rails framework,
http://www.advanceecomsolutions.com/resources/developing_web_applications_using_Ruby_on_Rai
ls_framework.asp, Retrieved: 02/14/2009
[7]
Blip.tv, Facebook's Thrift: Scalable Cross-Language Development - Mark Slee, David Reiss,
http://blip.tv/file/446822, Retrieved: 12/20/2008
[10]
M. Butler and M. Morgan, Learning challenges faced by novice programming students studying high
level and low feedback concepts,
http://www.ascilite.org.au/conferences/singapore07/procs/butler.pdf, Retrieved: 02/24/2009
[11]
CakePHP, CakePHP: the rapid development php framework, http://cakephp.org/, Retrieved: 02/19/
2009
[14]
css4you, direction: Schreibrichtung: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets,
http://www.css4you.de/Texteigenschaften/direction.html, Retrieved: 02/23/2009
[16] C. C. Evans, The Official YAML Web Site, http://www.yaml.org/, Retrieved: 02/22/2009
[17] F. Frank, json -- JSON implementation for Ruby, http://json.rubyforge.org/, Retrieved: 11/07/2008
iii
[19]
J. J. Garrett, A visual vocabulary for describing information architecture and interaction design,
http://www.jjg.net/ia/visvocab/, Retrieved: 02/14/2009
[31]
A. Kovyrin, High-Performance Ruby On Rails Setups Test: mongrel vs lighttpd vs nginx,
http://blog.kovyrin.net/2006/08/22/high-performance-rails-nginx-lighttpd-mongrel/, Retrieved: 02/
14/2009
iv
[38]
N. Parlante, JavaBat Logic-1 cigarParty, http://www.javabat.com/prob/p159531, Retrieved: 02/20/
2009
[46]
M. Slee, A. Agarwal and M. Kwiatkowski, Thrift: Scalable Cross-Language Services Implementation,
http://incubator.apache.org/thrift/static/thrift-20070401.pdf, Retrieved: 02/22/2009
[52]
D. Thomas, C. Fowler and A. Hunt, Programming Ruby: The Pragmatic Programmer's - Guide Locking
Ruby in the Safe, http://www.rubycentral.com/pickaxe/taint.html, Retrieved: 02/14/2009
[53]
D. Thomas and A. Hunt, Programming Ruby - The Pragmatic Programmer's Guide,
http://www.ruby-doc.org/docs/ProgrammingRuby/html/intro.html, Retrieved: 02/17/2009
[56] J. Tidwell, Designing Interfaces: Patterns for Effective Interaction Design, O'Reilly Media, Inc., 2005.
v
[58]
S. Vinoski, Just What We Need: Another RPC Package,
http://steve.vinoski.net/blog/2008/05/22/just-what-we-need-another-rpc-package/, Retrieved: 10/
14/2009
vi
Illustrations
p. 3:
Figure 1 Screenshot: JavaBat—Category Listing
vii
Figure 29 Model: Class Diagram—Runners
Code Listings
p. 35:
Listing 1 JavaClientTPL.java—Excerpt
viii
Appendix
List of Used Interface Design Patterns
(According to Jenifer Tidwell [56])
One-Window Drilldown/One-Window Paging: each of the applications pages is shown in a single window. Scrol-
lable if necessary. Navigating completely reloads a page.
Two-Panel Selector/Tiled Panes: The application’s window is split into several panes. Clicking on an item in one
pane changes the contents of the other panes. A Three-panel selector adds another level of abstraction.
Row Striping: Alternating rows in a list or table are displayed in slightly different colors.
Animated Transition: State changes in the user interface are animated to attract the user’s attention
Closable Panels: Additional information or interaction elements are displayed in separate panels that can be
opened and closed.
Escape Hatch: Possibility to get out of a situation without changing anything. Aka cancel or close button.
Button Group: Semantically connected buttons are displayed close to each other.
ix
Installing Additional Software
Always update apt-get first: sudo apt-get update
RubyOnRails
Detailed instructions [44] (look for ‘The recom- SVN
PEAR
PHPUnit
Add pear channel:
Install:
Boost
Required by Thrift
Detailed instructions [26]
x
Installing Thrift
Thrift requires quite a bulk of additional packages.
The thrift version in the Git repository works for Ubuntu 8.04 but not for Ubuntu 8.10
wget -O thrift.tgz
"http://gitweb.thrift-rpc.org/?p=thrift.git;a=snapshot;h=HEAD;sf=tgz"
To install Thrift on Ubuntu 8.10 use the Thrift version from the SVN repository. This does not work for Ubuntu
8.04
The preceding steps assumed that the current directory is the user’s home directory.
I.e. /home/jerry/ both variants will then install Thrift in /home/jerry/thrift
From here on the same steps are required for both versions:
cd thrift
./bootstrap.sh.
The basic installation of Thrift is done now. For Java support the following step is necessary:
If not installed yet, install ANT (see previous page) and go to Thrift’s lib/java directory
sudo ant
xi
Some other programming languages might require additional steps. Instructions can be found in the according
thrift/lib/progLang directories’ README files.
The previous instructions have been accumulated from the following sources [41, 54, 55]
To test if the Thrift installation is working copy the directory thrift/tutorial to an arbitrary location.
I.e. /var/thrifttest
cd /var
cp -R /home/jerry/thrift/tutorial thrifttest
cd /var
cp -R /home/jerry/thrift/tutorial thrifttest
cd thrifttest
ls -l
total 56
drwxr-xr-x 2 root root 4096 2009-02-25 22:04 cpp
drwxr-xr-x 2 root root 4096 2009-02-25 22:04 erl
drwxr-xr-x 2 root root 4096 2009-02-26 10:24 gen-cpp
drwxr-xr-x 4 root root 4096 2009-02-26 10:24 gen-java
drwxr-xr-x 4 root root 4096 2009-02-26 10:24 gen-py
drwxr-xr-x 2 root root 4096 2009-02-26 10:24 gen-rb
drwxr-xr-x 3 root root 4096 2009-02-25 22:04 java
drwxr-xr-x 2 root root 4096 2009-02-25 22:04 perl
drwxr-xr-x 2 root root 4096 2009-02-25 22:04 php
drwxr-xr-x 2 root root 4096 2009-02-25 22:04 py
drwxr-xr-x 2 root root 4096 2009-02-25 22:04 rb
-rw-r--r-- 1 root root 741 2009-02-25 22:04 README
-rwxr-xr-x 1 root root 293 2009-02-25 22:04 shared.thrift
-rwxr-xr-x 1 root root 4063 2009-02-25 22:04 tutorial.thrift
Everything has been set up now so it is time to see if it works. First one of the servers needs to be started. If it is
decided to do the test with a server and/or client in a compiled language it needs to be compiled first.
xii
For C++:
cd cpp
sudo make
or for Java:
cd java
sudo ant
The clients and servers in the scripting languages can be used right away. Server and client can be arbitrarily
combined, but the server needs to be started first. In the following example a C++ server and a Java client will be
started. The current working directory is /var/thrifttest and both server and client have been compiled yet.
As the server will run until it is stopped again, it will be necessary to either use the command screen or to use
several Terminal windows as assumed in the following example.
cd cpp
./CppServer
cd java
./JavaClient
ping()
1+1=2
15-10=5
Check log: 5
ping()
add(1,1)
calculate(1,{4,1,0})
calculate(1,{2,15,10})
getStruct(1)
xiii
Installing SuperBat
Suggested best practice is to create a SVN repository and to import the sources from the CD.
Then do an initial checkout. Something similar to the following examples, depending on the connection that has
been chosen to
be used with SVN.
cd /path/to/working directory
The suggested locations to check out these directories on Ubuntu are /var/superbat and /var/www/
superbatFE.
cd /var/superbat
mkdir problems
Depending on the environment it might be necessary to recursively change the owner of superbat and super-
batFE.
cd /var
cd /var/www
To start Mongrel:
cd /var/www/superbatFE
script/server
xiv
CD Contents
• grafix
• raw
• charts_diagrams
• classes_sequence_interaction.graffle
• db_models.graffle
• directory_hierarchy.graffle
• flowchart_functionalities_state_garrett.graffle
• thrift_model.graffle
• logo
• bigbat_complete.psd
• bigbat_torso.tif
• bigbat.png
• bigbat.psd
• bigbat.svg
• minibat.png
• P1020301.ai
• P1020301.jpg
• P1020301.psd
• smallbat.psd
• UIDesign
• ApiStyle.psd
• ApiStyleBackend_new.psd
• ApiStyleBackend_new.tif
• ApiStyleBackend.psd
• ApiStyleBackend.tif
• ApiStyleResults.tif
• ApiStyleSampleCode.tif
• browserheader.tif
• checkbox.tif
• closeBtn.tif
• lists.rtfd
• loginBtn.tif
• resultstable.tif
• screenshots_frontend_new
• current_version_confirm_delete.tiff
• current_version_description_editor.tiff
• current_version_display_testresult.tiff
• current_version_java_problem_created_and_compiled.tiff
• current_version_loggedin_as_teacher.tiff
• current_version_login_layer.tiff
• current_version_problem_editor.tiff
• current_version_register_layer.tiff
• current_version_samplecode_editor.tiff
• current_version_solution_editor.tiff
• current_version._about.tiff
• intermediate_version_about.tiff
• intermediate_version_login_layer.tiff
xv
• intermediate_version_solution_editor.tiff
• screenshots_frontend_old
• Picture{12-25}.tiff
• select.tif
• separator.tif
• textarea.tif
• textfield.tif
• toolbar.tif
• vscroll.tif
• vscrollLong.tif
• used_in_thesis
• Figure{1-32}.tif
• internetsources
• 1_Developing web applications using Ruby on Rails framework.pdf
• 2_JSON vs XML at subbu.org.pdf
• 3_Apache Thrift download.pdf
• 4_Apache Thrift_home.pdf
• 6_Chapter 3. Installing PHPUnit.pdf
• 8_Thrift vs. Protocol Buffers - Digital Digressions by Stuart Sierra.pdf
• 10_butler.pdf
• 13_JSON.pdf
• 14_direction_ Schreibrichtung_ CSS-Referenz auf CSS 4 You - The Finest in Stylesheets.pdf
• 15_Ubuntu LAMP Server Installation With Screenshots -- Debian Admin.pdf
• 16_The Official YAML Web Site.pdf
• 17_JSON implementation for Ruby.pdf
• 18_The Ruby on Rails I18n core api - artweb design.pdf
• 19_Jesse James Garrett_ Visual Vocabulary for Information Architecture.pdf
• 20_technoweenie's restful-authentication at master - GitHub.pdf
• 22_autotest -rails | Ruby on Rails for Newbies.pdf
• 23_Hadjerrouit.pdf
• 24_rolerequirement - Google Code.pdf
• 26_Installing C++ Boost on Gentoo and Debian_Ubuntu.pdf
• 27_Running Ruby applications with Mongrel and Apache2.pdf
• 28_Guide to Ruby on Rails Migrations.pdf
• 29_bluej_tutorial-201.pdf
• 30_bluej_testing-tutorial.pdf
• 31_a_Looking For Optimal Solution_ Benchmark Results Summary and Findings __ Homo-Adminus Blog
by Alexey Kovyrin.pdf
• 31_High-Performance Ruby On Rails Setups Test_ mongrel vs lighttpd vs nginx __ Homo-Adminus Blog
by Alexey Kovyrin.pdf
• 33_Command-line PHP.pdf
• 34_Mission Data Blog » Blog Archive » Mongrel vs. WEBrick.pdf
• 35_Giving Back - Installing sqlite3-ruby.pdf
• 36_JavaBat About.pdf
• 41_Nick's Blag_ Building Thrift on Ubuntu 8.04.pdf
• 42_Rails_ The luxury line to professional Web sites.pdf
• 44_RailsOnUbuntu in Ruby on Rails.pdf
xvi
• 45_Thrift vs. Protocol Buffers - Digital Digressions by Stuart Sierra.pdf
• 46_thrift-20070401.pdf
• 52_Programming Ruby_ The Pragmatic Programmer's Guide.pdf
• 54_GettingUbuntuPackages - Thrift Wiki.pdf
• 55_ThriftInstallation - Thrift Wiki.pdf
• 57_Postfix - Community Ubuntu Documentation.pdf
• 58_Just What We Need_ Another RPC Package __ Steve Vinoski’s Blog.pdf
• 59_Ya Talkin' Gibberish — err.the_blog.pdf
• 60_CORBA Programming - Wikibooks, collection of open-content textbooks.pdf
• 61_Internationalization and localization - Wikipedia, the free encyclopedia.pdf
• additional
• adaptive path » ajax_ a new approach to web applications.pdf
• BSDRailsBenninger.pdf
• Mike Clark's Weblog.pdf
• ThriftInstallation - Thrift Wiki.pdf
• sourcecode
• superbat
• Contains the application’s back end component.
The suggested location on an Ubuntu system is /var/superbat. A complete listing is omitted
• superbatFE
• Contains the application’s front end component.
The suggested location on an Ubuntu system is /var/www/superbatFE.
A complete listing is omitted
• thesis
• thesis.pages
• thesis_print.pdf
• thesis_web.pdf
• sourcecode_listings.pdf
xvii
Selected Figures in Full Size
xviii
Figure 12 Model: Entity Relationship Model
xix
xx
Figure 13 Model: Logic Data Model
Complete Source Code Listings
Back End
1
Front End - db 85
xxi
Eigenständigkeitserklärung
Hiermit versichere ich, dass ich die vorliegende Bachelor Thesis selbständig und nur unter
Verwendung der angegebenen Quellen und Hilfsmittel verfasst habe. Die Arbeit wurde bis-
her in gleicher oder ähnlicher Form keiner anderen Prüfungsbehörde vorgelegt.
Berlin, 02.03.2009