Few days ago I run into nice article about Apache Cordova basics: An Introduction to Cordova. I read before about Cordova but never had a chance to try it out, so after reading this article I decided to give it a try by creating a simple test application.
In this post I shall not discuss advantages and disadvantages of the framework and how it works, these things you can check in mentioned article above. In this post I shall describe how I have set-up project using Netbeans 8.1 and details of implementation for my first application in Cordova. First you should install Netbeans version 8.1 that you can download from here, also you will need several other things to install: JDK, Apache Cordova, NodeJS, Git and Android SDK. If you want to develop and test for iOS, you will have to have iOS SDK and all other required tools.
I will not go into details of installing JDK, NodeJS, Git and Android SDK, but I shall only mention the steps to install Cordova since installation of it is done using NodeJS package manager. After you have installed JDK, Git and Android SDK you can open up terminal window and issue commands:
First to check if NodeJS is installed
In case you are behind proxy, please check page for configuration of proxy here
Second step is to install Cordova:
C:\Users\dp>npm install -g cordova
After install is done, run command to check if Cordova has been installed:
Now you are ready to go with creating a project in Netbeans, so start your Netbeans IDE and select File > New Project … and select Cordova Application as shown below
On next step populate project name and location
Next step will ask you to select Site Template. Netbeans provides Cordova template, so you can select Cordova Hello World.
After selecting next, you will be offerred to select Tools, in this case you shall not need any of these so you can uncheck them all and click on Next button
Final step is to select application ID, Name and version number
By clicking on button Finish, Netbeans will create new Cordova project, lets take a look at the project structure quickly
Clicking on Add button, new dialog gets opened where you are able to search for libraries that you would like to add to your project, type jquery in the Find field and hit Search button, select files to be installed and version and hit Add Library button
Do the same for jQuery-Mobile
Last step to add support for jQuery is to open up index.html file and add this part below between head tags
Setup of the project in done, let me now talk about what we are going to build for this test project. In order to make this implementation a bit interesting I decided to create application that will use some REST services. Application will be using some public services in order to display currency rates for a specific currency selected by user. These services are part of Yahoo Finance API, some more details and how to use it you can read on the this link, I shall not go into details how this service works but for now you can check response of the rest service using this URL:
You will notice that response is in json format, you can specify it also to be in xml format by changing format parameter to have value xml.
To have better idea what we shall build I will show you the screenshot of final application below. This will be a one screen/page application having header with name of application and button that will open up dialog with information about application. In main section of the screen we shall have select input field where user will be able to select desired currency. Just below that select input we shall have a button that will trigger calling the web service and displaying results in another table below.
For now I believe you got the idea how to setup Cordova project in Netbeans and how this test application is going to look like. In next part of this article series we dive into details of implementing this application.