SlideShare a Scribd company logo

Apache cordova

•
•
Carlo Bernaschina
Carlo Bernaschina

Apache Cordova is an open-source framework that allows developers to use standard web technologies like HTML, CSS, and JavaScript to build applications that can be deployed across various mobile and desktop platforms. It works by packaging the application's code and assets into a wrapper application that loads the content into a webview. Plugins can be added to access device capabilities. The Cordova CLI provides commands for creating, building, and running Cordova projects across platforms in a consistent way. Frameworks like Angular and UI frameworks like Ionic can be used to organize larger Cordova applications.

Related slideshows

Get Started with ReactJS 18 Development Services_ New Features and Updates.pptx
Get Started with ReactJS 18 Development Services_ New Features and Updates.pptxGet Started with ReactJS 18 Development Services_ New Features and Updates.pptx
Get Started with ReactJS 18 Development Services_ New Features and Updates.pptx
 
Introduction to Eclipse IDE
Introduction to Eclipse IDEIntroduction to Eclipse IDE
Introduction to Eclipse IDE
 
Docker introduction
Docker introductionDocker introduction
Docker introduction
 
1 of 32
Download to read offline
MILANO 1863 POLITECNICO Apache Cordova BUILDING CROSS-PLATFORM APPS USING WEB TECHNOLOGIES Carlo Bernaschina – carlo.bernaschina@polimi.it
Even before the Mobile era, developers that want to target more than one Platform/OS would like their framework to be: WRITE ONCE RUN ANYWHERE The Objective CROSS-PLATFORM APPLICATIONS
WRITE ONCE RUN ANYWHERE Examples: • C is a WORA language the application can be written without taking into account the underlying hardware. • Java is a WORA framework you can write desktop applications without taking into account the underlying OS • Cordova is a WORA framework for mobile you can write mobile applications without taking into account the underlying Mobile OS The Objective CROSS-PLATFORM APPLICATIONS
WRITE ONCE RUN ANYWHERE How to write WORA applications on mobile platforms? The Objective CROSS-PLATFORM APPLICATIONS
The Idea EVERY SMARTPHONE HAS A BROWSER Every mobile OS has a browser. Mobile browsers are becoming more and more powerful.
The Idea EVERY SMARTPHONE HAS A BROWSER Every mobile OS has a native UI component that allows one to integrate a web browser inside an application (WebView). If our application is built with standard web technologies we just need to pack it inside a native application that loads it into a full screen browser.
Apache Cordova is an open-source mobile application framework. It allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform development, avoiding each mobile platforms' native development language. Applications execute within wrappers targeted to each platform. Apache Cordova WHAT IS IT? Android iOS Windows Phone BlackBerry OS Tizen webOS Ubuntu Touch Firefox OS Fire OS
Apache Cordova HOW IS THE FINALAPPLICATION BUILT? The application is developed in HTML, CSS and JavaScript. The generated files are packed as static resources of a wrapper application. This application takes care of initializing a WebView and loading the home page. HTML, CSS & JavaScript Platform Dependent Wrapper Static Resources Final Application
If your application behaves as a classic website you do not need to take the lifecycle into account. Your application will be automatically loaded, paused, resumed and closed by the system. If your application requires to react to lifecycle’s events (e.g. initialize at application launch, save data at application pause, refresh at application resume, …) wrappers expose standard and platform independent events that can be used to react accordingly. Application lifecycle
Here is a list of the most common events exposed to the application: • Device Ready (The application is fully loaded) • Application Pause (The application is going to be paused) • Application Resume (The application has been resumed) • Back Button Pressed • Menu Button Pressed • Search Button Pressed • Start Call Button Pressed • End Call Button Pressed • Volume Down Button Pressed • Volume Up Button Pressed Application lifecycle EVENTS
Non naïve applications require access to advanced features of the device they are running on. • Sensors – Accelerometer – … • Location • Storage • User Information – Contacts – Photos – … • … Plugins WHAT ABOUT SENSORS, LOCATION, STORAGE, …?
The access to this information is non standard, each platform defines different APIs, different access policies, etc. A solution to this problem is the plugins system. It is possible to develop native code components that will be included in the final application. These components expose APIs to the WebView. These APIs should be as platform independent as possible in order to maintain the WORA property of the framework. Plugins WHAT ABOUT SENSORS, LOCATION, STORAGE, …?
Plugins PLATFORM SUPPORT FOR THE BUILT-IN PLUGINS
Cordova is used as base framework by: • Adobe PhoneGap • Ionic • Monaca • Telerik • Intel XDK • Cocoon • Framework7 • WebRatio • … DISTRIBUTIONS CORDOVA IS USED IN OTHER FRAMEWORKS
Cordova CLI is a command line tool that allows one to automatically follow a cross-platform workflow for application development. Let’s open a terminal. Build a “Hello World” application CORDOVA CLI
Cordova CLI is distributed by NPM (Node Package Manager). First of all you require node.js installed on your system. http://nodejs.org Node.js is a JavaScript runtime that allows one to build cross-platform applications. NPM is one of the package managers for node.js. To install the Cordova CLI run the command: npm install -g cordova Build a “Hello World” application CORDOVA CLI – INSTALLATION
To create a new HelloWorld Project run the command: cordova create HelloWorld As simple as that. To start editing the project enter into it: cd HelloWorld Build a “Hello World” application CORDOVA CLI – CREATE A PROJECT
To add target platforms to the project run the command: cordova platform add android cordova platform add ios … (The SDK of the target platform is required on the development system) Build a “Hello World” application CORDOVA CLI – ADD TARGET PLATFORMS
In order to build the application run the command: cordova build In order to build for a specific platform run the command: cordova build android You can run the application in an emulator with the command: cordova emulate android You can run the application on a device with the command: cordova run android Build a “Hello World” application CORDOVA CLI – BUILD / EMULATE / RUN
The project is composed as follow: • www The folder containing the application source code and assets (HTML, CSS, JavaScript, Images, …) • config.xml A global configuration file • platforms The folder containing platform dependent assets. It contains the platform specific temporary project files used during the building process. • merges The folder containing platform dependent files. Every subfolder will be merged to the www during the build phase, adding additional files or overriding some of them. • plugins The folder containing plugins Build a “Hello World” application THE PROJECT – STRUCTURE
The WWW folder contains all the platform independent assets. You will manage this folder as it contains a static website. Build a “Hello World” application THE PROJECT – WWW
The config.xml it is a platform agnostic configuration file. <widget id="com.example.hello" version="0.0.1"> <name>HelloWorld</name> <description>A Sample Apache Cordova application</description> <author email=dev@callback.apache.org href="http://cordova.io"> Apache Cordova Team </author> <content src="index.html" /> <access origin="*" /> </widget> Build a “Hello World” application THE PROJECT – CONFIG.XML
Some of the fields of the config.xml are: • id the app reverse domain identifier • name the name of the application • description a description for the application • author information regarding the author • content the main html file • access the list of the domain the application can communicate to (for security reasons) Build a “Hello World” application THE PROJECT – CONFIG.XML
In the config.xml is possible to define some preferences: <preference name="Fullscreen" value="true" /> • Fullscreen • DisallowOverscroll • BackgroundColor • Orientation • … Build a “Hello World” application THE PROJECT – CONFIG.XML
In the config.xml is possible to add some platform specific configurations. <platform name="android"> … </platform> Build a “Hello World” application THE PROJECT – CONFIG.XML
The plugins folder contains all the plugins used in the project. It is possible to add a new plugin to the project using the command: cordova plugin add cordova-plugin-device Or cordova plugin add https://github.com/apache/cordova-plugin- console.git It will download the necessary files and configure the project Build a “Hello World” application THE PROJECT – PLUGINS
In the previous step we have installed the plugin cordova- plugin-device that allows one to access information regarding the current device. A common way to communicate between the application and the plugins is via global objects. In this case we can access the data exposed by the plugin via the global object “device”. device.cordova // the cordova version device.platform // the current platform … Build a “Hello World” application THE PROJECT – PLUGINS
One of the major problems related to Cordova applications is the low level of performance with respect to native applications. To boost performance we can use the techniques used in web applications like: • CSS and JavaScript minification • HTML include vulcanization • … Build a “Hello World” application THE PROJECT – PERFORMANCE
How to apply these techniques automatically while developing? A common solution is to develop the application inside a temporary folder (e.g. src, sources, …) and use automation tools to apply these techniques and copy all the necessary files inside the www folder. The most common build automation tools are Grunt and Gulp Build a “Hello World” application THE PROJECT – AUTOMATION
While using vanilla JavaScript can be a solution for small applications, it is a good choice to use frameworks to organize the application following MVC or MVVM architectural patterns. • Angular.js • Knockout.js • Polymer • … Develop an application JS FRAMEWORK
While using plain CSS can be a solution for some applications, sometimes the native look and feel of the current platform is required. Some CSS frameworks try to fill the gap by mimicking the native look depending on the identified platform. • Materialize (Android Only) • Ionic (iOS / Android) • Ratchet (iOS / Android) • … Develop an application UI FRAMEWORK
• https://cordova.apache.org/ • https://cordova.apache.org/docs/en/5.1.1/guide/overview/ • https://cordova.apache.org/docs/en/5.1.1/guide/support/index.html • https://cordova.apache.org/docs/en/5.1.1/cordova/events/events.html • https://cordova.apache.org/docs/en/5.1.1/guide/cli/index.html • https://cordova.apache.org/docs/en/5.1.1/config_ref/ • http://gulpjs.com/ • http://gruntjs.com/ • https://angularjs.org/ • https://www.polymer-project.org/1.0/ • http://knockoutjs.com/ • http://materializecss.com/ • http://ionicframework.com/ • http://goratchet.com/ Reference

