Writing applications for phones has been a daunting task since every platform uses it's own language and API's. PhoneGap will solve this problem for you by utilizing the browser capabilities. In this session we will see how we can turn a web based application into a native app. We will also look at posibilites to integrate native functionality, like the camera or accelerometer, in our application. The final part of the presentation is about deployment of these applications. Adobe offers a cloud based service called PhoneGap Build which easily builds your application for all platforms.
3. About me
Martin de Keijzer
Dutch web developer
3
@Martin1982
PHPBenelux Board Member
Working for Ibuildings
http://www.martindekeijzer.nl
Friday, 7 June 13
20. Creating your first project
20
$ ./path/to/cordova-ios/bin/create
/path/to/my_new_cordova_project
com.example.cordova_project_name
CordovaProjectName
Friday, 7 June 13
27. Ready for action
27
Always use the “www” folder & always assume your
app is running from a filesystem instead of a web server!
On Android it’s “assets/www”
Friday, 7 June 13
28. Let’s take it easy
PhoneGap build
28
Friday, 7 June 13
29. Creating builds using platform specific tools
29
The pain:
Running updates and checking requirements over
and over again!
Friday, 7 June 13
44. Camera & Capture & Media
44
Use the device’s library,
camera and microphone to
work with local audio, video
and images.
<input type="file" accept="image/*" capture="camera">
Don’t forget iOS 6 supports:
Friday, 7 June 13
46. Connection
46
See if a user is connected and
inspect the type of connection:
Wifi, xG, Ethernet
Caution navigator.isOnline is your close friend
Friday, 7 June 13
55. Splashscreen
55
No matter how beautiful your splash screen is,
eventually you’ll need to show and hide it
Friday, 7 June 13
56. Storage
56
SQL storage based on the W3C
WebSQL specification.
Caution; WebSQL is no longer maintained
IndexedDB is the new superhero!
Friday, 7 June 13
58. Pick what you want
58
https://github.com/phonegap/phonegap-plugins
Friday, 7 June 13
59. Creating your own plugin
59
window.echo = function(str, callback) {
cordova.exec(callback, function(err) {
callback('Nothing to echo.');
}, "Echo", "echo", [str]);
};
Define the Javascript Method
Use Cordova.exec and give the following
arguments:
JavaScript Success callback function
JavaScript Error handling callback function
Native class to map to
Native method to map to
Native method arguments
Friday, 7 June 13
61. Conclusion
61
Package web applications as native apps
Enrich applications with native plugins
Quick deployment with PhoneGap Build VS. fine-
tuned deployment with PhoneGap CLI tools / IDE
If it doesn’t fit the bill? Download or write your own
plugin!
Always remember; your app runs as a local
application straight from the filesystem as in file://
Friday, 7 June 13
62. Start playing
Small demo app available from:
http://martin1982.github.io/dmc2013demo/
62
Friday, 7 June 13