Sunday, February 14, 2016

Hal dasar yang perlu dipersiapkan untuk membuat aplikasi Android dengan ionic

Membuat aplikasi mobile android semakin hari semakin mudah. Banyak tools atau alat yang hanya dengan drag and drop saja sudah bisa membuat aplikasi android. Namun tools seperti itu banyak sekali keterbatasannya. Salah satu keterbatasannya dan yang membuat kita kurang PD (Percaya Diri) adalah selalu disematkannya logo perusahaan penyedia jasa tersebut. Kan kita menjadi kurang PD untuk publish nya juga.. Hehehehe.. :D
Beberapa tutorial sebelumnya saya sudah membahas bagaimana membuat aplikasi android dengan menggunakan ionic. Sudah saya jelaskan dari proses awal bagaimana membuat aplikasi android tersebut. Namun, cukup banyak yang menanyakan kepada saya hal dasar yang ternyata belum sempat saya jelaskan dalam blog saya ini.
Kali ini saya akan menjelaskan hal-hal dasar apa yang perlu kita persiapkan agar mudah dalam membangun sebuah aplikasi android dengan ionic.
Tentunya dengan menguasai hal dasar ini, kita akan mudah membuat aplikasi dengan ionic ini.
Baik, langsung saja. yang perlu dipersiapkan adalah setidaknya kita telah mengetahui dasar dasar dari HTML, CSS dan AngularJS.
Mempelajari HTML terlebih dahulu sebelum terjun dalam pembuatan aplikasi Android dengan ionic adalah satu pilihan yang tepat. Karena dengan memahami HTML terlebih dahulu anda tidak akan kesulitan dengan istilah-istilah atau tag-tag yang digunakan dalam ionic. Karena basic utama ionic adalah HTML. Seperti contoh kita memerlukan form, button, icon, image dalam aplikasi kita maka jika kita telah mengetahui tag-tag html, semua itu akan dengan mudah kita buat.
Selanjutnya adalah CSS, disini CSS sangat besar sekali perannya. Dimana dalam sebuah aplikasi android yang bagus, pasti di dukung dengan design aplikasi yang bagus juga. Nah, CSS disini berfungsi dalam mendesign aplikasi kita agar tampak cantik sesuai dengan apa yang kita inginkan.
CSS juga akan membantu kita agar aplikasi kita dapat cocok untuk semua screen smartphone. Atau dalam istilah design itu Responsive. Responsive disini memiliki makna design aplikasi kita akan menyesuaikan baik dengan screen yang digunakan.
Hal yang sangat penting selanjutnya adalah mempelajar AngularJS. AngularJS ini adalah Javascript yang telah dikembangkan lebih baik lagi oleh google sehingga banyak fitur yang dengan mudah kita gunakan dengan menggunakan angularJS ini. Jika tadi HTML dan CSS berfungsi sebagai design muka aplikasi kita, maka AngularJS ini berperan penting sekali dalam menghubungkan interaksi muka aplikasi kita dengan bagian belakang layar (Backend). Dalam kesempatan lain akan saya jelaskan apa itu BackEnd.
Fungsi pindah halaman, fungsi menghitung, fungsi button click, fungsi menyembunyikan atau menampilkan element tertentu dapat dengan mudah kita atur jika kita telah mengetahui dengan baik bagaimana menggunakan AngularJS.
nah ketiga hal dasar ini perlu dikuasai oleh rekan-rekan semua sebelum terjun lebih banyak di ionic.
Dengan mengetahui 3 skill dasar diatas. bisa dikatakan anda telah mengetahu hal dasar sebagai seorang Front-End Developer. :D
Di tutorial-tutorial selanjutnya Insyaallah akan banyak saya bahas ke 3 skill dasar ini.
Demikian Semoga bermanfaat.

Sunday, February 7, 2016

Sorting data Array pada Ionic

