48
Building Mobile Web Apps Procedure & Techniques for Mobile Web Apps Presented at: Nextbridge LHR C1 May 03, 20112

Building Mobile Web Apps

  • Upload
    goldy

  • View
    44

  • Download
    1

Embed Size (px)

DESCRIPTION

Presented at: Nextbridge LHR C1 May 03, 20112. Building Mobile Web Apps. Procedure & Techniques for Mobile Web Apps. Questions regarding previous session?. ?. RECAPE. Do we fit in the wheel?. RoR. PHP. .NET. Heaven is!. Today’s. AGENDA. Topics we will cover in this presentation. - PowerPoint PPT Presentation

Citation preview

Page 1: Building Mobile Web Apps

Building Mobile Web AppsProcedure & Techniques for Mobile Web Apps

Presented at:Nextbridge LHR C1May 03, 20112

Page 2: Building Mobile Web Apps

Questions regarding previous session?

?

Page 3: Building Mobile Web Apps

RECAPE

Page 4: Building Mobile Web Apps

Do we fit in the wheel?

Java

C++

Objective C

PHP

RoR

.NET

Page 5: Building Mobile Web Apps

Heaven is!

Mobile Web Apps

Page 6: Building Mobile Web Apps

AGENDAToday’s

Page 7: Building Mobile Web Apps

Topics we will cover in this presentation

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

Page 8: Building Mobile Web Apps

TOPIC 1Real cross platform possible?

Page 9: Building Mobile Web Apps

Real cross platform possible?

Apple

iOS

Objective C

Samsung

Android

Java

RIM

BB OS

Java

Nokia

Symbian

C++

Page 10: Building Mobile Web Apps

Real cross platform possible?

?

iOS

AndroidSymbian

BB OS

Page 11: Building Mobile Web Apps

What is common?

What is common?

iOS

AndroidSymbian

BB OS

Page 12: Building Mobile Web Apps

What is common?

Screen Keypad

Battery Interface

OS

Page 13: Building Mobile Web Apps

What is common?

Web Browser

Page 14: Building Mobile Web Apps

What is common?

HTML

CSS

Java

Script

Mobile Web

App

Web Browsers

Page 15: Building Mobile Web Apps

TOPIC 2Can we do from scratch?

Page 16: Building Mobile Web Apps

Sample screen shot of a web page in mobile

Page 17: Building Mobile Web Apps

Bar-bone structure of Mobile Web App

Page 18: Building Mobile Web Apps

What feature browser support?

User Interaction Location

Local Storage

*Files Handling

Page 19: Building Mobile Web Apps

Does this all we need for a Mobile App?

?

Page 20: Building Mobile Web Apps

Other features we may need?

Accelerometer Compass

Camera Contacts

Page 21: Building Mobile Web Apps

TOPIC 3The big sandwich

Page 22: Building Mobile Web Apps

Three questions

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

Cover all platforms?

Page 23: Building Mobile Web Apps

We need platform?

One Platform

Deals all complexities

Expose Single Language Api

Page 24: Building Mobile Web Apps

We need platform?

PhoneGap

Page 25: Building Mobile Web Apps

PhoneGap

Its expose simple

JS API

Page 26: Building Mobile Web Apps

PhoneGap Api Reference

Page 27: Building Mobile Web Apps

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

Page 28: Building Mobile Web Apps

How to setup PhoneGap on Windows

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

Page 29: Building Mobile Web Apps

How to setup PhoneGap on Windows

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

Page 30: Building Mobile Web Apps

Bird Eye View

Page 31: Building Mobile Web Apps

Detail View

Page 32: Building Mobile Web Apps

Any thing to ask?

?

Page 33: Building Mobile Web Apps

Is something Missing?

?

Page 34: Building Mobile Web Apps

PhoneGap Api Reference

Page 35: Building Mobile Web Apps

What is missing?

User Experience

Page 36: Building Mobile Web Apps

Here comes?

Mobile UI Libraries

Page 37: Building Mobile Web Apps

TOPIC 4Existing libraries

Page 38: Building Mobile Web Apps

A lot of things available

jQuery Mobile jQTouch

iUI Choclate Chip

Page 39: Building Mobile Web Apps

Its all up to you?

ChooseWhich fits you?

Page 40: Building Mobile Web Apps

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

Page 41: Building Mobile Web Apps

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.

Page 42: Building Mobile Web Apps

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

Page 43: Building Mobile Web Apps

Tests results smoothness

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

0 1 2 3 4 5 6 7 8 9

Choclate ChipiUISencha TouchJQTouchjQuery Mobile

Page 44: Building Mobile Web Apps

Tests results effects quality

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

0 1 2 3 4 5 6 7 8

Choclate ChipiUISencha TouchJQTouchjQuery Mobile

Page 45: Building Mobile Web Apps

Framework?

Choice Is all Yours

Page 46: Building Mobile Web Apps

TOPIC 5Example Application

Page 47: Building Mobile Web Apps

Now its your turn to speak

Page 48: Building Mobile Web Apps

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