Membangun Aplikasi Web dengan Platform Javascript Fullstack Meteor

Sudah lama tidak menulis blog, rasanya kangen juga ingin menulis sesuatu. Kebetulan disuruh oleh sensei (supervisor PhD) untuk belajar bahasa pemrograman baru untuk web programming, setelah baca-baca prosiding konferensi ACM CHI Conference on Human Factors in Computing Systems 2017, salah satu paper menuliskan tentang pengembangan prototipe aplikasi berbasis web untuk kolaborasi pemrograman web dan platform yang mereka gunakan untuk membangun aplikasi tersebut adalah platform berbasis server side Javascript NodeJS, Meteor. Akhirnya saya tertarik untuk mencoba membangun aplikasi dengan menggunakan Meteor dan sekalian mencoba mendokumentasikan pengembangan aplikasi dengan menulis artikel blog ini, dan siapa tahu bermanfaat untuk teman-teman yang membacanya, terutama yang sedang mencari, ehhhmmmm... bahasa pemrograman baru :D .
Sebelumnya kita mulai ada baiknya kita kenal dulu apa itu Meteor sebenarnya. Seperti saya kutip dari dokumentasi terakhir Meteor, Meteor adalah:

Meteor is a full-stack JavaScript platform for developing modern web and mobile applications... Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it.

Konsep hampir serupa dengan data on the wire sebenarnya juga diterapkan pada beberapa framework Javascript seperti AngularJS dan ReactJS, dimana data dari server tidak dikirim dalam bentuk kode HTML, tetapi dalam bentuk data seperti JSON (JavaScript Object Notation) dan kemudian data dari server diformat ke dalam kode HTML yang diproses oleh library Javascript di sisi klien, membuat beban komunikasi server dan klien menjadi lebih ringan karena hanya berkomunikasi dalam format data ringan seperti JSON. Meteor pada intinya adalah sebuah platform fullstack yang intinya adalah NodeJS, beserta dengan beberapa komponennya, termasuk juga Meteor sudah menyediakan server MongoDB sehingga kita tidak perlu lagi install MongoDB sebagai server terpisah. (sisi negatifnya adalah ukuran download Meteor yang besar dan harus di-download melalui terminal/command line).

Untuk mengembangkan aplikasi web dengan menggunakan Meteor, ada beberapa hal yang sebaiknya kita kuasai terlebih dahulu yaitu: HTML5, CSS, Javascript, jQuery dan MongoDB. Jangan lupa juga menginstall text editor pemrograman favorit masing-masing untuk menuliskan kode-kode Javascript Meteor nanti.

Instalasi

Untuk menggunakan platform Meteor maka kita harus menginstallnya terlebih dahulu dengan menggunakan terminal/console/command prompt/powershell. Pada tulisan ini saya menggunakan aplikasi Terminal pada Operating System (OS) Apple macOS High Sierra dan kemudian menjalankan perintah:

curl https://install.meteor.com/ | sh

Pengguna OS GNU/Linux dengan berbagai distro-nya bisa menjalankan perintah yang sama, pastikan bahwa curl sudah terinstall, apabila belum, install terlebih dahulu dengan menggunakan package manager distro masing-masing.

Bagi pengguna OS Microsoft Windows, ada perangkat lunak tambahan untuk menginstall Meteor yaitu Chocolatey. Chocolatey merupakan package manager/software installer untuk platform Windows. Cara instalasi Chocolatey silahkan ikuti buka tautan/link ke cara instalasi Chocolatey. Setelah Chocolatey terinstall maka langkah berikutnya adalah menjalankan perintah berikut pada command prompt/powershell Windows:

choco install meteor

Persiapan Kerangka Struktur Aplikasi

Setelah Meteor sudah terinstall, maka kita bisa mulai untuk membuat aplikasi web Javascript pertama kita. Untuk contoh aplikasi web yang akan kita kembangkan adalah aplikasi sederhana untuk membuat agenda kegiatan. Pada Terminal jalankan perintah berikut ini secara berurutan:

mkdir meteorapp
cd meteorapp
meteor create agendakegiatan
cd agendakegiatan

