Abstract

This article is all about a basic introduction of Cordova. We will see the architecture of Cordova, that how Cordova works, how to create apps in Cordova, how to set a platform for the app, directory structure, and deployment of apps on phone.

Introduction

Cordova is powered by Apache Foundation. It is an open-source mobile development framework. You can use standard web technologies like HTML5, CSS3, and JavaScript to build cross-platform mobile applications like Android, iOS and Blackberry apps.

Advantages to use Cordova:

• Extend your existing mobile application to any other platform without re-writing code again.
• It helps you to access device API without writing any native component
• It provides special web-view that can access device-level API’s
• It is mixing native components and web view to build cross-platform apps

 

Cordova Architecture

Below diagram image shows how Cordova works:

Web View

Cordova provides WebView, which is used in the entire application, whatever you make using HTML and CSS will combine inside WebView to display user interface. So, it builds a hybrid application, which mixes web view and native application components.

Web App

It is a part where you write your application interface code. It is implemented as a web page only. Generally, we used index.html while building any web application and used CSS,  JS in combination to make it interactive and functional. Your code as the app runs inside WebView with a native wrapper of any platform like Android or iOS.

Native wrapper of your application contains config.xml, which is responsible for containing each information about the app. It tells us exactly how it affects our application functioning. It is the area which you describe plugins used (to access device-level API’s) in the app and other configuration like portrait mode, app icon, and app start-up screen.

Plugins

Plugins are used to access device-level API’s and through them, you can communicate between native components and your standard app code. It binds each other so that you can call or invoke native code from your JavaScript.

Cordova has some inbuilt core plugin to access different functioning of device like accessing camera, contact, location, gallery and battery information. These are called as core plugins.

 

Create your first app using Cordova

• First, download and install Node.js on your machine and check npm running on your command prompt (terminal)
• Now need to install Cordova in your machine, which should be added in your npm utility.
• Hit this command from your terminal npm install -g cordova

 

After doing the above steps, you can able to run Cordova commands from your terminal.

Let’s start creating an app using Cordova.

• Create any folder in your directory.
• Go to that folder from the terminal.
• Now hit the command, given below, from terminal

cordova create com.hello.myfirstapp MyFirstApp

This command will create one directory by the name of MyFirstApp, which has all the required folder for Cordova. So now you create successfully the first app using Cordova.

Set platform for app

Till now you just create a skeleton of your Cordova app. Now you need to provide a native wrapper for your app, which is mobile OS specific like Android or iOS. You can run these two commands or either one only as per your requirement. Below command add platform for your application.

cordova platform add android

cordova platform add iOS

Directory structure of your Cordova app and where to put your code in Cordova App

Till now we created an app and set a platform for our app. Now you can place your code in Cordova structure so that you can able to build the app and get the desired output.

Here is the screenshot of your Cordova app directory structure.

In folder structure, you have www folder which contains all your HTML, JavaScript and media assets. After writing your code in HTML, CSS, and JS you can copy your all files inside this folder.

IMPORTANT

There is a default index.html file, which is created by Cordova itself. Do not replace it with your code. Cordova will search for index.html file while building your application. You can modify this file according to your need but don’t remove cordova.js script from it.

 

How to build an app and deploy on your phone?

Now we are ready to build our app for testing over the phone.

Cordova build (it is used to build all platform specified in the app)

Cordova build an android (it is used to build platform-specific)

It will create a build inside your Cordova project from where you can copy

APK file and install it in your phone. Here is the path of the build app.

C:\Apps\MyFirstApp\platforms\android\build\outputs\apk

Finally, you can install your first app on your phone.

Take help from the proficient mobile app development company like us. Contact us for any query and we will help you out with our quick response.