Web Application Development Exercise

Getting Started

This exercise is presented as a set of modules/sections. In each module/section you will perform the set of steps required to achieve a pre-defined objective. Each module/section builds upon steps on previous modules/sections and will iteratively build up the student's knowledge base.

It is important to understand that we will be using a web application approach, as opposed to a web page approach. This means that we will not write any mark-up to produce pages, on the contrary we will specify application components that will be render as HTML by our chosen web framework (ExtJS). The selected application architecture for this exercise follows an MVC pattern with Models, Views and Controllers as follows:

  • Models are application components to describe data as a collection of fields. Models can be linked to other models through associations.
  • Views are application components responsible for the presentation of content to the users. Multiple views could be defined to present certain content if different ways.
  • Controllers are the components that realize the behaviour of the application. They contain what's commonly know as the application logic.

The basic ingredients of the application will be:

A small HTML document to include CSS resources and JavaScript libraries such as ExtJS, D3JS and OpenLayers; JavaScript code to initialize the application, build the user interface, and manage application data and user interaction; and Python code to connect to data resources (local & remote) and to take care of any intermediate data processing or manipulation required.

The Municipality Use Case

In this exercise we will be creating an application for Dutch municipalities geared towards the following objectives. First, present to the general public in an intuitive way a set of predefined statistical variables to inform them about the conditions of their neighbourhoods. Second, presenting in near real time the conditions of the transport system in the municipality. And third, enabling a small level of participatory planning. The background for the application is as follows:

Municipalities are looking for a mechanism to improve services provision to citizens, A number of approaches are under consideration, but the most popular initiative calls for setting up a Web application to allow citizens to visualize the state of the public transport system, and to interact with some of the statistical data held by municipalities on their neighbourhoods. This data will help municipalities in having an overview of the maintenance needs of cities and prioritize accordingly. The information required from the citizens when submitting reports includes, incident type, location and description.

Municipalities will also like to facilitate access to spatial data (vector data per object) openly to citizens, following a so-called fair use policy. This should include, for a start, statistical data of the city at a neighbourhood or district level. As part of this implementation, municipalities want to make use of the set of geo-spatial services made available to the public by the Dutch Government via its open data portal (PDOK). The application structure should be robust enough to accommodate extra functionality in the future.

User profile

User
group		 Domain/Function Data needs &
level of use		 Work environment &
file formats		 Application requirements
#1 Statistics Department Cadastral and statistical datasets for dissemination GIS & graphics software Enable service dissemination via open interfaces
#2 Citizens Understand some relevant statistical figures of their neighbourhoods and be inform of the current conditions of the public transport system. Browser only a) Ability to interact with statistical variables in and around his/her neighbourhood;
b) Keep an eye on location of the bus routes of intewrest for his/her mobility in the city.

Table 1 shows a subset of the user requirements. It includes only those that we will be able to cover during the time duration of the exercise. This means we will not for now create any functionality for the participatory planning part of the application.

Exercise Resources

This exercise requires a running web-server, and access to a web-enabled directory. (Check the MapSever exercises for the appropriate instructions to setup your own working environment). The figure below shows the technology stack that will be used in this exercise.

Software stack