Memulai Dengan Ionic: Komponen JavaScript

Indonesian (Bahasa Indonesia) translation by Andy Nur (you can also view the original English article)

Final product image — What You'll Be Creating

Dalam tutorial ini, kita akan membuat aplikasi ionic pertama bersama dan mempelajari dasar-dasar komponen JavaScript Ionic. Komponen ini memberikan akses mudah ke fitur pada aplikasimu, seperti navigasi dan bar navigasi, scroll tak terbatas, dan daftar. Jika kamu belum menyiapkan Ionic atau perlu me-refresh cara menggunakan CLI Ionic, ksmu dapat meninjau tutorial pertama dari seri ini.

Apa itu Komponen?

Komponen istilah yang agak disalahgunakan dalam pengembangan frontend karena banyak framework yang memiliki gagasan mereka sendiri yang menggambarkan suatu komponen. Sebenarnya, Komponen Web sebagai standar HTML resmi dapat memperumit konsepnya menjadi lebih jauh, jadi mari kita jelaskan apa iru komponen dalam Ionic.

Dalam pengertian umum, komponen adalah sebuah implementasi dari serangkaian fitur yang dirumuskan oleh beberapa bentuk kebiasan coding. Dengan kata lain, kamu dapat berpikir komponen sebagai cara untuk mengisolasi fitur tertentu dari seluruh aplikasi. Kamu dapat berpikir tentang bagaimana HTML mpeemiliki berbagai tipe form inputan dan masing-masing adalah tipe komponen yang memiliki fitur tertentu.

Dalam Ionic, ada dua jenis komponen, CSS dan JavaScript. CSS komponen diimplementasikan sebagai satu set kelas CSS yang memodifikasi sebuah elemen untuk memberikan tampilan yang spesifik, seperti bar header.

Komponen JavaScript secara teknis diimplementasikan sebagai direktif Angular dan mereka digunakan sebagai elemen HTML dalam aplikasi. Mereka menyediakan seperangkat fitur yang lebih kaya. Ini biasanya mencakup kemampuan bagi pengguna untuk berinteraksi dengan itu atau aplikasi untuk mengelola komponen. Tab, misalnya, memungkinkan konten yang akan ditampilkan atau disembunyikan didasarkan pada saat pengguna memilih tab.

Dalam tutorial ini kita akan fokus pada beberapa komponen JavaScript. Kemudian dalam seri ini, kami lihat lebih dekat pada komponen CSS.

Kadang-kadang, Ionic mengimplementasikan komponen sebagai keduanya, baik komponen CSS dan JavaScript, seperti komponen tab. Ini berarti kamu perlu memutuskan mana yang akan digunakan. Saya biasanya merekomendasikan untuk memilih implementasi JavaScript. Dalam kebanyakan kasus, berlebihan menggunakan komponen JavaScript itu tidak berarti dan saya percaya mereka membuat kodemu lebih mudah untuk bekerja dengannya.

File Sumber

Pada tutorial ini, kita akan menciptakan sebuah aplikasi dari awal dan kita akan terus meningkatkan aplikasinya dalam sisa seri ini. Dasar pikiran dari aplikasi ini adalah untuk menciptakan sebuah aplikasi informasi kewarganegaraan yang menyediakan pengguna dengan informasi tentang fasilitas lokal mereka, seperti taman dan perpustakaan.

Pada tutorial ini, kita mulai dengan membuat sebuah aplikasi yang menampilkan daftar taman di Chicago dan menggunakan scroll tak terbatas untuk tetap memuat hasil selama mereka tersedia. Kita akan memperluas kumpulan fitur aplikasi pada tutorial selanjutnya.

