Design and developmentof a mobile mashup application

for geo-localized news visualization

by Kristina Stefanova

Sofia UniversityFaculty of Mathematics and InformaticsInformation technologies department

University of L’AquilaDepartment of Information

Engineering, Computer Science and Mathematics

What are we going to talk about?

• What problem are we solving?

• What is our solution?

• Technology background

• The application itself

The News

• Plays important role

• Newspapers, radio, TV, WWW

The Problem

• Too much news

The Problem (2)

• Information overload (infobesity)

The Problem (3)

The effects from infobesity

• Nerves

• Anxiety

• Headache

• Depression

The Goal

• To build a mobile application that shows the news for the user’s occupation or other place of his choosing

• The provided news to be divided in categories

• To be possible to search news for specific things

Who is going to use it?

• Group A – ‘Travellers’

• Group B – ‘Local people’

• Group C – ‘Default’

Tasks originating from the goal

• To find suitable web services

• To integrate them

• To build fast, stable and good looking application

• To minimize the user’s input and to maximize the application’s output

• To deploy on mobile platform

What is a mashup?

• Web application, that uses and combines data from two or more sources to create new services

• Characteristics

o combination

o visualization

o aggregation

Web spiders

Open Calais

• Uses Natural Language

Processing

• Is part of Linked Open Data Cloud

• Extracts data in RDF format

RDF documents

News articles

Semantic wire

SW database

SW API Servers

API

The solution

• Newsy Map

• Build in

Ideology of the application

Asynchronicity

• Difference between synchronous & asynchronous code

• Benefits and disadvantages

• Require.js

Development process

• Modules logical connection

• Overall ~ 2000 lines of code

Libraries, frameworks, tools

• Libraries

o Require.js

o Handlebars.js

o MarkerWithLabel.js

• Frameworks

o jQuery

o jQueryUI

• Chrome developer tools

Request - response flow

• b

Unit testing

• Simulating server responses

oSinon.js

oQunit

• Refactoring

Optimization

• Initial statistics – 11s, 13MB

• Minimizing module globals

• Removing redundant functionality

• Removing memory leaks

• CPU Utilization by jQuery optimization

• Minimizing resources

• Result – 7s, 8MB

Going mobile

• Phone Gap

Testing device

• Device: Samsung Galaxy Nexus

• CPU: Dual-core 1.2 GHz Cortex-A9

• RAM: 1GB

• Display size: 4.65 inches (~316 ppi pixel density)

• OS: Android 4.2.1 Jelly bean

Screenshots

Screenshots (2)

Screenshots (3)

Screenshots (4)

Screenshots (5)

Questions?