Send the link below via email or IMCopy
Present to your audienceStart remote presentation
- Invited audience members will follow you as you navigate and present
- People invited to a presentation do not need a Prezi account
- This link expires 10 minutes after you close the presentation
- A maximum of 30 users can follow your presentation
- Learn more about this feature in our knowledge base article
Do you really want to delete this prezi?
Neither you, nor the coeditors you shared it with will be able to recover it again.
Make your likes visible on Facebook?
Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.
Mobile Apps: PhoneGap 3 and Apache Cordova
Simone Avogadroon 2 July 2014
Transcript of Mobile Apps: PhoneGap 3 and Apache Cordova
Design with PhoneGap means design for:
HTML 5 view
offline + online
HTML 5 local storage / sqlite
single page vs. multipage design
mobile toolkit (jquery-mobile, sencha touch)
template engine (mustaches, handlebars)
Tutorial Part 2
Coming soon :-)
About PhoneGap 3
PhoneGap 3 vs PhoneGap 2:
repackaging of plugins
must add also the basic plugins
no need to declare them in XML
easier to make platform-specific changes
new: iOS 6/7, WP 8, BlackBerry 10
PhoneGap in 10 secs
An embedded, state-of-the-art, browser
Write an on-line/off-line app with HTML 5 !
Target: iOS, Android, Blackberry, Windows Phone
PhoneGap = Apache Cordova + lots of sugar
The app is
to the phone:
www/index.html => the app homepage
www/... => local pages (+ images/js/css)
Cross-domain scripting is OK!
whitelist the trusted domains
HTML5 local storage:
new page fragment using AJAX
app init at startup
all the objects are cached in memory
N independent pages
'slow' page transition, visible to user
cordova must be re-initialized on each page
local variables, templates etc... must be reloaded on each page
install & run
1 - install node.js
2 - install Android ADT / iOS XCode + add to path
3 - install Apache ant + add it to path (Android)
3 - open node.js console:
npm install -g cordova
npm install -g ripple-emulator
cordova create SimpleAPP
cordova platform add android
play with emulator
new project -> static web project
context root: /
web content folder: www
edit the project and see the changes
use CTRL+F5 in Chrome to update the app!
add device support
the project is now up and running!
... but we're just using HTML 5 features
let's add some device specific features!
cordova plugin add org.apache.cordova.vibration
cordova plugin add org.apache.cordova.file
see docs for the list of plugins and help:
Tutorial part 2: coming soon!
CSS and GUI elements & widgets
declarative GUI (using HTML 5 data-*)
single page engine
mobile events (swipe, touch etc...)
config.xml: <access origin="*" />
add link to new page
add a new page
add back link with JQMobile
create app object: example.js
add state buttons
move all js inside page head
later: download the js/css and copy locally!
reference it inside "index.html"
now our app has a state!
Add new page
add link inside "index.html"
test the result!
App and status
add status check inside "index.html"
add change control "detail.html"
index.html declares JS + CSS
child pages are loaded via AJAX
main css/js are inherited
1 page =>
js objects survive page changes
transitions are declarative
use device-specific features
save state between sessions
GUI template engines
build & deploy app to device