Meteor Java Script Frame Work

Jika satu teknologi mulai populer dan diterima maka akan bermunculan berbagai tool yang mengiringinya.Tidak dapat disangkal node.js memang sedang niak daun, dan meteor yang dibuat dengan node.js adalah sebuah java script framework untuk memudahkan programmer membuat aplikasi yang andal, baik aplikasi web ataupun mobile.

Sekilas Meteor

Belakangan ini java script mengalami pergeseran fungsi, dari umumnya dikenalkan sebagi script yang digunakanuntuk keperluan pada sisi client / user menjadi script yang digunakan pada sisi server. Jika tren ini berlanjut akan banyak melahirkan berbagai web framework dengan javascript sebagai bahasa utamanya, dan ini telah dimulai oleh meteor.

Meteor ( www.meteor.com ) diperkenalkan pertama kali pada tahun 2011 dengan nama skybreak. Meteor dibuat dengan node.js. Pada sisi server, meteor terintegrasi dengan mongodb. Sementara pada sisi client, meteor menggunakan jquery.

Instalasi Awal

Meteor mendukung cross – platform sehingga dapat di- install pada berbagai sistem operasi. Artikel ini membatasi pembahasan pada sistem operasi windows. Untuk instalasi di windows, cukup download dan jalankan file installer meteor ( install meteor.exe ) di https://install.meteor.com/windows. File ini berukuran sekitar 1.16 mb dan jika dijalankan akan melakukan instalasi meteor. Anda juga diminta untuk melakukan registrasi sebagai developer meteor seperti pada Gambar 1. Account ini anda butuhkan saat ingindeploy aplikasi.

Membuat Aplikasi Baru

Setelah melakukan instalsi meteor, selanjutnya untuk mulai membuat aplikasi baru sangatlah mudah. Buka jendela tun dengan klik kombinasi tombol windows + r, ketik “ emd “ ( tanpa tanda kutip) masuk ke dalam command prompt, lalu ketik perintah :

Meteor create myapp

Cd myapp

Meteor

 

Selanjutnya buka browser dan ketik alamat http://localhost:3000 kemudian akan terlihat aplikasi web pertama anda seperti Gambar 2. Aplikasi ini menmapilkan counter yang terus bertambah jika anda klik tombol “ click me “. Berbeda dengan program “hello world” yang umumnya hanya menampilkan teks, aplikasi defaulut ini menunjukkan ciri khas aplikasi website modern bagaimana tampilan berubah secara real – time tanpa perlu website melakukan reload. Untuk menghentikan local server yang berjalan pada jendela command prompt, anda dapat menekan ctrl + c dua kali.

Text Editor

Lihat ke dalam folder myapp ( atau folder apa pun tempat anda menentukan lokasi aplikasi meteor dengan perintah sebelumnya ), dan akan terlihat file – file berikut.

Myapp.css

Myapp.html

Myapp.js

 

Selian itu, terdapat juga folder. Meteor berisi database, plugin, dan berbagai module yang anda perlukan. Bagi anda yang telah akrab dengan html / javascript / css mungkin tidak mengalami kesulitan dalam memahami aplikasi web sederhana ini. Untuk melakukan pengkodean, anda dapat menggunakan text editor yang banyak tersedia di internet seperti eclipse, atom, webstrom dan lin sebagainya. Dalam artikel ini digunakan sublime text 3 ( www.sublimetext.com/3 ).

Anda dapat mencoba mengedit myapp.html dengan text editor, menambahkan beberapa teks seperti “ hello world” lalu menyimpan perubahan yang anda lakukan. Secara otomatis meteor akan melakukan reload http://localhost:3000 sehingga perubahan yang anda lakukan terlihat pada browser.

Aplikasi Sederhana

Tanpa panjang lebar lagi, mari mulai membuat aplikasi sederhana. Buka myapp.html dan hapus seluruh kode di dalamnya karena akan dimulai dari awal aplikasi yang dibuat ini berhubungan dengan database, yaitu menampilkan nama dan nilai mahasiswa. Ketikkan kode berikut pada myapp.html