More Related Content

Apache cordova

  • 1. MILANO 1863 POLITECNICO Apache Cordova BUILDING CROSS-PLATFORM APPS USING WEB TECHNOLOGIES Carlo Bernaschina – carlo.bernaschina@polimi.it
  • 2. Even before the Mobile era, developers that want to target more than one Platform/OS would like their framework to be: WRITE ONCE RUN ANYWHERE The Objective CROSS-PLATFORM APPLICATIONS
  • 3. WRITE ONCE RUN ANYWHERE Examples: • C is a WORA language the application can be written without taking into account the underlying hardware. • Java is a WORA framework you can write desktop applications without taking into account the underlying OS • Cordova is a WORA framework for mobile you can write mobile applications without taking into account the underlying Mobile OS The Objective CROSS-PLATFORM APPLICATIONS
  • 4. WRITE ONCE RUN ANYWHERE How to write WORA applications on mobile platforms? The Objective CROSS-PLATFORM APPLICATIONS
  • 5. The Idea EVERY SMARTPHONE HAS A BROWSER Every mobile OS has a browser. Mobile browsers are becoming more and more powerful.
  • 6. The Idea EVERY SMARTPHONE HAS A BROWSER Every mobile OS has a native UI component that allows one to integrate a web browser inside an application (WebView). If our application is built with standard web technologies we just need to pack it inside a native application that loads it into a full screen browser.
  • 7. Apache Cordova is an open-source mobile application framework. It allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform development, avoiding each mobile platforms' native development language. Applications execute within wrappers targeted to each platform. Apache Cordova WHAT IS IT? Android iOS Windows Phone BlackBerry OS Tizen webOS Ubuntu Touch Firefox OS Fire OS
  • 8. Apache Cordova HOW IS THE FINALAPPLICATION BUILT? The application is developed in HTML, CSS and JavaScript. The generated files are packed as static resources of a wrapper application. This application takes care of initializing a WebView and loading the home page. HTML, CSS & JavaScript Platform Dependent Wrapper Static Resources Final Application
  • 9. If your application behaves as a classic website you do not need to take the lifecycle into account. Your application will be automatically loaded, paused, resumed and closed by the system. If your application requires to react to lifecycle’s events (e.g. initialize at application launch, save data at application pause, refresh at application resume, …) wrappers expose standard and platform independent events that can be used to react accordingly. Application lifecycle
  • 10. Here is a list of the most common events exposed to the application: • Device Ready (The application is fully loaded) • Application Pause (The application is going to be paused) • Application Resume (The application has been resumed) • Back Button Pressed • Menu Button Pressed • Search Button Pressed • Start Call Button Pressed • End Call Button Pressed • Volume Down Button Pressed • Volume Up Button Pressed Application lifecycle EVENTS
  • 11. Non naïve applications require access to advanced features of the device they are running on. • Sensors – Accelerometer – … • Location • Storage • User Information – Contacts – Photos – … • … Plugins WHAT ABOUT SENSORS, LOCATION, STORAGE, …?
  • 12. The access to this information is non standard, each platform defines different APIs, different access policies, etc. A solution to this problem is the plugins system. It is possible to develop native code components that will be included in the final application. These components expose APIs to the WebView. These APIs should be as platform independent as possible in order to maintain the WORA property of the framework. Plugins WHAT ABOUT SENSORS, LOCATION, STORAGE, …?
  • 13. Plugins PLATFORM SUPPORT FOR THE BUILT-IN PLUGINS
  • 14. Cordova is used as base framework by: • Adobe PhoneGap • Ionic • Monaca • Telerik • Intel XDK • Cocoon • Framework7 • WebRatio • … DISTRIBUTIONS CORDOVA IS USED IN OTHER FRAMEWORKS
  • 15. Cordova CLI is a command line tool that allows one to automatically follow a cross-platform workflow for application development. Let’s open a terminal. Build a “Hello World” application CORDOVA CLI
  • 16. Cordova CLI is distributed by NPM (Node Package Manager). First of all you require node.js installed on your system. http://nodejs.org Node.js is a JavaScript runtime that allows one to build cross-platform applications. NPM is one of the package managers for node.js. To install the Cordova CLI run the command: npm install -g cordova Build a “Hello World” application CORDOVA CLI – INSTALLATION
  • 17. To create a new HelloWorld Project run the command: cordova create HelloWorld As simple as that. To start editing the project enter into it: cd HelloWorld Build a “Hello World” application CORDOVA CLI – CREATE A PROJECT
  • 18. To add target platforms to the project run the command: cordova platform add android cordova platform add ios … (The SDK of the target platform is required on the development system) Build a “Hello World” application CORDOVA CLI – ADD TARGET PLATFORMS
  • 19. In order to build the application run the command: cordova build In order to build for a specific platform run the command: cordova build android You can run the application in an emulator with the command: cordova emulate android You can run the application on a device with the command: cordova run android Build a “Hello World” application CORDOVA CLI – BUILD / EMULATE / RUN
  • 20. The project is composed as follow: • www The folder containing the application source code and assets (HTML, CSS, JavaScript, Images, …) • config.xml A global configuration file • platforms The folder containing platform dependent assets. It contains the platform specific temporary project files used during the building process. • merges The folder containing platform dependent files. Every subfolder will be merged to the www during the build phase, adding additional files or overriding some of them. • plugins The folder containing plugins Build a “Hello World” application THE PROJECT – STRUCTURE
  • 21. The WWW folder contains all the platform independent assets. You will manage this folder as it contains a static website. Build a “Hello World” application THE PROJECT – WWW
  • 22. The config.xml it is a platform agnostic configuration file. <widget id="com.example.hello" version="0.0.1"> <name>HelloWorld</name> <description>A Sample Apache Cordova application</description> <author email=dev@callback.apache.org href="http://cordova.io"> Apache Cordova Team </author> <content src="index.html" /> <access origin="*" /> </widget> Build a “Hello World” application THE PROJECT – CONFIG.XML
  • 23. Some of the fields of the config.xml are: • id the app reverse domain identifier • name the name of the application • description a description for the application • author information regarding the author • content the main html file • access the list of the domain the application can communicate to (for security reasons) Build a “Hello World” application THE PROJECT – CONFIG.XML
  • 24. In the config.xml is possible to define some preferences: <preference name="Fullscreen" value="true" /> • Fullscreen • DisallowOverscroll • BackgroundColor • Orientation • … Build a “Hello World” application THE PROJECT – CONFIG.XML
  • 25. In the config.xml is possible to add some platform specific configurations. <platform name="android"> … </platform> Build a “Hello World” application THE PROJECT – CONFIG.XML
  • 26. The plugins folder contains all the plugins used in the project. It is possible to add a new plugin to the project using the command: cordova plugin add cordova-plugin-device Or cordova plugin add https://github.com/apache/cordova-plugin- console.git It will download the necessary files and configure the project Build a “Hello World” application THE PROJECT – PLUGINS
  • 27. In the previous step we have installed the plugin cordova- plugin-device that allows one to access information regarding the current device. A common way to communicate between the application and the plugins is via global objects. In this case we can access the data exposed by the plugin via the global object “device”. device.cordova // the cordova version device.platform // the current platform … Build a “Hello World” application THE PROJECT – PLUGINS
  • 28. One of the major problems related to Cordova applications is the low level of performance with respect to native applications. To boost performance we can use the techniques used in web applications like: • CSS and JavaScript minification • HTML include vulcanization • … Build a “Hello World” application THE PROJECT – PERFORMANCE
  • 29. How to apply these techniques automatically while developing? A common solution is to develop the application inside a temporary folder (e.g. src, sources, …) and use automation tools to apply these techniques and copy all the necessary files inside the www folder. The most common build automation tools are Grunt and Gulp Build a “Hello World” application THE PROJECT – AUTOMATION
  • 30. While using vanilla JavaScript can be a solution for small applications, it is a good choice to use frameworks to organize the application following MVC or MVVM architectural patterns. • Angular.js • Knockout.js • Polymer • … Develop an application JS FRAMEWORK
  • 31. While using plain CSS can be a solution for some applications, sometimes the native look and feel of the current platform is required. Some CSS frameworks try to fill the gap by mimicking the native look depending on the identified platform. • Materialize (Android Only) • Ionic (iOS / Android) • Ratchet (iOS / Android) • … Develop an application UI FRAMEWORK
  • 32. • https://cordova.apache.org/ • https://cordova.apache.org/docs/en/5.1.1/guide/overview/ • https://cordova.apache.org/docs/en/5.1.1/guide/support/index.html • https://cordova.apache.org/docs/en/5.1.1/cordova/events/events.html • https://cordova.apache.org/docs/en/5.1.1/guide/cli/index.html • https://cordova.apache.org/docs/en/5.1.1/config_ref/ • http://gulpjs.com/ • http://gruntjs.com/ • https://angularjs.org/ • https://www.polymer-project.org/1.0/ • http://knockoutjs.com/ • http://materializecss.com/ • http://ionicframework.com/ • http://goratchet.com/ Reference