Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start 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.

DeleteCancel

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.

No, thanks

Mobile Apps: PhoneGap 3 and Apache Cordova

What is Cordova/PhoneGap, v3 vs v2, Things you should know when going mobile with Cordova http://www.mindmercatis.com
by

Simone Avogadro

on 2 July 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Mobile Apps: PhoneGap 3 and Apache Cordova

Mobile Apps: PhoneGap 3
Concepts
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
Globalization API
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
Built-in Javascript API to access device (location, contacts, make calls, vibration, notifications etc...)
Write an on-line/off-line app with HTML 5 !
Target: iOS, Android, Blackberry, Windows Phone

PhoneGap = Apache Cordova + lots of sugar

Local APP
The app is
local
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:
WebSQL
LocalStorage
Single page
single page:
new page fragment using AJAX
app init at startup
all the objects are cached in memory

multiple pages:
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
cd SimpleAPP
cordova platform add android
cordova prepare
ripple emulate
play with emulator
open Eclipse
new project -> static web project
name: SimpeAPP
location: c:\Users\<name>\SimpleAPP
context root: /
web content folder: www
open www/index.html

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:
http://cordova.apache.org/docs/en/3.3.0/
Template engine
Tutorial part 2: coming soon!

keep watching:
http://blog.mindmercatis.com/
https://twitter.com/simoneavogadro
https://www.linkedin.com/company/337433
http://goo.gl/KEAGtt

JQuery Mobile
CSS and GUI elements & widgets
declarative GUI (using HTML 5 data-*)
single page engine
transitions
mobile events (swipe, touch etc...)
config.xml: <access origin="*" />
Coding time!
add jQueryMobile
add link to new page
add a new page
add back link with JQMobile
create app object: example.js
add state buttons
Add JQueryMobile
move all js inside page head
later: download the js/css and copy locally!
Create Example.js
create "js/example.js"
reference it inside "index.html"
now our app has a state!
Add new page
create "detail.html"
add link inside "index.html"
test the result!
App and status
add status check inside "index.html"
add change control "detail.html"
test it!
Lessons learned
index.html declares JS + CSS
child pages are loaded via AJAX
no HEAD
main css/js are inherited
1 page =>
js objects survive page changes
transitions are declarative
Next...
use device-specific features
save state between sessions
download files
GUI template engines
build & deploy app to device

http://www.mindmercatis.com
Full transcript