<head>

           <title> Data Mahasiswa </title>

</head>

 

<body>

           { { > mhs } }

</body>

 

<template name =”mhs” >

           <h1>Mahasiswa</h1>

           <ul>

            { { #each mhs } }

                       <li class = item-mhs > {{nama }) – { {nilai} } </li>

                        { { / each} }

            </ul>

</template>

 

Kode diatas bermaksud menmpailkan data mahasiswa dari database namun karena belum terdapat data apa pun maka tidak ada yang ditampilkan pada browser. Oleh sebab itu, tahap berikutnya dibahas mengenai databases.

MongoDB

Kebutuhan big data pada aplikasi – aplikasi raksasa melahirkan database nosql, dan salah saatu databasse nossql yang populer adalah mongodb. Databasse nosql ini telah teintegrasi dengan meteor saat anda menciptakan aplikassi tanpa perlu anaadaa melakukan konfigurasi atau instalasi database. Bagi anda ang terbiasa dengan sql yang terdapat pada database relational seperti mysql, mungkin akan memerlukan sedikit adaptasi dalam menangani mongodb, tetapi setidaknya terdapat padanan istilah antara sql dan mongodb yang dapat membantu pemahaman sesbagaiberikut.

Sql MongoDB
Table Collection
Row Document
Column field

Sekarang anda akan membuat sebuah collection dengan nama “mhs”. Buka file myapp.js pada text editor, hapus kode defaulut yang ada lalu gantikan dengan kode berikut.

Mhs = new Meteor .Collection (‘mhs’) ;

 

If (Meteor .isClient ) {

            Template .mhs .helpers ( {

            Mhs : function ( ) {

                        Return Mhs .find ( ) ;

                        }

            } )

}

Menggunakan Console Pada Browser

Fitur console pada browser sangat membantu proses development aplikasi dengan meteor. Pada browser google chrome, fitur ini telah tersedia melalui inspect yang dapat anda akses dengan klik kanan pada browser dan pilih inspect, atau dengan menekan kombinasi tombol ctrl + shift + I, klik pada tab console seperti pada Gambar 3. Pada browser lain seprti mozila firefox, anda dapat menggunakan plugin firebug. Anda dapat memasukkan data melalui console dengan mengetikkan perintah berikut.

Mhs .insert ( {nama: “Joko”. Nilai : 70 }

 

Perintah tersebut akan membuat document baru yang berisi dua field, yaitu “nama” dan “nilai”. Anda yang pernah mempelajari json mungkin tidak asing lagi dengan sintaks ini. perhatikan pada saat perintah tersebut dieksekusi, tampilan pada browser otomatis menampilkan data tersebut secara real – time. Masukkan lai beberapa contoh data dan anda dapat melihat data tersebut langsung tampil pada browser ( Gambar 4 ).

Helper

Bagi anda yang pernah membuat aplikasi web dengan php dan teknologi serupa dan membandingkan kode programnya dengan meteor seperti pembahasan di atas, mungkin akan merasakan bahwa kode dengan meteor terlihat lebih singkat dan mudah. Namun, hal ini baru permulaan, semakin anda mendalami meteor dan mongodb, semakin anda menemukan berbagai keistimewaan lain.

Penting untuk memahami alur dan cara kerja aplikasi sederhana di atas. Karena dari pemahaman tersebut anda dapat mengembangkan aplikasi menjadi lebih luas. File myapp.html pada intinya berisi template yang menampilkan data yang diinginkan, dalam hal ini nama dan nilai mahasiswa. Anda dapat melihat perintah pengulangan #each yang berfungsi untuk melakukan perulangan sebanyak jumlah document.

Lalu perhatikan lagi file myapp.js yangmerupakan “ otak “ dari aplikasi ini. terutama pada bagian template.mhs.belpers. Helper berisi function javascript ( bisa lebih dari satu function ) yang melekat pada template, function ini mengembalikan nilai yang akan ditampilkan pada template. Pada contoh di atas terdapat function mhs yang mengambil document pada databases melalui perintah mhs.find ( ).

Mari kita kembangkan aplikasi ini dengan menambahkan jumlah mahasiswa yang ditampilkan. Mula – mula anda harus mengedit template pada myapp.html menjadi :

<head>

            <title> Data Mahasiswa </title>

</head>

 

<body>

            { { > mhs } }

</body>

 

<template name =”mhs”>

            <h1>Mahasiswa </h1>

<ul>

                        { { #each mhs }}

                                    <li class=item-mhs>{{nama}} – {{nilai}} </li>

                        {{#each}}

</ul>

Jumlah mahasiswa : {{total }}

</template>

 

Penambahannya terdapat pada baris :

Jumlah mahasiswa : {{total }}

 

Nilai {{total }} adalah jumlah data yang ditampilkan. Anda harus mendefinisikannya pada myapp.js seperti di bawah ini.

Mhs = new Meteor . Collection (‘mhs’) ;

 

If ( Meteor .isClient ) {

            Template .mhs . helpers ( {

                        Mhs : function ( ) {

                                    Return Mhs .find ( ) ;

                        } ,

                        Total :function ( ) {

                                    Return Mhs . find ( ) .count ( ) ;

                        }

            } )

}

 

Terdapat penambahan sebuah function, total : function ( ) yang akan mengembalikan nilai yang didapati dari perintah Mhs .find ( ) . count ( ). Perintah ini sendiri akan mengembalikan jumlah document yang terdapat pada collection. Tampilan pada browser seperti modifikasi ini terlihat pada Gambar 5.

Event

Interaksi aplikasi web modern semakin canggih, tidak hanya mengandalkan event sederhana seperti klik tombol atau submint form, namun juga berbagai event seperti klik elemen tertentu, atau mendeteksi perubahan nilai pada input text. Pada meteor, anda dapat menciptakan event tersebut dengan kode javascript pada contoh ini akan dibuat saat visitor meng – klik dapat mahasiswa maka sebuah pesan akan ditampilkan pada console. Untuk itu buka kembali file myapp.js dan tambahkan beberapa baris kode sehingga selengkapnya menjadi seperti berikut.

Mhs = new Meteor . Collection (‘mhs’) ;

 

If ( Meteor .isClient ) {

            Template .mhs . helpers ( {

                        Mhs : function ( ) {

                                    Return Mhs .find ( ) ;

                        } ,

                        Total :function ( ) {

                                    Return Mhs . find ( ) .count ( ) ;

                        }

            } )

 

            Template .mhs .events ( {

                        ‘click .item-mhs’ : function ( ) {

                        Console .log (“Anda telah melakukan event click sebuah item. “) ;

                        }

            } )

}

 

Perhatikan baris kode di atas terutama pada bagian template .mhs.events. Kode click.item-mhs : function ( ) merupakan sebuah function yang akan dijalankan jika event click terjadi pada class item-mhs, dan akan menampilkan pesan pada console. Tampilan terlihat seperti pada Gambar 6.

Meteor Di Masa Depan

Setelah memahami kulit luar meteor pada artikel ini, anda telah memiliki bekal yang cukup untuk mengeksplorasi meteor lebih mendalam. Namun, mungkin muncul keraguan apakah meteor dapat tetap bertahan digunakan di masa depan, saat begitu banyak web framework lainnya yang ada saat ini dan di masa mendatang? Sementara itu mempelajari seluruh web framework adalah pekerjaan yang mustahil dan tidak ada habisnya.

Menjawab keraguan ini, pahami meteor sebagai salah satu tool dari sekian banyak tool yang berfungsi sama. Pada kasus ini intinya adalah memahami penggunaan javascript dari sisi server / client serta database nosql. Setelah miliki jam terbang tinggi, tool mana pun yang berbasis hal tersebut akan mudah dipelajari.

Sumber : PCMedia 

Share Is Cool

Leave a Reply

Your email address will not be published. Required fields are marked *