Ketika membuat sebuah aplikasi yang sudah banyak bersinggungan dengan data Array, terkadang kita menemui beberapa kendala, dimana data yang diberikan kepada kita masih dalam bentuk data acak. Sedangkan keperluan dari user adalah data tampil sesuai dengan urutan nomor, atau sesuai dengan urutan alfabet nama nya. Hal ini cukup memberikan kita masalah jika yang kita lakukan adalah mengetik ulang data agar data bisa secara urut tampil dalam aplikasi kita.

Pada aplikasi Ionic karena kita menggunakan AngularJS, kita telah diberikan kemudahan untuk melakukan sorting data sebagaimana permasalahan diatas. Ada 2 cara sorting data yang diberikan oleh AngularJS. Sorting yang pertama adalah menggunakan metode sorting data pada file javascript kita. Cara kedua adalah kita melakukan sorting pada file html kita. Kedua cara ini sama saja mudahnya. Namun pada tutorial kali ini, saya akan membahas bagaimana melakukan sorting data Array melalui file html (cara kedua).

Untuk mempersingkat waktu, seperti biasa kita melakukan persiapan awal untuk membuat sebuah aplikasi dengan menggunakan Ionic.

ionic start sortListArray blank
cd sortListArray
ionic platform add android

Setelah persiapan dasar selesai, kita langsung mempersiapkan tampilan dasar dari aplikasi kita. Seperti biasa silahkan masukkan code berikut pada file index.html yang terletak pada directory www/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>

 <!-- 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>

 <!-- your app's js -->
 <script src="js/app.js"></script>
</head>

<body ng-app="starter">

 <ion-pane>
  <ion-header-bar class="bar-energized">
   <h1 class="title">Ionic Sorting Array Data</h1>
  </ion-header-bar>
  <ion-content ng-controller="starterCtrl">
   <div class="list">
    <div class="item row">
     <div class="col col-10">
      <strong>No</strong>
     </div>
     <div class="col">
      <strong>Nama Lengkap</strong>
     </div>
     <div class="col col-20">
      <strong>Tinggi</strong>
     </div>
    </div>
    <div class="item row" ng-repeat="a in dataName | orderBy: 'tinggi': true ">
     <div class="col col-10">
      {{a.no}}
     </div>
     <div class="col">
      {{a.nama}}
     </div>
     <div class="col col-20">
      {{a.tinggi}}
     </div>
    </div>
   </div>
  </ion-content>
 </ion-pane>
</body>

</html>

Kemudian, silahkan masukkan code dibawah ini pada file app.js yang terletak pada directory www/js/app.js

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

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova & amp; & amp; window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

.controller('starterCtrl', function($scope) {
    $scope.dataName = [{
        no: 1,
        nama: 'Prawito',
        tinggi: 171
    }, {
        no: 2,
        nama: 'Hudoro',
        tinggi: 169
    }, {
        no: 3,
        nama: 'Praw',
        tinggi: 167
    }, {
        no: 4,
        nama: 'Wito',
        tinggi: 165
    }, {
        no: 5,
        nama: 'Doro',
        tinggi: 163
    }, {
        no: 6,
        nama: 'Aa Ito',
        tinggi: 161
    }, {
        no: 7,
        nama: 'Ito',
        tinggi: 159
    }, {
        no: 8,
        nama: 'Ndoro',
        tinggi: 157
    }, {
        no: 9,
        nama: 'Prawitohudoro',
        tinggi: 155
    }, {
        no: 10,
        nama: 'Hudoroprawito',
        tinggi: 153
    }, ]
})

Hasil dari aplikasi kita ketika di jalankan adalah sebagai berikut:



Perlu diperhatikan disini adalah pada angularJS kita mengenal istilah binding data. Yang dimaksudkan adalah data yang saling terikat. Dimana ketika data dalam file Js kita dirubah maka tampilan pada html kita pun akan berubah, demikian juga sebaliknya. Itulah menariknya AngularJS. Proses binding ini juga ada 2 cara, dan cara yang palin sering digunakan adalah dengan cara {{dataBinding}}. Dengan cara kurung kurawal itu, dirasakan mempercepat proses penulisan code.

