Create Cordova Mobile Application For Cross platforms Android & IOS.

Hybrid Mobile Application are most easy to develop there are so many frameworks out there for creating mobile application :- i.e PhoneGap , Ionic  , Sencha Touch and many more

 

What is Cordova ?

“Apache Cordova is an open source mobile development Plugin which interact with direct OS by using Custom or Standard API’s so it makes so easy to make android or IOS application with website code HTML , JS , CSS etc. “

 

Understand the Architecture of Hybrid Mobile Application.

..cordova

Dependencies

1. Need SDK installed.

2. Java 1.8 version or Greater.

3.Node JS installed.

Most Common errors while Configuring setup…

  • Environment variable for JAVA_HOME , ANDROID_HOME (Which is SDK path)
  • if you have version 1.7 JDK then update first before installing Cordova on your machine.
  • if your familiar with Bash commands then you can install Git.

STEP 1:

install node JS in your machine and check by typing command “npm” in cmd.

npm-cmd

If it works as same in above picture than your good go.

STEP 2:

Check Environment Variables

1.JAVA_HOME

2.ANDROID_HOME

veriable

STEP 3:

To Install Cordova You need to type following command

Windows cmd :- “npm install –g cordova –save”

Hit Enter after that…

image

 

STEP 3:

the command to create Project Structure

“cordova create hello com.example.hello HelloWorld”

createCordova

STEP 4:

the command will create Project Structure like this

Cordova Structure

  • Hooks

Hooks is Allow you to perform special activities with Cordova commands like

Before or after when you every time build application

http://cordova.apache.org/docs/en/6.x/guide/appdev/hooks/index.html#page-toc-source

 

  • Platforms

In this cordova will create platforms for mobile application like android and IOS.

  • www

this Directory is used to store all application View content which is nothing but your HTML , JS , CSS.

command will create Project Structure like this

  • Config.xml

<?xml version=’1.0′ encoding=’utf-8′?>
<widget id=”com.example.hello” version=”1.0.0″ xmlns=”http://www.w3.org/ns/widgets” xmlns:cdv=”http://cordova.apache.org/ns/1.0″> //package name and version
<name>HelloWorld</name>//Display app name
    <description>
A sample Apache Cordova application that responds to the device ready event.
</description>// any description you want to give.
<author email=tejas@techdrop.in href=http://techdrop.in>//Email Id and Web address.
        Apache Cordova Team
</author>
<content src=”index.html” />//first page to load
<plugin name=”cordova-plugin-whitelist” spec=”1″ />
<access origin=”*” />
<allow-intent href=”http://*/*” />
<allow-intent href=”https://*/*” />
<allow-intent href=”tel:*” />
<allow-intent href=”sms:*” />
<allow-intent href=”mailto:*” />
<allow-intent href=”geo:*” />
<platform name=”android”>
<allow-intent href=”market:*” />
</platform>
<platform name=”ios”>
<allow-intent href=”itms:*” />
<allow-intent href=”itms-apps:*” />
</platform>
</widget>

 

STEP 5:

Cd AppName

Where AppName in above example is Hello

Type following command to create platform for android and IOS

  • Android :- “cordova platform add android –-save”
  • IOS :- “cordova platform add ios–-save”

For remove platform just replace add with Remove.

addpltform

STEP 6:

To Build the Project Run Following command

Build Android :- “cordova build android”

Build Ios :- “cordova build ios”

build

STEP 7:

Run the application

cmd : – “ cordova emulate android ”

run

Starting Emulator….

run2

Successfully Run The Application…

techdrop

3 thoughts on “Create Cordova Mobile Application For Cross platforms Android & IOS.”

Comments are closed.