Migrate Your Web App to Cross-Platform Mobile App Using CORDOVA

Mobile application is one of the fastest emerging fluidity in the market in todays date. If you formerly hold up well maintained running web app and want to flicker in this trend you can hike up using Apache Cordova.

The Commencement of Cordova development is quite pleasing: you can utilize your existing HTML + JavaScript + CSS app to build cross-platform mobile app for mesmerizing platforms like iOS, Android, Windows Phone, and many more.

Apache Cordova is good opinion for those who have web app to be ported on different mobile platform. But, firstly let's understand what exactly is CORDOVA.

What is Apache Cordova?

CORDOVA is a free and open-source platform provided for structuring native mobile app using various languages like HTML , CSS , JavaScript.

By this , it allows targeted cross-platform with just a single code-base.

Basically, Cordova is alike of wrapper wrapped with an app that has implanted web browser where your entire web application is fully loaded.

How to install and Setup Apache Cordova ?

Before installing anything on Cordova you need to remember that you have to install respective SDK for the intended platform you wish to built in your app.

Here today we focus on Ios platform for which we need a Mac Computer with Xcode as platform.
 

To begin with Firstly install Cordova Command- line utility through command:

npm
install -g cordova

Now, create new Cordova project as below:

cordova
create your-app-name com.example.myapp MyAppName

Create command consist of 3 Arguments:

1)your-app-name : folder name where app is created.

2)com.example.myapp : Domain identifier

3)MyAppName: App display Name.

Browse to project folder and add platform you wish to build in as below:

cordova
platform add [platform]

Supported Platforms:

Every time you run Platform add Command it will include all native files to build up your app on intended platform.

After this a folder name ios consisting of .Xcodeproj files & others even is found.

Now, we have successfully installed Cordova now let's move on with Migration.

Transfer your Web app to Cordova

Firstly find /WWW directory . This is where your application is placed in.

Perform below steps to update it.

1) Update HEAD tag of your file and see that no meta tag of cordova is misplaced and add your necessary elements.

2) Update BODY portion with your content.

3) Add respective references of files included.

A function located in /js/index.js needs to be called on onDeviceReady() method at the time of init() of app.

var app = {
    initialize: function() { ... }    
    bindEvents: function() { ... }    

    onDeviceReady: function() {
        // Your app init code
        ...
    }
};

app.initialize();

Now, all the CSS, .js files , images are drifted inside /WWW/ folder.

Adding your hosted Web-page as an App

If your web app is already crowded on server then Add Network info plugins and dilogs through command:

cordova
plugin add cordova-plugin-dialogs

cordova
plugin add cordova-plugin-network-information

Once onDeviceReady() event takes place just navigate to the URL and you are done ..!

 <script>
  function onDeviceReady() {
    if (navigator.connection.type == Connection.NONE) {
      navigator.notification.alert('An internet connection is required to continue');
    } else {
      window.location="http://www.myapp.com";
    }
  }
  document.addEventListener("deviceready", onDeviceReady, false);
</script>

  function onDeviceReady() {
    if (navigator.connection.type == Connection.NONE) {
      navigator.notification.alert('An internet connection is required to continue');
    } else {
      window.location="http://www.myapp.com";
    }
  }
  document.addEventListener("deviceready", onDeviceReady, false);



  function onDeviceReady() {
    if (navigator.connection.type == Connection.NONE) {
      navigator.notification.alert('An internet connection is required to continue');
    } else {
      window.location="http://www.myapp.com";
    }
  }
  document.addEventListener("deviceready", onDeviceReady, false);


	Describing application Icon & Splash Screen

	 

	These are the important aspects of your mobile app as it will decide the look and feel of your mobile.

	You can specify your icon in config.xml for any platform by using  element.

	If no icon is specified then Cordova default icon is used.

	Splash element is used to define splash/startup screen of mobile device.

	check in progress 

	 

	Splash Screen Code for Ios:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.myapp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>MyApp</name>
    <icon src="generic-icon.png" />
    ...
    <platform name="ios">
    <icon src="ios-icon.png" />
    <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
    <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
        ...
    </platform>
        <platform name="android">
        <icon src="android-icon.png" />
        ...
    </platform>
</widget>

	Testing Your app:

	 

	For testing an app you need a device either android or Ios whatever platform you choose .

	But for that first you need to install emulator and for that follow below code:
sudo
npm install -g ios-sim

	

	 

	Running Application:

	 

	If application is built well and emulators are installed successfully then you can run your app before as below:
cordova
run [platform]

	

	

	

	Wrapping Up of Session:

	Now ,you can easily create fantastic apps with cordova but for successful app it means that end user should not notice that the app is wrapper of web application. Quite simple if you have one-pager responsive app but if it's not the scenario consider hustling your app to like like native that means to handle offline scenarios, page transitions , disabling navigating external sites , addition of relevant platform icon and much more things but you don't worry Hyperlink Infosystem will look out these scenarios for you. It is one of the best app developers India companies serving huge number of people with its dedicated services and outstanding applications. Contact Now to develop app with Cordova and get a free quote.