Pada html kita melihat bahwa kita menggunakan ng-repeat sebagai cara untuk melakukan pengulangan pengambilan data dari file JS kita. Secara manual mungkin bisa saja kita menuliskans setiap data kita pada file html. Tapi hal tersebut tentunya akan memakan waktu yang lama jika data yang kita miliki berupa file JS atau JSON.

Pada latihan kali ini data yang saya buat merupakan Array yang memiliki 10 object, object ini memiliki 3 properti yaitu no, nama dan tinggi.Yang menjadi materi pembelajaran kita kali ini adalah, kita dapat dengan mudah mensorting atau mengurutkan data berdasarkan 3 properti ini. Jika kita ingin mengurutkan data berdasarkan nomor dari kecil ke rendah, maka kita tinggal mengganti 'orderBy' pada html kita menjadi demikian.

ng - repeat = "a in dataName | orderBy: 'no' : false" //dari kecil ke besar
ng - repeat = "a in dataName | orderBy: 'no' : true" //dari besar ke kecil



Jika anda ingin mengurutkan berdasarkan nama, maka kita tinggal mengganti 'orderBy' pada html menjadi demikian:

ng - repeat = "a in dataName | orderBy: 'nama' : false" //dari A ke Z
ng - repeat = "a in dataName | orderBy: 'nama' : true" //dari Z ke A



Jika anda ingin mengurutkan berdasarkan tinggi badan, maka kita tinggal mengganti 'orderBy' pada html menjadi demikian:

ng - repeat = "a in dataName | orderBy: 'tinggi' : false" //dari kecil ke besar
ng - repeat = "a in dataName | orderBy: 'tinggi' : true" //dari besar ke kecil



Demikian semoga bermanfaat

Sunday, January 31, 2016

Ionic Local Storage

Hampir setiap aplikasi yang kita gunakan memerlukan penyimpanan data. Data apa yang kita masukan kedalam aplikasi tentunya kita berharap data tersebut tidak dengan mudahnya hilang ketika kita keluar dari aplikasi tersebut. Proses menyimpan data dalam device/smartphone kita disebut dengan penyimpanan pada localstorage (penyimpanan local).

Local Storage ini sangat bermanfaat sekali dalam sebuah aplikasi, dimana inputan yang telah disimpan oleh user, akan tersimpan baik dalam memori handphone, sehingga ketika user kembali menjalankan aplikasinya, data/input yang telah dimasukan tidak hilang.

Untuk mempermudah bagaimana kita melakukan proses penyimpanan dalam local, mari ikuti tahapan berikut. Seperti biasa kita lakukan persiapan untuk membuat sebuah aplikasi.

ionic start localStorage blank
cd localStorage
ionic serve

Setelah persiapan awal selesai, kita lakukan proses pemanggilan library pihak ketiga yang menyediakan fitur penyimpanan di local. Jika anda memilih untuk memanggil library ini secara offline, maka akan lebih baik anda mendownload file ngStorage.js dan simpan pada library anda. Cara yang bisa dilakukan adalah.

npm install ngstorage

Kemudian, pastikan dimana letak penyimpanan file ngStorage.js nya. Untuk kasus aplikasi saya saya simpan pada folder ngstorage pada directory www/lib/ngstorage/ngStorage.js.
Atau cara lain untuk mempermudah, anda bisa langsung men clone file saya di github, saya menyediakannya secara gratis. Silahkan klik disini.

Setelah proses diatas selesai, kita bisa melanjutkan pada proses persiapan tampilan depan. silahkan masukkan code berikut ini pada file index.html

<!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">

 <!-- ionic/angularjs js -->
 <script src="lib/ionic/js/ionic.bundle.js"></script>
 <script src="lib/ngstorage/ngStorage.js"></script>

 <!-- cordova script (this will be a 404 during development) -->
 <script src="cordova.js"></script>

 <!-- your app's js -->
 <script src="js/app.js"></script>
</head>

