15 November 2011

Developing a useful currency converter pokki app

Tag
This is a part of my previous post Create a desktop app with pokki. In this tutorial i have explained about the development part of the app.Already we have explained you about the file structure and the basic API of the pokki in the previous versions.

pokki currency converter app



Download CurrencyConve for Pokki


Before starting to add the functionality part of the app, let us see the basic architecture of the pokki app.


pokki tutorial

In the above diagram you can see the how pokki app is working.As we said before popup.html was the main page of the app, and if you need a functionality or update to run on the background use background.html.

We can communicate from popup.html to background.html using Remote Procedure Call.Using background.html you can update any badge notification , listen to the Context Menu , caching data.

Since we don't need these feature for our currency converter app we have not covered a lot about communication between pages.

Let us move to the app, we are not going to create a new function or class for online exchange rate.We are going to use money.js a javascript currency conversion library get exchange rate from openexchangerates.org.

Step1:

Download money.js and paste the currency conversion library in js folder.

Step2:

Create app2.js and put the following code in it, since we have app.js already i am using app2.js.

$(document).ready(function() {
$('#convert').click(function() {
  $('#loader').show();
  var amount = $('#amount').val();
  var from = $('#from').val();
  var to = $('#to').val();
   $.getJSON(
      'http://openexchangerates.org/latest.json',
      function(data) {
          // Check money.js has finished loading:
          if ( typeof fx !== "undefined" && fx.rates ) {
             fx.rates = data.rates;
             fx.base = data.base;  
          } else {
              // If not, apply to fxSetup global:
              var fxSetup = {
                  rates : data.rates,
                  base : data.base
              }
          }
         var v = fx.convert(amount, {from: from, to: to});
         $('#loader').hide();
         $('#container').hide();
         $('#result_container').show();
         $('#result').html( amount +' '+ from + ' = ' + v +' '+ to );
      }
  );
  });
$('#back').click(function() {
  $('#container').show();
  $('#result_container').hide();
});
});

Step3:

Add the following code to popup.html head section.


<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script language="javascript" src="js/money.js"></script>
<script language="javascript" src="js/app2.js"></script>


Now relaunch the app and you can see the exchange rate.Very soon you can see our tutorial app in pokki. Since it's basic app for only aim of motivating the developer to create a pokki apps we are not competing with any other apps.
I hope this basic tutorial was more useful if you have any queries about developing app just leave a comment down or contact via facebook.

About Editorial Staff
Nathan Shri is a Web Developer ,Opensource lover,and the editor of the codingwoo based in India ,who loves to learn new stuffs and and share.You can be his friend on Facebook.

Post a Comment