Getting Acquainted with PhoneGap

2,660 views

Published on

An overview of developing mobile applications with HTML, CSS and JavaScript using PhoneGap, node.js, Brackets and related tools.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,660
On SlideShare
0
From Embeds
0
Number of Embeds
810
Actions
Shares
0
Downloads
45
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Getting Acquainted with PhoneGap

  1. 1. Getting Acquainted with PhoneGap NATIONAL ASSOCIATION OF GOVERNMENT WEB PROFESSIONALS – MARCH 6 2014
  2. 2. Introduction  Mobile apps with Web Standards  Environment Configuration  Mobile Tooling  Mobile Frameworks  App Emulation  Release Builds  Deployment
  3. 3. Joseph Labrecque  Senior Interactive Software Engineer | Adjunct Faculty  Proprietor | Owner  Adobe Community Professional Adobe Education Leader Adobe Certified Expert Adobe Certified Educator Adobe Influencer  Author  Artist University of Denver Fractured Vision Media, LLC Lynda.com | Peachpit Press | Adobe Press | Packt Publishing | O’Reilly Media | video2brain An Early Morning Letter, Displaced | shivervein
  4. 4. Developing Mobile Apps  Lots of choices out there…  Native (Objective-C, Java)  Web (hosted like websites)  Hybrid (compiled/wrapped)  Compiled (Adobe AIR)  Wrapped (PhoneGap)
  5. 5. Introducing PhoneGap MOBILE APPLICATIONS BUILT WITH WEB STANDARDS
  6. 6. PhoneGap and Cordova  Hybrid apps which leverage Web Standards  Command line API  Apache Cordova (similar to Apache Flex in structure)  Adobe PhoneGap (Adobe’s version of Cordova)
  7. 7. HTML5, CSS, JavaScript  Use HTML and CSS for design and layout  Use JavaScript for functionality  PhoneGap is a wrapper  Basically an uber-WebView  Adds native capabilities
  8. 8. Target Platforms  Google Android  Apple iOS  Blackberry OS  Blackberry 10  WebOS  Windows Phone  Symbian  Bada
  9. 9. First Steps GETTING EVERYTHING READY
  10. 10. Environment Setup  Node.js w/ NPM  PhoneGap  Ripple  Java JDK  Native SDK  ANT
  11. 11. Node.js and NPM  PhoneGap is installed and run locally from Node.js  NPM handles installation and updates  Command line driven  Easy to automate
  12. 12. PhoneGap Configuration  npm install -g phonegap  This will install the latest PhoneGap build into your local system.  Pretty well automated.  This is also how you update PhoneGap to a new version.
  13. 13. Project Generation  phonegap create test-app  This is the command to create a basic application within your local system in order to begin development.  The project at this point contains no platform specific code at all.
  14. 14. Project Directory  cd test-app  Enter the app directory to begin invoking app-specific commands like build or emulate.  www is where the development occurs!
  15. 15. Developing a Mobile App TOOLS AND FRAMEWORKS
  16. 16. Developing with PhoneGap  Using native SDKs   Configure tools  Configure dependencies   Download additional tools Lots of work, initially Using plain web technology  Simply write HTML, CSS, and JavaScript  Upload to PhoneGap Build to compile and test
  17. 17. Brackets  Code editor for HTML, CSS, and JavaScript  Open source software  http://brackets.io/  Node.js is built in – no separate local web server needed for testing!  Live view – see changes in the browser as you make them.  Edge Code CC is based upon Brackets.
  18. 18. Dreamweaver CC  Multiple styles of working; design, develop, hybrid…  Split view with live WebKit rendering allows for immediate verification of edits  Phonegap Build integration  Backend support as well
  19. 19. Edge Animate CC  DOM based HTML animation and interactivity.  Fully responsive scaling of content just like with Flash. Even images and text!  Create rich content to include within PhoneGap applications.
  20. 20. Edge Reflow CC  Visually prototype responsive web design.  Uses a system of breakpoints just like CSS media queries.  Design your complete UI visually in Reflow – use it in your PhoneGap app!
  21. 21. Flash Professional CC  “Flash is Dead!” - false   Installed over 500 million times in the second half of 2013.   More than 175,000 applications using AIR 3.8 or greater. Reach 11 times more people than the best-selling hardware game console! Plus: publish to HTML5 Canvas and integrate with PhoneGap :) http://www.adobe.com/products/flashruntimes/statistics.html
  22. 22. Mobile UI & Development Frameworks  jQuery Mobile  Twitter Bootstrap  TopCoat  Angular.js  Backbone.js  Sencha  And many more…
  23. 23. Beyond Web Standards TAKING YOUR APP TO THE NEXT LEVEL
  24. 24. PhoneGap Features  Accelerometer  Network  Camera  Notification (Alert)  Compass  Notification (Sound)  Contacts  Notification (Vibration)  File  Storage  Geolocation  Media
  25. 25. PhoneGap Plugins  phonegap plugin add org.apache.cordova.geolocation  BarcodeScanner  Facebook Connect  GAPlugin  StatusBar  Calendar  Bluetooth  PhoneDialer  Clipboard  100s more… https://build.phonegap.com/plugins
  26. 26. Testing, Debugging, Distribution! GETTING YOUR APP READY FOR PRIMETIME
  27. 27. Emulating with Ripple  npm install -g ripple-emulator   Installs the Ripple device emulator to your local system. ripple emulate  Launches Chrome with Ripple enabled for testing.  Be sure to build first!
  28. 28. Emulating with Native SDKs  phonegap run android  If you have a native emulator running, PhoneGap will detect it, install the app, and launch it for testing.  You can also test upon a device which is connected to your local machine in this way.
  29. 29. Building a Release Locally  phonegap build android  Will build an app package based upon the particular platform specified.  Android… in this case.  Do NOT edit files within “platforms”…
  30. 30. Updating an App  phonegap platform update android  Will update the app to use a newer version of PhoneGap.  Of course… you have to update PhoneGap itself first!
  31. 31. Using PhoneGap Build  /www/config.xml  Upload .zip  Link to Git repository  Hydration!
  32. 32. ConfiGAP Utility  Create config.xml files easily  Used with PhoneGap Build  Create new config.xml files or edit existing ones  Made with AIR/Flash – crossplatform http://configap.com/
  33. 33. App Deployment and Publication  Take each properly signed release build and upload to the appropriate distribution point.  Every mobile app store is different.
  34. 34. Joseph’s Workflow… 1. Test using Brackets via www directory. No compile step! 2. Emulate via Ripple 3. Emulate via native tools 4. Debug on device 5. Use Hydration to test on multiple devices 6. Release build 7. Distribution
  35. 35. Closing Remarks JUST A COUPLE MORE THINGS…
  36. 36. Building a Mobile App with Feathers and Starling          Downloading the frameworks and the AIR SDK Configuring the project Implementing a theme Creating the screen classes Adding a navbar component Building the classes Returning saved files Publishing a project Installing and running the app http://www.lynda.com/JosephLabrecque
  37. 37. Learning Adobe Edge Animate  Master the Edge Animate interface and unleash your creativity through standard HTML, CSS, and JavaScript  Packed with an abundance of information regarding the Edge Animate application and related toolsets  Robust motion and interactivity through web standards  Those approaching Edge Animate from Adobe Flash Professional will find many references and tips for a smooth transition  A comprehensive guide for creating engaging content with Adobe Edge Animate. http://www.amazon.com/Joseph-Labrecque/e/B0057R7UO0/
  38. 38. Thanks. Questions? CONTACT JOSEPH  @JosephLabrecque  JosephLabrecque.com  Joseph.Labrecque@du.edu

×