Using PhoneGap to Build Mobile Applications - Matt Gifford
May 17, 2013
Using PhoneGap to Build Mobile Applications - Matt Gifford
(Ray Camden was originally supposed to do this presentation, but had to fly home early, so Matt stepped in to cover for him. It seriously didn't come across like any sort of "last minute" thing; Matt's presentation went exceptionally well. This may have been the highlight of the conference for me, and I'm not just saying that because I won a free book in this session. :) )
Ray was set up to do the demos with iPhone
Matt's using Android instead (which works better for me, as I spend more time in Android devices anyway)
Genesis of PhoneGap
started in 2009 by Nitobi
Adobe bought Nitobi
PhoneGap is free
and open source
Creates NEAR-hybrid apps
Tries to follow standards
when it doesn't need to do anything, it doesn't
in the perfect world, PhoneGap won't exist
Features--
Contacts
Device
Events
File
Geolcation
Globalization - date/number/currency formatting
Media - related to audio playback (supports record as well)
Notification - visual, audible, and tactile notifications
Splashscreen - for your splash screen needs
Storage - mini database
Unofficial features
NO restriction on which JS libraries you use
-- jQuery Mobile, Backbone, whatever
use any API you want
easily deploy to the app store
Non-features
not a UI
can't convert CF/PHP/Perl sites to native
not a native app killer
Who is using PhoneGap?
wikipedia
bbc
hockey community
etc
over 1million downloads
Not limited to any IDE
uses Eclipse, CFBuilder, etc
Most important bit of JS in PhoneGap:
document.addEventListener("deviceready", onDeviceReady, false);
used to HAVE to use Eclipse to build a PhoneGap project, edit the manifest file, etc, lots of headaches
Now, can do it from the command line using the PhoneGap "create" command
-- gives you options for which type of platform you're targeting (iOS, Android, etc)
can share 1 codebase for android and iOS versions of your app (the /www folder)
up until you use plugins, then it starts to break.
can also generate your projects via the apache site.
-- kind of confusing, not a good option to explore
PhoneGap Build
http://build.phonegap.com
builds everything FOR you in the cloud
no manifest files or other weirdness required.
-include cordova-VERSION.js
-only does what it has to
-config.xml
-plugins
...but it doesn't ALWAYS work. sometimes the build fails. just hit "rebuild" and try it again.
building iOS apps fail by default on the first run
...because you need a product key
In the real world
BEST way to test is actually ON the device
but you also CAN build...
in the desktop browser
mobile via web
Ripple emulator
Local SDK to Simulator / Device
Desktop Browser
- super fast because we don't need to "go" anywhere
- can use whatever browser testing tools we know and love
but...
- UX isn't right
- UI isn't right
- features missing (onDeviceReady won't run)
- security restrictions
Mobile via Web
- kinda fast
- get SOME idea of UI and UX
- but debugging is bad
Ripple Emulator
- amazing tool
- open source, written in JavaScript
- allows you to emulate a number of devices
but...
- doesn't support ALL of the phone gap api
and it's still not "on the device"
emulate.phonegap.com
installs the chrome extension
** always check for network connectivity in your apps
event listeners for "online" and "offline"
don't forget: your'e JUST building a web app, and slotting phonegap.js in afterward
can build ANY front-end web app, just like always
PhoneGap Build 411
supports the big and small players -- android, iPhone, blackberry, symbian
as an API
no SDKs, no compiling, no mess
what you WILL screw up 1 or 2 times...
when you create your app
PhoneGap Build will INJECT its own phone gap.js file in the app
so you're NOT supposed to have it in the uploaded project
config.xml
used to configure stuff. instead of the "manifest" file you'd use if you were building native android (for example)
no validator, so get it right
can test this with the Ripple emulator
not required, but put and in your xml file too so it displays it in the phonegapbuild site. if you'er working with at team of guys, this can help each other see what's what.
<preference>
all use basic name/value pair syntax
using phonegap-version preference, can specify which PG version we want PGB to use when building the app
orientation - landscape/portrait
target-device - can set to "universal" for all devices
webviewbounce
etc
can set "max and min SDK" for android devices
<feature> tag
turn on/off which features you need for your device
battery, camera, file, media, network, etc.
including them all doesn't have any performance issues
just tells PGB "tell the device, i want to use these permissions"
if you don't want to use ANY of them you can say
<preference name="permissions" value="none" />
By default, app gets NO access to external resources.
if you want to start doing an ajax request to a server, have to tell it in the config.xml "i want to go to this domain".
can also use wildcards to access any external resource
build.phonegap.com/docs/config-xml
-- great resource for the config.xml
-- lists all the available notes, features, etc.
Access element
<access origin="https://build.phonegap.com" />
"i only want my app to access THIS website"
etc
what happens when you click on a link?
on Android, if it's white listed, it will take over the web view, otherwise it opens a browser
on iOS if whitelisted, a regular link takes over web view, one with target="blank" opens in a browser. if NOT whitelisted, it is blocked
for more info
https://build.phonegap.com/blog/access-tags
Remember inAppBrowser feature
-- used to be called "child browser" as a plugin
ConfiGap
http://aj-software.com/configap/
AIR app
allows you to build the XML with a GUI
CFBuilder extension (that matt wrote!) that gives you a GUI to build the config.xml file from within CF Builder
phonegapbuild.rigaforge.org
Hydration--
improves compilation speed
takes your PG app, and when it compiles it, it creates a native binary wrapper around the PG app, and when you d/l it on the device, every time, it will make a call to the PG server to detect if a new version is available for download
-- so install the app ONCE, and it always checks for later versions
when you first make a PGB project, there is an "enable hydration" checkbox, that's how you add it to your project
sometimes the build services goes wrong
a good way to keep an eye on things is http://pgbuildstat.us
debug.phonegap.com
"weinre"
basically a remote version of Firebug, Chrome Dev Tools, etc
to add this to your app: check the "enable debugging" box in PGB when making a project
PGB API--
everything returned is in JSON
some prebuilt api libraries out there for interacting with the PGB api - php, node.js, etc.
build.phonegap.com/docs/api
can use to find out how many projects i have, info about a specific app, etc.
also an extension in Brackets (downloadable from the Git repo)
so i can send projects to PGB straight from my Brackets IDE
Dreamweaver has an option added to CS5.5 for this too
autobuild.monkeh.me
-- free service
-- add a web service hook to Git
Plugins
PG can already interact w/ a lot of the phone's features, but not everything
it'd be nice to interact w/ Facebook, a generic "push" service, etc.
we can, with plugins
-- written in their native language (that follows an API, so i'd have to write it in objective C)
ship w/ a javascript wrapper (so i actually write objective C plus javascript for the wrapper)
include them in your project
examples:
TTS (text to speech)
barcode scanner
SMS
intents
push notifications
child browser (now in PG as "InAppBrowser")
doing that in PGB is much harder
to cater for the different platforms, the developers writing the plugins need to change a LOT so it can be pushed into all the device types
so as a result, not all the open source plugins work for all phones
ChildBrowser (but don't use it, use InAppBrowser instead)
Barcode Scanner
various others...
the way you define a plugin: via the config.xml file
<gap:plugin name="BardcodeScanner" />
then in index.html:
<script src"barcodescanner.js"></script>
...but you DONT include the barcodescanner.js file in your project - PGB auto-includes it when you build your app
Your options for debugging
stick to the desktop
remote debugging (mobile web, chrome/safari)
console.log()
UI
many options
pick a framework that works for you - query mobile, bootstrap, topcoat
DIY
jquery mobile
-takes a "i'll just make everything pretty for you" approach
- book: query mobile web development essentials (version 2 is coming out soon)
bootstrap
responsive layout
topcoat
new one, released by adobe
kind of bootstrap-ish
1 file for desktop, 1 file for mobile
topcoat.io
Performance -- Some tips
click versus touch, click is quicker than touch
click works 100% of the time
remote data via ajax isn't magically slender
perception is everything
cache static data
cache dynamic data
PG has HTML5 local storage - make use of it
if you're using a mustache template, whatever, store it in local storage
Some more tips --
check yr JS framework
learn CSS performance (hardware acceleration)
-- often underused, people rely on jquery animations way too much
learn from the past
additional resources
-- Christophe Coenraets - block post about 10 performance techniques for phone gap apps
Brock Whitten has stuff too
book: Matt's cookbook
(Ray Camden was originally supposed to do this presentation, but had to fly home early, so Matt stepped in to cover for him. It seriously didn't come across like any sort of "last minute" thing; Matt's presentation went exceptionally well. This may have been the highlight of the conference for me, and I'm not just saying that because I won a free book in this session. :) )
Ray was set up to do the demos with iPhone
Matt's using Android instead (which works better for me, as I spend more time in Android devices anyway)
Genesis of PhoneGap
started in 2009 by Nitobi
Adobe bought Nitobi
PhoneGap is free
and open source
Creates NEAR-hybrid apps
Tries to follow standards
when it doesn't need to do anything, it doesn't
in the perfect world, PhoneGap won't exist
Features--
Contacts
Device
Events
File
Geolcation
Globalization - date/number/currency formatting
Media - related to audio playback (supports record as well)
Notification - visual, audible, and tactile notifications
Splashscreen - for your splash screen needs
Storage - mini database
Unofficial features
NO restriction on which JS libraries you use
-- jQuery Mobile, Backbone, whatever
use any API you want
easily deploy to the app store
Non-features
not a UI
can't convert CF/PHP/Perl sites to native
not a native app killer
Who is using PhoneGap?
wikipedia
bbc
hockey community
etc
over 1million downloads
Not limited to any IDE
uses Eclipse, CFBuilder, etc
Most important bit of JS in PhoneGap:
document.addEventListener("deviceready", onDeviceReady, false);
used to HAVE to use Eclipse to build a PhoneGap project, edit the manifest file, etc, lots of headaches
Now, can do it from the command line using the PhoneGap "create" command
-- gives you options for which type of platform you're targeting (iOS, Android, etc)
can share 1 codebase for android and iOS versions of your app (the /www folder)
up until you use plugins, then it starts to break.
can also generate your projects via the apache site.
-- kind of confusing, not a good option to explore
PhoneGap Build
http://build.phonegap.com
builds everything FOR you in the cloud
no manifest files or other weirdness required.
-include cordova-VERSION.js
-only does what it has to
-config.xml
-plugins
...but it doesn't ALWAYS work. sometimes the build fails. just hit "rebuild" and try it again.
building iOS apps fail by default on the first run
...because you need a product key
In the real world
BEST way to test is actually ON the device
but you also CAN build...
in the desktop browser
mobile via web
Ripple emulator
Local SDK to Simulator / Device
Desktop Browser
- super fast because we don't need to "go" anywhere
- can use whatever browser testing tools we know and love
but...
- UX isn't right
- UI isn't right
- features missing (onDeviceReady won't run)
- security restrictions
Mobile via Web
- kinda fast
- get SOME idea of UI and UX
- but debugging is bad
Ripple Emulator
- amazing tool
- open source, written in JavaScript
- allows you to emulate a number of devices
but...
- doesn't support ALL of the phone gap api
and it's still not "on the device"
emulate.phonegap.com
installs the chrome extension
** always check for network connectivity in your apps
event listeners for "online" and "offline"
don't forget: your'e JUST building a web app, and slotting phonegap.js in afterward
can build ANY front-end web app, just like always
PhoneGap Build 411
supports the big and small players -- android, iPhone, blackberry, symbian
as an API
no SDKs, no compiling, no mess
what you WILL screw up 1 or 2 times...
when you create your app
PhoneGap Build will INJECT its own phone gap.js file in the app
so you're NOT supposed to have it in the uploaded project
config.xml
used to configure stuff. instead of the "manifest" file you'd use if you were building native android (for example)
no validator, so get it right
can test this with the Ripple emulator
not required, but put
<preference>
all use basic name/value pair syntax
using phonegap-version preference, can specify which PG version we want PGB to use when building the app
orientation - landscape/portrait
target-device - can set to "universal" for all devices
webviewbounce
etc
can set "max and min SDK" for android devices
<feature> tag
turn on/off which features you need for your device
battery, camera, file, media, network, etc.
including them all doesn't have any performance issues
just tells PGB "tell the device, i want to use these permissions"
if you don't want to use ANY of them you can say
<preference name="permissions" value="none" />
By default, app gets NO access to external resources.
if you want to start doing an ajax request to a server, have to tell it in the config.xml "i want to go to this domain".
can also use wildcards to access any external resource
build.phonegap.com/docs/config-xml
-- great resource for the config.xml
-- lists all the available notes, features, etc.
Access element
<access origin="https://build.phonegap.com" />
"i only want my app to access THIS website"
etc
what happens when you click on a link?
on Android, if it's white listed, it will take over the web view, otherwise it opens a browser
on iOS if whitelisted, a regular link takes over web view, one with target="blank" opens in a browser. if NOT whitelisted, it is blocked
for more info
https://build.phonegap.com/blog/access-tags
Remember inAppBrowser feature
-- used to be called "child browser" as a plugin
ConfiGap
http://aj-software.com/configap/
AIR app
allows you to build the XML with a GUI
CFBuilder extension (that matt wrote!) that gives you a GUI to build the config.xml file from within CF Builder
phonegapbuild.rigaforge.org
Hydration--
improves compilation speed
takes your PG app, and when it compiles it, it creates a native binary wrapper around the PG app, and when you d/l it on the device, every time, it will make a call to the PG server to detect if a new version is available for download
-- so install the app ONCE, and it always checks for later versions
when you first make a PGB project, there is an "enable hydration" checkbox, that's how you add it to your project
sometimes the build services goes wrong
a good way to keep an eye on things is http://pgbuildstat.us
debug.phonegap.com
"weinre"
basically a remote version of Firebug, Chrome Dev Tools, etc
to add this to your app: check the "enable debugging" box in PGB when making a project
PGB API--
everything returned is in JSON
some prebuilt api libraries out there for interacting with the PGB api - php, node.js, etc.
build.phonegap.com/docs/api
can use to find out how many projects i have, info about a specific app, etc.
also an extension in Brackets (downloadable from the Git repo)
so i can send projects to PGB straight from my Brackets IDE
Dreamweaver has an option added to CS5.5 for this too
autobuild.monkeh.me
-- free service
-- add a web service hook to Git
Plugins
PG can already interact w/ a lot of the phone's features, but not everything
it'd be nice to interact w/ Facebook, a generic "push" service, etc.
we can, with plugins
-- written in their native language (that follows an API, so i'd have to write it in objective C)
ship w/ a javascript wrapper (so i actually write objective C plus javascript for the wrapper)
include them in your project
examples:
TTS (text to speech)
barcode scanner
SMS
intents
push notifications
child browser (now in PG as "InAppBrowser")
doing that in PGB is much harder
to cater for the different platforms, the developers writing the plugins need to change a LOT so it can be pushed into all the device types
so as a result, not all the open source plugins work for all phones
ChildBrowser (but don't use it, use InAppBrowser instead)
Barcode Scanner
various others...
the way you define a plugin: via the config.xml file
<gap:plugin name="BardcodeScanner" />
then in index.html:
<script src"barcodescanner.js"></script>
...but you DONT include the barcodescanner.js file in your project - PGB auto-includes it when you build your app
Your options for debugging
stick to the desktop
remote debugging (mobile web, chrome/safari)
console.log()
UI
many options
pick a framework that works for you - query mobile, bootstrap, topcoat
DIY
jquery mobile
-takes a "i'll just make everything pretty for you" approach
- book: query mobile web development essentials (version 2 is coming out soon)
bootstrap
responsive layout
topcoat
new one, released by adobe
kind of bootstrap-ish
1 file for desktop, 1 file for mobile
topcoat.io
Performance -- Some tips
click versus touch, click is quicker than touch
click works 100% of the time
remote data via ajax isn't magically slender
perception is everything
cache static data
cache dynamic data
PG has HTML5 local storage - make use of it
if you're using a mustache template, whatever, store it in local storage
Some more tips --
check yr JS framework
learn CSS performance (hardware acceleration)
-- often underused, people rely on jquery animations way too much
learn from the past
additional resources
-- Christophe Coenraets - block post about 10 performance techniques for phone gap apps
Brock Whitten has stuff too
book: Matt's cookbook