Search by

    Terakhir diperbaharui: Aug 6, 2021

    Node.js

    Teknologi yang akan kita gunakan untuk membuat Back End dari aplikasi DinoTes adalah Node.js + Express.js + MongoDB.

    Oleh karena itu kita perlu memahami konsep dasar dari teknologi tersebut.

    Node.js

    Node.js adalah JavaScript Runtime Environment yang memungkinkan JavaScript bisa dieksekusi diluar browser.

    Node.js bukan sebuah bahasa pemrograman dan juga bukan framework

    Node.js bekerja secara non-blocking asynchronous, yang artinya Node.js dapat memproses suatu request yang datang tanpa harus menunggu proses yang sebelumnya selesai.

    Hal ini membuat Node.js sangat ideal untuk aplikasi server karena bisa menghandle banyak request dalam satu waktu.

    Arsitektur Node.js

    node architecture

    Sumber inspirasi gambar => Node.js Architecture

    • Request, request masuk yang berasal dari user
    • Node.js Server, server yang bertugas untuk menghandle request yang masuk dan memberikan response ke user
    • Event Queue, menyimpan request sesuai urutan masuk untuk kemudian diproses oleh Event Loop satu per satu
    • Event Loop / Main Thread, semua request yang masuk akan diproses oleh event loop untuk dieksekusi
    • Worker Pool / Thread Pool, berisi thread untuk membantu kerja dari event loop

    Membuat server Node.js

    Install Node.js

    Windows: Silahkan download installer dan jalankan installer

    Linux/Ubuntu/Debian, jalankan perintah berikut ini:

    1$ sudo apt update
    2$ sudo apt install nodejs

    MacOS (menggunakan Homebrew), jalankan perintah berikut ini pada terminal:

    1$ brew update
    2$ brew install node

    Untuk memeriksa apakah Node.js sudah terinstall, kita bisa run command berikut pada command prompt, console atau terminal:

    1$ node -v
    2
    3$ npm -v

    Module

    Setiap file atau folder yang bisa digunakan dengan cara dipanggil melalui function require() disebut dengan module.

    Sebagai contoh kita memiliki sebuah module dengan nama greeting.

    greeting.js

    1exports.sayHello = 'Hi Brachio';

    Kemudian kita bisa menggunakan module greeting ini pada module yang lain.

    index.js

    1const greeting = require('./greeting.js');
    2
    3console.log(greeting.sayHello); // Hi Brachio

    Node.js menggunakan CommonJS module dan tidak sepenuhnya support ES6 Module

    NPM

    Module yang sudah dibuat dapat diregistrasikan ke repository khusus seperti NPM (Node Package Manager), module tersebut dapat digunakan oleh siapapun selama module bersifat public.

    Kita sudah bahas sedikit tentang NPM pada pembahasan FrontEnd Dev Tools.

    Membuat Server

    Membuat sebuah simple HTTP server menggunakan Node.js sangatlah mudah:

    1. Buat sebuah file dengan nama server.js

    2. Kemudian salin code berikut

    1const http = require('http'); // import module bernama http
    2
    3const hostname = '127.0.0.1';
    4const port = 3000;
    5
    6const server = http.createServer((req, res) => {
    7 res.write('Hi Brachio!');
    8 res.end();
    9});
    10
    11server.listen(port, hostname, () => {
    12 console.log(`Server running at http://${hostname}:${port}/`);
    13});
    1. Jalankan command node server.js dari terminal

    2. Buka browser dan navigasi ke http://127.0.0.1:3000

    node simple server success

    Dari sini kita bisa mengembangkan server ini untuk menghandle request yang berasal dari user / sisi client.

    REST

    REST singkatan dari REpresentational State Transfer, adalah sebuah tipe arsitektur yang digunakan dalam komunikasi antar client dan server.

    Arsitektur REST ini umumnya diimplementasikan pada proses komunikasi berbasis protokol HTTP.

    Pada arsitektur REST, client mengirim request ke server dengan tujuan untuk meminta data atau mengubah data yang ada pada server.

    API (Application Programming Interface) yang menggunakan REST arsitektur disebut dengan REST API.

    Request dari client umumnya terdiri dari:

    • HTTP Method / Verb
    • HTTP Header, berisi informasi tertentu yang dikirim oleh client ke server
    • Path / Endpoint url
    • Data

    HTTP Method

    Ada 4 HTTP Method yang paling sering digunakan:

    • GET, meminta/mengambil data dari server
    • POST, mengirim data ke server
    • PUT, mengubah data di server
    • DELETE, menghapus data di server

    Contoh mengambil data dari server menggunakan GET:

    1GET https://server.com/articles/?id=1
    2Accept: text/html

    Response dari server:

    1Status Code: 200 (OK)
    2Content-type: text/html

    Membuat REST API

    Kita bisa membuat REST API menggunakan Node.js:

    1. Buat simple HTTP server

    server.js

    1const http = require('http');
    2
    3const hostname = '127.0.0.1';
    4const port = 3000;
    5
    6const server = http.createServer((req, res) => {
    7 res.write('Hi Brachio!');
    8 res.end();
    9});
    10
    11server.listen(port, hostname, () => {
    12 console.log(`Server running at http://${hostname}:${port}/`);
    13});
    1. Buat sebuah file JavaScript yang berisi handler untuk endpoint

    handler.js

    1exports.sayHello = (req, res) => {
    2 const response = {
    3 message: 'Hi Brachio'
    4 };
    5
    6 res.statusCode = 200;
    7 res.setHeader('Content-Type', 'application/json');
    8 res.end(JSON.stringify(response));
    9};

    Response yang dikirim dalam bentuk JSON.

    1. Tambahkan GET endpoint handler untuk menghandle request GET.

    server.js

    1const http = require('http');
    2const url = require('url'); // tambahkan module url untuk mendapatkan alamat url endpoint
    3
    4const handler = require('./handler');
    5
    6const hostname = '127.0.0.1';
    7const port = 3000;
    8
    9const server = http.createServer((req, res) => {
    10 const requestUrl = url.parse(req.url, true);
    11
    12 //GET endpoint
    13 if (requestUrl.pathname === '/greeting' && req.method === 'GET') {
    14 handler.sayHello(req, res);
    15 }
    16});
    17
    18server.listen(port, hostname, () => {
    19 console.log(`Server running at http://${hostname}:${port}/`);
    20});

    Pada code di atas jika client mengakses alamat http://127.0.0.1:3000/greeting handler sayHello akan dieksekui.

    1. Jalankan perintah node server.js dari terminal atau integrated terminal di VS Code.

    Buka browser dan navigasi ke alamat http://127.0.0.1:3000/greeting, maka kita akan mendapat hasil seperti ini:

    simple rest api

    Ketika kita mengakses alamat http://127.0.0.1:3000/greeting, yang terjadi adalah kita mengirim sebuah request GET ke server, dan server merespon request tersebut dengan mengeksekusi handler sayHello yang kemudian mengirim response berupa JSON berisi data {"message":"Hi Brachio"} untuk ditampilkan pada browser.

    Selanjutnya kita bisa teruskan dengan menambah POST, PUT dan DELETE endpoint dan handlernya masing-masing.

    Tetapi membuat REST API dengan hanya menggunakan Node.js bisa menjadi pekerjaan yang rumit, karena tidak ada standard dalam penulisan endpoint handler dan kita harus menulis fitur server seperti router, template engine atau database management dari awal.

    Oleh karena itu sebagian besar developer memilih untuk menggunakan Node.js Framework.

    Node.js Framework pada dasarnya adalah sebuah kerangka / design yang bisa diterapkan untuk membuat sebuah aplikasi Node.js, umumnya sebuah framework telah menyediakan fitur-fitur server, handler atau tools yang bisa dimanfaatkan tanpa harus menulisnya dari awal.

    Contoh Node.js Framework:

    Pada pembahasan selanjutnya kita akan membahas Express.js, Node.js framework paling popular saat ini.

    Di devsaurus, sebagian besar teknologi atau framework yang dibahas adalah yang paling popular, namun bukan berarti yang lain memiliki kualitas yang lebih rendah

    Karena popularitas bukan satu-satunya tolak ukur yang digunakan untuk menilai sebuah teknologi.

    Express JS Framework

    Express.js merupakan salah satu framework yang minimalis namun memiliki fitur yang lumayan banyak.

    Ada beberapa konsep dasar pada Express.js yang perlu dipahami yaitu

    • Routing
    • Middleware
    • Static Files
    • Error Handling

    Step by step

    1. Buat sebuah folder dengan nama myexpress-app(atau pilih nama sesuai keinginan)

    2. Jalankan command yarn init untuk inisialisasi sebuah project Node.js

    3. Kemudian jalankan perintah berikut ini untuk menambahkan express ke dalam project

    1$ yarn add express
    1. Buat sebuah file dengan nama app.js dan copy code berikut untuk membuat sebuah aplikasi Express.js:
    1const express = require('express');
    2const app = express();
    3const port = 3000;
    4
    5app.get('/', (req, res) => {
    6 res.send('Hi Brachio!');
    7});
    8
    9app.listen(port, () => {
    10 console.log(`Example app listening at http://localhost:${port}`);
    11});

    Aplikasi ini akan menjalankan sebuah server yang aktif di port 3000, setiap request yang dikirim ke root url () akan direspon dengan text Hi Brachio.

    1. Jalankan perintah node server.js

    2. Navigasi ke http://localhost:3000

    express app

    Yang perlu diperhatikan disini bahwa setiap kali kita melakukan perubahan atau edit file di dalam server maka server harus direstart.

    Ctrl+C untuk stop server kemudian jalankan kembali dengan perintah node server.js.

    Hal ini memang sedikit merepotkan, tapi tidak masalah untuk pendahuluan. Kedepan kita akan menggunakan package seperti nodemon yang akan merestart server secara otomatis setiap kali ada perubahan.

    Routing

    Yang dimaksud dengan routing adalah bagaimana server harus merespon request yang dikirim oleh client untuk masing-masing endpoint.

    Syntax route

    1app.METHOD(PATH, HANDLER)
    • app, object utama yang mewakili Express.js
    • METHOD, mewakili HTTP method
    • PATH, alamat dari endpoint
    • HANDLER, sebuah function javascript yang dieksekusi ketika alamat endpoint cocok dengan route

    express routing

    contoh route untuk menghandle GET request:

    1app.get('/', function (req, res) {
    2 res.send('Hi Brachio');
    3})

    handler menerima dua argument, yaitu object req mewakili request yang berasal dari client dan object res mewakili respon yang akan dikirim oleh Express.js setelah menerima request.

    contoh router untuk menghandle POST request:

    1app.post('/', function (req, res) {
    2 res.send('Got a POST request');
    3})

    Middleware

    Middleware pada dasarnya adalah handler yang memiliki akses ke object req, res dan function next.

    • req, object yang mewakili request user
    • res, object yang mewakili response dari Express.js setelah menerima request
    • next, function yang jika dipanggil akan mengeksekusi middleware yang lain(jika ada)

    contoh:

    1const express = require('express');
    2const app = express();
    3const port = 3000;
    4
    5const logger = (req, res, next) => {
    6 console.log('response sent');
    7 next();
    8};
    9
    10app.use(logger); // mount middleware
    11
    12app.get('/', (req, res) => {
    13 res.send('Hi Brachio!');
    14 });
    15
    16app.listen(port, () => {
    17 console.log(`Example app listening at http://localhost:${port}`);
    18});

    Pada contoh code di atas setiap kita mengakses http://localhost:3000, tulisan response sent akan ditampilkan pada terminal

    express middleware

    Static Files

    Untuk memahami bagaimana Express.js menghandle static files seperti file gambar, file CSS atau file JavaScript. Lakukan langkah berikut:

    1. Buat sebuah folder bernama public dan subfolder images di dalam folder myexpress-app
    1myexpress-app
    2 |--node_modules
    3 |--public
    4 |--images
    5 |--package.json
    6 |--server.js
    1. Tambahkan sebuah file gambar ke dalam folder images (kamu bebas memilih gambar)
    1myexpress-app
    2 |--node_modules
    3 |--public
    4 |--images
    5 |--logo.png
    6 |--package.json
    7 |--server.js

    Sekarang jika kita akses alamat http://localhost:3000/images/logo.png kita akan mendapatkan error:

    express static files error

    Padahal kita tahu keberadaan file gambar, css atau javascript tidak bisa dipisahkan dalam sebuah website.

    Untuk itu kita perlu menggunakan built-in middleware express.static().

    1express.static(root, [options])

    contoh:

    1app.use(express.static('public'));

    Sekarang Express.js akan menampilkan semua file yang disimpan dalam folder public.

    http://localhost:3000/images/logo.png

    success load static files

    Error Handling

    Express.js memiliki default error handler yang bisa dimanfaatkan untuk menghandle error yang terjadi pada aplikasi.

    contoh:

    1app.get('/test', (req, res) => {
    2 throw new Error('Something Wrong');
    3});

    Pada code di atas, kita anggap user tidak seharusnya mengirim request atau mengakses url /test. Jika dilakukan maka Express akan merespon dengan pesan kesalahan.

    Jika kita tidak menambahkan sebuah error handler untuk route diatas maka Express.js akan menghandlenya untuk kita dengan cara:

    • menampilkan pesan error pada client dan console
    • set HTTP status ke code 500

    Asynchronous Error

    1app.get('/test', (req, res, next) => {
    2 fs.readFile('/file-does-not-exist', function (err, data) {
    3 if (err) {
    4 next(err) // Teruskan error ke Express.js
    5 } else {
    6 res.send(data)
    7 }
    8 })
    9})

    fs.readFile bertugas untuk membaca file di server dan operasi ini bersifat asynchronous, jika terjadi error, semisal file tersebut tidak ditemukan maka kita bisa membiarkan Express.js menghandlenya dengan meneruskan error lewat function next().

    Error Handling Middleware

    Untuk membuat middleware khusus untuk menghandle error kita harus menambahkan satu lagi argument selain req, res dan next yaitu error.

    1app.use((error, req, res, next) => { /* ... */ })

    Dari middleware ini kita bisa membaca status error dari error.status dan detail error dari error.message.

    Middleware ini harus ditempatkan pada bagian akhir setelah semua middleware lain.

    Rekap

    • Node.js adalah JavaScript Runtime yang memungkinkan JavaScript untuk dieksekusi di luar browser
    • Node.js bekerja secara non-blocking asynchronous, yang artinya Node.js dapat memproses suatu request yang datang tanpa harus menunggu proses yang sebelumnya selesai.
    • NPM adalah package manager untuk Node.js sekaligus repository khusus untuk package Node.js
    • Membuat aplikasi server pada Node.js menjadi lebih mudah dengan menggunakan Node.js framework seperi Express.js
    • Konsep dasar yang ada pada Express.js yang perlu dipahami adalah Routing, Middleware, Static Files dan Error Handling