Download pptx - Building Mobile Web Apps

Building Mobile Web AppsProcedure & Techniques for Mobile Web Apps

Presented at:Nextbridge LHR C1May 03, 20112

Questions regarding previous session?

?

RECAPE

Do we fit in the wheel?

Java

C++

Objective C

PHP

RoR

.NET

Heaven is!

Mobile Web Apps

AGENDAToday’s

Topics we will cover in this presentation

• Real cross platform possible?• Can we do from scratch?• The big sandwich• Existing libraries & comparison• Example Application

TOPIC 1Real cross platform possible?

Real cross platform possible?

Apple

iOS

Objective C

Samsung

Android

Java

RIM

BB OS

Java

Nokia

Symbian

C++

Real cross platform possible?

?

iOS

AndroidSymbian

BB OS

What is common?

What is common?

iOS

AndroidSymbian

BB OS

What is common?

Screen Keypad

Battery Interface

OS

What is common?

Web Browser

What is common?

HTML

CSS

Java

Script

Mobile Web

App

Web Browsers

TOPIC 2Can we do from scratch?

Sample screen shot of a web page in mobile

Bar-bone structure of Mobile Web App

What feature browser support?

User Interaction Location

Local Storage

*Files Handling

Does this all we need for a Mobile App?

?

Other features we may need?

Accelerometer Compass

Camera Contacts

TOPIC 3The big sandwich

Three questions

Does one single thing can Cover all features?Cover all vendors?

Cover all platforms?

We need platform?

One Platform

Deals all complexities

Expose Single Language Api

We need platform?

PhoneGap

PhoneGap

Its expose simple

JS API

PhoneGap Api Reference

How to setup PhoneGap on Windows

Pre-requisites

•Eclipse•Android SDK•Android ADT Plugin

Install•Download SDK•Install Eclipse•Install Android ADT Plug-in in Eclipse


Start •Download PhoneGap•Create New “Android” project in Eclipse

Configure•Create ‘lib’, ’assets/www’ directories•Copy cordova-1.x.x.js to www folder•Copy xml folder to res folder•Change `Activity` to `DroidGap` for main activity•http://phonegap.com/start#android

http://phonegap.com/start


Main FileIndex.html

•<!DOCTYPE HTML><html><head><title>PhoneGap</title><script type="text/javascript" charset="utf-8" src="cordova-1.x.x.js"></script></head><body><h1>Hello World</h1></body></html>

Run • Choose AVD • Start Android Simulator

Bird Eye View

Detail View

Any thing to ask?

?

Is something Missing?

?

PhoneGap Api Reference

What is missing?

User Experience

Here comes?

Mobile UI Libraries

TOPIC 4Existing libraries

A lot of things available

jQuery Mobile jQTouch

iUI Choclate Chip

Its all up to you?

ChooseWhich fits you?

Features on a glancejQuery Mobile

jQ Touch Choclate Chip

iUI Sencha Touch

Basic Mobile Interface List

List with Custom Formatting

Standard Alert Dialog

Input Dialog with button (e.g; 'OK', 'Cancel')Custom Toolbars (headers and footers)Form Elements

Animations

Sample tests we have taken

1. Inserting 500 items in database2. Retrieving 500 items from database

and display in <li>3. Displaying 1000 items with JS Loop4. Displaying a page of 1000 items with

hardcoded html.

Tests results performance

Inserting 500 items in database

Retrieving 500 items from database and display in <li>

Displaying 1000 items with JS Loop

Displaying a page of 1000 items with harcoded html

0200

400600

8001000

12001400

1600

Choclate ChipiUISencha TouchJQTouchjQuery Mobile

Tests results smoothness





0 1 2 3 4 5 6 7 8 9


Tests results effects quality





0 1 2 3 4 5 6 7 8


Framework?

Choice Is all Yours

TOPIC 5Example Application

Now its your turn to speak

BUILDING MOBILE WEB APPSProcedure & Techniques for Mobile Web Apps

Designed & delivered by:Nazar HussainTraining Manager

Assisted by:

Khawar ShahzadAssociate Software Engineer

Presented at:Nextbridge LHR C1May 03, 2012