<body ng-app="starter">

 <ion-pane>
  <ion-header-bar class="bar-positive">
   <h1 class="title">Local Storage App</h1>
  </ion-header-bar>
  <ion-content ng-controller="localStorageCtrl" class="padding">
   <div class="list">
    <label class="item item-input item-stacked-label">
            <span class="input-label">First Name</span>
            <input type="text" placeholder="Prawito" ng-model="a.first">
          </label>
    <label class="item item-input item-stacked-label">
            <span class="input-label">Last Name</span>
            <input type="text" placeholder="Hudoro" ng-model="a.last">
          </label>
    <label class="item item-input item-stacked-label">
            <span class="input-label">Email</span>
            <input type="email" placeholder="prawito@zcodegroup.com" ng-model="a.email">
          </label>
   </div>
   <div class="spacer" style="height: 5px;"></div>
   <button class="button button-positive button-block" ng-click="save()">Save</button>
   <div class="spacer" style="height: 5px;"></div>
   <div class="row">
    <div class="col">
     <center><button class="button icon-left ion-trash-b button-assertive" ng-click="remove()">Remove All</button></center>
    </div>
    <div class="col">
     <center><button class="button icon-left ion-clipboard button-energized" ng-click="show()">Show Data</button></center>
    </div>
   </div>
   <div>
    <hr>
    <center><strong>Your Data</strong></center>
    <hr>
   </div>
   <div class="card" ng-repeat="item in showData">
    <div class="item item-text-wrap">
     <div class="row">
      <div class="col-80">
       <strong><h4>{{item.first}} {{item.last}}</h4></strong>
       <h4><small>{{item.email}}</small></h4>
      </div>
      <div class="col">
       <a class="button button-icon icon ion-trash-a" style="color: red" ng-click="del($index)"></a>
      </div>
     </div>
    </div>
   </div>
  </ion-content>
 </ion-pane>
</body>

</html>

Setelah tampilan depan selesai, kita tinggal melakukan finishing pada bagian app.js. Silahkan masukkan code dibawah ini pada file app.js.

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic', 'ngStorage'])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

.controller('localStorageCtrl', function($scope, $localStorage) {
    $scope.data = [];
    $scope.save = function() {
        $scope.data.push($scope.a);
        $scope.a = {}
        $localStorage.inputUser = $scope.data;
    }

    $scope.show = function() {
        $scope.showData = $localStorage.inputUser;
    }

    $scope.remove = function() {
        $localStorage.$reset();
        $scope.show();
    }

    $scope.del = function(id) {
        $localStorage.inputUser.splice(id, 1);
    }

})

Setelah selesai semua, anda bisa langsung menjalankan aplikasi baik pada smartphone anda maupun pada browser anda. selamat mencoba dan Semoga bermanfaat.


Sunday, January 24, 2016

Membuat Date Picker Dengan Style Native Android dengan Ionic

Jika kita menggunakan Ionic untuk membuat sebuah aplikasi mobile, pasti kita dihadapkan kepada kendala style date picker yang belum mendukung Style Native Android. Date Picker Ionic saat ini masih menggunakan style iOS. Sehingga terkadang kurang cocok jika kita gunakan ketika ketika kita membuat aplikasi Android.

Tutorial kali ini akan membahas bagaimana membuat sebuah aplikasi Date Picker android dengan Ionic namun tetap menggunakan style native android pada Date Picker nya. Baik untuk mempersingkat waktu, langsung kita lakukan persiapan seperti biasa:

ionic start datePicker blank
cd datePicker
ionic platform add android

Untuk membuat Date Picker dengan style native, kita telah dimudahkan dengan disediakannya library oleh pihak ketiga. Untuk dapat menggunakan library ini kita perlu melakukan installasi library terlebih dahulu dengan memasukan kode berikut ini di command prompt pada directory aplikasi kita.

bower install ionic-datepicker --save

setelah persiapan awal dan installasi library selesai, langsung kita menhandle keperluan tampilan depan (UI) bisa langsung kita buka file index.html pada directory www/index.html. Silahkan masukkan code berikut ini.

