Monday 14 December 2015

Currency Converter in Ionic

Hello,

Here is a way by which, we can use currency converter in Hybrid application.

So, now we will start with a blank app.

ionic start MyConverterApp blank
cd MyConverterApp

So, for using the currency converter, here we need to include money.js in our index.html file.
You can include it from money.js a small javascript library for currency conversion, maintained by Open Exchange Rates.

Now, we will include following lines of in our index.html file-

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">    <title></title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">    <link href="css/style.css" rel="stylesheet">
    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above    <link href="css/ionic.app.css" rel="stylesheet">    -->
    <!-- ionic/angularjs js -->    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- cordova script (this will be a 404 during development) -->    <script src="cordova.js"></script>
    <script src="js/money.js"></script>    <!-- your app's js -->    <script src="js/app.js"></script>  </head>  <body ng-app="starter" ng-controller="realexchangeCtrl">
  <ion-pane>      <ion-header-bar class="bar-stable bar-calm">          <h1 class="title">Real Exchange Rate</h1>      </ion-header-bar>      <ion-content >          <ion-refresher                  pulling-text="Pull to refresh..."                  on-refresh="doRefresh()">          </ion-refresher>          <div class="list">              <label class="item item-input item-select">                  <div class="input-label">                      From Currency                  </div>                  <select ng-model="Data.fromCurrency" ng-change="getExchangeRate()">                                <option value="">Select</option>                      <option ng-repeat="(key,value)  in result.rates" value="{{key}}">{{key}}</option>                  </select>              </label>          </div>          <div class="list">
              <label class="item item-input item-select">                  <div class="input-label">                      To Currency                  </div>                  <select ng-model="Data.toCurrency" ng-change="getExchangeRate()">                                 <option value="">Select</option>                      <option ng-repeat="(key,value) in result.rates" value="{{key}}">{{key}}</option>                  </select>              </label>
          </div>
          <div class="list">              <label class="item item-input">                  <div class="input-label">                      Amount                  </div>                  <input id="amount" type="number" placeholder="Amount" ng-model="Data.amount" ng-change="getExchangeRate()">              </label>          </div>          <label class="item item-input">              <span class="input-label">Date</span>              <input id="rateDate" type="date" ng-model="Data.date" ng-change="getExchangeRate()">          </label>          <div class="card" ng-show="exchangeRate">              <div class="item item-text-wrap" style="text-align:center;">                  <h1>{{Data.amount}} {{Data.fromCurrency}} = {{exchangeRate}} {{Data.toCurrency}}</h1>              </div>          </div>      </ion-content>  </ion-pane>  </body></html>


Now, we will include following lines of code in app.js file-


.controller('realexchangeCtrl',function($scope,$filter,$ionicLoading,$http,$ionicPopup){        $scope.Data={};        $scope.Data.amount=1;        $scope.Data.currentDate=$filter("date")(Date.now(),'yyyy-MM-dd');        $scope.Data.date=$scope.Data.currentDate;
        var apiKey="your api key";        var baseUrl="http://openexchangerates.org/api/";
        $scope.url=baseUrl+"latest.json?app_id="+apiKey;                $ionicLoading.show();        $http.get($scope.url)            .success(function(response){                $scope.result=response;                            })            .error(function(response,status){                $scope.showAlert('Error!!!',response.message);            })            .finally(function(){                $ionicLoading.hide();            });
        $scope.getExchangeRate = function() {
            if($scope.Data.date!=$scope.Data.currentDate)            {                $ionicLoading.show();                $scope.url=baseUrl+"historical/"+$scope.Data.date+".json?app_id="+apiKey;
                $http.get($scope.url)                    .success(function(response) {                        $scope.historicalresult = response;                        fx.rates = response.rates;                        fx.base = response.base;                        $scope.exchangeRate=fx($scope.Data.amount).from($scope.Data.fromCurrency).to($scope.Data.toCurrency).toFixed(2);                    })                    .error(function(response, status){                        $scope.showAlert('Error!!!',response.message);                    })                    .finally(function(){                        $ionicLoading.hide();                    });            }            else{                fx.rates = $scope.result.rates;                fx.base = $scope.result.base;                $scope.exchangeRate=fx($scope.Data.amount).from($scope.Data.fromCurrency).to($scope.Data.toCurrency).toFixed(2);            }        };        $scope.doRefresh = function() {            $http.get($scope.url)                .success(function(response) {                    $scope.result = response;                                    })                .finally(function() {                    // Stop the ion-refresher from spinning                    $scope.$broadcast('scroll.refreshComplete');                });        };        $scope.showAlert = function(alertTitle,alertTemplate) {            var alertPopup = $ionicPopup.alert({                title: alertTitle,                template: alertTemplate            });            alertPopup.then(function(res) {                console.log('Log Error');            });        };
})
you need to create an account in OpenExchnageRates to get the api key and replace the text with your api Key and then just setting the url to request.



Thanks...

1 comment:

  1. I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often. convert money

    ReplyDelete