Hybrid App development
Web applications cannot use native mobile functionalities by default. This is where Cordova is coming in. It offers a bridge for connection between web app and mobile device. By using cordova we can make hybrid mobile apps that can use camera, geolocation, file system and other native mobile functions.
Following are the features of Cordova
Lets see environment setup for cordova. Before start with the setup you need to install following components.
NodeJS and NPM:- NodeJS is the platform needed for Cordova development.
Android SDK:- You need Android SDK for Android platform.
XCode:- It is required for iOS platform.
In this installation we are using Windows Command prompt.
Step 1: Installing Git
Cordova need Git. It is using Git for some background processes. After you install git. Follow following steps to setup Environment Variable.
- Right-Click on Computer
- Advanced System settings
- Environment Variables
- System Variables
Copy the following at the end of the variable value field. This is default path of the git installation. If you installed it on a different path you should use that instead of our example code below.
;C:Program Files (x86)Gitbin;C:Program Files (x86)Gitcmd
Now you can type git in your command prompt to test if the installation is successful.
Step 2: Installing Cordova
Open the command prompt and run the following command
C:Usersusername>npm install -g cordova
You can check the installed version by running following command
This is everything you need to start developing the Cordova apps on Windows operating system.
Lets create sample hybrid app using Cordova.
Open the directory where you want the app to be installed in command prompt. We will create it on desktop.
create Myhybridapp io.cordova.hellocordova HybridApp
Myhybridapp is the directory name where the app is created.
io.cordova.hellocordova is the default reverse domain value. You should use your own domain value if possible.
HybridApp is the title of your app.
Open your project directory in the command prompt. In this example, it is the Myhybridapp. You should choose platforms that you need. To be able to use the specified platform, you need to have installed the specific platform SDK. Since we are developing on windows, we can use the following platforms. We have already installed Android SDK, so we will only install android platform for this example.
C:UsersrockyDesktopMyhybridapp>cordova platform add android
There are other platforms that can be used on Windows OS.
C:UsersrockyDesktopMyhybridapp>cordova platform add wp8
C:UsersrockyDesktopMyhybridapp>cordova platform add amazon-fireos
C:UsersrockyDesktopMyhybridapp>cordova platform add windows
C:UsersrockyDesktopMyhybridapp>cordova platform add blackberry10
C:UsersrockyDesktopMyhybridapp>cordova platform add firefoxos
If you are developing on Mac, you can use :-
$ cordova platform add IOS
$ cordova platform add amazon-fireos
$ cordova platform add android
$ cordova platform add blackberry10
$ cordova platform add firefoxos
You can also remove platform from your project by using :-
C:UsersrockyDesktopMyhybridapp>cordova platform rm android
Building and Running App
In this step we will build the app for a specified platform so we can run it on mobile device or emulator.
C:UsersrockyDesktopMyhybridapp>cordova build android
Now we can run our app. If you are using the default emulator you should use
C:UsersrockyDesktopMyhybridapp>cordova emulate android
If you want to use the external emulator or real device you should use −
C:UsersrockyDesktopMyhybridapp>cordova run android
We will use the Genymotion android emulator since it is faster and more responsive than the default one. You can find the emulator here. You can also use real device for testing by enabling USB debugging from the options and connecting it to your computer via USB cable. Once we run the app, it will install it on the platform we specified. If everything is finished without errors, the output should show the default start screen of the app.
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 tool set.
- 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 WebView (special browser window) that can access device-level APIs, or if you want to develop a plugin interface between native and WebView components.