Eksplorasi HTTP Lifecycle Adonis

Setelah mengenal HTTP Lifecycle Adonis yang dibahas pada artikel sebelumnya, kali ini saatnya meng-implementasikan Lifecycle tersebut. Topik yang mencakup HTTP Lifecycle Adonis adalah:

• Routing
• Request
• Response
• Model dari (M)VC, dibahas pada artikel ini
• View dari M(V)C, dibahas pada dokumentasi berikut
• Controller dari MV(C)

Routing

Route merupakan alamat/URL yang didaftarkan sehingga dapat digunakan untuk mengakses aplikasi. Untuk mengatur daftar route di Adonis, silahkan kelola file start/routes.js, dimana file tersebut memberikan informasi daftar route yang dapat digunakan untuk mengakses aplikasi.

Untuk melihat daftar route selain dengan membuka file start/routes.js kamu juga dapat melihatnya dengan mengetikkan perintah berikut di terminal:

adonis route:list

Daftar route

Jika kamu mengikuti tutorial ini dari awal, maka kamu hanya terdapat 1 route pada aplikasi kita, yaitu / yang berarti http://localhost:3333. Itu karena isi file start/routes.js hanya terdapat 1 route yang terdaftar di dalamnya, berikut isi filenya:

Route.on('/').render('welcome')

Kode diatas merupakan bentuk singkat kode berikut:

Route.get('/', async function ({ view }) {
  return view.render('welcome')
})

Routing di atas artinya, semua request yang tertuju ke path / dengan method GET akan diarahkan untuk merender sebuah halaman welcome, welcome sendiri merupakan nama file dari view yang akan dirender Adonis dengan ekstensi .edge yang berada di folder resources/views. view pada kode ({ view }) merupakan objek hasil destruktur dari HTTP Context yang dibahas di artikel sebelumnya.

Daftar Route methods/verbs yang tersedia adalah:

• get
• post
• put/patch
• delete
• any : mengijinkan semua jenis route methods untuk mengaksesnya
• route : untuk menangani multi verbs, dan menentukan daftar route methodnya. Berikut contohnya:

Route.route('/', async () => {

}, ['GET', 'POST'])

Route parameter

Untuk beberapa kasus, penggunaan statis path tidak selalu membantu, adakalanya aksi yang dilakukan perlu dibuat dinamis. Seperti mengambil data user berdasarkan IDnya. Seperti contoh berikut:

/api/users/1
/api/users/2
/api/users/3

Untuk menggunakan path yang dinamis seperti contoh di atas, maka perlu menggunakan Route parameter. Berikut contoh penggunaan route parameter:

Silahkan akses http://localhost:3333/api/users/1 untuk melihat id user dengan ID=1, hasil yang didapat dari request tersebut adalah objek user dengan format json.

Routing untuk web SPA (Single Page Application)

Dalam beberapa kasus untuk web SPA terkadang dideploy di satu tempat bersama backendnya, salah satunya karena alasan malas melakukan banyak konfigurasi di web servernya. Dengan melakukan deploy frontend dan backend di satu tempat yang sama, kamu cukup mudah mengatur routing yang dimiliki frontend yang menggunakan konsep SPA dengan wilcard route. Berikut contohnya:

Route.any('*', ({ view }) => view.render('index'))

Artinya, semua request yang mengakses ke aplikasi akan diarahkan ke file resources/views/index.edge. Loh, root frontend saya kan ekstensinya .html. Bagaimana dong? 😥

Gampang! Tinggal ubah aja formatnya, kemudian untuk file assets atau dependencynya lainnya copy ke folder public. Gak ribet kan? 😁

Tutorial lengkapnya silahkan baca di dokumentasinya, pada link ini.

Request

Sekarang pembahasan request yang merupakan objek hasil Destruktur ES6 dari http Context. Objek request memiliki banyak fungsi yang sangat membantu untuk mengambil data pada http request. Pastikan body-parser Adonis sudah terinstall dengan benar, jika kamu menggunakan biolerplate adonis new app --slim maka kamu perlu melakukan instalasi body-parser ke dalam projek kamu. Berikut caranya:

• Instal dependency body parser untuk adonis

adonis install @adonisjs/bodyparser

• Daftarkan providernya ke dalam start/app.js

const providers = [
  '@adonisjs/bodyparser/providers/BodyParserProvider'
]

• Daftarkan juga di global middleware di file start/kernel.js

const globalMiddleware = [
  'Adonis/Middleware/BodyParser'
]

Berikut ini beberapa method yang dimiliki objek request:

• post : mengambil objek request body pada request

const body = request.post()

• get : mengambil objek query params pada request

const queryParams = request.get()

• all : menggabungkan request body dan query params ke dalam satu objek

const all = request.all()

• only : mengambil objek tertentu dari request

const body = request.only(['username', 'email', 'age'])

• except : kebalikan dari only, yaitu menghilangkan objek yang tidak diinginkan

const body = request.except(['csrf_token', 'submit'])