Saat ini kita sedang berada di dalam folder/direktori agendakegiatan dan kita akan melihat bahwa pada folder ini Meteor sudah membuat kerangka dasar aplikasi web kita (skeleton), yang terdiri atas folder client, server, node_modules, dan file package-lock.json dan package.json. Kita akan banyak bermain di dalam folder client, server dan satu buah folder ini tempat kita akan banyak menyimpan berbagai kode Javascript yaitu imports. Folder client adalah folder yang mengandung semua file terkait dengan apa yang akan ditampilkan kepada browser, sedangkan folder server mengandung semua file terkait dengan pemrosesan di sisi server.
Karena folder imports belum ada, maka kita perlu membuatnya terlebih dahulu, sekaligus kita membuat folder-folder lain di bawahnya dengan menjalankan perintah-perintah berikut:

mkdir imports
cd imports
mkdir ui
mkdir api

Setelah kita selesai membuat folder-folder baru tersebut, maka selanjutnya kita juga perlu membuat beberapa file tambahan yang akan kita isikan dengan kode Javascript dan kode HTML. Jalankan perintah-perintah berikut ini untuk membuat file-file tersebut:

touch ui/body.html
touch ui/body.js
touch api/agenda.js

Coding

Saatnya kita mulai menuliskan kode-kode! Buka text editor favorit masing-masing dan bukalah file-file berikut ini (relatif terhadap direktori agendakegiatan :

1. client/main.html
2. client/main.js
3. client/main.css
4. imports/ui/body.html
5. imports/ui/body.js
6. imports/api/agenda.js
7. server/main.js

Berikutnya silahkan ubah dan isikan masing masing file dengan kode-kode berikut.

client/main.html

<head>
  <title>Aplikasi Agenda Kegiatan</title>
  <meta name="author" content="Ari Nugraha"/>
  <meta name="keywords" content="Meteor, Javascript, Agenda, Aplikasi Web"/>
</head>

client/main.js

import '../imports/ui/body.js';

imports/ui/body.html

<body>
  <div class="ui container">
      <h2 class="ui block header">Agenda Kegiatan</h2>

      <div class="ui container segment">
          <form class="ui form form-kegiatan">
            <div class="three fields">
              <div class="field">
                <label>Nama Kegiatan</label>
                <input type="text" name="nama_kegiatan" class="form-text form-control" placeholder="Nama kegiatan" />
              </div>
              <div class="field">
                <label>Tanggal Kegiatan</label>
                <input type="text" name="tgl_kegiatan" class="form-text form-control" placeholder="Tanggal kegiatan" />
              </div>
              <div class="field">
                <label>Lokasi Kegiatan</label>
                <input type="text" name="lokasi_kegiatan" class="form-text form-control" placeholder="Lokasi kegiatan" />
              </div>
            </div>
            <input type="hidden" name="_id" value="" />
          </form>

          <table class="ui celled table">
            <thead>
              <tr>
                <th class="ten wide">Nama Kegiatan</th>
                <th>Tanggal</th>
                <th>Lokasi</th>
                <th class="one wide"> </th>
              </tr>
            </thead>
            <tbody>
            {{#each agenda}}
              {{> data}}
            {{/each}}
            </tbody>
          </table>

      </div>
  </div>
</body>

<template name="data">
  <tr>
    <td><a class="edit-button" data-id="{{_id}}" href="#">{{kegiatan}}</a></td> 
    <td>{{tgl}}</td>
    <td>{{lokasi}}</td>
    <td><button class="ui icon button delete"><i class="trash icon"></i></button></td>
  </tr>
</template>

imports/ui/body.js

import { Template } from 'meteor/templating';
import { Agenda } from '../api/agenda.js';
import './body.html';

Template.body.helpers({
  agenda() {
    return Agenda.find({}, { sort: { tgl: -1 } });    
  }
});

Template.body.events({
  'keypress .form-text'(event) {
    // event.preventDefault();
    // console.log(event);
    const enterKey = event.key == "Enter";
    // console.log(enterKey);
    if (enterKey) {
      // ambil objek form
      const form = $('.form-kegiatan');
      
      // ambil nilai form
      const kegiatan = form.find('[name="nama_kegiatan"]');
      const tgl = form.find('[name="tgl_kegiatan"]');
      const lokasi = form.find('[name="lokasi_kegiatan"]');
      const _id = form.find('[name="_id"]');
      
      if (!kegiatan.val() || !tgl.val() || !lokasi.val()) {
        return false;
      }

      // console.log(form);
      
      if (_id.val().trim() != '') {
        // masukkan ke database
        Agenda.update(
          {_id: _id.val()},
          { kegiatan: kegiatan.val(),
          tgl: tgl.val(),
          lokasi: lokasi.val(),
        });
      } else {
        // masukkan ke database
        Agenda.insert({
          kegiatan: kegiatan.val(),
          tgl: tgl.val(),
          lokasi: lokasi.val(),
          tgl_input: new Date(),
        });
      }

      // reset nilai form
      kegiatan.val('');
      tgl.val('');
      lokasi.val('');
      _id.val('');
    }
  }
});

Template.data.events({
  'click .delete'(event) {
    const confirmDelete = confirm('Yakin akan menghapus data ini?');
    if (confirmDelete) {
      Agenda.remove(this._id);
    }
  },
  'click .edit-button'(event) {
    const updateData = Agenda.findOne({_id: this._id});
    // console.log(updateData);
    const form = $('.form-kegiatan');
    const kegiatan = form.find('[name="nama_kegiatan"]');
    const tgl = form.find('[name="tgl_kegiatan"]');
    const lokasi = form.find('[name="lokasi_kegiatan"]');
    const _id = form.find('[name="_id"]');
    kegiatan.val(updateData.kegiatan);
    tgl.val(updateData.tgl);
    lokasi.val(updateData.lokasi);
    _id.val(this._id);
  }
});

imports/api/agenda.js

import { Mongo } from 'meteor/mongo';
export const Agenda = new Mongo.Collection('agenda');

server/main.js

import '../imports/api/agenda.js';

client/main.css

body {
  margin: 0; padding: 0;
  top: 0; bottom: 0;
  left: 0; right: 0;
  position: absolute;
  min-height: 100%;
  font-family: Helvetica, sans-serif, Arial;
  background: #777;
}

.container {
  position: relative;
  margin: 0 auto;
  width: 600px;
  background: #ccc;
  height: 100%;
}

.header {
  text-align: center;
  background: linear-gradient(180deg, #555, #999);
  margin: 0;
  color: #fff;
  padding: 20px;
}

.field {
  clear: both;
}

.field label {
  padding: 5px;
  display: block;
  float: left;
  width: 24%;
}

.field input {
  padding: 5px;
  display: block;
  float: right;
  width: 72%;
  font-size: 1.1em;
  border: 0;
  border-bottom: 1px solid #ccc;
}

.table {
  width: 100%;
  border-spacing: 0;
}

.celled thead tr th {
  padding: 10px;
  border-bottom: 1px solid #333;
  background: linear-gradient(180deg, #555, #999);
  margin: 0;
  color: #fff;
}

.celled tbody tr td {
  margin: 0;
  padding: 9px;
  border-bottom: 1px solid #777;
}

.button {
  display: inline-block;
  width: 100%;
  font-size: 1.2em;
}

Ujicoba Aplikasi

Setelah semua kode sudah kita tuliskan maka berikutnya adalah mengujicoba apakah aplikasi sudah berjalan dengan baik. Untuk menjalankan aplikasi dengan Meteor, buka kembali Terminal/console, masuk ke dalam folder aplikasi agendakegiatan dan kemudian jalankan perintah:

meteor

maka kemudian kita akan melihat status seperti ini pada Terminal/console kita:

Selanjutnya buka browser favorit masing-masing dan arahkan ke alamat URL: http://localhost:3000, dan kita akan melihat aplikasi web kita sudah berjalan dengan tampilan seperti ini:

Coba isikan data pada kotak input isian nama kegiatan, tanggal kegiatan dan lokasi kegiatan dan kemudian tekan Enter untuk melihat menyimpan data isian kita. Kita lihat bahwa setelah kita menekan tombol Enter, maka data yang kita masukkan langsung muncul pada tabel di bawah form isian tanpa terjadi reload halaman! Dan yang lebih menarik bahwa apabila kita menjalankan dua browser yang berbeda bersamaan, ketika kita mengupdate data pada satu browser, maka otomatis tampilan pada browser lain akan otomatis terupdate tanpa harus me-refresh/reload browser tersebut! Hal ini terjadi karena aplikasi yang dibangun dengan Meteor telah menerapkan konsep push dari server ke client. Silahkan lihat pada video di bawah ini untuk melihat demo push data pada Meteor:

Bagaimana? menarik bukan membangun aplikasi dengan menggunakan Meteor? Mengenai penjelasan lebih detail mengenai masing-masing kode, akan saya coba tulis pada artikel berikutnya, selamat mencoba dan semoga bermanfaat!