getting acquainted with phonegap

Getting Acquainted

with PhoneGapNATIONAL 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 FacultyUniversity of Denver

Proprietor | OwnerFractured Vision Media, LLC

Adobe Community ProfessionalAdobe Education LeaderAdobe Certified ExpertAdobe Certified EducatorAdobe Influencer

AuthorLynda.com | Peachpit Press | Adobe Press | Packt Publishing | O’Reilly Media | video2brain

ArtistAn 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 PhoneGapMOBILE 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 StepsGETTING 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 AppTOOLS AND FRAMEWORKS

Developing with PhoneGap

Using native SDKs

Download additional tools

Configure tools

Configure dependencies

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

More than 175,000 applications

using AIR 3.8 or greater.

Installed over 500 million times in

the second half of 2013.

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 StandardsTAKING YOUR APP TO THE NEXT LEVEL

PhoneGap Features

Accelerometer

Camera

Compass

Contacts

File

Geolocation

Media

Network

Notification (Alert)

Notification (Sound)

Notification (Vibration)

Storage

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 – cross-

platform

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 RemarksJUST 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