Membuat StopWatch sederhana dengan Ionic dan AngularJS

Berfikir kreatif dalam membuat suatu aplikasi, bisa kita mulai dengan metode ATM. Amati, Tiru, Modifikasi. Tidak mudah memang melahirkan sebuah ide orisinil dan kemudian di implementasikannnya dalam sebuah aplikasi. Namun, hal tersebut bisa kita awali dengan metode ATM tadi.
Pada tutorial kali ini, saya akan membagikan informasi bagaimana kita membuat sebuah stopwatch sederhana dengan bantuan AngularJS dan Ionic tentunya. Sebelum memulai berkreasi dengan Ionic, seperti biasa kita lakukan persiapan awal untuk pembuatan sebuah aplikasi

ionic start stopwatch blank
cd stopwatch
ionic platform add android

Setelah persiapan awal selesai, kita bisa lanjut ke persiapan selanjutnya, yaitu kita rancang bagaimana tampilan dari aplikasi stopwatch kita. Untuk memudahkan silahkan masukkan code berikut ini pada file index.html

<!DOCTYPE html>
<html>

<head>


 <title></title>

 <link href="lib/ionic/css/ionic.css" rel="stylesheet"></link>
 <link href="css/style.css" rel="stylesheet"></link>

 <script src="lib/ionic/js/ionic.bundle.js"></script>
 <script src="cordova.js"></script>
 <script src="js/app.js"></script>
</head>

<body ng-app="starter">
 <ion-pane>
  <ion-header-bar class="bar-energized">
   <h1 class="title">Simple StopWatch</h1>
  </ion-header-bar>
  <ion-content class="bg" ng-controller="stopWatchCtrl">
   <div class="padding">
    <div>
     <center class="t20">
      <h1 class="f-grey">{{("0"+(hour)).slice(-2)}}:{{("0"+(minute)).slice(-2)}}:<strong class="f-energized">{{("0"+(second)).slice(-2)}}</strong><small class="f-assertive">.{{("0"+(value)).slice(-2)}}</small></h1>
     </center>
     <div class="row">
      <div class="col">
       <center class="t10">
        <a href="https://www.blogger.com/null" ng-click="stop()"><img src="img/stop.png" /></a>
       </center>
      </div>
      <div class="col">
       <center>
        <a href="https://www.blogger.com/null" ng-click="start()" ng-show="btnPlay"><img src="img/play.png" /></a>
       </center>
       <center>
        <a href="https://www.blogger.com/null" ng-click="pause()" ng-show="btnPause"><img src="img/pause.png" /></a>
       </center>
       <center>
        <a href="https://www.blogger.com/null" ng-click="resume()" ng-show="btnResume"><img src="img/play.png" /></a>
       </center>
      </div>
      <div class="col">
       <center class="t10">
        <a href="https://www.blogger.com/null" ng-click="reset()"><img src="img/reset.png" /></a>
       </center>
      </div>
     </div>
    </div>
   </div>
  </ion-content>
  <div class="bar bar-footer bar-clear">
   <div class="title">
    <strong class="f-energized">ZCODE</strong></div>
  </div>
 </ion-pane>
</body>

</html>

apa yang tampil di index.html tersebut tentunya akan sempurna dan berjalan dengan bantuan css. Silahkan buka file style.css untuk melengkapi tampilan awal apliikasi kita. Masukkan code berikut di file style.css :

hr {
    opacity: 0.2;
}

.bg {
    background-color: #281E1C;
}

.f-grey {
    color: grey;
    font-weight: normal;
}

.f-energized {
    color: #FFC900;
}

.f-assertive {
    color: #EF473A;
}

.t5 {
    margin-top: 5%;
}

.t10 {
    margin-top: 10%;
}

.t20 {
    margin-top: 20%;
}

.t30 {
    margin-top: 30%;
}

.clear {
    border-radius: 25px;
    width: 50%;
}

.circle {
    border-radius: 200%;
}

Setelah persiapan tampilan awal aplikasi kita selesai, kita bisa lanjut kepada tahapan inti aplikasi kita. yaitu bagian back end yaitu bagian pengelola perhitungan stopwatch kita. Silahkan masukkan code berikut pada app.js pada directory www/js/app.js tentunya.

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if (window.cordova & amp; & amp; window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

.controller('stopWatchCtrl', function($scope, $timeout) {
    $scope.btnPlay = true;
    $scope.btnPause = false;
    $scope.btnResume = false;
    $scope.value = 0;
    $scope.second = 0;
    $scope.minute = 0;
    $scope.hour = 0;
    $scope.ms = 10;

    function countdown() {
        $scope.value++;
        $scope.timeout = $timeout(countdown, $scope.ms);
        if ($scope.value === 100) {
            $scope.value = 0;
            $scope.second++;
        }
        if ($scope.second === 60) {
            $scope.second = 0;
            $scope.minute++;
        }
        if ($scope.minute === 60) {
            $scope.minute = 0;
            $scope.hour++;
        };
    };

    $scope.pause = function() {
        $scope.btnPlay = false;
        $scope.btnPause = false;
        $scope.btnResume = true;
        $scope.value = $scope.value;
        $timeout.cancel($scope.timeout);
    };

    $scope.resume = function() {
        $scope.btnPlay = false;
        $scope.btnPause = true;
        $scope.btnResume = false;
        $timeout.cancel($scope.timeout);
        countdown();
        $scope.value = $scope.value;
    };

    $scope.start = function() {
        $scope.btnPlay = false;
        $scope.btnPause = true;
        $scope.btnResume = false;
        $timeout.cancel($scope.timeout);
        countdown();
        $scope.value = 0;
        $scope.second = 0;
        $scope.minute = 0;
        $scope.hour = 0;
    };

    $scope.stop = function() {
        $scope.btnPlay = true;
        $scope.btnPause = false;
        $scope.btnResume = false;
        $timeout.cancel($scope.timeout);
    };

    $scope.reset = function() {
        $scope.btnPlay = true;
        $scope.btnPause = false;
        $scope.btnResume = false;
        $timeout.cancel($scope.timeout);
        $scope.value = 0;
        $scope.second = 0;
        $scope.minute = 0;
        $scope.hour = 0;
    };

});

Baik, seluruh proses pembuatan aplikasi stopwatch sederhana dengan AngularJS dan Ionic telah selesai, tinggal kita lihat hasilnya baik di browser kita maupun di device kita. Demikian semoga bermanfaat.