<!DOCTYPE html>
<html>

<head>


 <title></title>

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

 <!-- ionic/angularjs js -->
 <script src="lib/ionic/js/ionic.bundle.js"></script>
 <script src="lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>

 <!-- cordova script (this will be a 404 during development) -->
 <script src="cordova.js"></script>

 <!-- your app's js -->
 <script src="js/app.js"></script>
</head>

<body ng-app="starter">

 <ion-pane>
  <ion-header-bar class="bar-assertive">
   <h1 class="title">Ionic Blank Starter</h1>
  </ion-header-bar>
  <ion-content class="padding" ng-controller="datePickerCtrl">
   <div class="row">
    <div class="col">
     <ionic-datepicker input-obj="datepickerObject">
      <button class="button button-block button-positive">Set Date</button>
     </ionic-datepicker>
    </div>
    <div class="col">
     <button class="button button-block button-balanced" ng-click="currentDate()">Now</button>
    </div>
   </div>
   <hr />
   <center>
    <h4>Date Set</h4>
   </center>
   <center>
    <h3>{{selectedDate | date:'dd - MMMM - yyyy'}}</h3>
   </center>
  </ion-content>
 </ion-pane>
</body>

</html>

Pada angularJS kita juga perlu melakukan settingan-settingan yang sesuai dengan library yang disediakan pihak ketiga. silahkan masukkan code dibawah ini pada file app.js

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

.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('datePickerCtrl', function($scope) {
    $scope.selectedDate = new Date();

    $scope.datepickerObject = {
        titleLabel: 'Title',
        todayLabel: 'Today',
        closeLabel: 'Close',
        setLabel: 'Set',
        setButtonType: 'button-positive',
        todayButtonType: 'button-balanced',
        closeButtonType: 'button-assertive',
        inputDate: new Date(),
        mondayFirst: true,
        disabledDates: disabledDates,
        weekDaysList: weekDaysList,
        monthList: monthList,
        templateType: 'popup',
        showTodayButton: 'true',
        modalHeaderColor: 'bar-positive',
        modalFooterColor: 'bar-positive',
        from: new Date(2012, 8, 2),
        to: new Date(2018, 8, 25),
        callback: function(val) {
            datePickerCallback(val);
        },
        dateFormat: 'dd-MM-yyyy',
        closeOnSelect: false
    };

    var disabledDates = [
        new Date(1437719836326),
        new Date(),
        new Date(2015, 7, 10),
        new Date('Wednesday, August 12, 2015'),
        new Date("08-14-2015"),
        new Date(1439676000000)
    ];

    var weekDaysList = ["Sun", "Mon", "Tue", "Wed", "thu", "Fri", "Sat"];

    var monthList = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];

    var datePickerCallback = function(val) {
        if (typeof(val) === 'undefined') {
            console.log('No date selected');
        } else {
            $scope.selectedDate = val;
            console.log('Selected date is : ', val)
        }
    };

    $scope.currentDate = function() {
        $scope.selectedDate = new Date();
    }
})

Setelah semua selesai, kita tinggal menjalankan aplikasi kita. Aplikasi bisa dijalankan baik di browser maupun pada smartphone kita masing-masing. Demikian semoga bermanfaat.


Sunday, January 17, 2016

Membuat Time Picker dengan style android di Ionic

Pada artikel-artikel awal telah dijelaskan bahwa Ionic merupakan alat yang sangat bagus untuk membuat aplikasi dalam satu kali coding bisa menghasilkan aplikasi yang bisa dijalankan disemua sistem operasi Smartphone. Namun sedikit kelemahannya ketika kita ingin konsen terhadap satu sistem operasi, katakan saja Android maka terkadang beberapa fitur yang biasanya disediakan oleh Native Java itu agak sulit dibuatnya di Ionic. Atau dalam arti lain, perlu tehnik tersendiri agar aplikasi yang dihasilkan di Ionic bisa mirip dengan aplikasi yang dibuat pada native Java.

