Berkenalan Dengan AdonisJS: Framework Kembaran Laravel

Halo,,, selamat datang kembali di Ruang Developer Blog. Apakah kamu merupakan programmer PHP yang sedang belajar JavaScript? Ingin menggunakan Node.js tapi belum siap berpisah dengan Laravel? Kali ini kita akan berkenalan dengan AdonisJS, salah satu framework Node.js yang mirip dengan Laravel.

Apa Itu AdonisJS

AdonisJS adalah sebuah web framework Node.js yang memiliki struktur seperti Laravel. AdonisJS menyediakan fitur yang lengkap untuk membuat aplikasi web, baik itu sebagai backend API atau fullstack.

AdonisJS includes everything you need to create a fully functional web app or an API server. So stop wasting hours downloading and assembling hundreds of packages — Use AdonisJS and be productive from day one.

Membuat Project AdonisJS

Sekarang saatnya kita membuat project untuk berkenalan dengan AdonisJS.

Sebelum kita mulai, pastikan kamu sudah memiliki Node.js yang terinstall di komputer kamu dengan versi minimal v14.

Untuk membuat project, buka terminal kesayangan kamu, dan jalankan perintah berikut ini.

npm init adonis-ts-app@latest my_adonis

Perintah tersebut akan membuat folder my_adonis dan project AdonisJS di dalamnya. Pada saat menjalankan perintah, kamu akan diminta menentukan beberapa konfigurasi berikut:

Project structure Pilihan yang tersedia:

• web: cocok untuk membuat aplikasi klasik web yang dirender diserver, disertai dengan template engine AdonisJS.
• api: cocok untuk membuat aplikasi backend API.
• slim: hanya menginstall core framework tanpa package tambahan.

Project name Nama untuk project yang dibuat.

Configure eslint/prettier Eslint dan prettier untuk menjaga agar kode yang kamu tuliskan tetap sesuai standar dan memiliki gaya penulisan yang konsisten.

Configure Webpack Encore Webpack Encore untuk bundling frontend dependency.

Berikut ini adalah konfigurasi project saya:

CUSTOMIZE PROJECT
❯ Select the project structure · web
❯ Enter the project name · my_adonis
❯ Setup eslint? (y/N) · false
❯ Configure webpack encore for compiling frontend assets? (y/N) · false

Dan ini adalah hasilnya setelah project selesai dibuat:

RUNNING TASKS
❯ Scaffold project 164 ms
❯ Install dependencies 1.1 min
❯ Configure installed packages 27 s

[ success ]  Project created successfully

╭─────────────────────────────────────────────────╮
│    Run following commands to get started        │
│─────────────────────────────────────────────────│
│                                                 │
│    ❯ cd my_adonis                               │
│    ❯ node ace serve --watch                     │
│                                                 │
╰─────────────────────────────────────────────────╯

Menjalankan aplikasi

Untuk menajalankan aplikasi, kita bisa menggunakan bantuan dari ace command. Mirip seperti artisan milik laravel, ace adalah command line app milik adonis yang akan membantu kita melakukan berbagai hal ketika membuat aplikasi menggunakan AdonisJS.

Masih di terminal kesayangan kamu, masuklah ke folder my_adonis kemudian jalankan perintah berikut:

node ace serve --watch

Kamu akan melihat output seperti berikut:

$ node ace serve --watch
[ info ]  building project...
[ info ]  starting http server...
[16:02:07.363] INFO (my_adonis/8836): started server on 0.0.0.0:3333
[ info ]  watching file system for changes
╭─────────────────────────────────────────────────╮
│                                                 │
│    Server address: http://127.0.0.1:3333        │
│    Watching filesystem for changes: YES         │
│                                                 │
╰─────────────────────────────────────────────────╯

Buka alamat server yang diberikan di browser kamu.

Mencoba URL Routing

AdonisJS memiliki konsep routing yang mirip seperti Laravel. Sekarang buka project di editor kesayangan kamu. Dalam folder start, buka file routes.js dan kamu akan menemukan kode seperti ini:

import Route from "@ioc:Adonis/Core/Route";

