Pusat Ilmu Secara Detil

Membuat Android Gallery pada Ionic Framework

Membuat Android Gallery pada Ionic Framework

Pada tutorial android dengan menggunakan ionic framework kali ini kita akan mempelajari tata cara pembuatan image gallery ionic.

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 blank

Create 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 blank
Pada sisi command prompt akan terlihat seperti Gambar.2 dibawah ini :
(Gambar.2)

Command 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 :
(Gambar.3)


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>
Anda juga dapat membuat pola lain, misalnya ingin ditempati image sebanyak 5 buah dalam satu baris. Sehingga yang perlu ditambahkan adalah columnya (perhatikan ukuran columnya).

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 serve

Pada command prompt terlihat seperti Gambar.4 dibawah ini :
(Gambar.4)

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 android
Tunggu sampai proses konfigurasi selesai, sehingga kita akan menemukan folder tambahan yang bernama platform dimana di dalam folder platform terdapat folder android.

Untuk menjadikannya menjadi apk, ketik command berikut pada command prompt :
ionic build android

Disisi command prompt, anda dapat melihat proses pembuatan apk seperti yang ditunjukkan oleh Gambar.5 dibawah ini :
(Gambar.5)

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.

Share this:

You Might Also Like:

Disqus Comments