Tutorial kali ini akan membahas tentang bagaimana membuat Time Picker, yang secara default Ionic stylenya kurang begitu menarik. Atau bisa dikatakan jauh sekali dari style Android native java. Sehingga user bisa saja sedikit heran kalau style Time Pickernya berbeda dengan biasanya.

Untuk mempersingkat waktu kita lakukan persiapan seperti biasa.

ionic start timePicker blank
cd timePicker
ionic platform add android

Style Time Picker yang akan kita buat menyerupai android native ini, akan kita buat dengan bantuan pihak ketiga yang telah berbaik hati menyediakan library yang bisa kita gunakan untuk membuat Time Picker Android native ini. Untuk memudahkan, dalam CMD silahkan masukkan code dibawah ini untuk melakukkan installasi library yang kita perlukan.

bower install ionic-timepicker --save

Setelah porses installasi library selesai, kita lanjutkan pada proses tampilan depan dari aplikasi yang akan kita buat. 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>

 <!-- 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>
 <script src="lib/ionic-timepicker/dist/ionic-timepicker.bundle.min.js"></script>

 <!-- cordova script (this will be a 404 during development) -->
 <script src="cordova.js"></script>

 <!-- your app's js -->
 <script src="js/app.js"></script>
</head>

<body ng-app="starter">

 <ion-pane>
  <ion-header-bar class="bar-energized">
   <h1 class="title">Ionic Blank Starter</h1>
  </ion-header-bar>
  <ion-content class="padding" ng-controller="timeCtrl">
   <div class="row">
    <div class="col">
     <ionic-timepicker input-obj="timePickerObject">
      <button class="button button-block button-calm overflowShow">Set Time
                <standard-time-meridian etime="timePickerObject.inputEpochTime"></standard-time-meridian>
              </button>
     </ionic-timepicker>
    </div>
    <div class="col">
     <button class="button button-block button-balanced" ng-click="currentTime()">Now</button>
    </div>
   </div>
   <hr />
   <center>
    <h4>Time Set</h4>
   </center>
   <h3>{{now}}</h3>
   <center>
    <h2><strong>{{("0"+(hour)).slice(-2)}} : {{("0"+(minute)).slice(-2)}} {{meridian}}</strong></h2>
   </center>
  </ion-content>
 </ion-pane>
</body>

</html>

kemudian untuk pengaturan Time Picker kita, masukkan code berikut ini pada app.js yang terletak di directory www/js/app.js

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

.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('timeCtrl', function($scope) {
    $scope.hour = new Date().getHours();
    $scope.minute = new Date().getMinutes();
    $scope.meridian = "AM";

    $scope.currentTime = function() {
        $scope.hour = new Date().getHours();
        $scope.minute = new Date().getMinutes();
        $scope.meridian = "AM";
    }

    $scope.timePickerObject = {
        inputEpochTime: ((new Date()).getHours() * 60 * 60),
        step: 1,
        format: 12,
        titleLabel: '12-hour Format',
        setLabel: 'Set',
        closeLabel: 'Close',
        setButtonType: 'button-positive',
        closeButtonType: 'button-assertive',
        callback: function(val) {
            timePickerCallback(val);
        }
    };

    function timePickerCallback(val) {
        if (typeof(val) === 'undefined') {
            console.log('Time not selected');
        } else {
            var selectedTime = new Date(val * 1000);
            if (val & lt; 43200) {
                $scope.meridian = "AM";
            } else $scope.meridian = "PM"
            $scope.hour = selectedTime.getUTCHours();
            $scope.minute = selectedTime.getUTCMinutes();
            console.log('Selected epoch is : ', val, 'and the time is ', selectedTime.getUTCHours(), ':', selectedTime.getUTCMinutes(), 'in UTC');
        }
    }

})

Aplikasi Time Picker kita telah selesai. dan dapat kita running baik di device maupun di browser kita. Demikian, semoga bermanfaat.



Sunday, January 10, 2016

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.