Developing multidevice-apps using Apache Cordova and HTML5. Guadalajara Java User Group Guillermo Muñoz Java Developer

Transcription

1 Developing multidevice-apps using Apache Cordova and HTML5 Guadalajara Java User Group Guillermo Muñoz Java Developer

2 WTF is Apache Cordova? Set of device APIs that allow to access native device function (such camera or accelerometer) from JavaScript. Complete apps using HTML, CSS and Javascript only. No native code: \o/

3 Why Hybrid Apps? More platforms, more problems Native apps: platform specific, specific dev tools, time consuming, expensive development, best performance. Hybrid apps: platform independent, using known technologies (HTML, CSS, Javascript), quick development, limited performance.

4 A little bit of history Originally called PhoneGap, built by Nitobi in 2009 Nitobi was acquired by Adobe (October 2011) and PhoneGap was donated to the Apache Software Foundation. The original name in ASF was Apache Callback, now is known as Apache Cordova Adobe continues with PhoneGap with Cordova as core engine, offers: Enterprise, Developer App and PhoneGap Build.

5 HTF this works? (The UI) The UI is created using HTML, CSS and Javascript. The UI layer of a Cordova app is a web browser view that takes up 100% of device height and width. This is the same web view used by native mobile OS: UIWebView (OS), android.webkit.webview (Android), WebBrowser (WP7), WebBrowser Control (IE 10 for WP8), WebWorks framework (BB). Be careful with cross-navigator compatiblity, this is still web development. Don t reinvent the wheel, use HTML5 UI Frameworks: App Framework, Bootstrap, JQuery Mobile, Sencha Touch, Kendo UI, Dojo Mobile, etc, etc, etc.

6 HTF this works? (The Native Part) Cordova provides JavaScript APIs to access native mobile OS system functionality: Device API (Basic device information) Network connection and Batery Events Accelerometer, Compass and Geolocation Camera, Media Playback and Capture Access files on device or network (File API) Notification via dialog box or vibration Contacts Splashscreen Debug console Open new browser windows (InAppBrowser) Storage

7 HTF this works? (Ready to the store) The final product should be a binary application archive. This is done by building the Cordova project with each SDK. # cordova build This generates an IPA file for ios, or APK file for Android, or XAP file for Windows Phone, etc. This certainly is a PITA, but we can use PhoneGap build.

8 Platform Support (version 3.5)

9 When plugins are not enough, DIY Unsupported features, heavyweight data processing, complex business logic, etc. You can do it yourself writing a new Plugin. You need: Plugin repository: URL for cordova add plugin command. Plugin specification: plugin.xml file for define Javascript interface and platforms native code. Use plugman utility to plublish your plugin in the Cordova registry.

10

11 The plumbing Install NodeJS Install git client Install cordova module: # npm install -g cordova Install phonegap nodule # npm install -g phonegap

12 Hello World!!! from Cordova Create the project: # cordova create hello org.jug.hello HelloWorld Add platforms (You need the configuration for each platform s SDK): # cordova platform add android Include specific plugings: # cordova plugin add org.apache.cordova.camera Build the project # cordova build Emulate on platform-specific emulator: # cordova emulate android Run the project on device: # cordova run android

13 Using PhoneGap Developer app Inside the project : # phonegap serve From your phone: configure to the IP:port of phonegap server. Enjoy!!!

14 Using PhoneGap Build Unlimited open source apps pulled from Gibhub repo Up to 1 private project with Free Plan Upload Cordova/PhoneGap project as zip file

15 Using Sencha Touch High-performance HTML5 mobile application framework Sencha Cmd is the tool for lifecycle management Sencha projects. Integration with Apache Cordova APIs Different themes for mobile OS Very good documentation

16 Using Javascript databases Databases running within the browser using Javascript Portable: runs on Firefox, Chrome, Opera, Safari, IE and Node.js Syncs with a server and replicates to a server Based on CouchDB

17 Couchbase Lite PhoneGap Plugin Install the plugin in your project: # cordova plugin add com.couchbase.lite.phonegap

18 Couchbase Lite demo Create project: # phonegap create todo-lite com.couchbase.todolite TodoLite Use project: # cd todo-lite Add plugins: # cordova plugin add com.couchbase.lite.phonegap # cordova plugin add org.apache.cordova.camera # cordova plugin add org.apache.cordova.inappbrowser # cordova plugin add org.apache.cordova.network-information Replace code: # rm -rf www # git clone www Build project: # phonegap build android Run using Phonegap developer app: # phonegap serve

19 Thanks for your attention