Membuat Android Gallery pada Ionic Framework
Gallery yang merupakan tempat tersimpannya berbagai macam jenis foto-foto sering kita gunakan apabila ingin menampilkan foto secara berurutan. Pada contoh ini kita akan menyajikan empat gambar untuk tiap baris pada Gallery. Outpunya dapat dilihat pada Gambar.1 dibawah ini :
Gambar.1a merupakan tampilan aplikasi setelah kita install apk-nya, sedangkan Gambar.1b merupkan tampilan disisi browser. Seperti yang kita ketahui, dengan menggunakan ionic framework, kita dapat melakukan hasil tampilan terlebih dahulu sebelum kita create apk-nya.
Langkah-langkah membuat Gallery dengan Ionic
1. Membuat ionic project dengan template blankCreate folder ionicApps pada drive C, bisa juga pada drive lain. Sehingga nantinya project dari aplikasi ionic akan disimpan pada path C:\ionicApps. Setelah itu buka command prompt dan ketikkan command berikut :
ionic start app1 blankCommand diatas menciptkan sebuah project dengan nama app1 dengan template blank. Anda akan melihat beberapa file dan folder yang telah berhasil didownload.
2. Menempatkan image pada folder img
Pada langkah dua ini, kita akan meletakkan sebanyak 24 gambar dengan ukuran 200x120. Dalam kondisi default, hanya terdapat sebuah gambar ionic.png. Untuk itu tambahlah image dengan cara click folder app1->www->img, lalu tambahkan image seperti Gambar.3 dibawah ini :
3. Mengedit file app.js
Langkah ke-3 bertujuan untuk menyimpan gambar dari folder img ke dalam variabel img. Untuk itu editlah file app.js pada folder www/js/app.js sehingga codenya menjadi seperti berikut :
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller("ExampleController", function($scope) {
$scope.images = [];
$scope.loadImages = function() {
dir = "img/";
for(var i = 1; i < 25; i++) {
$scope.images.push({id: i, src: dir + i+".jpg"});
}
}
});4. Mengedit file index.html
Pada langkah ke-4 kita akan memanggil image dan menampilkannya dengan pola dalam satu baris akan dimuati image sebanyak 4 buah. Karena semua image berukuran sama, sehingga tampilan akan menjadi lebih rapi. Untuk itu editlah file index.html pada folder www/index.html sehingga code-nya menjadi seperti berikut:
<!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">
<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 align-title="center" class="bar-assertive">
<img src="img/logo.png" width="20%">
<h1 class="title">Gallery</h1>
</ion-header-bar>
<ion-content ng-controller="ExampleController" ng-init="loadImages()">
<div class="row" ng-repeat="image in images" ng-if="$index % 4 === 0">
<div class="col col-25" ng-if="$index < images.length">
<img ng-src="{{images[$index].src}}" width="100%" />
</div>
<div class="col col-25" ng-if="$index + 1 < images.length">
<img ng-src="{{images[$index + 1].src}}" width="100%" />
</div>
<div class="col col-25" ng-if="$index + 2 < images.length">
<img ng-src="{{images[$index + 2].src}}" width="100%" />
</div>
<div class="col col-25" ng-if="$index + 3 < images.length">
<img ng-src="{{images[$index + 3].src}}" width="100%" />
</div>
</div>
</ion-content>
<ion-footer-bar align-title="center" class="bar-assertive">
<h1 class="title">Pusat Ilmu</h1>
</ion-footer-bar>
</ion-pane>
</body>
</html>5. Menampilkan outputnya
Tahap kelima ini adalah tahap untuk melihat kira-kira seperti apa tampilannya. Sebelum kita mengcreate apk dan menginstallnya pada device smartphone kita, maka lebih baik kita melihat terlebih dahulu tampilannya pada browser.
Untuk melihat ouput dari ionic project yang telah kita buat, ketikkan command berikut pada command prompt atau terminal :
ionic servePada command prompt terlihat seperti Gambar.4 dibawah ini :
Dengan sendirinya akan muncul outputnya seperti pada Gambar.1b diatas. Tentunya dengan mencoba melihat output pada sisi browser akan lebih ringan dibandingkan dengan model pembuatan project android pada android studio yang harus kita emulasikan terlebih dahulu pada emulator virtual.
Jika kita sudah yakin dengan tampilannya dan tidak ada bagian yang dirubah, sekarang kita akan lanjutkan dengan tahap pembuatan apk-nya. Untuk pembuatan apk, pertama-tama ketikkan command :
ionic platform add androidUntuk menjadikannya menjadi apk, ketik command berikut pada command prompt :
ionic build androidDisisi command prompt, anda dapat melihat proses pembuatan apk seperti yang ditunjukkan oleh Gambar.5 dibawah ini :
Anda akan menemukan file apk dengan nama android-debug.apk pada folder app1/platforms/android/build/outputs/apk/android-debug.apk.
Copy file apk tersebut ke smartphone anda melalui kabel data, kemudian install sehingga akan terlihat tampilan seperti Gambar.1a diatas.
