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 application and deploy on a real Android device. The demo application (“Memo” application) utilizes mobile native functions (Audio and Camera) using pure JavaScript.
[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache CordovaHazem Saleh
Apache Cordova is a platform for building 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 ...) 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 neat mobile web apps. This session illustrates how to use Apache Cordova with the combination of jQuery mobile in order to design, develop, and deploy a complete hybrid Android (and iOS) app. The demo app utilizes the device native functions (Audio and Camera) using pure JavaScript.
[Devoxx Morocco 2015] Apache Cordova In ActionHazem Saleh
Apache Cordova is a platform for building native mobile apps using common Web technologies (HTML, CSS and JavaScript). Apache Cordova offers a set of APIs that allow the mobile app developers to utilize mobile native functions such as (Audio, Camera, Contacts …etc) using JavaScript. jQuery mobile is one of the best mobile web application frameworks, which allows the web developers to develop neat mobile web applications. This session discusses why there is a need for Hybrid mobile development, the current challenges of mobile development, and how using Apache Cordova can help in overcoming many of these technical challenges. It also highlights the best practices of using Apache Cordova with jQuery mobile. Finally, it demonstrates a real Cordova mobile app for showing the audience the best practices of designing, developing, and deploying hybrid Android and iOS mobile apps.
Apache Cordova is a platform for building mobile apps using common Web technologies (HTML, CSS and JavaScript). Apache Cordova offers a set of APIs that allow the mobile app developers to utilize mobile native functions such as (Audio, Camera, Contacts …etc) using JavaScript. This session discusses and demonstrates the advanced aspects of Apache Cordova. Advanced aspects include extending Apache Cordova framework by creating custom plugins in order to access more device hardware features. Advanced aspects also include empowering Apache Cordova apps with Push notifications and Cloud services. Finally, this session demonstrates the power of automated JavaScript unit testing for producing quality Apache Cordova apps.
Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014Hazem Saleh
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
[AnDevCon 2016] Mutation Testing for AndroidHazem Saleh
Unit testing coverage is a great way to show us the amount of tested lines and branches of code, but is this really enough? The answer is "no" since unit testing coverage does not really fully measure the efficiency of the unit tests.
This is why there is a need for having techniques that show unit tests efficiency. Mutation testing is one of these powerful techniques. The main idea of mutation testing is to perform byte code modifications (mutations) to original Android app source code and then run app unit tests to check if they are strong enough to fail as a result of these mutations.
This session discusses mutation testing techniques, and demonstrates PIT as a powerful mutation testing tool for Android apps with demos.
[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache CordovaHazem Saleh
Apache Cordova is a platform for building 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 ...) 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 neat mobile web apps. This session illustrates how to use Apache Cordova with the combination of jQuery mobile in order to design, develop, and deploy a complete hybrid Android (and iOS) app. The demo app utilizes the device native functions (Audio and Camera) using pure JavaScript.
[Devoxx Morocco 2015] Apache Cordova In ActionHazem Saleh
Apache Cordova is a platform for building native mobile apps using common Web technologies (HTML, CSS and JavaScript). Apache Cordova offers a set of APIs that allow the mobile app developers to utilize mobile native functions such as (Audio, Camera, Contacts …etc) using JavaScript. jQuery mobile is one of the best mobile web application frameworks, which allows the web developers to develop neat mobile web applications. This session discusses why there is a need for Hybrid mobile development, the current challenges of mobile development, and how using Apache Cordova can help in overcoming many of these technical challenges. It also highlights the best practices of using Apache Cordova with jQuery mobile. Finally, it demonstrates a real Cordova mobile app for showing the audience the best practices of designing, developing, and deploying hybrid Android and iOS mobile apps.
Apache Cordova is a platform for building mobile apps using common Web technologies (HTML, CSS and JavaScript). Apache Cordova offers a set of APIs that allow the mobile app developers to utilize mobile native functions such as (Audio, Camera, Contacts …etc) using JavaScript. This session discusses and demonstrates the advanced aspects of Apache Cordova. Advanced aspects include extending Apache Cordova framework by creating custom plugins in order to access more device hardware features. Advanced aspects also include empowering Apache Cordova apps with Push notifications and Cloud services. Finally, this session demonstrates the power of automated JavaScript unit testing for producing quality Apache Cordova apps.
Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014Hazem Saleh
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
[AnDevCon 2016] Mutation Testing for AndroidHazem Saleh
Unit testing coverage is a great way to show us the amount of tested lines and branches of code, but is this really enough? The answer is "no" since unit testing coverage does not really fully measure the efficiency of the unit tests.
This is why there is a need for having techniques that show unit tests efficiency. Mutation testing is one of these powerful techniques. The main idea of mutation testing is to perform byte code modifications (mutations) to original Android app source code and then run app unit tests to check if they are strong enough to fail as a result of these mutations.
This session discusses mutation testing techniques, and demonstrates PIT as a powerful mutation testing tool for Android apps with demos.
How React Native, Appium and me made each other shine @ContinuousDeliveryAmst...Wim Selles
This presentation is about the things I did to test the Tele2 React Native app with Appium. I'll explain the journey we've taken and some best practices which you can use with React Native and Appium
Appium Meetup #2 - Mobile Web Automation Introductionsnevesbarros
These were the slides for the second appium meetup held at the Gamesys in London, presented by Dan Cueller and Sergio Neves Barros
The demo project mentioned in the slides can be found here:
https://drive.google.com/file/d/0ByIdcWPvw1I3Ny1QWkJzZWpvbzA/view?usp=sharing
With third party clients connecting to your service you may find that the assumptions or opinions of a typical rails application are not robust enough. We'll run through some key considerations when building an API that will be consumed by a mobile app.
PhoneGap: Accessing Device Capabilities
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2013.
http://www.ivanomalavolta.com
How to generate a rest application - DevFest Vienna 2016johannes_fiala
Demo of Swagger-Codegen CXF server stub generator including coverage of the Swagger-Toolchain (Swagger-UI/Swagger-Editor/Swagger2Markup) and demo of how to customize a language in Swagger-Codegen
@DevFest Vienna 2016
[QE 2018] Adam Stasiak – Nadchodzi React Native – czyli o testowaniu mobilnyc...Future Processing
Świat technologii mobilnych od pewnego czasu przechodzi rewolucję – odchodzi się od natywnych aplikacji mobilnych. Jak zatem twórcy aplikacji mobilnych odpowiadają na potrzeby rynku? Czy osoby automatyzujące testy aplikacji mobilnych mają do dyspozycji narzędzia gotowe na technologie, takie jak React Native czy Flutter? Czy można uniknąć pisania oddzielnego kodu testów dla Androida i iOS-a?
W czasie wykładu, na przykładzie aplikacji stworzonej w oparciu o technologię React Native oraz narzędzia Detox, Adam przedstawił praktyczną implementację testów end-to-end oraz ich konfigurację z Continuous Integration.
See why app stores are the way of the future for application distribution. Follow my adventure of submitting my Advice Owl mobile app to four different app stores.
Codename One just announced support for running PhoneGap/Cordova apps right within Codename One!
What does this mean for Cordova developers?
What are the benefits of Codename One and what are the current limitations?
How React Native, Appium and me made each other shine @ContinuousDeliveryAmst...Wim Selles
This presentation is about the things I did to test the Tele2 React Native app with Appium. I'll explain the journey we've taken and some best practices which you can use with React Native and Appium
Appium Meetup #2 - Mobile Web Automation Introductionsnevesbarros
These were the slides for the second appium meetup held at the Gamesys in London, presented by Dan Cueller and Sergio Neves Barros
The demo project mentioned in the slides can be found here:
https://drive.google.com/file/d/0ByIdcWPvw1I3Ny1QWkJzZWpvbzA/view?usp=sharing
With third party clients connecting to your service you may find that the assumptions or opinions of a typical rails application are not robust enough. We'll run through some key considerations when building an API that will be consumed by a mobile app.
PhoneGap: Accessing Device Capabilities
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2013.
http://www.ivanomalavolta.com
How to generate a rest application - DevFest Vienna 2016johannes_fiala
Demo of Swagger-Codegen CXF server stub generator including coverage of the Swagger-Toolchain (Swagger-UI/Swagger-Editor/Swagger2Markup) and demo of how to customize a language in Swagger-Codegen
@DevFest Vienna 2016
[QE 2018] Adam Stasiak – Nadchodzi React Native – czyli o testowaniu mobilnyc...Future Processing
Świat technologii mobilnych od pewnego czasu przechodzi rewolucję – odchodzi się od natywnych aplikacji mobilnych. Jak zatem twórcy aplikacji mobilnych odpowiadają na potrzeby rynku? Czy osoby automatyzujące testy aplikacji mobilnych mają do dyspozycji narzędzia gotowe na technologie, takie jak React Native czy Flutter? Czy można uniknąć pisania oddzielnego kodu testów dla Androida i iOS-a?
W czasie wykładu, na przykładzie aplikacji stworzonej w oparciu o technologię React Native oraz narzędzia Detox, Adam przedstawił praktyczną implementację testów end-to-end oraz ich konfigurację z Continuous Integration.
See why app stores are the way of the future for application distribution. Follow my adventure of submitting my Advice Owl mobile app to four different app stores.
Codename One just announced support for running PhoneGap/Cordova apps right within Codename One!
What does this mean for Cordova developers?
What are the benefits of Codename One and what are the current limitations?
Slides of a talk of a seminars series I gave at WebRatio in January 2014.
I implemented many best practices and advices in this presentation in a generic app template available here: https://github.com/iivanoo/cordovaboilerplate
WinJS, Apache Cordova & NFC - HTML5 apps for Android and Windows PhoneAndreas Jakl
How to create cross-platform mobile apps with HTML5 that integrate directly into the platform.
By combining several enterprise-class frameworks and tools, you can create apps that run on all mobile devices, developed in a central repository and tool.
In this presentation, you will learn how to create HTML5 apps with the Visual Studio Multi-Device Hybrid Apps plug-in. Apache Cordova is directly integrated and resposible for creating native apps for the mobile platforms.
WinJS can be used as a major UI framework that is now open source and works accross all platforms and browsers.
To check how you can integrate apps deeper with the native platforms, you will also see how to install and use a custom plug-in that enables Near Field Communication (NFC) on both Android and Windows Phone.
Ionic Framework - get up and running to build hybrid mobile appsAndreas Sahle
Overview over frameworks for hybrid app development. Cordova, Supersonic, Ionic. Architecture, differences, setup and scaffolding for development. Angular based development for Apps with a web view.
Hybrid applications are web applications (or web pages) in the native browser, such as
UIWebView in iOS and WebView in Android (not Safari or Chrome). Hybrid Mobile
Applications are Commonly Developed using CSS, HTML & Javascript.
Cross Platform Mobile Apps with the Ionic FrameworkTroy Miles
What happens when you combine Google's AngularJS, the super cool JavaScript MVC Framework with Apache Cordova, the cross platform mobile framework using web technology? You get the Ionic Framework.
With Ionic you build mobile apps using the web technology you already know. Think the apps will be slow and clunky? Think again, Ionic comes out of the box with well design CSS3 classes to make beautiful and fluid apps. Using Cordova and jQuery Mobile already? Well, with Ionic you will learn to love mobile development again. No more write-only spaghetti code, Ionic makes it easy to create clean, testable, logical mobile apps. Need to support tablet and phone in the same app? Ionic has you covered. You can create one app which uses responsive design to change its look based on the device's screen dimensions.
In this session, we will build an app together to show many of Ionic's major features including CollectionRepeat, UI Widgets, Modals, and Slide Boxes. We will also discuss development workflow, debugging and which tools we use.
PhoneGap (aka Cordova) is a cross-platform framework for developing mobile apps using standard web development tools like HTML, CSS, and JavaScript. Join Troy Miles to learn how to create mobile apps with PhoneGap by building a simple but full-featured app during this hands-on class. Troy explores PhoneGap’s important capabilities, including GPS, camera, and audio recordings. Because JavaScript has a reputation as a somewhat difficult language, Troy teaches techniques for keeping your code robust and clean. To give your app the appropriate look and feel for the device on which it is running, the class will use the open source Chocolate Chip UI framework for testing. Troy shares ways to debug the code by running it as a web app, using browser development tools, or as a phone app, using the Chrome browser’s remote debugging features. Leave with the basics you need to start building your own cross-platform mobile apps.
HTML alchemy: the secrets of mixing JavaScript and Java EE - Matthias WessendorfJAX London
A deep dive on creating mobile-ready, cloud-enabled, HTML5 applications based on Java EE and modern JavaScript. You will learn how to balance and combine the enterprise Java programming model, based on APIs such as CDI, JAX-RS and EJB 3.1, with JavaScript libraries like jQuery Mobile, Backbone, Require and Underscore, while taking advantage of the ease of deployment and elasticity of the cloud.
Tutorial: Develop Mobile Applications with AngularJSPhilipp Burgmer
Slides for my tutorial at Karlsruher Entwicklertag 2014.
Visit us at http://www.thecodecampus.de
Folien zu meinem Tutorial beim Karlsruher Entwicklertag 2014.
AngularJS hat sich in den letzen 2 Jahren von einem vielversprechendem zu einem viel eingesetzten JavaScript MVC Framework entwickelt, das immer mehr an Aufmerksamkeit und Zulauf gewinnen kann. Es gibt zahlreiche kleine und auch einige große Anwendungen im Netz die auf AngularJS basieren und viele davon sind "mobile ready".
Doch ist AngularJS auch eine gute Wahl um nicht nur "mobile ready" Web-Anwendungen sonder native mobile Anwendungen zu entwickeln?
In diesem Tutorial wird anhand von Beispielen gezeigt wie AngularJS z.B. zusammen mit PhoneGap eingesetzt werden kann um native Anwendungen für diverse mobile Platformen mit modernen Web-Technologien zu entwickeln.
Cross Platform Mobile Apps with the Ionic FrameworkTroy Miles
What happens when you combine Google's AngularJS, the super cool JavaScript MVC Framework with Apache Cordova, the cross platform mobile framework using web technology? You get the Ionic Framework, the super sexy love child of two great frameworks. With Ionic you build mobile apps using the web technology you already know and love. Think the apps will be slow and clunky? Think again, Ionic comes out of the box with well design CSS3 classes to make beautiful and fluid apps.
Using Cordova and jQuery Mobile already? Well, with Ionic you will learn to love mobile development again. No more write-only spaghetti code, Ionic makes it easy to create clean, testable, logical mobile apps. Need to support tablet and phone in the same app? Ionic has you covered. You can create one app which will use responsive design to change its look based on the device's screen dimensions.
In this talk, I will show how easy it is to create a mobile with Ionic by building a simple but feature full app live. We will start at the command line, with one command, Ionic creates the skeleton of our app. Then using a text editor and the Chrome browser we begin building out our app. We can get it all up and running without the need for a mobile device. We will use live reload so we see our changes as soon as we make them. Once we finish, a few commands deploys our app to a simulated device.
Want to get started but heard what a pain it is to install a mobile development environment? Never fear, the Vagrant Ionic Box provides a complete Android development in a virtual environment for Windows, Mac OS X, and Linux. You will be up and coding in no time.
[FullStack NYC 2019] Effective Unit Tests for JavaScriptHazem Saleh
Unit testing coverage is a great way to show us the amount of tested lines and branches of code, but is this really enough? The answer is "no" since unit testing coverage does not really fully measure the efficiency of the unit tests. This is why there is a need for using techniques that can improve unit tests efficiency. Mutation testing is one of these powerful techniques. The main idea of mutation testing is to automatically insert bugs (mutants) into production code and then run unit tests to check if they are strong enough to fail as a result of these mutations.
This session discusses mutation testing techniques and demonstrates Stryker as a powerful mutation testing tool for JavaScript applications.
Mockito 2.x Migration - Droidcon UK 2018Hazem Saleh
Mockito 2.x solves many problems that most of the Android developers were having in their tests in Mockito 1.x. But what if you are having today large tests written in Mockito 1.x and PowerMock, will it be an easy task to migrate?
Unfortunately, it is not a straightforward task since Mockito 2 is not fully compatible with the old behaviour of Mockito 1.x. Adding to this complexity, If you are having PowerMock in your old tests, then you will have to face another dimension of complexity since most of PowerMock’s versions are having integration issues with Mockito 2.x.
This session goes through the tips and tricks that you need to consider in order to migrate to and utilize Mockito 2.x. It has demos to show migrating Android app Mockito 1.x tests to Mockito 2.x.
Integrating Mashups in web applications is not an easy job. Web developers need to write intensive JavaScript code and much duplicate feed parsing code in order to create an interactive Mashup web application.
Mashups4JSF is an open source library that aims at integrating Mashup services in JSF web applications. Using Mashups4JSF, JSF developers will be able to construct rich and customized Mashups using a set of custom JSF components. They will be able to export domain model data as mashup feeds. They will be able to create rich Google Maps declaratively and create custom Ajax actions powered by JSF 2.x architecture. This session discusses how to utilize this library in order to build interactive mashups in the JavaServer Faces applications.
This session was presented by Hazem Saleh in JavaOne Russia 2013.
Efficient JavaScript Unit Testing, March 2013Hazem Saleh
This material about efficient JavaScript unit testing is presented by Hazem Saleh in the Egyptian Java Developer Conference that was held in 09 March 2013.
This presentation goes through the most popular JavaScript tools on the different browsers (Internet Explorer, Firefox, Safari and Chrome). It goes through popular JavaScript debugging tools, JavaScript verification tool (JSLint), and finally JavaScript minification tools.
Efficient JavaScript Unit Testing, May 2012Hazem Saleh
One of the biggest challenges of many web applications is the support on the different browsers with different versions. JavaScript code that runs on Safari does not necessarily mean it will work on IE or Firefox or Google chrome. This challenge is inherited from the lack of testing the JavaScript code that lives in the presentation tier from day one. Without unit testing the JavaScript code, organization will pay much money for testing, re-testing, and re-testing web applications for just deciding upgrading or supporting new browsers. This presentation shows the solution of this problem.
The French Revolution, which began in 1789, was a period of radical social and political upheaval in France. It marked the decline of absolute monarchies, the rise of secular and democratic republics, and the eventual rise of Napoleon Bonaparte. This revolutionary period is crucial in understanding the transition from feudalism to modernity in Europe.
For more information, visit-www.vavaclasses.com
Synthetic Fiber Construction in lab .pptxPavel ( NSTU)
Synthetic fiber production is a fascinating and complex field that blends chemistry, engineering, and environmental science. By understanding these aspects, students can gain a comprehensive view of synthetic fiber production, its impact on society and the environment, and the potential for future innovations. Synthetic fibers play a crucial role in modern society, impacting various aspects of daily life, industry, and the environment. ynthetic fibers are integral to modern life, offering a range of benefits from cost-effectiveness and versatility to innovative applications and performance characteristics. While they pose environmental challenges, ongoing research and development aim to create more sustainable and eco-friendly alternatives. Understanding the importance of synthetic fibers helps in appreciating their role in the economy, industry, and daily life, while also emphasizing the need for sustainable practices and innovation.
How to Split Bills in the Odoo 17 POS ModuleCeline George
Bills have a main role in point of sale procedure. It will help to track sales, handling payments and giving receipts to customers. Bill splitting also has an important role in POS. For example, If some friends come together for dinner and if they want to divide the bill then it is possible by POS bill splitting. This slide will show how to split bills in odoo 17 POS.
Read| The latest issue of The Challenger is here! We are thrilled to announce that our school paper has qualified for the NATIONAL SCHOOLS PRESS CONFERENCE (NSPC) 2024. Thank you for your unwavering support and trust. Dive into the stories that made us stand out!
Students, digital devices and success - Andreas Schleicher - 27 May 2024..pptxEduSkills OECD
Andreas Schleicher presents at the OECD webinar ‘Digital devices in schools: detrimental distraction or secret to success?’ on 27 May 2024. The presentation was based on findings from PISA 2022 results and the webinar helped launch the PISA in Focus ‘Managing screen time: How to protect and equip students against distraction’ https://www.oecd-ilibrary.org/education/managing-screen-time_7c225af4-en and the OECD Education Policy Perspective ‘Students, digital devices and success’ can be found here - https://oe.cd/il/5yV
How to Create Map Views in the Odoo 17 ERPCeline George
The map views are useful for providing a geographical representation of data. They allow users to visualize and analyze the data in a more intuitive manner.
How to Make a Field invisible in Odoo 17Celine George
It is possible to hide or invisible some fields in odoo. Commonly using “invisible” attribute in the field definition to invisible the fields. This slide will show how to make a field invisible in odoo 17.
Instructions for Submissions thorugh G- Classroom.pptxJheel Barad
This presentation provides a briefing on how to upload submissions and documents in Google Classroom. It was prepared as part of an orientation for new Sainik School in-service teacher trainees. As a training officer, my goal is to ensure that you are comfortable and proficient with this essential tool for managing assignments and fostering student engagement.
2. About Me
• Ten years of experience in Java enterprise, portal, mobile
solutions.
• Apache Committer.
• Author of four books.
• DeveloperWorks Contributing author.
• Technical Speaker.
• Advisory Software Engineer in IBM.
3. Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Hello World Demo
Cordova APIs Overview
jQuery Mobile Integration
Memo Application Demo
6. Apache Cordova Introduction
Hybrid vs Native Application
Hybrid Application
(Cordova)
Native Application
Can be uploaded to App
Store
Yes yes
Technology HTML + CSS + JavaScript Native platform
Programming Language
Cross-mobiles support Yes No
Development Speed Faster Slower
Uses Device Native
Yes yes
Features
8. Apache Cordova Introduction
Challenges of the current mobile apps development:
Many platforms and
devices.
Different skills needed.
Different problem types.
For Android: Java skills needed.
For iOS: Objective-C (or SWIFT)
skills needed.
For Windows: C# skills needed.
Huge Development and Testing Effort to
have a single application on these platforms.
9. 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.
10. Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Hello World Demo
Cordova APIs Overview
jQuery Mobile Integration
Memo Application Demo
11. Configuration
1 2 3
Prerequisites:
Node JS.
Target SDK.
From command line:
> sudo npm install -g cordova
To know the
installed version of
Cordova:
> cordova -v
12. Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Hello World Demo
Cordova APIs Overview
jQuery Mobile Integration
Memo Application Demo
13. 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>>
14. Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Hello World Demo
Cordova APIs Overview
jQuery Mobile Integration
Memo Application Demo
16. Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Hello World Demo
Cordova APIs Overview
jQuery Mobile Integration
Memo Application Demo
17. 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
18. Cordova APIs Overview
Device
An object that holds information about the device
hardware and software.
Device information is mainly about:
Device name.
Device Platform.
Device Platform version.
Device model.
“deviceready” event is an indicator that Cordova finishes
loading and Cordova APIs are ready to be called.
19. Cordova APIs Overview
Camera
An object that provides an access to the device camera.
It can be used for:
Capturing a photo using the device’s Camera.
Picking a photo from the device’s gallery.
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);
}
20. Cordova APIs Overview
Capture
An object allows you recording audio, image, and video
using the platform recording apps.
// capture callback
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:2});
21. 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');
}
22. 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);
23. Cordova APIs Overview
Storage
Provides an access to the W3C Web Storage interface:
- Local Storage (window.localStorage).
- Session Storage (window.sessionStorage).
window.localStorage.setItem("key", "value");
var value = window.localStorage.getItem("key");
window.localStorage.removeItem("key");
window.localStorage.clear();
24. 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);
25. 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);
26. Cordova APIs Overview
More APIs:
Events (In order to handle Apache Cordova life cycle
events).
Accelerometer (Capture device motion)
Compass (Get the device direction)
Connection (Get 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)
27. Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Hello World Demo
Cordova APIs Overview
jQuery Mobile Integration
Memo Application Demo
28. jQuery Mobile Integration
jQuery Mobile is:
one of the most popular User Interface framework for building Mobile
Web applications.
uses HTML5 + CSS3 for layout pages with minimal scripting.
compatible with most of the mobile and tablet browsers.
29. 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 utility.
There are also many cool frameworks you can use in your Cordova
mobile apps such as:
Angular JS + lonic. Dojo mobile Sencha Touch.
30. jQuery Mobile Integration
Windows Phone 8 Issues:
Trimmed header title.
Footer is not aligned to bottom.
Fixes:
Set ui-header and ui-title classes’
overflow to visible.
Hide System Tray using app config
(shell:SystemTray.isVisible = “False”).
31. jQuery Mobile Integration
In order to boost the performance of jQuery mobile with
Cordova, it is recommended to disable transition effects as
follows:
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none’;
32. Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Hello World Demo
Cordova APIs Overview
jQuery Mobile Integration
Memo Application Demo
34. 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>
Hello and Welcome everybody. I’m Hazem Saleh, an advisory engineer in IBM and an Apache Committer.
Today, I will talk about “Developing JavaScript Mobile Apps Using Apache Cordova”.
Before going into the details of this presentation.
I would like to introduce myself in more details …
So, today, We will:
Have an introduction about Apache Cordova, we will know: What Apache Cordova is, The differences between mobile web vs Hybrid vs native mobile applications, the current challenges of today’s mobile development and how Apache Cordova can minimize these challenges.
We will know how to configure Apache Cordova.
We will see how to work with Cordova Command Line Interface in order to create and build a cordova project.
Then I will show you how to create and deploy an Apache Cordova application from scratch using CLI.
Then we will have an overview of Apache Cordova APIs.
And we will explore the jQuery mobile Integration tips with Apache Cordova.
Finally, I will show you a real application that supports three mobile platforms (iOS, Android and Windows Phone 8). This application utilizes the device’s audio and camera in order to create a memo utility.
So What is Apache Cordova is a set of APIs which allow accessing the device native functions using JavaScript. Apache Cordova is not only a set of APIs but it also a platform which allows creating mobile apps using common web technologies (HTML, CSS, JavaScript).
Device native function examples are:
Accessing the device audio to record and playback voice.
Capturing a photo using the device camera.
Searching and adding contacts to the device.
Accessing the device compass and file system.
Before going into the details of the current mobile apps development, it is important to realize the differences between mobile web apps, hybrid mobile apps, and native mobile apps. Mobile web apps:
Are mobile-friendly apps which are displayed correctly on the different resolutions of mobile devices and tablets.
Usually require you to be online in order to access it as they are not installed locally in your device.
Have limited access to the device native functions by utilizing the HTML 5 APIs such as Geolocation.
For Hybrid and native mobile apps:
They have the same physical format and they can be uploaded to the app store.
However, they uses two different technologies. For Hybrid mobile apps, they uses HTML, CSS and JavaScript while Native mobile apps use the native programming language of the mobile platform.
Hybrid mobile apps can work on the different mobile platforms while Native mobile apps work only on the platform they are developed for.
…
We have the following Challenges in the current mobile application development:
We have many platforms. Every platform has many devices. This means that testing your application cross these devices is a real overhead.
In order to develop an application cross the different mobile platforms, we need to have different skills in the team. For Android, we need the development team to know Java, for …
Because every platform has its own philosophy, we can find different problem types on every mobile platform. For example, sending SMS in Android (and continue the example). Handling these problem types using different programming languages is not an easy task.
All of this leads to a huge development and testing effort to have a single application idea developed on these mobile platforms.
Apache Cordova could meet these challenges by providing a single programming language to develop cross-mobile platform apps which is JavaScript. This means that you will not have to have different skills in your development team and will have a neat and centralized way to handle the different problem type of every platform.