SlideShare a Scribd company logo

Rapid Prototyping with Cordova aka Phonegap

•Download as PPTX, PDF•
•
Josue Bustos
Josue Bustos

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 of 40
Rapid Prototyping Mobile Applications with Cordova aka PhoneGap.
Josue Bustos Designer/Developer Co-Founder at Zukini Mobile Co-UGM at LA PhoneGap Twitter : @hozwe 2
Developing for mobile phones 3
Mobile is becoming increasingly important to web designers and developers because users expect a site to work on their phones. 4
OS Popularity 5
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
Content Is King 7
8
Target Audience 9
10
Make an Impression 11
What Platform? 12
13
Mobile App Performance 14
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
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
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
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
800 million active users - Facebook 19
Desktop or Mobile First? 20
Half of computing device sales are mobile 21
Successful mobile devices excel in hardware, software and the supporting app ecosystem. 22
Market Share 23
24
Who is using Cordova? 25
• 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
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
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
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
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
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
As technologists it is our responsibility to remain present and aware of change. - PHONEGAP TEAM 32
Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript. 33
e.g. 34
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
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
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
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
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
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

More Related Content

Rapid Prototyping with Cordova aka Phonegap

  • 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
  • 4. Mobile is becoming increasingly important to web designers and developers because users expect a site to work on their phones. 4
  • 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
  • 8. 8
  • 10. 10
  • 13. 13
  • 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
  • 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