Saya berharap tidak ada yang terkecoh dengan gambar ember yang saya tampilkan pada postingan ini. Ember JS dengan ember yang biasa kita temui di pasar, tepatnya di bagian pedagang alat-alat rumah tangga, adalah dua hal yang sama sekali berbeda. Nah, ember JS yang saya maksud di sini adalah sebuah framework javascript yang bisa digunakan untuk membangun aplikasi web. Kalau Anda pernah mengenal AngularJS dan ExtJS, maka Ember JS memiliki maksud dan tujuan yang tidak jauh beda dengan keduanya. Oiya, satu lagi. Framework yang satu ini gratis dan bersifat open source.

Ada beberapa langkah dalam menggunakan framework EmberJS. Mulai dari menginstal, memodifikasi, menguji, menyambungkan ke database, memanipulasi data, interaksi pengguna akan kita bahas di sini, insyaAllah. Tapi, postingan kali ini akan berbicara tentang permulaan menggunakan Ember JS.

Instalasi Ember.js

Menggunakan Ember.js itu gampang-gampang susah. Gampang buat yang sudah bisa, dan susah buat yang belum bisa. Hehe… Enaknya, project yang kita buat dengan Ember.js dibuat dan dikelola dengan bantuan perangkat (tool) terminal (semacam command line) bernama ember-cli. Dengan tool ini kita bisa melakukan berbagai hal, seperti:

  • mengelola aset, seperti css, images, library, dsb
  • membuat file-file komponen, router, dsb menggunakan fitur generator-nya
  • menguji aplikasi buatan kita
  • mengakses add-on yang bisa digunakan untuk Ember.js di Ember Addons.
  • dan lain-lain.

Untuk menginstal Ember.js, yang kita perlukan adalah Node Package Manager aka npm. Npm ini otomatis terinstal jika kita menginstal Node.js. Syarat minimal versinya adalah Node.js 0.12 atau yang lebih tinggi dan npm 2.7 atau yang lebih tinggi. Silakan cek dengan perintah berikut:

npm --version

npm version

Nah, sebelum memulai, pastikan juga bahwa terminal di komputer Anda sudah mendukung perintah git. Kalau belum, silakan instal terlebih dahulu. Kemudian, pastikan bahwa di komputer Anda sudah terinstal bower. Kalau belum, Anda bisa memanfaatkan npm untuk menginstalnya.

node bower install

Selanjutnya, sekarang kita instal Ember.js-nya. Yang diinstal adalah tool ember-cli.

npm install -g ember-cli

Setelah itu, menggunakan tool ember-cli yang barusan kita instal, ketikkan perintah ini untuk membuat aplikasi Ember baru:

ember new nama_folder_aplikasi

Setelah rampung, coba kita tes dengan menjalankan web server dari ember.js ini.

cd nama_folder_aplikasi
ember server

ember server

Kemudian kita coba arahkan browser pada alamat http://localhost:4200.

welcome to ember js

Nah, Anda telah berhasil menginstal Ember.js!

Modifikasi Aplikasi

Untuk memodifikasi, hal pertama yang perlu Anda pelajari terlebih dahulu adalah struktur file aplikasinya. Kira-kira, beginilah susunan file dalam proyek aplikasi kita.

struktur

Untuk memodifikasi apa yang tampil, silakan buka dan edit file app\templates\application.hbs. File berekstensi hbs adalah file handlebars, semacam file html tetapi di dalamnya bisa disisipkan variabel-variabel yang penulisannya diletakkan pada sepasang kurung kurawal buka dan tutup. Penasaran apa itu handlebars, silakan cek di http://handlebarsjs.com.

Selanjutnya, kita akan memodifikasi dengan beberapa hal, yaitu router.

Buka app\router.js dan modifikasi di bagian ini:

Router.map(function() {
 this.resource('todos', { path: '/' });
});

Bersambung…

Advertisements