Ivano Malavolta discusses cross-platform mobile app development with Apache Cordova. Cordova allows developing apps with HTML, CSS, and JavaScript that can be deployed across platforms like iOS and Android. It uses a web view to display the app within a native container, providing access to device APIs. Popular plugins extend Cordova's capabilities by integrating native functionality. Debugging can be done in the browser, emulators, or on actual devices. The talk provides examples of the Cordova CLI, accelerometer and camera APIs.

1. Ivano Malavolta
Cross-platform mobile apps with
Apache Cordova

2. Roadmap
• The Cordova framework
• Cordova CLI
• Debugging Cordova applications
• Examples of Cordova APIs

3. PhoneGap VS Cordova
Adobe/Nitobi donated the PhoneGap codebase to the Apache foundation
à wider audience and contributors
à transparent governance
Better documentation
à easier contributions for companies
Apache Licensing
There was only one problem....
trademark ambiguity à CORDOVA
PhoneGap is a distribution of
Apache Cordova

4. Cordova
You develop your app using the usual three guys
You use the same web view of the native OS
• iOS = UIWebView
• Android = android.webkit.WebView
http://phonegap.com/blog/2013/06/20/coming-soon-phonegap30/

5. Cordova
The UI layer is a web browser view
• 100% width
• 100% height
Headless web browser
• No URL bar
• No decorations
• No zooming
• No text selection

6. Can I use HTML5, JS and CSS libraries I use
everyday?

7. How does Cordova work?

8. Features
coverage

9. Recurrent app architecture
Single-page HTML5 web app
Classical web server with server-side scripting language such as Java, .NET, PHP, etc…
Communication canbe based on the REST architectural style
A standard DB (even deployed in the same machine of the application server) OR an
external API
App
Application server
Data repository

10. Roadmap
• The Cordova framework
• Cordova CLI
• Debugging Cordova applications
• Examples of Cordova APIs

11. Cordova CLI
The main tool to use for the cross-platform workflow
It allows you to:
• create new projects
• add platforms
• build a project w.r.t. different platforms
• emulate a project on platform-specific emulators
• run a project on device
• include specific plugins into a project
CLI = Command-Line Interface
If you prefer to use platform-
specific SDKs, you can still use it
to initialize your project

12. Creates template project
• PATH the folder that will contain your project
• ID package identifier in reverse-domain style (optional)
• NAME display name of the app (optional)
Project creation

13. With this command you add a target platform of your project.
The platform will appear as subfolder of platforms
containing the platform-specific project
mirroring the www folder
• PLATFORM_NAME
the name of the platform (e.g., ios, android, wp8)
Add platforms
If you do something like this:
cordova
platform
remove
ios
you are removing a specific platform
You can use an SDK such as Eclipse or
Xcode to open the project you created

14. The emulate command will run the app on a platform-specific emulator
The run command will run the app on a previously setup device (e.g., connected via USB and
configured for being used as device for testing purposes)
• PLATFORM_NAME
the name of the platform to be built (e.g., ios, android, wp8)
emulate/run the app

15. This generates platform-specific code within the project's platforms subdirectory
• PLUGIN_ID
the id of the repository containing the source code of the plugin to be added to the project
add plugins
Wait.... plugins?
The list of plugins can be found
here
http://plugins.cordova.io
If the plugin you want to add is
not in the cordova.io registry, you
can directly refer to the URL of his
GitHub repository

16. When Cordova API is not enough...
Sometimes Cordova is not enough as is for our purposes
• unsupported feature
• heavyweight data processing is faster in native code
ex. images manipulation
• background processing is better handled natively
ex. files sync
• complex business logic
à You can develop a
Cordova plugin

17. Cordova plugins
Purpose:
To expose a native functionality to the browser
This is done by developing
• a custom Native Component
it will be different for each platform
• a custom JavaScript API
it is always the same
Mobile Web app
JavaScript
Plugin A
JavaScript
Plugin B
iOS
Plugin A
iOS
Plugin B
Native Platform

18. Examples of available plugins

19. Roadmap
• The Cordova framework
• Cordova CLI
• Debugging Cordova applications
• Examples of Cordova APIs

20. Simulator
• Officially supported by platform vendors
• You use the “real” device’s browser
PRO
• device’s performance is not considered
• this is iOS-specific
• Android’s emulator is a joke
CONS

21. On device
• accurate
• still handy
• real performance tests
• real browser tests
PRO
• Deployment takes some time (~6 seconds for iOS)
CONS

22. Ripple
• very quick
• can use Chrome’s Web Development Tools
• You can test Cordova’s API from the Desktop
• browsers’ small differences and bugs
• cannot test the interaction with external apps
PRO
CONS
It is based on Ripple, a Chrome
plugin for mobile dev
from Cordova 3.0.0, you need to use
the Ripple available at Apache
npm
install
-­‐g
ripple-­‐emulator
ripple
emulate

