Getting Acquainted with PhoneGap

33 %
67 %
Information about Getting Acquainted with PhoneGap
Technology

Published on March 6, 2014

Author: JosephLabrecque

Source: slideshare.net

Description

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

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)

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

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

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

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.

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

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/

Thanks. Questions? CONTACT JOSEPH  @JosephLabrecque  JosephLabrecque.com  Joseph.Labrecque@du.edu

Add a comment

Related presentations

Related pages

Getting Acquainted with PhoneGap – In Flagrante Delicto!

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 ...
Read more

Beginning PhoneGap - GBV

Getting Acquainted with the GWT PhoneGap 232 Building aPhoneGap GWT Application 232 Build the GWT Application 232 Build aPhoneGap Android Application 241
Read more

Using PhoneGap with jQuery Mobile - Springer

Using PhoneGap with jQuery Mobile While PhoneGap provides a platform to allow JavaScript apps to access native phone ... Getting Acquainted with jQuery
Read more

Mobile Development with PhoneGap - FITC

Mobile Development with PhoneGap February 28 2012, 2:50 - 3 ... PhoneGap lets you take advantage of HTML, ... Getting Acquainted with jQuery
Read more

PhoneGap Jumpstart – In Flagrante Delicto!

PhoneGap Jumpstart. I’ve always found that getting started with PhoneGap if you hadn’t used it before ... Getting Acquainted with PhoneGap;
Read more

Mobile Web Framework for JavaScript and HTML5

Chapter 2: Getting Started with PhoneGap ..... 17 Chapter 3: Setting the Environment ... Getting Acquainted with the GWT PhoneGap ...
Read more

PhoneGap: Beginner's Guide - Third Edition | PACKT Books

PhoneGap: Beginner's Guide - Third Edition. ... Getting started with Windows Phone and Visual ... Get acquainted with the fundamentals of PhoneGap; Use ...
Read more

- Beginning PhoneGap: Mobile Web Framework for JavaScript ...

- Selection from Beginning PhoneGap: Mobile Web Framework for JavaScript and HTML5 [Book]
Read more

Beginning PhoneGap: Mobile Web Framework for JavaScript ...

PhoneGap is a growing and leading open-source mobile web apps development framework that lets developers build JavaScript and HTML5-based web applications ...
Read more