Cordova Apps

👉 Overview

👀 What ?

Cordova is a mobile application development framework that uses standard web technologies - HTML5, CSS3, and JavaScript, for cross-platform development. It 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.

🧐 Why ?

Developing an app for each platform—iOS, Android, Windows—is a time-consuming and costly affair. Cordova is a viable solution to this problem as it allows developers to build a single app that can run on all platforms. This is especially important for small businesses and startups who have limited resources. Furthermore, because Cordova apps are built using JavaScript, HTML, and CSS, they're easier to develop and maintain than native apps written in languages like Swift or Java.

⛏️ How ?

You can start by installing Node.js and npm. Then, install the Cordova command-line interface (CLI) using npm (the Node Package Manager). After that, you can create a new project using the 'cordova create' command. Add the platforms you want to target with your app using the 'cordova platform add' command. Then, write your app using HTML, CSS and JavaScript. Once you are done with the coding, you can build your app using the 'cordova build' command. You can then deploy the app on the emulator or device using the 'cordova run' command.

⏳ When ?

Cordova was first released in 2009 by Nitobi. In 2011, Adobe Systems purchased Nitobi and rebranded it as PhoneGap, and later released an open-source version of the software called Apache Cordova.

⚙️ Technical Explanations

Cordova is a powerful and flexible mobile application development framework that uses HTML, CSS, and JavaScript. It works by encapsulating your application code, based on the target platform, and then rendering that code within a WebView on the device. This WebView is a native container that is used to load web content in mobile applications.

One of the key features of Cordova is its ability to extend standard web technologies to interact with device-specific features. This means that it allows JavaScript to interface with device features such as the accelerometer, camera, compass, and more. This is achieved through a series of APIs that Cordova provides, which enable JavaScript to interact with native device capabilities.

Furthermore, Cordova adopts a plugin-based architecture. This means that each device feature is developed as a plugin, modular pieces of code that add specific functionality to an application. Plugins are a critical part of the Cordova ecosystem as they allow developers to add and remove features based on the requirements of the app. This modularity gives developers the flexibility to build apps with only the features they need, reducing the size and complexity of the application.

Moreover, Cordova allows developers to write a single app that works on multiple platforms, reducing time and effort. It's especially beneficial for small businesses and startups with limited resources, as it allows for the fast and cost-effective development of mobile apps.

To develop with Cordova, you first need to install Node.js and npm. Then, you install the Cordova command-line interface (CLI) using npm. You can create a new project with the 'cordova create' command and add target platforms with the 'cordova platform add' command. After developing your app with HTML, CSS, and JavaScript, you can build it with the 'cordova build' command and then deploy it on an emulator or device with the 'cordova run' command.

In summary, Cordova is a robust and efficient tool for building cross-platform mobile applications using web technologies. Its ability to wrap HTML, CSS, and JavaScript code, utilize device features, and provide a plugin-based architecture makes it a go-to choice for many developers.

Here's a detailed example of creating a new Cordova project with an example:

1. Install Node.js and npm: Node.js is a JavaScript runtime used to execute server-side JavaScript code. npm is the default package manager for Node.js. You can download Node.js and npm from the official website.

# Verify the installation
node -v
npm -v

1. Install the Cordova CLI: Use npm to install the Cordova Command Line Interface (CLI). The CLI is the tool to create, build, and manage Cordova applications.

# Install Cordova
npm install -g cordova

# Verify the installation
cordova -v

1. Create a new Cordova project: Use the 'cordova create' command to create a new project. Let's create an app called 'MyApp'.

cordova create MyApp

This command creates a new directory 'MyApp' with all the boilerplate files and directories.

1. Add target platforms: Use the 'cordova platform add' command to add platforms. Let's add Android and iOS platforms.

cd MyApp
cordova platform add android
cordova platform add ios

1. Develop your app: Now, you can start developing your app. Open the 'www' directory and you will find an 'index.html' file. This is where you write your app using HTML, CSS, and JavaScript.
2. Build the app: Use the 'cordova build' command to build the app for all platforms.

cordova build

This command compiles the app and prepares it for deployment on the emulator or device.

1. Run the app: Use the 'cordova run' command to deploy the app. If you have the Android emulator or iOS simulator set up, Cordova will launch the app in it.

cordova run android
cordova run ios

In summary, Cordova allows you to create a mobile app using web technologies and then wrap it in a native container that can access device features. This process involves installing necessary tools, creating a new project, adding platforms, writing the app, building it, and running it on an emulator or device.