Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014
Upcoming SlideShare
Loading in...5
×
 

Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014

on

  • 1,629 views

Apache Cordova is a platform for building native mobile applications using common Web technologies (HTML, CSS and JavaScript). Apache Cordova offers a set of APIs that allow the mobile application ...

Apache Cordova is a platform for building native mobile applications using common Web technologies (HTML, CSS and JavaScript). Apache Cordova offers a set of APIs that allow the mobile application developers to access mobile native functions such as (Audio, Camera, File, Battery, Contacts …etc) using JavaScript. Although there are many JavaScript mobile application frameworks, jQuery mobile is one of the best mobile web application frameworks which allows the web developers to develop web applications that are mobile friendly. This session illustrates how to use Apache Cordova with the combination of jQuery mobile in order to develop a native Android hybrid application and deploy on a real Android device. The demo application (“Memo” application) utilizes mobile native functions (Audio and Camera) using pure JavaScript.

Get the session recording from SoundCloud:
http://tinyurl.com/cordova2014

Statistics

Views

Total Views
1,629
Views on SlideShare
834
Embed Views
795

Actions

Likes
3
Downloads
16
Comments
2

21 Embeds 795

http://www.technicaladvices.com 571
http://www.jroller.com 136
https://twitter.com 34
http://feedly.com 12
http://www.feedspot.com 10
http://jroller.com 6
http://www.newsblur.com 5
http://newsblur.com 5
http://tiglon.rssing.com 2
http://saleh32.rssing.com 2
http://www.hanrss.com 2
http://fiveholiday55.blogspot.com&_=1397816445896 HTTP 1
http://fiveholiday55.blogspot.com&_=1408777483395 HTTP 1
http://fiveholiday55.blogspot.com&_=1408777463363 HTTP 1
http://www.slideee.com 1
http://127.0.0.1 1
http://digg.com 1
http://prlog.ru 1
http://silverreader.com 1
http://www.google.co.in 1
http://feedreader.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014 Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014 Presentation Transcript

    • Developing Native JavaScript Mobile Apps Using Apache Cordova Hazem Saleh
    • About Me • Ten years of experience in Java enterprise, portal, mobile solutions. • Apache Committer and an open source fan. • Author of three books. • DeveloperWorks Contributing author. • Technical Speaker. • Advisory Software Engineer in IBM.
    • Agenda Apache Cordova Introduction Configurations Cordova Command Line Cordova APIs Overview jQuery Mobile Integration Memo Application Demo
    • Apache Cordova Introduction Platform HTML CSS JS
    • Apache Cordova Introduction Device native functions examples:
    • Apache Cordova Introduction Hybrid Application (Cordova) Native Application Can be uploaded to App Store Yes Yes Technology HTML + CSS + JavaScript Native platform Programming Language Cross-mobiles platform support Yes No Development Speed Faster Slower Uses Device Native Features Yes Yes Hybrid vs Native Application
    • Apache Cordova Introduction Cordova is supported on the following platforms:
    • Apache Cordova Introduction Challenges of the current mobile development: Many platforms and devices. Different skills needed. Different problem types. Huge Development and Testing Effort to have a single application on these platforms. For Android: Java skills needed. For iOS: Objective C skills needed. For Windows: .Net skills needed.
    • Apache Cordova Introduction Who can use Cordova? If you are a web developer and wants to develop a mobile application that can be deployed on the different app store portals. If you are a mobile native developer and wants to develop a single application on the different mobile platforms without having to re- implement the application code on every platform.
    • Agenda Apache Cordova Introduction Configurations Cordova Command Line Cordova APIs Overview jQuery Mobile Integration Memo Application Demo
    • Configuration Prerequisites: Node JS. Target SDK. From command line: > sudo npm install -g cordova To know the installed version of Cordova: > cordova -v
    • Agenda Apache Cordova Introduction Configurations Cordova Command Line Cordova APIs Overview jQuery Mobile Integration Memo Application Demo
    • Cordova Command Line To create an application: > cordova create <<app_dir>> <<project_id>> <<app_title>> To add a platform (from the app folder): > cordova platform add <<platform_name>> To build Cordova project: > cordova build To deploy the app on emulator: > cordova emulate <<platform_name>>
    • Hello World Demo
    • Agenda Apache Cordova Introduction Configurations Cordova Command Line Cordova APIs Overview jQuery Mobile Integration Memo Application Demo
    • Cordova APIs Overview Native device functions are represented as plugins that can be added and removed using the command line. Adding camera plugin example: > cordova plugin add https://git-wip-us-apache.org/repos/asf/cordova- plugin-camera.git Removing Camera plugin example: > cordova plugin rm org.apache.cordova.core.camera
    • Cordova APIs Overview An object that holds information about the device hardware and software. Device Device information is mainly about: ● Device name. ● Device Platform. ● Device Platform version. ● Device model.
    • Cordova APIs Overview Camera An object that provides an access to the device camera. navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL }); function onSuccess(imageData) { var image = document.getElementById('myImage'); image.src = "data:image/jpeg;base64," + imageData; } function onFail(message) { alert('Failed because: ' + message); }
    • Cordova APIs Overview Capture An object allows you recording audio, image, and video using audio recording, camera and video recording applications var captureSuccess = function(mediaFiles) { // Do something with the captured Audio media files }; var captureError = function(error) { navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error'); }; navigator.device.capture.captureAudio(captureSuccess, captureError, {limit:1});
    • Cordova APIs Overview Media An object that allows recording and playing back audio files on the device. var my_media = new Media("someFile.mp3", onSuccess, onError); my_media.play(); function onSuccess() { console.log("playAudio():Audio Success"); } function onError(error) { alert('code: ' + error.code + 'n' + 'message: ' + error.message + 'n'); }
    • Cordova APIs Overview Notification An object that displays visual, audible, and tactile notification. // Show a native looking alert navigator.notification.alert( 'Cordova is great!', // message 'Cordova', // title 'Ok' // buttonName ); // Beep four times navigator.notification.beep(4); // Vibrate for 3 seconds navigator.notification.vibrate(3000);
    • Cordova APIs Overview Storage Provides an access to the W3C Web Storage interface: window.localStorage.setItem("key", "value"); var value = window.localStorage.getItem("key"); window.localStorage.removeItem("key"); window.localStorage.clear(); - Local Storage (window.localStorage). - Session Storage (window.sessionStorage).
    • Cordova APIs Overview Storage Provides an access to the device Web SQL Database (Full featured database). Cordova supports IndexedDB for WP8 and Blackberry 10. function populateDB(tx) { tx.executeSql('DROP TABLE IF EXISTS DEMO'); tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)'); tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")'); tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")'); } function errorCB(err) { alert("Error processing SQL: " + err.code); } function successCB() { alert("success!"); } var db = window.openDatabase("Demos", "1.0", "Cordova Demo", 200000); db.transaction(populateDB, errorCB, successCB);
    • Cordova APIs Overview Geolocation Know your mobile location data (based on GPS sensor or inferred from Network signal). It is based on the W3C Geolocation API specification. var onSuccess = function(position) { alert('Latitude: ' + position.coords.latitude + 'n' + 'Longitude: ' + position.coords.longitude + 'n'); }; function onError(error) { alert('code: ' + error.code + 'n' + 'message: ' + error.message + 'n'); } navigator.geolocation.getCurrentPosition(onSuccess, onError);
    • Cordova APIs Overview More APIs: Accelerometer (Capture device motion) Compass (Get the device direction) Connection (Retrieve the device connection) Contacts (Access to device contacts database). File (Access to device File system based on W3C File API) Globalization (Access to user locale information) Events (In order to handle Apache Cordova life cycle events).
    • Agenda Apache Cordova Introduction Configurations Cordova Command Line Cordova APIs Overview jQuery Mobile Integration Memo Application Demo
    • jQuery Mobile Integration jQuery Mobile is one of the most popular User Interface framework for building Mobile Web applications. jQuery Mobile uses HTML5 + CSS3 for layout pages with minimal scripting. It is compatible with most of the mobile and tablet browsers.
    • jQuery Mobile Integration Cordova does not restrict using any specific JavaScript library but using a JavaScript library will save you a lot of time creating your own widgets from scratch. jQuery Mobile is used in the demo application with Cordova to create the Memo application.
    • jQuery Mobile Integration In order to boost the performance of jQuery mobile with Cordova, it is recommended to disable transition effects as follows (jQuery mobile 1.4): $.mobile.defaultPageTransition = 'none'; $.mobile.defaultDialogTransition = 'none';
    • Agenda Apache Cordova Introduction Configurations Cordova Command Line Cordova APIs Overview jQuery Mobile Integration Memo Application Demo
    • Memo Application Live projects on App stores: http://apps.opera.com/en_eg/memos_free_version.html http://www.windowsphone.com/en-us/store/app/memo/a43c6ce4-029b-49b6-b7f9-d94778ab3597 GitHub Android and WP8 projects: http://github.com/hazems/memo https://github.com/hazems/memo-wp8
    • When: Tuesday Where: McCourt room What: Race to Apache Cordova Contribution & Hybrid Mobile App Challenge Who: Everyone is invited. 8+ Apache Cordova Committers will be in the room answering questions. Come stump the experts! Why: See what it’s like to participate in the Apache Cordova community. Cordova Hackathon Sponsored by IBM and Redhat
    • JavaScript Quiz <script> var number = 50; var obj = { number: 60, getNum: function () { var number = 70; return this.number; } }; alert(obj.getNum()); alert(obj.getNum.call()); alert(obj.getNum.call({number:20})); </script>
    • Twitter: @hazems Blog: http://www.technicaladvices.com Email: hazems@apache.org