dindasigma: Berkenalan dengan MEAN Stack

“This MEAN stack (Mongo, Express, Angular, Node) may one day surpass the simplicity of the LAMP stack (Linux, Apache, MySQL, PHP) for web application development and deployment. ”

Kutipan di atas saya temukan pada salah satu jurnal IBM yang berjudul "Build a real-time polls application with Node.js, Express, AngularJS, and MongoDB".

Sudah lama sekali mungkin kita telah mengenal dan menggunakan LAMP, pada saat ini telah dibuat development stack (yang katanya akan melampaui LAMP) bernama MEAN. MEAN adalah kepanjangan dari MongoDB, Express, AngularJS dan Node.js. MEAN menggunakan Javascript sepenuhnya dalam pembangunan website dan aplikasi web. Dari database, back-end code, front-end code semuanya ditulis menggunakan Javascript.

Untuk Anda yang masih awam dengan MEAN stack , artikel ini akan memperkenalkan MEAN stack secara singkat kepada Anda.

Perkenalan Awal

M untuk MongoDBMongoDB adalah salah satu produk paling populer dari teknologi Basis Data NoSQL. Data pada MongoDB disimpan dalam bentuk JSON Binary format yang disebut BSON (Binary JSON). Untuk JavaScript Developer pastinya akan sangat mudah bekerja dengan JSON. Untuk lebih jelasnya mengenai MongoDB dan Basis Data NoSQL dapat dilihat pada artikel MongoDb dan NoSQL.

E untuk Express
Express digunakan khusus untuk menangani bagian server, seperti melakukan mekanisme routing, manajemen session dan sebagainya. Express didesain untuk membuat suatu set fitur yang kuat untuk aplikasi Node.

A untuk AngularJS
AngularJS merupakan sebuah framework buatan Google yang menangani bagian front-end dengan konsep MVW (Model-View-Whatever). MVW bisa berarti MVC, MVVW, MV, MVVM, manapun yang paling pas bagi Anda, yang terpenting tujuan dari konsep ini adalah untuk memisahkan logika presentasi dari logika bisnis, di mana Javascript berperan untuk mengelola model dan logika sedangkan HTML untuk layar presentasi.

N untuk Node.js
Node.js adalah pondasi dari Express. Node.js dikembangkan berdasarkan teknologi Google V8 JavaScript engine serta berisi kompilasi skrip inti dan banyak modul siap pakai yang bermanfaat. Node.js memiliki fitur built-in HTTP server library yang menjadikannya mampu menjadi sebuah web server tanpa bantuan software lainnya seperti Apache atau Nginx.

Tampaknya Sudah Mulai Kenal, Mari Berkenalan Lebih Lanjut

Sebelum memulai prakteknya, pastikan Anda sudah menginstall MongoDB dan Node.js. Artikel ini tidak akan membahas cara penginstalan dua hal tersebut. Anda bisa mencari referensi lain untuk melakukan penginstalan.

Node.js memiliki package manager yang disebut npm. Nantinya kita akan banyak menggunakan perintah npm tersebut.

Membuat Server Express

Buka Command Prompt/Terminal, masuk pada folder yang akan Anda jadikan folder aplikasi dan ketikkan :

npm init

contoh gambar :

isikan pertanyaan yang diminta seperti nama aplikasi, deskripsi, main file, author dll dengan sesuai. Setelah menjawab semua pertanyaan, akan terbuat sebuah file package.json yang berisi informasi dari apa yang telah Anda isi. Ini contoh dari file package.json punya saya :

{
  "name": "mean-untuk-perkenalan",
  "version": "1.0.0",
  "description": "Sebuah perkenalan dengan MEAN Stack",
  "main": "index.js",
  "keywords": [
    "MEAN",
    "dasar"
  ],
  "author": "blog.dindasigma.com",
  "license": "ISC"
}

"main" : "index.js" berarti file utama(main file) yang akan diakses oleh server adalah index.js. Anda harus membuat file baru bernama index.js yang akan berguna sebagai file utama.

Setelah itu, tambahkan express sebagai dependensi melalui perintah (masih pada command prompt) :

