Food For The Heart,an Interactive Web Application

TM Lee and F. Vina Zerlina

2

Prevent coronary heart disease

Choose the “right” food

Plan daily meals

Dust and Magnet

Target recommended nutrition intake

3

How did we develop and what did we learn?

Javascript

CSS

Back-end Front-end

Front-End

5

1. Dust & Magnet

2. Nutrition Graph

Major Components

6

Dust & Magnet Visualization Interface1

7

How do you present a large set of data to the users?

8

Data Visualization

9

Decision-making tool (Java-based) Visualizing multivariate data with Dust & Magnet

metaphor

Dust and Magnet

10

JavaScript and CSS Interaction◦ Pop-up window using jQuery UI◦ Automatic highlights using jScrollTo

Dust and Magnet

11

Data Visualization

+ Less burdening to the users

+ Interactive and engaging

- Lack of understanding

- Vague data

12

Data Visualization

13

Graphing on the Web2

14

How to make the application more accessible? Flash offers a rich & interactive interface However, it is not widely accessible

Accessibility

15

JavaScript-based graph

Many JavaScript graphing API available online◦ PlotKit, Flot, Visifire, FusionCharts, Highcharts, etc…

Which one to use?

Graphing on the Web

16

Flot

Attractive , interactive

Working nice in *most* browsers

Failed to interact in IE 7

Always check cross-browsers compatibility!

Graphing on the Web

17

Highcharts Working in all browsers Easy to interact◦ JavaScript object to define chart options

Variety of charts

Graphing on the Web

18

Why is Highcharts cross-browsers compatible?

◦ Use of SVG

◦ In IE < 9, use VML

Graphing on the Web

19

SVG (Scalable Vector Graphics) Markup language to describe vector graphics Developed since 1999 by W3C organizations Supported by most of major browsers◦ Firefox, Chrome, Opera, Safari,…◦ .. but not Internet Explorer

Suitable for:◦ Resolution-independent Web UI◦ Vector image editing◦ Interactive (& animated) UI

Full control of each elements using SVG DOM API in JavaScript

20

Internet Explorer (IE) VML is used in IE 6, 7, 8 Alternatives? Use plugins.◦ Raphael for SVG

Good news! IE9 supports SVG

VML (Vector Markup Language)

21

Internet Explorer usage

VML (Vector Markup Language)

Internet Explorer

Firefox Chrome Safari Opera

25.8% 42.2% 25.0% 4.0% 2.5%

IE9 IE8 IE7 IE6

1.1% 16.3% 5.4% 3.0%

Back-End

23

1. Rapid Development

2. Nutritional Data

3. Data to the Front End

4. User Authentication

What we need…

Rapid Development1

25

Yukihiro Matsumoto in 1993 Dynamic Scripting Language

Ruby Language

puts “Boilerweb 2011!”>> Boilerweb 2011!

desserts = [“cupcake”, “froyo”, “ice-cream”]for dessert in desserts

puts dessertend>> cupcake>> froyo>> ice-cream

26

Web Application Framework based on the Ruby Language

David Heinemeier Hansson in July 2004 Aimed to increase developmental speed Open Source◦ https://github.com/rails/rails

Ruby on Rails

27

Who is using it?

28

Opinionated Framework

Convention Over Configuration

Model-View-Controller

Rapid Development

29

Nutritional Data2

30

Nutritional Data

31

platform.fatsecret.com/api

32

Nutritional Data Comprehensive

Branded Food

Limited API Calls

Store them on our Database for a day

Looking for other data sources

33

Data to the Front End3

Interactive web application

Javascript Front End

Reduces database query

Data To/From Both Ends

35

Data to the Front End

36

Interactive web application

Javascript Front End

Reduces database query

Data Interchange File

Data To/From Both Ends

{ "food":[ { "id":"99", "title":"Beef Bottom Sirloin Butt (Tri-Tip Steak, Lean Only, Trimmed to 0&quot; Fat, Cooked,

Broiled)", "rating":"5", "position_x":-0.05058333333333334, … "nutritions":[ { "serving_size":"3.0", "serving_unit":"oz ( 1 serving )", … } , { "serving_size":"1.0", …

JSON (Javascript Object Notation)

38

User Authentication4

39

User Authentication

40

User Authentication Complexity

Security

41

User Authentication

rubygems.org

42

◦User Authenticationgem ‘devise’, ‘1.1.3’https://github.com/plataformatec/devise

Gems

class User < ActiveRecord::Base validates :first_name ,:presence => true validates :last_name, :presence => true … devise :database_authenticatable, :registerable, :recoverable, :rememberable, :trackable, :validatable, :confirmable attr_accessible :email, :password, :password_confirmation , :first_name, :last_name end

<div id="login_logout_register"> Logged in as <%= current_user.email %>

<%- end %>

Use a Framework

Optimize API Calls

JSON for front end data

Don’t reinvent the wheel

ECN supports Ruby on Rails Hosting

Lessons Learned

44

Thank You!

Session surveyshttp://www.itap.purdue.edu/boilerweb/survey