Saya telah menciptakan sebuah API yang menyediakan informasi yang dibutuhkan aplikasi. API didasarkan pada API Google Maps. Kamu dapat menjalankan API sendiri, tetapi mengharuskan mendapatkan kunci API khusus dari Google dan petunjuk dapat ditemukan pada proyek API. Jika ada masalah saat menggunakan API yang disediakan, seperti seseorang yang menyalahgunakan API dan melebihi batas penggunaan API, menjalankan versimu sendiri akan membantu.

Kamu dapat melihat pratinjau aplikasi yang berjalan pada Heroku dan melihat proyek yang telah selesai di GitHub. Namun, saya mendorongmu untuk mengikuti dan membuat aplikasi dengan saya.

1. Menyiapkan Proyek

Pertama, kamu perlu memulai sebuah proyek baru. Kita bisa melakukan ini dengan menjalankan perintah berikut:

1	ionic start civinfo https://github.com/ionic-in-action/starter

Ini mengunduh bundel permulaan yang mencakup template Ionic yang kosong untuk kita dapat memulai (dibuat untuk digunakan dengan buku saya Ionic in Action). Masuk ke direktorinya, cd civinfo, dan jalankan ionic serve.

Kamu sekarang dapat melihat pemuatan aplikasi yang kosong di http://localhost:8100 (atau pada port yang ditetapkan oleh Ionic). Saya sarankan membuka developer tools browser-mu untuk mengkonfirmasi bahwa kamu melihat layar kosong. Ya, itu seharusnya layar putih. Saya juga menyarankan menggunakan Chrome’s Device Emulation saat melihat pratinjau aplikasimu.

2. Pengaturan Komponen Navigasi Dasar

Navigasi sangat penting bahwa kita harus memulai di sini dengan merancang aplikasi kita. Komponen navigasi utama adalah ionNavBar dan ionNavView. Mayoritas aplikasi memiliki fitur desain dimana ada panel navigasi dengan berbagai judul dan tombol aksi, dan kemudian area lainnya dikhususkan ke konten untuk tampilan saat ini.

Komponen ionNavBar dan ionNavView menyediakan fungsionalitas itu dengan beberapa kecerdasan bawaan untuk membantu kita. Aplikasi kita akan memiliki beberapa route pada akhirnya, tetapi kita hanya membuat satu di tutorial ini.

Ionic menggunakan UI Router di bawah tenda untuk mengatur navigasi dan routing. Jika kamu sudah familiar dengannya, maka kamu perlu mengenali implementasinya dalam Ionic. Ada banyak nuansa, tetapi tetap kita tetap menjadikannya sederhana di tutorial ini. Penggunaan yang paling umum dan sederhana adalah menentukan masing-masing dari berbagai halaman aplikasimu sebagai sebuah state, yang merupakan cara Ionic/UI Router untuk menentukan tampilan tertentu.

Untuk kita dapat memulai, pertama-tama kita menyertakan dua komponen navigasi ke dalam www/index.html seperti yang kamu lihat di bawah, tempatkan itu di dalam body.

1	<body ng-app="App">
2	<ion-nav-bar class="bar-balanced"></ion-nav-bar>
3	<ion-nav-view></ion-nav-view>
4	</body>

Setelah kamu menambahkan kode untuk index.html, kamu dapat memuat ulang aplikasi dan akan melihat bar hijau yang terlihat di bagian atas aplikasi.

App Showing Just the Navigation Bar Which Is Green

Kamu telah mendefinisikan komponen ionNavBar, yang secara otomatis muncul di bagian atas layar. Kemudian, ketika kita membuat tampilan tersendiri, tampiilannya akan mampu untuk meneruskan judul dan tombol tambahan untuk ditampilkan. Hal ini cukup pintar untuk mengetahui seharusnya seberapa tinggi bar navigasi untuk perangkat yang berbeda. Hal ini tidak konsisten di seluruh platform sehingga hal ini sangat membantu. Bar navigasi diberi kelas bar-balanced untuk memberi warna hijau.