npm install express --save

contoh gambar :

Perintah di atas akan otomatis menambahkan sebuah folder bernama node_modules pada direktori aplikasi Anda. Dalam folder tersebut terdapat satu buah dependensi bernama express. Folder node_modules ini berguna sebagai tempat untuk menyimpan dependensi-dependensi yang digunakan pada aplikasi Anda.

Langkah selanjutnya kita akan membuat aplikasi Express yang akan bertindak sebagai server. Pada file index.js Anda ketikkan :

var express = require('express'),
    app = express();

app.get('/', function(req, res) {
    res.send("Hello From Express");
});

app.listen(3001, function() {
    console.log('Server ready, listening on port 3001');
});

Kemudian ketikkan perintah berikut pada command prompt

node index.js

Contoh gambar :

Perintah tersebut akan menciptakan sebuah server pada port 3001. Anda dapat mengetikkan http://localhost:3001 pada browser Anda dan akan keluar tampilan:

Hello from Express

Contoh gambar :

Menggunakan MongoDB

Agar dapat menggunakan MongoDB lewat aplikasi Express, kita harus menggunakan sebuah modul dari npmjs.com. Ada banyak sekali modul yang dapat Anda gunakan seperti mongodb, monk atau mongoose. Pada contoh ini, kita akan menggunakan mongoose.

Mari kita tambahkan mongoose sebagai dependensi aplikasi terlebih dahulu. Hentikan terlebih dahulu proses node index.js dengan menekan ctrl+c. Install mongoose melalui perintah:

npm install mongoose --save

Contoh gambar :

Setelah proses instalasi berhasil, Anda akan mendapatkan sebuah folder baru bernama mongoose pada folder node_modules Anda, ini menandakan dependensi berhasil disimpan. Pada file package.json Anda, juga ada tambahan mongoose pada field dependencies.

Setelah itu buka windows command promt baru untuk menjalankan mongoDB, pergi ke direktori mongodb Anda dan ketikkan perintah :

mongod

Contoh gambar :

Melalui perintah tersebut, Anda telah menjalankan MongoDB. Untuk mengkoneksikan MongoDB melalui mongoose, tambahkan perintah berikut pada file index.js Anda :

mongoose=require("mongoose");
mongoose.connect("localhost:27017/marvel");

Sehingga isi dari file index.js Anda yang sekarang adalah :

var express = require('express'),
    app = express(),
    mongoose=require("mongoose");
 
mongoose.connect("localhost:27017/marvel");

app.get('/', function(req, res) {
    res.send("Hello From Express");
});

app.listen(3001, function() {
    console.log('Server ready, listening on port 3001');
});

Perintah mongoose.connect("localhost:27017/marvel") menandakan bahwa server express kita terkoneksi dengan mongoDB pada database marvel. Pada MongoDB kita tidak perlu membuat database terlebih dahulu sebelum mengkoneksikannya seperti pada mySQL. Kita juga tidak perlu repot-repot membuat tabel dan menentukan struktur dari tabel itu terlebih dahulu. Pada MongoDB semuanya serba praktis.

Selanjutnya kita Akan membuat sebuah models. Models di sini fungsinya sama dengan models pada konsep pemrograman MVC yaitu untuk menangani hal-hal yang berkaitan dengan basis data. Buat folder baru bernama models, sehingga struktur dari aplikasi Anda seperti :

root

node_modules

src

models

index.js

package.json

Di dalam folder models buat file baru bernama avengers.js dan ketikkan kode berikut:

var mongoose = require('mongoose');

// Membuat skema untuk collection avengers
var schema = new mongoose.Schema({
    character   : String,
    real_name : String,
    join_date : Date,
});

// Membuat skema untuk menampilkan data dari collection avengers
schema.statics.tampilData = function (req, res){  
    return avengers.find(function (err, avengers) {
        if (!err) {
                res.jsonp(avengers);
        } else {
                console.log(err);
        }
    });
}

