Rapid Prototyping with Cordova aka Phonegap

Cordova

Rapid Prototyping Mobile Applications with

aka PhoneGap.

2

Josue BustosDesigner/DeveloperCo-Founder at Zukini MobileCo-UGM at LA PhoneGapTwitter : @hozwe

3

Developing for mobile phones

4

Mobile is becoming increasingly important to web designers and developers because users expect a site to work on their phones.

5

OS Popularity

6

The web is becoming increasingly important to the mobile world because it is the only way to deploy an application to almost any device.

7

Content Is King

8

9

Target Audience

10

11

Make an Impression

12

What Platform?

13

14

Mobile App Performance

15

Mobile Native App

Pro’s: High Performance

Con’s: Device dependent (e.g. Objective C only apps)

A native app as one that is specifically designed to run on a device’s operating system and machine firmware, and typically needs to be adapted for different devices.

16

Pro’s: Broad Reach of mobile devices

Con’s: No access to mobile sensor API’s

Mobile Web App

A Web app, is typically coded in a browser-rendered language such as HTML combined with JavaScript.

17

Mobile Hybrid App

Pro’s: Device sensor access (e.g. camera, gyroscope)

Con’s: Flexible Performance (depends on app complexity)

An app developed in combination with HTML 5 and native technology.

18

Mobile App Eco System

The more mobile applications that are in the hands of end users, the greater the opportunity to drive up mobile data usage and generate new revenues.

19

800 million active users - Facebook

20

Desktop or Mobile First?

21

Half of computing device sales are mobile

22

Successful mobile devices excel in hardware, software and the supporting app ecosystem.

23

Market Share

24

25

Who is using Cordova?

26

• The official Wikipedia mobile application is built using PhoneGap. This project is open source, and the full source code is available on Github https://github.com/wikimedia/WikipediaMobile.

27

Salesforce uses a fork of Apache Cordova for their mobile development SDK. The forked version of their SDK is included within both their iOS and Android SDK repositories on GitHub

28

IBM/Worklight’s mobile application development platform is built on top of PhoneGap.   IBM is also heavily involved with core Apache Cordova development (see the list of committers).

29

Facebook uses a forked version of Apache Cordova in their mobile SDK.   You can learn more about Facebook’s mobile SDK at https://developers.facebook.com/docs/guides/mobile/.

30

Microsoft is involved with core Apache Cordova development (specifically for the Windows Phone platform).   This includes the XBox-Live integrated gaming application Halo Waypoint, for both iOS and Android.

The license under “about” inside Halo Waypoint clearly has a reference to PhoneGap).

31

Zynga, one of the largest gaming companies, uses PhoneGap and HTML5 to build awesome games.  For example, the popular Mafia Wars title is built using PhoneGap.

32

As technologists it is our responsibility to remain present and aware of change.

- PHONEGAP TEAM

33

Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript.

34

e.g.

35

• Android ………… Java, C, C++,HTML, CSS, JavaScript

• Bada ……………. C, C++, HTML, CSS, JavaScript

• BlackBerry ………. C, C++, Java, HTML, CSS, JavaScript

• Apple iOS………... Objective C, C, HTML, CSS, JavaScript

• Windows Phone 7.. C#, C++, VB.NET, HTML, CSS, JavaScript

Before Cross-platform After Cross-platform

36

Be Aware

• Cordova isn’t a “magical” solution to end all other solutions.

• Cordova is not a “Silver Bullet” that will solve every problem for every application developer

37

Design ToolsDesigner ResourcesAdobe Photoshop• iPhone 4 template from Teehan+Lax• iPad template from Teehan+Lax• Windows Phone 7 design templates from Microsoft• Android template from PSDlist.comAdobe Fireworks• UNITiD — iPhone and iPad prototyping with Fireworks• OmniGraffle• Graffletopia - Mobile• Graffletopia - iPhone• Visio• Visio iPhone stencil by Jonathan Abbett• PowerPoint, OpenOffice, Keynote — clickable slide shows can

be used to represent interface flows• Keynotopia templates

38

Developer Tools• Adobe Dreamweaver CS6 { HTML5, JavaScript, CSS3 }• Adobe Flash Builder { Air for Mobile, Action Script 3 }• Eclipse IDE {Java, C++, etc }• X Code IDE { Objective C }• BlackBerry - QNX Momentics IDE: C/ C++, BlackBerry

WebWorks: HTML5, CSS3, JavaScriptBlackBerry Java; Android Runtime: JavaAdobe: Air for mobile

• Visual Studio 2011 IDE { C # / C++ }Supports – HTML5, CSS3, JavaScript, for windows phone 7 & Windows 8 SDK.

39

Vendor Specific Resources

Which Operating System are you developing for?• Samsung Bada Developer Toolshttp

://developer.bada.com/apis/index.do

• Android Developer Toolshttp://developer.android.com/index.html

• Windows Phone Developer Toolshttp://create.msdn.com/en-US/

• BlackBerry Developer Tools ( Signing Key ) https://bdsc.webapps.blackberry.com/devzone/platforms

• Apple Developer Tools ( Signing Key ) https://developer.apple.com/

40

Live demo• Create jquery mobile

project.• Responsive Design: Create

Fluid grid layout.• Phonegap build service:

Write once deploy every where.

• Deploy application to your device

• Create jquery mobile project.

• Responsive Design: Create Fluid grid layout.

• Phonegap build service: Write once deploy every where.

• Deploy application to your device.

• Click here to view the live recording.