(APE) Geolocation data entry

From mn/ifi/inf5750
Revision as of 19:54, 4 December 2013 by Peterlei@uio.no (talk | contribs)

Jump to: navigation, search

Team

  • Alexander Eismont
  • Peter Ludvik Eidsvik
  • Eivind Lindbråten


Code: https://code.launchpad.net/~ape-inf5750

Features

Our Web and Mobile application will have the following features:

  • show a map of the current location of the user
  • let users choose a location
  • fill out a form for "inpatient morbidity and mortality"
  • let users save the location and the filled out form
  • show all of the saved data on the map


Design

Initial page

alt = first view image

The page that shows the initial layout of the webapp. It contains a simple map and the option to choose the "program". This enables the option to select organizations that has this program available.

alt = sketch image 2

The buttons "Add" and "View" lets the user decide if the list of events should be shown or not. On smaller screens, such as mobile units, the list will never be shown.

List of events

alt = sketch image 3

If there are events at the organization, we retrieve a list of the events. The table containing the events has several options tied to it: • A search function (top right). • Sort by column (in each column header). • Show different amount of events/records per page (top left). • Scroll through pages (bottom right).


markers on the map

alt = sketch image 4

For events that contains location, a marker is shown on the map. The markers are clickable, and will contain information about the event.

alt = sketch image 5


Architecture

We will mainly rely on HTML/CSS and Jquery for this project. The Jquery framework will allow us to write code much faster and cleaner — we don't have to reinvent the weel each time we need a spesific function. Mainly for simple ajax calls and element selection. 

Twitter Bootstrap is used for good and sensible default styling of elements as well as for some Javascript functionality, e.g. modal windows.

The map will be delivered by Google's Map API, and the data from DHIS will be requested by ajax calls and returned as Json data, which will populate our map and tables.

We will try to make our site responsive so it will look great on mobile, tablet and desktop devices.

Technologies

  • HTML
  • CSS
  • JavaScript
  • AJAX
  • Json
  • Twitter Bootstrap — for good styling of elements
  • JQuery
  • Google Maps API

Features

  • Android application — using Cordova
  • iPhone application — using Cordova
  • Responsive web design — targeted for mobile and desktop screens

Milestones

  • Stage 1: Write about features, design and architecture, research DHIS
  • Stage 2: Implement frontend with dummy data
  • Stage 3: Link front end with DHIS through API calls