// Membuat skema untuk menambahkan data dari collection avengers
schema.statics.simpanData = function (req, res){  
 avengers.create({
  "character" : "Hulk",
     "real_name" : "Dr. Robert Bruce Banner",
     "join_date" : new Date("1963-09-14")
   }, function(err, avengers) {
    if(!err) {
     res.jsonp("Data Berhasil Disimpan");
    } else {
     console.log(err);
    }
   });
}

// Mengembalikan avengers model
module.exports = avengers = mongoose.model('avengers', schema);

Setelah itu buka file index.js Anda dan tambahkan kode berikut :

var avengers = require('./src/models/avengers');

app.get('/tampil', avengers.tampilData);
app.get('/simpan', avengers.simpanData);

Sehingga isi dari file index.js sekarang adalah:

var express = require('express'),
    app = express(),
    mongoose=require("mongoose");

mongoose.connect("localhost:27017/marvel");

var avengers = require('./models/avengers');

app.get('/tampil', avengers.tampilData);
app.get('/simpan', avengers.simpanData);

app.get('/', function(req, res) {
    res.send("Hello From Express");
});

app.listen(3001, function() {
    console.log('Server ready, listening on port 3001');
});

Jalankan kembali server Anda melalui perintah node index.js

Sekarang jika kita ketikkan URL localhost:3001/simpan maka browser akan menampilkan pesan sukses data telah tersimpan. Jika Kita ketikkan localhost:3001/tampil maka browser akan menampilkan data pada collection avengers yang telah kita simpan.

AngularJS untuk Front-End

Kita telah membangun back-end aplikasi, sekarang saatnya kita membuat bagian front-end untuk menampilkan data pada user menggunakan AngularJS.

Gunakan Bower untuk mendapatkan AngularJS:

bower init
bower install angular --save

Contoh gambar :

Tambahkan folder baru pada folder src, di dalam folder src tersebut tambahkan:

index.html

ngapp.js

controllers

services

Sehingga struktur dari aplikasi Anda sekarang adalah :

root

node_modules

src

models

controllers

services

ngapp.js

index.html

index.js

package.json

Index.html adalah file untuk tampilan html pada aplikasi website. Ngapp.js adalah file dasar pada aplikasi AngularJS yang kita buat. Folder controllers adalah direktori di mana controller kita akan disimpan, sedangkan services adalah direktori di mana service aplikasi kita (seperti factory) akan disimpan.

Untuk membuat file dasar AngularJS, ketikkan kode berikut pada ngapp.js :

var app = angular.module('marvelcomic', []);

Jangan lupa untuk menginclude file ini pada index.html

Sekarang, untuk mengambil data dari back-end API, kita akan membuat sebuah factory. Buat sebuah file bernama AvengersFactory.js di dalam services folder :

app.factory('MarvelFactory', function ($http) {
   return {
      characters: function() {
   return $http.get('/tampil');
      }
   }
})

Untuk dapat menggunakan factory tersebut, buat file MainCtrl.js dalam folder Controllers dan ketikkan kode berikut :

app.controller('MainCtrl', function(MarvelFactory) {
   var self = this;
   MarvelFactory.characters().success(function(data) {
      self.charList = data;
   }); 
});

Selanjutnya include-kan semua file js ke index.html dan tambahkan list kode berikut di dalam tag body:
html2

Sehingga keseluruhan dari file index.html Anda adalah :
html3

Terakhir, untuk menampilkan file tersebut pada server, Anda harus melakukan perubahan sedikit pada index.js, yaitu mengganti app.get('/', .... yang tadinya menampilkan pesan Hello From Express menjadi menampilkan halaman index html seperti berikut :

var express = require('express'),
    app = express(),
 mongoose=require("mongoose");

mongoose.connect("localhost:27017/marvel");

var avengers = require('./src/models/avengers');

app.use('/', express.static(__dirname + '/assets'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));

app.get('/tampil', avengers.tampilData);
app.get('/simpan', avengers.simpanData);

app.get('/', function(req, res) {
 res.sendFile(path.join(__dirname + "/index.html"));
});

app.listen(3001, function() {
    console.log('Server ready, listening on port 3001');
});

Ketika Anda mengetikkan pada browser locahost:3001/ Anda akan melihat list dari karakter Marvel komik sesuai yang ada pada basis data.