Lalu ada ionNavView, yang merupakan placeholder yang membuat konten untuk masing-masing tampilan. Setelah kita mendefinisikan tampilan, itu akan membuat markup yang dihasilkan di sini dan secara otomatis menyesuaikan untuk mengambil ruang yang tersedia yang tersisa setelah bar navigasi diposisikan.

Komponen navigasi adalah contoh dari komponen JavaScript (juga dikenal sebagai direktif Angular). Mereka tampak seperti tag HTML khusus dan, ketika digunakan bersama-sama, mereka cukup pintar untuk menjaga agar judul bar tetap sinkron dengan tampilan yang aktif dan membuat konten yang benar berdasarkan pilihan navigasi pengguna. Untuk melihat ini beraksi, meskipun, kita perlu menambahkan beberapa state. Mari kita mulai dengan membuat state pertama kita yang menampilkan daftar taman.

3. Menambahkan Tampilan Daftar Taman

Tujuan utama dari aplikasi adalah untuk menampilkan daftar sumber daya terkait sipil. Awalnya, ini akan menjadi daftar taman-taman, tetapi kita akan memperluasnya hingga mencakup jenis sumber daya lain seperti Perpustakaan. Kita ingin menyertakan beberapa fitur ke dalam tampilan ini:

memperbarui bar navigasi dengan judul
memuat daftar taman-taman dari API
menampilkan daftar item dalam format yang bersahabat untuk mobile
memungkinkan lebih banyak item untuk dimuat jika bagian bawahnya dicapai, menggunakan scroll tak terbatas
menampilkan gambar dengan setiap item

Langkah 1: Menyiapkan State Tempat (Place), Controller dan Template

Sekarang kita memiliki beberapa tujuan untuk tampilan ini, mari kita mulai dengan menambahkan file JavaScript kita yang akan mendaftarkan tampilan ini. Buat file baru place.js di www/views/places/ dan tambahkan yang berikut ini:

angular.module('App')
.config(function($stateProvider) {
  $stateProvider.state('places', {
    url: '/places',
    controller: 'PlacesController as vm',
    templateUrl: 'views/places/places.html'
  });
})
.controller('PlacesController', function() {
});

Kita menyatakan sebuah state baru untuk UI Router menggunakan metode $stateProvider.state() . Ini hanya tersedia untuk dikonfigurasi di dalam metode angular.config Angular . Ketika kamu mendeklarasikan state, kamu pertama kali meneruskan sebuah string untuk memberi nama route, dalam hal ini places. Kamu kemudian meneruskan sebuah objek dengan berbagai properti yang mendefinisikan state, seperti URL, controller dan template. Kamu dapat melihat dokumentasi UI Router untuk semua opsi konfigurasi yang memungkinkan.

Kita telah menyatakan sebuah state baru, namanya places, ditugaskan sebuah URL /places, bernama controller menggunakan controller sebagai sintaks, dan daftar templateUrl yang dimuat. Ini adalah definisi negara yang cukup umum dan Anda melihat hal itu digunakan terutama dengan cara yang sama dengan negara-negara lain. Controller mendeklarasikan di sini adalah kosong, tetapi kita akan menambahkannya segera.

Template ini merupakan bagian penting dari tampilan dan menggambarkan aspek-aspek visual pada tampilan itu. Sebagian besar logika tampilan dan tindakan akan dikelola dalam controller dan template. State kita mendeklarasikan bahwa kita ingin memuat file HTML untuk template, tetapi kita belum membuat satu-pun. Mari kita memperbaikinya dengan membuat file places.html baru pada www/views/places/ dan menambahkan kode berikut.

1	<ion-view view-title="Local Parks">
2	<ion-content>
3	</ion-content>
4	</ion-view>

Sejauh ini dalam template ini, kita telah mendeklarasikan komponen ionView dan ionContent. Komponen ionView adalah bungkus yang kamu tempatkan di sekitar template yang ditujukan untuk dimuat ke komponen ionNavView yang kita nyatakan sebelumnya. Atribut view-title juga digunakan untuk meneruskan judul bar navigasi yang seharusnya tampil.