23. Apache Ripple

24. My development workflow
1. Code & test using Ripple (very quick)
Quick sketch of layout and complete business logic
2. Run and debug in the XCode simulator (handy & accurate)
Complete the UI for iOS devices and ~99% confidence about business logic
3. Run and debug on devices (complete control & confidence)
Complete the UI for Android too and ~99% confidence about business logic

25. Roadmap
• The Cordova framework
• Cordova CLI
• Debugging Cordova applications
• Examples of Cordova APIs

26. Accelerometer
navigator.accelerometer
It is a global object that captures device motion in the x, y, and z directions
You can call 3 methods on it:
getCurrentAcceleration
watchAcceleration
clearWatch

27. getCurrentAcceleration
getCurrentAcceleration(win,
fail);
It gets the current acceleration along the x, y, and z axis
win
callback function with an Acceleration parameter
fail
error callback

28. watchAcceleration
var
watchID
=
navigator.accelerometer.watchAcceleration(win,
fail,
[options]);
It gets the device's current acceleration at a regular interval
win
callback function with an Acceleration parameter, it is called at regular intervals
fail
error callback
options
the interval is specified in the frequency parameter

29. clearWatch
clearWatch(watchID);
Stop watching the Acceleration referenced by the watch ID parameter
watchID
ID returned by accelerometer.watchAcceleration

30. The Acceleration object
It contains accelerometer data captured at a specific point in time
Properties
x (Number): Amount of acceleration on the x-axis. (in m/s^2)
y (Number): Amount of acceleration on the y-axis. (in m/s^2)
z (Number): Amount of acceleration on the z-axis. (in m/s^2)
timestamp (DOMTimestamp): Creation timestamp in milliseconds
these values include the effect
of gravity (9.81 m/s^2)

31. Accelerometer example
var
options
=
{
frequency:
3000
};
var
watchID
=
navigator.accelerometer.watchAcceleration(win,
fail,
options);
function
win(acc)
{
if((acc.x
===
0)
&&
(acc.y
===
0)
&&
(acc.z
===
9.81))
{
console.log('I
am
on
a
table');
stop();
}
else
{
console.log('Please,
leave
me
on
the
table');
}
}
function
fail()
{
alert('error');
}
function
stop()
{
if(watchID)
{
navigator.accelerometer.clearWatch(watchID);
watchID
=
null;
}
}

32. Camera
navigator.camera
It provides an home-grown API for capturing images from the device’s default camera
application
It is developed in-house by Cordova in order to provide more options to developers
Methods:
getPicture
cleanup

33. Getting pictures from the camera
camera.getPicture(win,
[fail],
[options]);
Takes a photo using the camera or retrieves a photo from the device's album
win
callback function with a image data parameter
fail
error callback
options
capture parameters
The result of getPicture can be:
• a base64 encoded string
• the URI of an image file
Encoding the image using Base64
can cause memory issues on some
devices

34. getPicture options
getPicture() can be called with the following options
{
quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 100,
targetHeight: 100,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
};

35. Camera example
var
options
=
{quality:
50,
destinationType:
Camera.DestinationType.FILE_URI,
sourceType:
Camera.PictureSourceType.CAMERA
};
setTimeout(function()
{
navigator.camera.getPicture(win,
fail,
options);
},
3000);
function
win(imageURI)
{
var
element
=
document.getElementById('block');
element.setAttribute('src',
imageURI);
}
function
fail
(error)
{
console.log(error);
//
this
is
provided
by
the
device’s
native
code
}

36. But... who is using Apache Cordova today?

37. Conclusions
Cordova
You develop your app using the usual three guys
You use the same web view of the native OS
• iOS = UIWebView
• Android = android.webkit.WebView
http://phonegap.com/blog/2013/06/20/coming-soon-phonegap30/
Cordova CLI
The main tool to use for the cross-platform workflow
It allows you to:
• create new projects
• add platforms
• build a project w.r.t. different platforms
• emulate a project on platform-specific emulators
• run a project on device
• include specific plugins into a project
CLI = Command-Line Interface
If you prefer to use platform-
specific SDKs, you can still use it
to initialize your project
Cordova plugins
Purpose:
To expose a native functionality to the browser
This is done by developing
• a custom Native Component
it will be different for each platform
• a custom JavaScript API
it is always the same
Mobile Web app
JavaScript
Plugin A
JavaScript
Plugin B
iOS
Plugin A
iOS
Plugin B
Native Platform
But... who is using Apache Cordova today?

38. Contact
Ivano Malavolta |
Gran Sasso Science Institute
iivanoo
ivano.malavolta@gssi.infn.it
www.ivanomalavolta.com