Published on March 6, 2014
Getting Acquainted with PhoneGap NATIONAL ASSOCIATION OF GOVERNMENT WEB PROFESSIONALS – MARCH 6 2014
Introduction Mobile apps with Web Standards Environment Configuration Mobile Tooling Mobile Frameworks App Emulation Release Builds Deployment
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
Developing Mobile Apps Lots of choices out there… Native (Objective-C, Java) Web (hosted like websites) Hybrid (compiled/wrapped) Compiled (Adobe AIR) Wrapped (PhoneGap)
Introducing PhoneGap MOBILE APPLICATIONS BUILT WITH WEB STANDARDS
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)
Target Platforms Google Android Apple iOS Blackberry OS Blackberry 10 WebOS Windows Phone Symbian Bada
First Steps GETTING EVERYTHING READY
Environment Setup Node.js w/ NPM PhoneGap Ripple Java JDK Native SDK ANT
Node.js and NPM PhoneGap is installed and run locally from Node.js NPM handles installation and updates Command line driven Easy to automate
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.
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.
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!
Developing a Mobile App TOOLS AND FRAMEWORKS
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
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.
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!
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
Mobile UI & Development Frameworks jQuery Mobile Twitter Bootstrap TopCoat Angular.js Backbone.js Sencha And many more…
Beyond Web Standards TAKING YOUR APP TO THE NEXT LEVEL
PhoneGap Features Accelerometer Network Camera Notification (Alert) Compass Notification (Sound) Contacts Notification (Vibration) File Storage Geolocation Media
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
Testing, Debugging, Distribution! GETTING YOUR APP READY FOR PRIMETIME
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!
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.
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”…
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!
Using PhoneGap Build /www/config.xml Upload .zip Link to Git repository Hydration!
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/
App Deployment and Publication Take each properly signed release build and upload to the appropriate distribution point. Every mobile app store is different.
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
Closing Remarks JUST A COUPLE MORE THINGS…
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
Thanks. Questions? CONTACT JOSEPH @JosephLabrecque JosephLabrecque.com Joseph.Labrecque@du.edu
I was asked to speak about PhoneGap to the National Association of Government Web Professionals (NAGW). Here are the slides from this event (recording is ...
Getting Acquainted with the GWT PhoneGap 232 Building aPhoneGap GWT Application 232 Build the GWT Application 232 Build aPhoneGap Android Application 241
Mobile Development with PhoneGap February 28 2012, 2:50 - 3 ... PhoneGap lets you take advantage of HTML, ... Getting Acquainted with jQuery
PhoneGap Jumpstart. I’ve always found that getting started with PhoneGap if you hadn’t used it before ... Getting Acquainted with PhoneGap;
Chapter 2: Getting Started with PhoneGap ..... 17 Chapter 3: Setting the Environment ... Getting Acquainted with the GWT PhoneGap ...
PhoneGap: Beginner's Guide - Third Edition. ... Getting started with Windows Phone and Visual ... Get acquainted with the fundamentals of PhoneGap; Use ...