Route.get("/", async ({ view }) => {
  return view.render("welcome");
});

Ini adalah kode yang mendefinisikan route untuk root url. Sekarang mari kita coba bandingkan denga milik laravel.

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

Gimana? mirip kan?

Oke kembali ke AdonisJS, sekarang kita coba menambahkan satu buah route baru seperti berikut ini.

Route.get("/hello", async () => {
  return "Hello World!";
});

Jalankan server aplikasi kemudian buka url /hello.

View

Sebelumnya kamu mungkin sudah menyadari bahwa definisi route untuk root url memanggil sebuah fungsi bernama render() dalam objek view.

return view.render("welcome");

Kode ini berfungsi merender file view bernama welcome. Di mana file ini berada? Pada project kamu, silahkan periksa folder bernama resources, maka di dalamnya kamu akan menemukan folder bernama views yang berisi file welcome.edge. Isi dari file ini adalah html yang menampilkan halaman web. Edge adalah ekstensi yang digunakan AdonisJS template engine.

Sekarang, dalam folder views buatlah sebuah file baru bernama hello.edge yang berisi kode html sederhana seperti ini:

<h1>Hello world from view file.</h1>

Kemudian kita rubah definisi route untuk url /hello kita menjadi seperti ini:

Route.get("/hello", async ({ view }) => {
  return view.render("hello");
});

Jangan lupa jalankan server, kemudian coba buka url /hello di browser.

Mengirimkan data

Dalam AdonisJS, data yang dikirimkan ke view disebut state. Untuk membuat state dan mengirimkannya kita hanya perlu menambahkan objek state sebagai argument ke dua ketika memanggil method render(). Untuk mencobanya ubah definisi route kita menjadi seperti ini.

Route.get("/hello", async ({ view }) => {
  const state = {
    name: "Rizky Kurniawan",
  };
  return view.render("hello", state);
});

Setelah itu dalam file hello.edge kita bisa menampilkannya dengan cara berikut ini:

<h1>Hello world from view file.</h1>
<h2>My name is {{ name }}</h2>

Sekarang kita coba buka url /hello, maka hasilnya akan seperti ini:

Controller

Selain menggunakan handler function saat mendefinisikan route, kita juga bisa menggunakan controller. Menggunakan controller akan memudahkan kita untuk memisahkan dan mengelompokkan handler, serta menghindari kode yang rumit pada definisi route.

Untuk membuat controller, kita bisa menggunakan bantuan dari ace command. Pada terminal kamu, jalankan perintah berikut:

node ace make:controller User

Perintah di atas akan membuat sebuah file controller bernama UsersController.ts dalam folder app/Controller/Http.

Dalam file UsersController.ts tulislah kode seperti berikut:

import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'

export default class UsersController {
  public async index(ctx: HttpContextContract) {
    const state = {
      name: "Rizky Kurniawan From Controller"
    }
    return ctx.view.render('hello', state)
  }
}

Pada kode tersebut kita membua class dengan method index() yang merender view hello dan mengirimkan objek state berisi name.

Sekarang kita akan membuat definisi route baru dengan url /users dan UsersController.

Route.get("/users", "UsersController.index");

Simple banget kan? karena kita sudah memisahkan kode handlernya ke dalam method index() dalam UsersController, sehingga kita hanya perlu menuliskan nama controller dan methodnya saja.

Sekarang coba jalankan aplikasi dan buka url /users di browser kamu.

Dapat kamu lihat browser akan menampilkan nama yang sama seperti state yang kita buat di UsersController

Akhirnya…

Masih banyak sekali yang belum kita jelajahi dari framework AdonisJS ini, namun saya berharap kamu sudah sedikit mengenal dan tentunya menyadari bahwa AdonisJS sangat mirip seperti Laravel. Kalau kamu sudah terbiasa menggunakan laravel. Framework AdonisJS ini bisa jadi alternative framework kamu ketika belajar development dengan JavaScript dan Node.js.

Cukup sekian perkenalan dengan framework AdonisJS kali ini. Jika kamu memiliki pertanyaan, jangan sungkan untuk menuliskannya di kolom komentar ya…