Berkenalan Dengan AdonisJS: Framework Kembaran Laravel

Halo,,, selamat datang kembali di Sandi Dharma Blog. Apakah Engkau merupakan programmer PHP yang sedang belajar JavaScript? Mau 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 Mempunyai struktur seperti Laravel. AdonisJS menyediakan fitur yang lengkap Demi Membikin aplikasi web, Bagus 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.

Membikin Project AdonisJS

Sekarang saatnya kita Membikin project Demi berkenalan dengan AdonisJS.

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

Demi Membikin project, buka terminal kesayangan Engkau, dan jalankan perintah berikut ini.

npm init adonis-ts-app@latest my_adonis

Perintah tersebut akan Membikin folder my_adonis dan project AdonisJS di dalamnya. Pada Demi menjalankan perintah, Engkau akan diminta menentukan beberapa konfigurasi berikut:

Project structure
Pilihan yang tersedia:

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

Project name
Nama Demi project yang dibuat.

Configure eslint/prettier
Eslint dan prettier Demi menjaga agar kode yang Engkau tuliskan tetap sesuai standar dan Mempunyai gaya penulisan yang konsisten.

Configure Webpack Encore
Webpack Encore Demi 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

Demi menajalankan aplikasi, kita Dapat menggunakan Sokongan dari ace command. Mirip seperti artisan Punya laravel, ace adalah command line app Punya adonis yang akan membantu kita melakukan berbagai hal ketika Membikin aplikasi menggunakan AdonisJS.

Tetap di terminal kesayangan Engkau, masuklah ke folder my_adonis kemudian jalankan perintah berikut:

Engkau akan Menyantap 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 Engkau.

Mencoba URL Routing

AdonisJS Mempunyai konsep routing yang mirip seperti Laravel. Sekarang buka project di editor kesayangan Engkau. Dalam folder start, buka file routes.js dan Engkau 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 Demi root url. Sekarang mari kita coba bandingkan denga Punya 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 Engkau mungkin sudah menyadari bahwa definisi route Demi 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 Engkau, silahkan periksa folder bernama resources, maka di dalamnya Engkau akan menemukan folder bernama views yang berisi file welcome.edge. Isi dari file ini adalah html yang menampilkan halaman web. Edge adalah Perluasan 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 Demi 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. Demi Membikin state dan mengirimkannya kita hanya perlu menambahkan objek state sebagai argument ke dua ketika memanggil method render(). Demi 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 Dapat menampilkannya dengan Metode 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 Demi mendefinisikan route, kita juga Dapat menggunakan controller. Menggunakan controller akan memudahkan kita Demi memisahkan dan mengelompokkan handler, serta menghindari kode yang rumit pada definisi route.

Demi Membikin controller, kita Dapat menggunakan Sokongan dari ace command. Pada terminal Engkau, jalankan perintah berikut:

node ace make:controller User

Perintah di atas akan Membikin 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 Membikin 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 Engkau.

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

Akhirnya…

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

Cukup sekian perkenalan dengan framework AdonisJS kali ini. Kalau Engkau Mempunyai pertanyaan, jangan sungkan Demi menuliskannya di kolom komentar ya…