Komponen ionContent adalah pembungkus konten yang berguna, yang membantu memastikan bahwa ruang konten mengukur ke ruang layar yang tersedia, membantu mengelola scroll, dan dapat mengekspos tindakan lain yang kurang umum digunakan. Ketika tampilan ini diambil, kamu akan melihat judul bar navigasi yang muncul sebagai "Local Parks".

Sekarang kita perlu memastikan bahwa aplikasi memuat script untuk mengeksekusi dengan menambahkan places.js ke index.html seperti yang kamu lihat di bawah. Saya merekomendasikan menambahkan ini tepat sebelum tag </head>.

1	<script src="views/places/places.js"></script>

Kamu dapat melihat aplikasinya, tetapi kamu masih tidak melihat tampilan yang muncul. Untuk melihat tampilan, navigasikan ke http://localhost:8100/#/places. URL yang dipetakan dalam state dapat digunakan untuk menavigasi ke route. Itu seharusnya kemudian muncul seperti dalam gambar berikut dengan judul diatur ke "Local Parks".

App Places View Showing Title In Navigation Bar

Ini belum terlalu menarik, tetapi ini merupakan tampilan yang paling mendasar yang mungkin paling sering kamu selesaikan. Sekarang mari kita bekerja pada pemuatan data dan menampilkannya pada layar.

Langkah 2: Pemuatan Data

Sebelum kita bisa melakukan banyak hal lain, kita perlu memuat beberapa data. Untuk melakukan ini, kita perlu menambahkan service Angular untuk membantu kita mengelola geolokasi. Pada tutorial mendatang, lokasi pengguna akan terdeteksi oleh perangkat. Sampai saat itu, kita akan tetapkan secara manual ke Chicago, salah satu kota favorit saya.

Buka www/js/app.js dan tambahkan service berikut pada akhir file. Ini seharusnya terikat dengan metode yang ada dari angular.module.

.factory('Geolocation', function() {
  return {
    "formatted_address": "Chicago, IL, USA",
    "geometry": {
      "location": {
        "lat": 41.8781136,
        "lng": -87.6297982
      }
    },
    "place_id": "ChIJ7cv00DwsDogRAMDACa2m4K8"
  };
})

Ini adalah service Angular yang mengembalikan sebuah objek yang cocok dengan apa yang API Google Maps kembalikan untuk Chicago. Kita sekarang memiliki rincian untuk lokasi sehingga kita dapat memuat tamannya.

Selanjutnya, kita akan memperbarui controller-nya untuk memuat daftar dari API. Untuk kesederhanaan, saya memuat data menggunakan service $http di controller. Praktik terbaik adalah abstrak yang keluar ke layanan. Buka www/views/places/places.js kembali dan perbarui controller seperti ini:

.controller('PlacesController', function($http, Geolocation) {
  var vm = this;
  var base = 'https://civinfo-apis.herokuapp.com/civic/places?type=park&location=' + Geolocation.geometry.location.lat + ',' + Geolocation.geometry.location.lng;
  vm.places = [];
 
  vm.load = function load() {
    $http.get(base).then(function handleResponse(response) {
      vm.places = response.data.results;
    });
  };
 
  vm.load();
});

Controller memiliki metode vm.load() untuk mengeksekusi permintaan HTTP dan menyimpan hasil dalam vm.places. Bila kamu menyimpan ini, kamu akan melihat request HTTP menyala di developer tools browser-mu. Bahkan jika kamu sudah familiar dengan Angulat, kamu mungkin tidak mengenali pendekatan ini tepat untuk menyimpan data pada variabel vm. Saya sarankan meninjau postingan John Papa mengenai mengapa ini adalah pendekatan yang disarankan jika kamu memerlukan beberapa kejelasan.

