Promia Jepang | Yeoman, workflow untuk pembuatan aplikasi web modern
325
post-template-default,single,single-post,postid-325,single-format-standard,ajax_fade,page_not_loaded,,qode-title-hidden,qode_grid_1300,footer_responsive_adv,qode-content-sidebar-responsive,qode-theme-ver-10.1,wpb-js-composer js-comp-ver-5.0.1,vc_responsive

Yeoman, workflow untuk pembuatan aplikasi web modern

Ditulis oleh Alfian Busyro *)

Internet dan aplikasi web telah berkembang pesat akhir-akhir ini dengan hadirnya headless web framework seperti node.js, grunt, dll. Dan juga MVC framework untuk front-end seperti backbone, angular, dll. Dengan framework-framework diatas pembuatan aplikasi web menjadi semakin rapi dan semakin user-friendly.

Tetapi ada satu yg masih tidak berubah. Apa itu?  yaitu struktur aplikasi web yang terkadang bisa membingungkan developer web itu sendiri dan deployment aplikasi web yang terkadang menguras banyak waktu. Bagi aplikasi web yang berskala kecil, hal ini mungkin tidak menjadi masalah yang besar. Namun apabila skala aplikasi web kita semakin besar, struktur penyusunan file, direktori dan library bakal menjadi kendala. Dan apabila kita bekerja dalam team tentunya ini akan menjadi masalah yang besar disaat kita berkolaborasi dengan developer lain. Tentunya banyak developer bertanya, apa solusi yang jelas untuk masalah ini ? Beruntunglah bagi para developer aplikasi web saat ini, karena dengan ada yeoman yang akan menjadi pereda sakit kepala kita.

Apa itu yeoman?

Yeoman adalah orang tua di bawah ini yang hidup di dalam komputer, yang siap melayani setiap kebutuhan pengembangan aplikasi web kita.

yeoman logo

Yeoman dibuat oleh para engineer di Google, dengan motto modern workflows for modern webapps. Yeoman juga membawa teman bernama Grunt dan Bower. Dua tools ini akan otomatis ter-install dengan meng-install yeoman. Sekedar info bagi yang belum pernah menggunakan grunt dan bower, grunt adalah task runner berbasis javascript, yang dapat digunakan sebagai cron untuk front-end development. Dan bower adalah package manager untuk front-end, yang dapat digunakan untuk menginstall, mengatur secara otomatis framework dan library yang akan  digunakan di aplikasi web.

Instalasi yeoman

Untuk memasukkan yeoman ke komputer kita, kita membutuhkan Node.js, karena yeoman berjalan di  npm (Node Package Manager). Pastikan Git juga telah terinstall. Jika ingin menggunakan Saas untuk css pastikan juga Ruby dan Compass telah terinstall.

Jika persiapan telah mencukupi. Kita cukup jalankan perintah dibawah ini:

$ npm install -g yo

dengan ini Grunt dan Bower akan ter-install secara otomatis.


Oke, terus bagaimana kita bisa menggunakan bapak tua ini ? Untuk pertanyaan tersebut, mari kita buat aplikasi web sederhana dengan yeoman.

Membuat aplikasi buku tamu

Framework dan library yang akan digunakan:

  • Backbone (MVC Framework untuk front-end)
  • Ejs (template engine)

untuk ini kita membutuhkan generator untuk backbone.

$ npm install -g generator-backbone

Selanjutnya, kita jalankan perintah dibawah untuk men-generate file dan direktori, serta menstruktur web aplikasi kita.

$ yo backbone

Si bapak akan bertanya seperti dibawah

bashBerbahagialah, karena HTML5 Boilerplate, jquery dan modernizr akan otomatis dimasukkan. Biarkan default setting ini dan tekan enter untuk menyelesaikannya . Karena kita akan menggunakan Twitter bootstrap for Sass pastikan Ruby dan Compass telah ter-install.

Dengan ini kita mendapatkan file dan direktori seperti dibawah ini:


├── Gruntfile.js
├── app
│   ├── 404.html
│   ├── bower_components
│   ├── favicon.ico
│   ├── images
│   ├── index.html
│   ├── robots.txt
│   ├── scripts
│   └── styles
├── bower.json
├── node_modules
├── npm-debug.log
├── package.json
└── test

