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

1. Getting Acquainted
with PhoneGap
NATIONAL ASSOCIATION OF GOVERNMENT WEB PROFESSIONALS – MARCH 6 2014

2. Introduction

Mobile apps with Web Standards

Environment Configuration

Mobile Tooling

Mobile Frameworks

App Emulation

Release Builds

Deployment

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. 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. Introducing PhoneGap
MOBILE APPLICATIONS BUILT WITH WEB STANDARDS

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. 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. Target Platforms

Google Android

Apple iOS

Blackberry OS

Blackberry 10

WebOS

Windows Phone

Symbian

Bada

9. First Steps
GETTING EVERYTHING READY

10. Environment Setup

Node.js w/ NPM

PhoneGap

Ripple

Java JDK

Native SDK

ANT

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. 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. 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. 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. Developing a Mobile App
TOOLS AND FRAMEWORKS

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. 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. 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. 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. 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. 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. Mobile UI & Development Frameworks

jQuery Mobile

Twitter Bootstrap

TopCoat

Angular.js

Backbone.js

Sencha

And many more…

23. Beyond Web Standards
TAKING YOUR APP TO THE NEXT LEVEL

24. PhoneGap Features

Accelerometer

Network

Camera

Notification (Alert)

Compass

Notification (Sound)

Contacts

Notification (Vibration)

File

Storage

Geolocation

Media

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. Testing, Debugging, Distribution!
GETTING YOUR APP READY FOR PRIMETIME

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. 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. 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. 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. Using PhoneGap Build

/www/config.xml

Upload .zip

Link to Git repository

Hydration!

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. App Deployment and Publication

Take each properly signed
release build and upload to
the appropriate distribution
point.

Every mobile app store is
different.

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. Closing Remarks
JUST A COUPLE MORE THINGS…

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. 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. Thanks. Questions?
CONTACT JOSEPH

@JosephLabrecque

JosephLabrecque.com

Joseph.Labrecque@du.edu