Untuk menampilkan data, kita perlu memperbarui template juga dan perulangan atas daftar taman untuk menampilkannya. Buka www/views/places/places.html dan perbarui seperti yang ditunjukkan di bawah ini.

<ion-view view-title="Local Parks">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="place in vm.places" class="item-avatar">
        <img ng-src="{{place.icon}}" />
        <h2>{{place.name}}</h2>
        <p>{{place.formatted_address}}</p>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

Pada template, kita menggunakan komponen ionList dan ionItem. Komponen ionList adalah salah satu komponen yang paling berguna karena daftar pilihan desain yang sangat umum di mobile karena layar yang lebih kecil dan biasanya digunakan dalam orientasi potrait. Sama seperti daftar menggunakan ul dan li, ionList membungkus sejumlah elemen ionItem.

Daftar dapat mengadopsi sejumlah tampilan yang berbeda dan dalam contoh ini item daftar menampilkan gambar di sebelah kiri dengan menyatakan class item-avatar pada ionItem. Pendekatan yang sama dapat digunakan pada aplikasi pesan di mana kamu memiliki daftar obrolan dengan avatar setiap orang.

Di dalam ionItem, kamu menampilkan nama dan alamat. Style bawaan akan secara otomatis memotong (menggunakan CSS) teks apapun yang meluber untuk menjaga item pada ketinggian yang sama.

Kita memiliki daftar taman yang dimuat dan ditampilkannya sebagai daftar menggunakan ionList dan ionItem. Kita dapat mengambil satu langkah lebih jauh dan menambahkan scroll tak terbatas untuk memuat hasil tambahan sebagai scroll pengguna di dekat akhir daftar (jika tersedia).

Langkah 3: Menambahkan Gulir Tak Terbatas ke Daftar

Untuk membuat daftar secara otomatis memuat item tambahan berdasarkan scroll pengguna ke bawah, kita dapat menggunakan komponen ionInfiniteScroll. Komponen ini dipasang di akhir daftar, mengamati saat pengguna telah menggulir sampai akhir, dan kemudian memanggil metode yang dapat memuat item tambahan. Ini juga memiliki spinner pemuatan bawaan untuk menunjukkan itu bahwa lebih banyak item yang dimuat. Spinner tersembunyi saat responsnya terselesaikan.

API kita juga seharusnya mendukung beberapa bentuk paginasi agar ini bekerja. Dalam kasus ini, API Google Maps menyediakan sebuah token yang harus diteruskan untuk memuat serangkaian hasil selanjutnya. Kita perlu untuk memperbarui controller untuk mengelola logika ini jadi mari kita mulai dengan memperbarui www/views/places/places.js seperti yang ditunjukkan di bawah ini.

.controller('PlacesController', function($http, $scope, Geolocation) {
  var vm = this;
  var base = 'https://civinfo-apis.herokuapp.com/civic/places?type=park&location=' + Geolocation.geometry.location.lat + ',' + Geolocation.geometry.location.lng;
  var token = '';
  vm.canLoad = true;
  vm.places = [];
 
  vm.load = function load() {
    var url = base;
    if (token) {
      url += '&token=' + token;
    }
 
    $http.get(url).then(function handleResponse(response) {
      vm.places = vm.places.concat(response.data.results);
      token = response.data.next_page_token;
 
      if (!response.data.next_page_token) {
        vm.canLoad = false;
      }
      $scope.$broadcast('scroll.infiniteScrollComplete');
    });
  };
});

Kita telah menambahkan sebuah properti baru, vm.canLoad, yang merupakan boolean yang mengindikasikan jika ada item tambahan untuk dilmuat. Hal ini true secara default. Sampai request dikembalikan, kita tidak tahu jika ada item tambahan yang tersedia.

