Pada kesempatan kali ini saya ingin menulis sedikit tutorial untuk membuat aplikasi Android menggunakan ionic framework. Niatnya sih tutorial yang saya buat ini nanti bentuknya serial, jadi semoga saja niat menulis tetap membara sehingga tidak berhenti pada bagian satu saja.

Oke, pertamanya mari kita berkenalan. Apakah ionic itu? Ionic merupakan sebuah MV* framework yang dibangun menggunakan library AngularJS. Nah jika Anda belum tau apa itu angular silakan di googling dulu. Tapi jangan khawatir, belum pernah berinteraksi dengan angular bukan berarti masa depan Anda suram untuk berinteraksi dengan ionic. Saya juga blank tentang angular waktu pertama kali belajar ionic.

Kemudian apa saja yang perlu kita pahami untuk bisa membuat aplikasi dengan ionic? Sederhana saja, untuk bisa membuat aplikasi Android yang perlu kita kenal adalah:

1. CSS dan HTML

2. Javascript

that's it.

Yak, mari kita mulai proses instalasi ionic. Ada beberapa dependency yang harus tersedia sebelum kita bisa membuat aplikasi dengan ionic:

1. Node.js

2. Cordova

3. CLI Ionic

4. SDK Android

Jika semua dependency sudah siap, melalui terminal kita tinggal jalankan:

$ npm install -g cordova ionic

Kemudian untuk memulai project baru:

$ ionic start namaProject blank //blank bisa diganti dengan tabs atau sidemenu. .



Untuk menjalankan:

$ cd namaProject

$ ionic platform add android

$ ionic build android

untuk menjalankan dari browser:

$ ionic serve

Sedang untuk testing apk bisa ditemukan di:

namaProject/platforms/android/ant-build

Setelah sukses instalasi ionic mari kita mulai membuat aplikasi pertama kita dengan ionic. Untuk aplikasi pertama kita, mari kita buat yang sederhana saja. Artinya yang hanya memerlukan data local saja, tidak perlu yang grabbing data dari server.
Ionic sendiri menyediakan banyak komponen siap pakai, yang saya tidak perlu jelaskan satu persatu disini, bisa dilihat di official website untuk mencoba setiap komponen satu per satu.

Oke, untuk aplikasi pertama kita, mari kita buat flashcard sederhana. Jadi konsepnya seperti ini:

1. User mengakses aplikasi

2. Muncul pilihan jenis flashcard

3. Muncul image dengan nama image dibawahnya

Flashcard ini nantinya bisa kita kembangkan menjadi games tebak-tebakan. Tapi kita pikir belakangan aja, mari kita buat dulu flashcardnya.

1. Akses folder www/js

2. Buat 3 file:

- app.js

- controller.js

- service.js

Pertama kita buat controller terlebih dahulu pada controller.js. Kita akan buat 3 buah controller:

1. home

angular.module('lellyApp.controller',[]).controller('HomeController',['$scope','$state','$ionicPopup','$ionicModal',function($scope,$state,$ionicPopup,$ionicModal){
    
    
    $scope.loadData=function(vars){
        if(vars == 'hewan'){
            $state.go('hewan');
        }
        if(vars == 'buah'){
            $state.go('buah'); /*$state.go untuk menuju state 'buah'*/
        }
        if(vars == 'keluar'){
            $ionicPopup.confirm({
            title: 'System warning',
            template: 'Anda yakin akan Keluar?'
          }).then(function(res){
            if( res ){
              navigator.app.exitApp(); /*Untuk keluar dari aplikasi*/
            }
          })
            
        }
    }

}])

2. hewan

.controller('HewanController',['$scope','$state','$ionicPopup','$ionicModal','$ionicSlideBoxDelegate',function($scope,$state,$ionicPopup,$ionicModal,$ionicSlideBoxDelegate){
 $scope.slideimg=[{'pic':'ayam.jpg','nama':'Ayam'},{'pic':'bebek.jpg','nama':'Bebek'},{'pic':'gajah.jpg','nama':'Gajah'},{'pic':'harimau.jpg','nama':'Harimau'},{'pic':'jerapah.jpg','nama':'Jerapah'},{'pic':'kelinci.jpg','nama':'Kelinci'},{'pic':'koala.jpg','nama':'Koala'},{'pic':'lumba.jpg','nama':'Lumba-Lumba'},{'pic':'singa.jpg','nama':'Singa'}];  /*membuat object slideImg*/
 
 $scope.dir='hewan';
     $scope.nextSlide = function() { /*Aksi jika slide di klik*/
     $ionicSlideBoxDelegate.next(); 
   }
     $scope.loadData=function(vars){
        
        if(vars == 'back'){
            $state.go('home');
        }
        if(vars == 'keluar'){
            $ionicPopup.confirm({
            title: 'System warning',
            template: 'Anda yakin akan Keluar?'
          }).then(function(res){
            if( res ){
              wnavigator.app.exitApp();
            }
          })
            
        }
    }

}])

