I am PhoneGap – (and so can you!)

View Github Repository Open presentation in a new window

LeeFlannery

See all presentation from LeeFlannery

I am PhoneGap – (and so can you!)

0 0

iamphonegap

I am PhoneGap presentation - GR Dev Night 2014-06-05

On Github LeeFlannery / iamphonegap

I am PhoneGap

(and so can you!)

An introduction to PhoneGap

Lee Flannery - @somethingblewup

What even is PhoneGap?

Good luck dude.

PhoneGap

... is a mobile development framework

... where apps are written in HTML/CSS/JS

... and they are deployed like a native mobile "app."

PhoneGap apps are "hybrid" (a.k.a "cross platform") applications - part native, part mobile web.

Hybrid apps can have some features of a native mobile app, but are coded like a mobile web site.

Native traits

  • Can access native device APIs
  • Can be packaged for distribution in app stores

Mobile web traits

  • Written in HTML5/CSS/JS
  • Rendered in "WebViews," not in the device's native UI

What's a "WebView"?

A PhoneGap webview is a program wrapper around the "in-app" full-screen browser for your mobile platform.

What platforms can I develop for?

  • Android
  • iOS
  • Amazon FireOS
  • Windows Phone
  • Blackberry (f'realz) and even more ...

Phonegap history

Cordova is the free open-source version of the PhoneGap engine. Cordova is under the stewardship of the Apache Software Foundation.

PhoneGap is Adobe's branded version of Cordova. The PhoneGap brand includes a distribution of Cordova and extends to some of Adobe's non-free offerings.

Cordova project goals

“The ultimate purpose of PhoneGap is to cease to exist.” - Brian LeRoux, developer, Apache Cordova contributor

Note: probably not what Adobe has in mind ...

Cordova project goals

It's possible someday that HTML5 will give you more access to native device APIs.

e.g. geolocation is already possible in some browsers with HTML5 JS APIs.

What do I need to start?

$ npm install -g cordova
$ cordova create ohaiProject com.lolcats.ohai ohaiApp

... builds your scaffolding app.

You'll need SDKs for your target platforms

Android

  • Eclipse
  • Android Dev Tools for Eclipse (ADT)
  • Android SDK

You'll need SDKs for your target platforms

iOS

  • XCode
  • Xcode Command Line Tools
  • A Mac w/current OS X (to build)
  • iOS developer certificate (to install on a device)

I have no Mac, but I must build.

PhoneGap Build

Paid service from Adobe, point it to your repo, they'll compile "in the cloud" and send you binaries.

Emulation/Simulation

iOS - need XCode, need to launch from XCode

Android - need Android SDK, can run emulator from command line

Run on your devices

iOS - need XCode and developer account

Android - just need the SDK, can launch from command line

APIS and Plug-ins

  • Accelerometer
  • Camera
  • Compass
  • Contacts
  • File system
  • Geolocation
  • Media
  • Notification
  • Storage
  • ... and more

Development tools

  • Webstorm
  • XCode
  • Eclipse
  • Visual Studio?

Debugging stories

With iOS simulator and Safari devtools

  • DOM inspection
  • JS console
  • JS breakpoints

Debugging stories

JS shims

Run a PhoneGap app in a browser, blocking or catching device API events.

Small little JS snippets, search Github Gists there are a ton of examples.

Kinda low rent, works best when you don't care a lot about native API use.

Frameworks?

jQuery Mobile?

Twitter Bootstrap?

Angular JS?

Ember JS?

"Use HTML. It works really well." - Brian Leroux

Frameworks?

The best framework to use with PhoneGap is the one that suits your team and the app you're trying to build.

Deploy to mobile marketplaces

iOS

App Store Requirements:

  • Use iTunes Connect website
  • Need a developer account
  • Wait for app store approval

iOS "Ad-hoc"

Up to 100 devices, Test Flight, loading directly with XCode possible

Android

Google Play Developer Console Requirements:

  • Don't kill nobody
  • If you do hide the bodies

event model, just for fun

      // Wait for device API libraries to load
      //
      function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
      }

      // device APIs are available
      //
      function onDeviceReady() {
        // Register the event listener
        document.addEventListener("menubutton", onMenuButton, false);
      }

      // Handle the menu button
      //
      function onMenuButton() {
        alert ("Hey stop pushing that!");
      }

More Event examples ...

  • deviceready
  • backbutton
  • menubutton
  • searchbutton
  • startcallbutton
  • endcallbutton
  • volumedownbutton
  • volumeupbutton

To Phonegap or not to Phonegap

  • not going to get a native look and especially feel
  • proprietary code is possibly less secure secure as it is delivered as HTML5/CSS3/JS
  • allows dynamic loading of JS, HTML from outside the app
  • Phonegap is slower

To Phonegap or not to Phonegap

  • Gets you in the app store
  • Leverages web dev skills if you've got them
  • One(ish) code base for multiple platforms
  • Can be faster and more affordable than multiple native devs

If you can live with the trade-offs, PhoneGap is a viable option that gets you into the app store door.

THANKS!