Cordova – First Application – Part 1

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, NodeJSGit 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

C:\Users\dp>node -v

v4.2.4

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:

C:\Users\dpopovic>cordova –version
5.4.1

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

NB1

On next step populate project name and location

NB2

Next step will ask you to select Site Template. Netbeans provides Cordova template, so you can select Cordova Hello World.

NB3

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

NB4

Final step is to select application ID, Name and version number

NB5

By clicking on button Finish, Netbeans will create new Cordova project, lets take a look at the project structure quickly

NB6

Site Root is the folder with all folders and files that you shall use for development, for now template created one index.css file, one index.js and one index.html page. index.html is you main application page, while index.js is the JavaScript file where you shall create all your methods and logic for the application. Before we go into implementation details, there is one more step to be done in order to add support for jQuery library. First right-click the project and select Properties, new dialog will open where you shall be able to add JavaScript libraries, select option CDNJS under JavaScrip Libraries and click button Add on right side of the dialog.

NB7

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

NB8

Do the same for jQuery-Mobile

NB9

Last step to add support for jQuery is to open up index.html file and add this part below between head tags

   <link rel="stylesheet" href="js/libs/jquery-mobile/jquery.mobile.min.css"/>
   <script type="text/javascript" src="js/libs/jquery/jquery.min.js"></script>
   <script type="text/javascript" src="js/libs/jquery-mobile/jquery.mobile.min.js"></script>

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:

https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20(%22USDMXN%22%2C%20%22USDCHF%22)&format=json&diagnostics=false&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys

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.

SC1

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.

 

 

 

Posted in Android Development Tagged with: , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe for Newsletter

Categories