Yang perlu diingat, file-file untuk aplikasi web kita berada dibawah direktori app, Gruntfile.js adalah configurasi grunt untuk aplikasi kita. Halaman muka berada di index.html (file strruktur berdasar backbone framework).

Dengan ini bagan aplikasi kita sudah jadi, coba jalankan:

$ grunt server

catatan: Jika menemukan error Npm module “grunt-contrib-imagemin” not found, Is it installed? Ctrl + c (untuk memberhentikan task), dan jalankan perintah dibawah

$ npm install grunt-contrib-imagemin

Setelah itu jalankan kembali perintah grunt server.

Yeoman akan membuka halaman baru di browser dengan alamat url http://localhost:9000/ . Dan wow! sampai ini kita telah membuat web aplikasi tanpa perlu coding sama sekali.

Jika kita lihat isi app/index.html, hampir semua yang kita butuhkan telah tersedia di sana. dan dibawah <!– build:js scripts/vendor.js –> adalah library yang otomatis ter-include dalam aplikasi kita, jadi tidak perlu memasukkan kembali.


<script>
<script>
<script>

kembali ke pembuatan aplikasi. Kali ini kita akan membuat aplikasi guestbook sederhana dengan menggunakan backbone. Untuk source lengkapnya bisa di ambil di repository saya di sini.

Mari kita list apa saja yang bisa kita mainkan di aplikasi guestbook ini.

  1. User dapat mendaftar nama  dan komentar mereka yang terstruktur.
  2. Komentar yang telah dimasukkan akan ditampilkan secara langsung di dalam tabel dibawah input form.
  3. Komentar dapat di edit dengan dengan double-click.
  4. Click ke tempat selain input form untuk selesai edit.
  5. Data yang telah dimasukkan akan disimpan di local storage browser.
  6. Tombol ‘hapus’ disetiap komentar, untuk menghapus suatu komentar.

Coba buka ‘app/index.html‘ dengan vim, atau textmate, atau editor lain favorit anda , kemudian edit bagian:

hapus semua elemen html yang ada di dalamnya dan gantikan dengan:

Mari berkenalan dengan Yeoman dan Backbone


Backbone – Model, View, Collection

Karena kita menggunakan Backbone untuk framework kita, maka kita memerlukan model, view dan collection untuk aplikasi kita, dengan bagan sebagai berikut: (untuk tutorial dasar backbone bisa dibaca disini)

  1. Setiap data komentar di buku tamu adalah model. Kita nama namakan ‘komentar’.
  2. komentarmodel memiliki 2 field, yaitu: nama dan komentar.
  3. Setiap model memiliki View., kita namakan ini ‘komentar’ view.
  4. Seluruh model akan digabung dalam satu Collection, kita namakan ini ‘guestbook’.
  5. Untuk tampilan keseluruhan perlu satu View, kita namakan ini ‘daftar_komentar’.

Di sini yeoman akan membantu sekali dalam hal  pembuatan model, view, dan collection. Coba jalankan perintah-perintah dibawah:

yeoman_guestbook

dengan ini semua yang kita perlukan telah ter-generate dan tersusun dengan rapi, tanpa kita harus susah payah membuat dan menyusunnya sendiri.

Buka ‘app/scripts/models/komentar.js’, gantikan dengan:


guestbook.Models = guestbook.Models || {};

(function () {
'use strict';

guestbook.Models.KomentarModel = Backbone.Model.extend({
defaults: {
nama: '',
komentar: ''
}
});

})();

Penjelasan: kita deskripsikan field-field yang ada di model kita di sini.

Buka ‘app/scripts/collections/guestbook.js’, gantikan dengan:


(function () {
guestbook.Collections.GuestbookCollection = Backbone.Collection.extend({

localStorage: new Store('guestbook_app'),
initialize: function(){
this.model = guestbook.Models.KomentarModel;
}
});

})();

Penjelasan: kita inisialisasi model dari collection dengan ‘Komentar’ model. Dan membuat local storage baru dengan nama guestbook_app. Kita akan menggunakan adaptar backbone localstorage untuk menyimpan data di local storage browser. Bagaimana kita bisa mendapatkan adapter tersebut ? Di sinilah letak kemudahan bower. Jalankan perintah dibawah untuk mencari adapter dengan menggunakan bower:

backboneLocalStorage

Setelah ditemukan, tinggal menjalankan perintah dibawah untuk meng-install:

