Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript. Watch the live recording and demo by clicking the link on slide 40. Find out more about Cordova by joining meet up group at http://www.meetup.com/laphonegap/

1. Rapid Prototyping Mobile Applications with
Cordova
aka PhoneGap.

2. Josue Bustos
Designer/Developer
Co-Founder at Zukini Mobile
Co-UGM at LA PhoneGap
Twitter : @hozwe
2

3. Developing for
mobile phones
3

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

5. OS Popularity
5

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.
6

7. Content Is King
7

8. 8

9. Target Audience
9

10. 10

11. Make an Impression
11

12. What Platform?
12

13. 13

14. Mobile App Performance
14

15. Mobile Native App
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.
Pro’s: High Performance
Con’s: Device dependent
(e.g. Objective C only apps)
15

16. Mobile Web App
A Web app, is typically coded in a browser-
rendered language such as HTML combined
with JavaScript.
Pro’s: Broad Reach of mobile devices
Con’s: No access to mobile sensor API’s
16

17. Mobile Hybrid App
An app developed in combination
with HTML 5 and native technology.
Pro’s: Device sensor access
(e.g. camera, gyroscope)
Con’s: Flexible Performance
(depends on app complexity)
17

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.
18

19. 800 million active
users - Facebook
19

20. Desktop or Mobile First?
20

21. Half of computing device
sales are mobile
21

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

23. Market Share
23

24. 24

25. Who is using Cordova?
25

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/WikipediaMob
ile.
26

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
27

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).
28

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/mo
bile/.
29

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).
30

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.
31

32. As technologists it is our
responsibility to remain present
and aware of change.
- PHONEGAP TEAM
32

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

34. e.g.
34

35. Before Cross-platform After Cross-platform
• 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
35

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
36

37. Design Tools
Designer Resources
Adobe Photoshop
• iPhone 4 template from Teehan+Lax
• iPad template from Teehan+Lax
• Windows Phone 7 design templates from Microsoft
• Android template from PSDlist.com
Adobe 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
37

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, JavaScript
BlackBerry Java;
Android Runtime: Java
Adobe: Air for mobile
• Visual Studio 2011 IDE { C # / C++ }
Supports – HTML5, CSS3, JavaScript, for windows
phone 7 & Windows 8 SDK.
38

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/platfor
ms
• Apple Developer Tools ( Signing Key )
https://developer.apple.com/
39

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.
device
• Click here to view the live recording. 40