Apache Cordova

Apache Cordova (formerly Phone Gap) is a mobile application development framework originally created by Nitobi. Adobe Systems purchased Nitobi in 2011, rebranded it as Phone Gap, and later released an open source version of the software called Apache Cordova.[8] Apache Cordova enables software programmers to build applications for mobile devices using CSS3, HTML5, and JavaScript instead of relying on platform-specific APIs like those in Android, iOS, or Windows Phone. It enables wrapping up of CSS, HTML, and JavaScript code depending upon the platform of the device. It extends the features of HTML and JavaScript to work with the device. The resulting applications are hybrid, meaning that they are neither truly native mobile application (because all layout rendering is done via Web views instead of the platform’s native UI framework) nor purely Web-based (because they are not just Web apps, but are packaged as apps for distribution and have access to native device APIs). Mixing native and hybrid code snippets have been possible since version 1.9.

Phone Gap is Adobe’s commercial version of Cordova along with its associated ecosystem. Many other tools and frameworks are also built on top of Cordova, including Ionic, Monaca, TACO, Onsen UI, Visual Studio, GapDebug, App Builder, Cocoon, Framework7, Quasar Framework, Evothings Studio, NSB/AppStudio, Mobiscroll, the Intel XDK, and the Telerik Platform. These tools use Cordova and not Phone Gap for their core tools.

Use Apache Cordova if you are:

  • A mobile developer and want to extend an application across more than one platform, without having to re-implement it with each platform’s language and toolset.
  • A web developer and want to deploy a web app that’s packaged for distribution in various app store portals.
  • A mobile developer interested in mixing native application components with a Web View(browser window) that can access device-level APIs, or if you want to develop a plugin interface between native and Web View components.

Architecture:

There are several components to a Cordova application. The following diagram shows a high-level view of the Cordova application architecture.

Basic Components:

Apache Cordova applications rely on a common config.xml file that provides information about the app and specifies parameters affecting how it works, such as whether it responds to orientation shifts. This file adheres to the W3C’s Packaged Web App, or widget, specification. The application itself is implemented as a web page, named index.html by default, that references whatever CSS, JavaScript, images, media files or other resources are necessary for it to run. The app executes as a Web View within the native application wrapper, which you distribute to app stores. The Cordova-enabled Web View may provide the application with its entire user interface. On some platforms, it can also be a component within a larger, hybrid application that mixes the WebView with native application components.

Command Line Interface :

This tool allows you to create new projects, build them on different platforms, and run on real devices or within emulators. You can also use the CLI to initialize project code, after which you use various platforms’ SDKs to develop them further.

What role does CLI play in Cordova?

  • Cordova is totally dependent on CLI, so without it, we can’t execute a single process.
  • It is used,
    1. To create a Cordova project.
    2. To add a platform for which we want to develop an app.
    3. To add plugins.
    4. To generate APK.

For these listed tasks, we have to pass command line arguments.

Cordova Core Components:

Cordova provides core components that will be used for creating a base of the app so we can spend more time to implement our own logic. Cordova offers a set of core components that every mobile application needs. These components will be used for creating a base of the app so we can spend more time to implement our own logic.

Cordova Plugins:

A plugin interface is available for Cordova and native components to communicate with each other. This enables you to invoke native code from JavaScript. As of version 3.0, plugins provide bindings to standard device APIs. Third-party plugins provide additional bindings to features not necessarily available on all platforms. You can find these third-party plugins in the plugin registry and use them in your application. You can also develop your own plugins, as described in the plugin development guide available in the official Cordova documentation. Plugins may be necessary, for example, to communicate between Cordova and custom native components.

Plugins allow applications developed with Cordova to access the device’s functionality. Plugins are written in JavaScript and native libraries. All the Cordova main features are implemented as plugins. If we don’t use the plugin then we can’t use any of the native features. Let us suppose you want to access the Gallery or Contacts of the device, in such a situation we need plugins, which will communicate with the device and request a device to grant the required permission.