$ bower install backbone.localStorage --save

Sekarang coba buka file ‘app/index.html‘, maka secara otomatis backbone.localStorage.js akan ter-include di html kita.



<script>
<script>
<script>
<script>

Buka ‘app/scripts/views/daftar_komentar.js’, gantikan dengan:


guestbook.Views = guestbook.Views || {};

(function () {
'use strict';

guestbook.Views.DaftarKomentarView = Backbone.View.extend({

template: JST<'app/scripts/templates/daftar_komentar.ejs'>,
el: '#guesbookapp',
events: {
'submit': 'daftarKomentar'
},
initialize: function(){
this.render();

this.listenTo(this.collection, 'add', this.tambahKomentar);
this.collection.fetch();
},
render: function(){
this.$el.html(this.template());

return this;
},
daftarKomentar: function (event) {
event.preventDefault();

var nama = this.$('#input_nama').val().trim();
var komentar = this.$('#input_komentar').val().trim();

if (nama && komentar) {
this.collection.create(new guestbook.Models.KomentarModel({
nama: nama,
komentar: komentar
}));

$('#input_nama').val('');
$('#input_komentar').val('');
}
},

tambahKomentar: function (komentar) {
var view = new guestbook.Views.KomentarView({ model: komentar });
this.$('tbody').append(view.render().el);
},

});

})();

Penjelasan: karena kita menggunakan local storage fungsi collection.fetch di sini adalah untuk memasukkan semua data yang ada di local storage ke model. Dan fungsi ‘tambahKomentar‘ akan dipanggil saat collection memasukkan data dari local storage ke model.

Buka ‘app/scripts/templates/daftar_komentar.ejs’, gantikan dengan:


Nama Komentar

Penjelasan: Input form berisi nama dan komentar, karena komentar bisa lebih dari 1 baris, maka di sini kita menggunakan textarea. ‘Komentar’ view akan masuk ke dalam elemen tbody.

Buka ‘app/scripts/views/komentar.js’, gantikan dengan:


guestbook.Views = guestbook.Views || {};