Metode vm.load() diperbarui untuk menambahkan token jika tersedia. Handler respon sekarang menggabungkan hasilnya ke array. Ini berarti halaman kedua dari hasil ini ditambahkan setelah halaman pertama. API Google Maps akan mengembalikan sebuah next_page_token kapan saja ada lebih banyak hasil yang dapat dimuat. Jika properti itu hilang, kita dapat mengasumsikan tidak ada lagi item yang harus dimuat dan vm.canLoad diset ke false. Komponen scroll tak terbatas menggunakan nilai ini untuk menentukan kapan harus berhenti memuat lebih banyak item.

Perubahan terakhirnya adalah penambahan $scope.$broadcast('scroll.infiniteScrollComplete'). Komponen scroll tak terbatas tidak memiliki informasi mengenai kapan permintaan HTTP telah selsai atau tepatnya saat ini disimpan untuk menonaktifkan simbol loading. Oleh karena itu, komponen mendengarkan event untuk memperbarui sendiri. Dalam kasus ini, event scroll.infiniteScrollComplete memberitahu komponen untuk memberhentikan spinner dan terus mengamati agar pengguna menggulir ke bawah.

Potongan terakhir adalah untuk mengaktifkan ini dalam template. Buka www/views/places/places.html dan tambahkan baris antara akhir komponen ionList dan ionContent.

      </ion-item>
    </ion-list>
    <ion-infinite-scroll on-infinite="vm.load()" ng-if="vm.canLoad"></ion-infinite-scroll>
  </ion-content>
</ion-view>

Komponen scroll tak terbatas sekarang diaktifkan dalam template-mu. Itu mulai diamati ketika komponen terlihat, yang juga dipicu pada saat dimuat karena tidak ada tempat yang terlihat dan komponen scroll tak terbatas yang terlihat. Ini memanggil metode yang dideklarasikan di on-infinite sekali saat itu menjadi terlihat (inilah vm.load()) dan menunggu sampai acara selesai gulir telah dipicu.

ngIf digunakan untuk menonaktifkan scroll terbatas setelah API telah mengembalikan semua hasil. Dalam hal ini, scroll ke bawah tidak lagi memuat beban lebih banyak sumber daya.

Ketika menggunakan scroll tak terbatas, penting untuk menjadikan ngIf dinonaktifkan. Hal ini dapat dengan mudah untuk menerapkan komponen sedemikian rupa bahwa komponen mencoba untuk dimuat dan dimuat dan tidak pernah berhenti.

Ini melengkapi tampilan tempat. Menengok ke belakang, ada cukup banyak fungsi yang diaktifkan oleh 12 baris pada HTML di dalam template dan sekitar 20 baris pada JavaScript di controller.

Ringkasan

Kita telah melihat sejumlah komponen, yang akan sering kamu gunakan dalam aplikasi Ionic.

Komponen Ionic JavaScript yang digunakan sebagai elemen HTML dan dapat bekerja dalam cara yang terkoordinasi.
Ionic memiliki ionNavView dan ionNavBar untuk mendukung koordinasi navigasi dengan tampilan yang berbeda.
Komponen ionList dan ionItem membuatnya mudah untuk membangun daftar yang bersahabat dengan mobile.
Komponen IonInfiniteScroll secara otomatis memicu panggilan untuk memuat item tambahan dan menambahkan mereka ke daftar.

Tutorial selanjutnya akan melihat beberapa service berguna yang Ionic sediakan, seperti indikator loading dan popovers.

Buat Template Ionic dan Menangkan $1000

Jika kamu sudah merasa nyaman dengan framwork Ionic, maka kamu mungkin ingin mempertimbangkan memasuki Kontes Envato yang Paling Dicari untuk Template Ionic. Bagaimana? Buat template template unik Ionic dan kirimkan ke Envato Market pada 27 April 2016.

Lima template terbaik menerima $1000. Tertarik? Baca lebih lanjut di bagian kontes website untuk rincian tentang persyaratan dan panduan kontes.