For example:

Suppose you want to pick a contact from the contact list, then how will you do this through your app, so here we need a plugin which communicates with the native feature of the device and requests to grant permission

Types of Plugins

There are many types of plugin, some are:

  1. Camera Plugin (To open camera)
  2. Geolocation Plugin (It captures your location coordinates → latitude, longitude)
  3. File Transfer Plugin (It transfers the file from your storage to somewhere else → say to the server)
  4. Contact List Plugin
  5. Push Notification Plugin

Tools for App Development

Now we will learn about the various tools which we will require for App development. We have to download 5 different tools:

  1. NodeJS
  2. Cordova CLI
  3. Apache Ant
  4. Android SDK
  5. Java JDK

Node Js

Node JS is a JavaScript runtime and is open source. We use Node JS to execute backend code written in JavaScript. It is made on Chrome V8 JavaScript engine. It is lightweight and very efficient. Node JS’s package is npm. It is one of the largest ecosystems of open source libraries. We will use npm to download Cordova, JS libraries, various plugins, packages etc.

Cordova CLI

The command line interface of Cordova is used to createbuilddeploy and manage applications based on Cordova. From creating the project to building the executable file, we will use the command line interface in this tutorial.

Apache Ant

Its main objective is to build a Java application. It is a JavaScript library which is also run using a command line. Or you can say it is a build tool. Using Ant, we can create Ant build files with all the details about how to compile, assemble, test and run a particular Java application.

Android SDK

It is a Software Development Kit(SDK) which includes all the necessary libraries required to build an Android App. So if we wish to develop Android Apps, we need this.

Java JDK

It is a Java Development Kit (JDK) which is used to develop Java Applications. Again very important.

Benefits of Apache Cordova Cross Platform

Simple to Learn: No need to learn complicated code languages for mobile apps like CSS3, JavaScript and HTML5. Apache Cordova works on the most common browsers. So, it is very easy for business owners to get it developed fast, and in the most cost-effective manner.

Helps Developers to Make Mobile Apps More Powerful: Apache Cordova helps developers developing an application by using the properties of the native resources of a device. Then the application can access powerful native features like a phone’s camera, accelerometer, compass, messages, contacts, geolocation, network, notifications (alert, sound, vibration) and media storage. Apache Cordova can make a business owner’s life easier without compromising user experience.

Compatible on Multiple Platforms: Apache Cordova solves the problem of variations in multiple platform application development. It removes differences in feel and looks in different platforms and the UI completely matches all mobile platforms such as iPhone or Android. Apache Cordova mobile application is compatible with JavaScript toolkits like Sencha Touch, jQuery Mobile, and Dojox Mobile.

Cost Effective Development: Apache Cordova is a cost-effective technology to build a mobile app in that it leverages high quality and multiple sets of features as well as providing the tools required to reduce development time. Once a developer builds the Apache Cordova application, then it can deploy it everywhere and submit it to all of the platforms. So, you can save a lot of development money, efforts and time by not building the native apps using different programming language for each platform.

Apache Cordova Plugins: Apache Cordova plugins are an extensive feature. It supports a model of plug-in architecture that allows the developers to extend more functionalities of an application. Its extensive architecture helps you to utilize native features, the full potential of the phone device and it provides the feature to access the cloud service. This is so, that you can push the technology notifications with enhancements, tutorials, and examples.

The obvious benefits of Apache Cordova applications are that it uses less and more simple code, which iterate faster. It is profitable for all the business owners because less effort is required to develop an application to work across all mobile platforms. Phone Gap is the most popular technology to develop a code extensive mobile application with tremendous features and great framework.


Author:  Pavani Krishna Kanchapu – Sr.Software Engineer
Source:  https://instabug.com/blog/apache-cordova-development-tools/?utm_source=reddit&utm_medium=social&utm_content=cordova_development_tools
https://cordova.apache.org/docs/