(function () {
'use strict';

guestbook.Views.KomentarView = Backbone.View.extend({

tagName: 'tr',
template: JST<'app/scripts/templates/komentar.ejs'>,
events: {
'dblclick span': 'toggleEdit',
'blur textarea': 'toggleEdit',
'click #hapuskomen': 'hapusKomentar'
},

initialize: function () { this.listenTo(this.model, 'change', this.render); },

render: function () {
var modelToView = this.model.toJSON();
// agar terlihat sebagai baris baru di view
modelToView.komentar = modelToView.komentar.replace(/\n/g, '
');
this.$el.html(this.template(modelToView));

return this;
},

toggleEdit: function () {
var input = this.$('form textarea');
var komentar = input.val().trim();
// kembalikan
ke \n
komentar = komentar.replace(/?>/gi,'\n');

if (!komentar) {
this.model.destroy();
this.remove();
return;
}

this.$el.toggleClass('editing');

if (komentar === this.model.get('komentar')) {
// mode edit
input.val(this.model.get('komentar'));
input.focus();
} else {
// selesai edit
this.model.set('komentar', komentar);
this.model.save();
this.render();
}
},

hapusKomentar: function(events){
this.model.destroy();
this.remove();
}
});

})();

Penjelasan: di fungsi ‘render’ terdapat pengkonversian dari \n ke <br />, dikarenakan data yang tersimpan di model disaat lebih dari 1 baris adalah newline(\n). Fungsi ‘toggleEdit’ akan dipanggil di saat user men-double click komentar, dan disaat user menyelesaikan editing komentar yaitu saat men-click area selain textarea komentar yang ter-edit. Di fungsi ini juga ada pengkonversian kembali dari <br /> ke \n untuk keperluan editing.

Sinkronisasi Model, View, Collection di Backbone: bagi bukan pengguna Backbone, mungkin beberapa method yang tertulis di sini terasa asing. Dengan menggunakan backbone, developer di tuntut untuk berpikir OOP (Object Oriented Programming). Setiap model mempunyai view, dan semua komponen yang ada di dalam view ini hanya mewakili 1 objek model. Dengan memanggil this.model otomatis akan mengambil objek model yang berkaitan. Dan disaat yang sama this.model.save() bakal menyimpan objek ke collection, dan karena tempat penyimpanan collection untuk aplikasi ini adalah local storage, maka otomatis akan tersimpan di local storage browser. Jika tempat penyimpanan collection diganti dengan path API server, maka otomatis backbone akan mengirim HTTP request POST (simpan) atau PUT (update) ke API tersebut. Begitu pula this.model.destroy() akan menghapus model di tempat penyimpanan yang telah disediakan.

Buka ‘app/scripts/templates/komentar.ejs’, gantikan dengan:

<%= nama %>


<%= komentar %>

Penjelasan: karena setiap objek view mempunyai 1 template, maka variable nama, dan komentar disini adalah representasi objek model yang bersangkutan. Untuk menyembunyikan form dan textarea disaat menampilkan komentar,  kita akan gunakan style (scss).

Buka ‘app/scripts/main.js’, gantikan dengan:


window.guestbook = {
Models: {},
Collections: {},
Views: {},
Routers: {},
init: function () {
new this.Views.DaftarKomentarView({
collection: new this.Collections.GuestbookCollection()
});
}
};

$(document).ready(function () {
'use strict';
guestbook.init();
});

Penjelasan: ‘main.js’ adalah file utama yang mengontrol proses di backbone.

Buka ‘app/styles/main.scss’, tambahkan code di bawah ini kebagian akhir file scss:


td form {
display: none;
}

.editing {
span {
display: none;
}

form {
display: inline-block;
}
}

thead {
td{
font-weight: bold;
}
}

Penjelasan: dengan ini textarea akan tersembunyikan saat tampilan awal, dan sebaliknya textarea akan ditampilkan, dan label akan disembunyikan saat editing.

Dengan ini lengkap sudah source code kita untuk aplikasi buku tamu. Karena yeoman secara default memasukkan task ‘watch‘ kedalam konfigurasi grunt kita, jika file -file source code diatas terupdate maka grunt akan mendeploy template dan file scss serta mengecheck ulang semua file javascript dan html kita. Jika selesai, maka tampilan akan seperti dibawah ini:

aplikasi buku tamu

Coba anda refresh ulang browser dengan alamat url http://localhost:9000/. Jika tidak terupdate dengan benar, maka terjadi error di proses grunt. Dan jika itu terjadi, berhentikan proses grunt, dan jalankan kembali dengan perintah ‘grunt server‘.

Saya sudah menyediakan repositori untuk aplikasi ini di github. Tinggal di-clone, dan jalankan perintah:

# Untuk mendownload dan mengupdate semua dependency yang tertulis di package.json
$ npm install

# Untuk mendownload dan mengupdate semua dependency framework dan library yang tertulis di bower.json
$ bower install

Setelah itu jalankan perintah dibawah untuk me-launch aplikasi kita:

$ grunt server

Jika ada pertanyaan atau ingin minta penjelasan lebih lengkap untuk backbone, grunt atau request tutorial-tutorial yang lain, harap mengirim komentar dibawah ini, atau bisa japri ke saya.

*) Direview oleh Alfian Busyro.

*) Penulis adalah seorang  front-end engineer yang bekerja untuk CyberAgent.

Penulis dapat dihubungi melalu e-mail :  arufian703@gmail.com

5 Comments
  • aginanjarm
    Posted at 18:08h, 07 May Reply

    Reblogged this on aginanjarm and commented:
    Yeoman yo .. yo .. 😉

  • Lettie
    Posted at 05:25h, 24 November Reply

    Hi site owner i see you put a lot of work in your blog’s
    content, i know how to make your blogging easier, do you know that you
    can copy any content from any website, make it 100% unique and pass copyscape test?
    For more details , just type in google – rewriter creates an unique article in a minute

  • PKL Journal #1 – first 2 weeks | ※~kh△lifiz△~※
    Posted at 14:49h, 18 March Reply

    […] untuk penginstallan yeoman karena waktu itu memang lumayan rumit untuk saya sendiri, jadi saya sertakan link dimana anda bisa mengikuti langkah-langkah instalasi yeoman. […]

  • Ucup Timposu
    Posted at 08:42h, 25 September Reply

    Menarik sekali yeoman ini.. Thanks tutornya bank

  • Oman
    Posted at 14:13h, 31 January Reply

    Gan… ada ga contoh aplikasi backbone dengan menggunakan requireJS dn LayoutManager.. atau buat tutorial lah gan.. ?

Post A Comment