Intro to PhoneGap
and PhoneGap Build
Who Am I?
* No, I don't work for Adobe. I just love PhoneGap.
What is PhoneGap?
...when it's at home
Summary
PhoneGap is a tool used to create native mobile applications using Web technologies.PhoneGap provides a standard set of JavaScript APIs to access device features on all supported platforms.
the web tools you love
Open Source
Extensible
DEPLOY TO MULTIPLE PLATFORMS
Like a chrome-less browser
The UI layer of a PhoneGap application is a browser view that takes up 100% of the device width and height. PhoneGap then provides a "bridge" between native APIs and JavaScript
Cordova vs
PhoneGap
Think of PhoneGap as a distribution of Cordova...
PhoneGap is to Cordova as Chrome is to Webkit *
* OK, it's not a perfect analogy... as RedHat is to Linux?
What's wrong with just building web apps, anyway?
Absolutely nothing
Please do.
Did you expect a different answer?
Some reasons why you might want to build a hybrid "native" App instead
- Access to device features
- the camera
- geolocation
- filesystem
- contacts
- accelerometer, etc
What APIs are available?
DO I NEED TO KNOW
OBJECTIVE-C / JAVA / ETC?
No. That's kinda the point.
Getting started
(finally...)
- Download PhoneGap/Cordova
- Set up your dev environment
- ???? *
- Profit!
* Sadly as with all app development, this step usually involves a lot of
development, debugging, testing...
and (in most cases) finally dealing with the
Apple App Store review process. I am so sorry.
Command line tooling
./bin/create
./bin/debug
./bin/emulate
./bin/BOOM *
* Yes that is actually a thing (just for Android though, for some reason).
The www folder
This is where all of your HTML, JavaScript and CSS assets live.
Most PhoneGap apps are of the "single page application" type, meaning there is just an index.html and all the magic happens there.
cordova.js
Platform specific* JavaScript file that provides access to the PhoneGap APIs
Make sure you are using the correct cordova.js for the correct platform.
* Unless you are using PhoneGap Build, we'll get to that...
Device Ready
This event tells you that PhoneGap has finished loading and the APIs (and any plug-ins) are ready to be called.
This is NOT the same as the load event or jQuery's $(document).ready()
Demo
DO I NEED TO SET UP A DEV ENVIRONMENT FOR EACH PLATFORM?
Yes.
Well, unless you use PhoneGap Build.*
* We'll get to that in a minute...
Will my app look like a native app?
That depends...
PhoneGap is UI Agnostic
UI Frameworks
Good
- jQTouch - https://github.com/Senchalabs/jQTouch
- KendoUI (commercial) - http://www.kendoui.com
- App-UI - http://triceam.github.com/app-UI
- Bootstrap - http://twitter.github.com/bootstrap
Bad
- jQuery Mobile - http://jquerymobile.com (please don't )
Other development tools
Emulate:
Ripple emulator - Chrome Webstore
Debug:
Weinre - http://debug.phonegap.com
Ripple Emulator
Demo
WEINRE
Hosted webkit remote inspector, kinda...
Demo
PhoneGap Build
- IOS, Android, BlackBerry, WebOS, Windows Phone and Symbian
- FREE and for one private project
- Will always be free for Open Source projects
- Choose to upload your files (zip) or provide a Github repository
- Supports a few plugins (ChildBrowser, Barcode Scanner, Analytics)
Told you we would get to it...
A cloud build service
Summary
Adobe PhoneGap Build is a service that allows you to create mobile apps using standard web technologies (HTML, CSS, JavaScript), and then easily compile them for multiple platforms in the cloud.
Get app-store ready apps without the headache of maintaining native SDKs
RESTful API framework
Features
Install Apps Directly - via QR code
Collaborate - When your app is ready, just send a link.
Roles - developers and testers
WEINRE integration
PhoneGap Build & plug-ins
Adobe PhoneGap Build supports a curated selection of PhoneGap Plugins
- ChildBrowser (in app browser)
- Barcode Scanner
- Google Analytics
config.xml
Thanks
Feel free to ask me any PhoneGap questions you may have as long as they have nothing to do with jQuery Mobile.
Just kidding. *
* I'm totally not kidding.
intro to phonegap and phonegap build
By devgeeks