• input : mengambil spesifik objek, dan dapat memberikan nilai default jika objek tidak ada

const drink = request.input('drink')

// memberikan nilai default, jika objek drink tidak terdapat pada request
const drink = request.input('drink', 'coffee')

Pembahasan lengkapnya dari request silahkan baca di dokumentasinya pada link ini.

Response

Response merupakan data yang dikirim sebagai jawaban Request dari client. Response juga merupakan objek hasil destructure dari HTTP Context sama halnya dengan Request. Response umumnya dikirim dari Route atau Controller, namun juga dapat dikirim dari Middleware ketika suatu kondisi tidak terpenuhi, sehingga tidak dapat dilanjukan ke proses selanjutnya.

Kode di atas merupakan contoh mengirim response dengan type plain/text, adonis akan otomatis menyesuaikan response type sesuai dengan data yang dikirim. Misal mengirim object user dari models yang sebelumnya dibuat, maka otomatis response type akan bertipe application/json, seperti contoh berikut:

Response dapat dituliskan tanpa menggunakan keyword return, namun adakalanya mengirim response menggunakan keyword return. Misalnya ada kondisi tertentu yang jika terpenuhi mengirim response A dan kondisi tersebut tidak memiliki blok else, sehingga untuk menegaskannya perlu ditambahkan keyword return seperti contoh berikut:

Ketika mencoba akses ke url http://localhost:3333/sample/1 hasilnya akan sama dengan mengakses http://localhost:3333/sample/2. Hal tersebut terjadi karena fungsi response.send() tidak menghentikan proses selanjutnya. Sehingga untuk menegaskan bahwa response langsung dikirim pada kondisi tertentu, gunakanlah keyword return, seperti contoh berikut:

Penggunaan Callback Style Function

Adonis secara default menggunakan konsep async/await pada implementasi. Lalu bagaimana jika ada keperluan menggunakan library diluar official package dari Adonis? Jika library tersebut menggunakan promise style, maka pekerjaan masih mudah karena tinggal menggunakan keyword await saat pemanggilan kodenya. Jika library tersebut menggunakan callback style maka cara menanganinya adalah dengan mengubah kode tersebut ke dalam bentuk promise.

Berikut contoh yang salah saat menggunakan fungsi dengan callback style pada Adonis:

Kode tersebut tidak dapat menampilkan hasil yang diinginkan, namun kata hoho akan muncul di terminal setelah 1 detik. Tidak sesuai harapan saat menggunakan fungsi dengan callback style, maka dari itu perlu melakukan promisify terhadap fungsi tersebut, terdapat 2 cara untuk mengubah fungsi tersebut ke dalam bentuk promise di Adonis yaitu dengan menggunakan promisify yang tersedia di Helpers, atau yang tersedia di util Node.js versi 8.

Contoh 1: Promisify menggunakan Helpers dari Adonis:

Contoh 2: Promisify menggunakan bawaan util Node.js versi 8

Fungsi lainnya dari Response seperti redirect URL, download atau attachment file dapat dilihat pada dokumentasi bagian response pada link ini.

Controller

Controller merupakan bagian kode yang menghubungkan antara Model dan View. Controller berisi perintah-perintah yang berfungsi untuk memproses suatu data dan mengirimkannya ke halaman web atau dikirim berupa REST API.

File controller disimpan di folder app/Controllers/Http, dan Adonis memiliki generator untuk membuat controller tersebut. Gunakan perintah adonis make:controller Controllername. Misalnya mau membuat controller Test, maka ketikkan perintah berikut pada terminal/cmd:

adonis make:controller Test

Pada terminal pilih opsi For HTTP requests, kemdian adonis akan membuat file app/Controllers/Http/TestController. Pada bahasan Routing, semua logic dan operasi-operasi dilakukan di routenya masing-masing. Supaya kode kita tidak campur aduk alias Spaghetti Code, maka pisahkan proses tersebut ke fungsi pada class controller. Sehingga route hanya mengatur controller mana yang mengatur request tertentu. Sebagai contoh kita akan mengubah route yang menampilkan user berdasarkan id, sehingga proses tersebut dikerjakan di controller.

Ubah route dari:

File routes.js ubah menjadi seperti ini:

Dan file TestController.js ubah menjadi seperti ini:

Dengan memindahkan proses atau logic ke dalam controller, akan membuat routing lebih clean dan mudah untuk dibaca, karena hanya berisikan nama controller dan fungsinya yang menjalankan request tertentu.

Sekian pembahasan singkat mengenai eksplorasi HTTP Lifecycle di Adonis, untuk pembahasan Middleware dibahas pada artikel lainnya. Hasil pembelajaran kali ini dapat dilihat pada link github berikut:

ahmadarif/adonis-medium-tutorial

Jangan lupa untuk join Adonis Indonesia di channel berikut:

• Telegram: https://t.me/adonisid
• Medium: https://medium.com/adonisid
• Facebook: https://web.facebook.com/groups/1255340381204098/