3. buah

.controller('BuahController',['$scope','$state','$ionicPopup','$ionicModal','$ionicSlideBoxDelegate',function($scope,$state,$ionicPopup,$ionicModal,$ionicSlideBoxDelegate){
 $scope.slideimg=[{'pic':'alpukat.jpg','nama':'Alpukat'},{'pic':'apel.jpg','nama':'Apel'},{'pic':'jeruk.jpg','nama':'Jeruk'},{'pic':'lemon.jpg','nama':'Lemon'},{'pic':'naga.jpg','nama':'Buah Naga'},{'pic':'pisang.jpg','nama':'Pisang'},{'pic':'sawo.jpg','nama':'Sawo'},{'pic':'straw.jpg','nama':'Strawberry'}];
 $scope.dir='buah';
 
     $scope.nextSlide = function() {
     $ionicSlideBoxDelegate.next();
   }
     $scope.loadData=function(vars){
        
        if(vars == 'back'){
            $state.go('home');
        }
        if(vars == 'keluar'){
            $ionicPopup.confirm({
            title: 'System warning',
            template: 'Anda yakin akan Keluar?'
          }).then(function(res){
            if( res ){
              wnavigator.app.exitApp();
            }
          })
            
        }
    }

}])

Selanjutnya, kita buat template:

1. index.html

<!--
created by lelly
lelly@morebit.co
-->
<!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>
   
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/service.js"></script>
    <script src="js/controller.js"></script>
  </head>
  <body ng-app="lellyApp">

    <ion-nav-view animation="slide-left-right"></ion-nav-view>
  </body>
</html>

2. home.html

<!--
created by lelly
lelly@morebit.co
-->
<div class="bar bar-header bar-energized">
  <h1 class="title">Flashcard Anak</h1>
</div>
<ion-content>
<div class="main-content">
<div class="row">
  <div class="col" ng-click="loadData('hewan')"> <!-- Jika di click akan memanggil fungsi loadData dengan parameter 'hewan'-->
 <p><img class="img-menu" src="img/hewan.jpg"></p>
 <p>Hewan</p></div>
  <div class="col" ng-click="loadData('buah')">
 <p><img class="img-menu" src="img/fruit.png"></p>
 <p>Buah</p></div>
  
</div>
<div class="row">
  <div class="col" ng-click="loadData('keluar')">
 <p><img class="img-menu" src="img/keluar.jpg"></p>
 <p>Keluar</p></div>
</div>
<img class="img-background" src="img/background.jpg">
        
</div>

</ion-content>

3. hewan.html → digunakan baik untuk hewan ataupun buah

<!--
created by lelly
lelly@morebit.co
-->
<div class="bar bar-header bar-energized">
  <h1 class="title">Flashcard Anak</h1>
</div>

<ion-content>
<div class="main-content">
<ion-slide-box does-continue="true" show-pager="false">
<ion-slide ng-click="nextSlide()" ng-repeat="hewan in slideimg" > <!-- perulangan object slideimg-->
 <h1>{{hewan.nama}}</h1>    <!-- menampilkan index nama-->
 <p><img src="img/{{dir}}/{{hewan.pic}}" ></p> <!-- menampilkan index pic -->
   
</ion-slide>

  
</ion-slide-box>
<button class="button button-block button-royal" ng-click="loadData('back')">
  Kembali
</button>
<img class="img-background" src="img/background.jpg">
        
</div>

</ion-content>

Selanjutnya kita definisikan state pada service.js:

Terakhir, kita definisikan pada app.js

Setelah selesai, hasil bila dijalankan sebagai berikut:





Sekian tutorial dari saya, semoga bermanfaat. Script dapat di download DI SINI. Read More