Studies: Master of Science in Telecommunication Engineering & Management

Author: Dídac Montero Méndez

Supervisor: Thomas Martin Knoll

Date: 8/10/2012

Implementing a system for graphical display of statistical data

Tabl

e of

Con

tent

s1. Introduction and Goals

2. General Diagrams

3. Data Set manipulation

4. REST technique

5. Android User Interface and Flow Diagram

6. Caching, Zooming and Scrolling the Android App

7. App Security

8. Conclusions

Introduction and Goals13

» Android App for graphical display of statistical data.

» Diagrams are displayed in a timeline fashion.

» Diagrams should have zoom and scroll capabilities.

» Optimal mechanism

» Different periods of time can be selected (year, month, week, day).

» Different chart resolution can be displayed.

» Each user can enrich the application adding comments or votes to the charts.

» Different users can have different access levels (charts, categories)

Concept 4

Concept

Measurement/Monitoring Systems

Web Server DatabaseMobile Device

WLAN, 3G, 4G,…

5

» In any Mobile App, some factors to take into account,

» Resolution and screen size are limited Don’t display more data than which the final user is able to interpret and the screen is able to represent.

» Computational process is limited Heavier tasks must take place on the server.

» Memory is limited Avoid heavy objects, or keep them in cache and instantiate them only when is strictly necessary.

» Don’t waste bandwidth Avoid unnecessary, heavy or repetitive requests to the server.

» Save battery Don’t make an intense use of the computational processor and of the internet connection.

App Goals 6

General Diagrams27

Communication Android-Server

Database: Persist information from monitoring systems and response to SQL queries.

Web Server: Interacts with the DB and the client App. Handle the client’s request; transform it in a SQL query; process it and creates the JSON representation for deliver it back to the client.

Client: Performs an HTTP Request; converts the JSON response to Java Object and display the results and/or performs some data processing.

DatabaseW

eb S

erve

r

Mob

ile A

pp

HTTP/JSON

TCP/IP

REST

8

Entity-Relationship Diagram 9

3Data set manipulation

10

Reduction by average

» Reduction by average algorithm

» Fix Output =Mobile width.

» Lossy data compression

11

Reduction by nulling/deleting

» Reduction by nulling /deleting duplicates

» Variable output

» Lossless data compression.

12

Reduction by thick line

» Reduction by thick line approach Several Y values are represented in the same X value

» Fix Output =(Mobile width)·4

» Lossless data compression

Input Output

13

Reduction by thick line 14

» Reduction by thick line approach

REST technique415

REST: The predominant Web Service Model Software system designed to support machine-to-machine interaction over a network.

Provides an API to the clients. Clients requests a method from the API; servers process calls and return responses in a well known format.

» Transport layer is HTTP/MIME.

» The URI defines the resource.

» The operations are defined by the HTTP methods (GET, POST, PUT, DELETE)

» The response is presented in JSON format (indicated thought Media-Type).

REST technique 16

REST technique

Advantages» Independent deployment of components for the server and the

clients, as long as they respect the uniform interface» No problem with firewalls and proxies (port 80, usually open)» JSON is a lightweight text-based open standard and the Android

parser offers good performance.» Possibility of HTTP cache and proxy server to handle high load.

Examples» GET http://chart.com/charts Obtain List of Charts.» GET http://chart.com/charts/1?year=2012&month=1&week=2Obtain Chart info for the second week of January 2012

» PUT http://chart.com/charts/1/comments Add a comment in Chart id=1

17

Android User Interface Flow Diagram5

18

App layoutsCo

next

Men

u19

Chart Layout 20

6Caching, Zooming and scrolling the Android App

21

Caching

» Why cache?

» Two level cache implemented: Disk & Memory Cache.

» MemoryCache Fast access at the cost of taking up valuable application memory.

» DiskCache Persist data. Fetching and writing process is slower than in MemoryCache.

» Both Caches are HashMap, and the key it is the HASH of the URL Request.

» Both caches implements the LRU algorithm.

Persistence == Requests == Battery consumption

22

Caching

» Static and dynamic chart elements» Old period of time intervals Static» New or still valid period of time interval Dynamic

» Expire value for dynamic elements» HTTP Expire Header.» lastUpdate Last time new data was inserted

in the DB.

1 2 3 4 5 6 7 8 9 10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

lastUpdate

Static day Static week Dynamic week

Dynamic month

23

Zoom & Scrolling

» Interactive Zoom & Scroll Two fingers zoom or finger scrolling.

» If user is inside a time interval range of Day/Week/Month/Year, chart with this time interval will be requested.

» Non-interactive Zoom & Scroll Zoom/Scroll using the contextual menu on Android.

» Request the chart interval selected

(Day/Week/Month/Year)

24

Zoom & Scrolling

» Requests in advance Request in background other time intervals, that can be loaded directly when the user requires them (stores in Cache).

» Prediction based on zooming time interval.

» YearsMonths

» MonthsWeeks

25

App Security726

» User authentication: Challenge Handshake Authentication

» Obtain a token that identifies the user

» User permissions for charts and categories

» categories_denied ids of the categories where the user does not have permission.

» charts_deniedids of the categories where the user does not have permission.

Security 27

8Conclusions

28

Conclusions

Tasks performed:

» Main application goals achieved:

» Statistical data displayed with smooth zooming and scrolling capabilities

» Mobile application goals achieved:

» Minimize the battery consumption, CPU process in the client side and network utilization.

Tasks to be performed:

» API available for developing new clients (Web based, iOS)

» Possibility to extend the API Keep uniform interface.

» Automatic system for monitoring & updating data to the DB.

» Pre-processing or Caching mechanisms in the server side

29

DEMO

30

? Questions?

31

Annex explanations

32

» Scale the charts to the Mobile screen resolutionData set reduction algorithms.

» Optimize the transmission and the display of the charts

» Data set reduction algorithms.

» Compression in transmission.

» Cache mechanisms.

» Create an optimal mechanism to interact with the server in the zoom-in process Background requests in advance.

» Have different users with different access levels (chars, categories) Secutiry policies.

General Goals 33

REST Resources

Method Parmenter Resource (from root) Return valueGET date/ String

GET users/ List<User>PUT User users/ StringPOST TU_challenge

email, hash(password)users/login HTTP 200 OK

GET categories List<Category>GET categories/{$d CategoryGET categories/{id }/charts List<BaseChart> GET sort: {date, popular, name}

Concretecharts?sort=$sort&concrete=$1,2,3 List<BaseChart>

GET sort: {date, popular, name} charts/new List<BaseChart>

GET charts/null DoubleGET x, year, month, week, day,

typecharts/$id?x=$x&year=$year&month=$month&week=$week&day=$day&type=$type

Chart

GET charts/$id/comment List<Comment>GET charts/$id/comment/$id CommentPUT comment charts/$id/comment CommentDELETE charts/$id/comment/$id HTTP 200 OK

34

REST Client Implementation

» Loader: Process the REST request in a working Thread.

» Activity: Main UI Thread

» Not blocked by the REST call, post-process or cache insertion/removal

35

Caching

1. Create HASH of the URL Request.

2. Try to obtain the key from the Memory Cache. If works, check if it is still valid and go to 5.

3. Try to obtain the key from the DiskCache. If works, check if it is still valid and go to 5.

4. Retrieve the Chart from the Server.

5. Save the chart in MemoryCache (Object) and DiskCache (JSON)

36

App Authentication Layouts 37

» User authentication: Challenge Handshake Authentication

» Obtain a token that identifies the user

Authentication 38