Membuat CRUD API dengan AdonisJS 5

Developer Stories
Membuat CRUD API dengan AdonisJS 5

August 10, 2021
Developer Stories

Halo semuanya, pada tulisan kali ini kita akan mencoba untuk membuat CRUD Rest API dengan AdonisJS 5. AdonisJS merupakan framework dari Node.js yang membantu dalam pembuatan API atau web app. Di AdonisJS 5 ini sudah menggunakan bahasa pemrograman TypeScript, Adonis ini mempunyai fitur fitur yang lumayan mirip dengan Laravel. Bagi pengguna Laravel mungkin tidak akan asing dengan cara kerjanya.

Project aplikasi yang akan kita buat memiliki table user dengan kolom username dan email.

Table of Contents

Persiapan

Berikut ini tools yang perlu dipersiapkan untuk membuat CRUD Rest API kali ini:

Node.js versi 14
Npm versi 6 atau lebih
Database postgreSQL
Postman

Membuat Project

Sebelum membuat project, pastikan versi nodejs dan npm kalian sudah sesuai dengan yang tertera di atas, jika sudah, kalian bisa lanjut ke langkah selanjutnya

1. Jalankan perintah berikut untuk menginstall framework AdonisJS 5 pada project yang akan kita buat

npm init adonis-ts-app@latest {{nama-project}}

Pada saat proses instalasi, pilih `api` untuk membuat project API

2. Tunggu proses install sampai selesai. Jika sudah, masuk ke dalam project dengan perintah

cd {{nama-project}}

3. Lalu jalankan perintah berikut untuk menjalankan aplikasi

node ace serve

4. Kemudian jalankan perintah berikut untuk memastikan aplikasi berjalan

curl http://127.0.0.1:3333

Setup Database

Selanjutnya, kita akan setup koneksi ke database yang akan kita pakai

1. Buat database di postgreSQL dengan nama crud-adonis

2. Lalu jalankan perintah berikut untuk meng-install ORM

npm i @adonisjs/lucid

3. Jika sudah terinstall, jalankan perintah berikut untuk meng konfigurasi database

node ace configure @adonisjs/lucid

Lalu pilih PostgreSQL karena kita akan menggunakan Postgres untuk database-nya

Pilih `in the terminal` untuk menunjukkan instruksi di terminal

Kemudian ikuti instruksi berikut, copy paste DB_CONNECTION dan variable postgreSQL ke file env.ts untuk meng-koneksikan aplikasi dengan database yang sudah kita buat.

Jika sudah, setting database di .env sesuai dengan konfigurasi database PostgreSQL-mu.

DB_CONNECTION=pg
PG_HOST=localhost
PG_PORT=5432
PG_USER=postgres // ganti sesuai dengan nama user anda di postgresql
PG_PASSWORD=123456 // password user di postgresql
PG_DB_NAME=crud-adonis // nama database

Setup Model dan Migration

Sekarang kita membuat model dan migration. Model merupakan representasi dari struktur data yang akan kita olah.

1. Jalankan perintah berikut untuk membuat model beserta dengan migration nya

node ace make:model User -m

Perintah di atas akan membuat model User yang terletak di app/Models/User.ts dan file migration database yang terletak di database/migrations yang bernama …._users.ts. File migration ini nantinya berisi konfigurasi dari table users.

2. Buka file migration user schema, lalu ubah menjadi seperti berikut

this.schema.createTable(this.tableName, (table) => {
      table.increments('id')
      table.string('username').unique().notNullable()
      table.string('email').unique().notNullable()
      table.timestamp('created_at', { useTz: true })
      table.timestamp('updated_at', { useTz: true })
    })

3. Jalankan migrasi untuk membuat tabel user dengan perintah sebagai berikut

node ace migration:run

Adonis otomatis akan membuat tabel user sesuai konfigurasi yang ada di user schema.

4. Buka model user, kemudian ubah class user menjadi seperti berikut

import { DateTime } from 'luxon'
import Hash from '@ioc:Adonis/Core/Hash'
import { BaseModel, beforeSave, column } from '@ioc:Adonis/Lucid/Orm'

export default class User extends BaseModel {
  @column({ isPrimary: true })
  public id: number

  @column()
  public username: string

  @column()
  public email: string

  @column.dateTime({ autoCreate: true })
  public createdAt: DateTime

  @column.dateTime({ autoCreate: true, autoUpdate: true })
  public updatedAt: DateTime
}

5. Terakhir, buat controller untuk menjalankan request dari routing dengan menjalankan perintah berikut

node ace make:controller User

Perintah di atas akan membuat file UsersController yang terletak di app/Controllers/Http/UsersController.ts

Menyimpan Data Users

Sekarang kita akan membuat CRUD API bagian menyimpan data user ke database yang sudah kita buat

1. Untuk menyimpan data users, buka routes di start/routes.ts, kemudian tambahkan kode sehingga menjadi seperti berikut

Route.group(() => {
  Route.post('users', 'UsersController.store')
})

2. Lalu buka controller UsersController, dan tambahkan method store ke dalam class class UsersController sehingga kode nya menjadi seperti berikut

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

export default class UsersController {
  public async store({ request, response }: HttpContextContract) {
    const input = request.only(['username', 'email'])
    try {
      const users = await User.create(input)

      return response.status(200).json({ code: 200, status: 'success', data: users })
    } catch (err) {
      return response.status(500).json({ code: 500, status: 'error', message: err.message })
    }
  }
}

3. Lalu cek menggunakan Postman dan masukkan URL `http://localhost:3333/api/v1/users` dengan menggunakan method POST

Sekarang kamu sudah berhasil membuat API untuk menyimpan data user ke database.

Menampilkan Data Users

Kali ini kita akan menampilkan seluruh data users. Method yang akan kita gunakan adalah GET.

1. Buka file routes di start/routes.ts, kemudian tambahkan route get ke dalam route group, sehingga code nya menjadi seperti berikut

Route.group(() => {
  Route.post('users', 'UsersController.store')
  Route.get('users', 'UsersController.index')
}).prefix('/api/v1')

2. Buka file UsersController.ts, kemudian tambahkan method index ke dalam class UsersController

public async index({ response }: HttpContextContract) {
    const users = await User.all()

    return response.status(200).json({ code: 200, status: 'success', data: users })
}

3. Buka Postman kemudian request menggunakan method GET dengan URL `http://127.0.0.1:3333/api/v1/users`

Sekarang kamu sudah berhasil menampilkan semua data user.

Menampilkan Data Detail User

Lalu kita akan membuat API untuk menampilkan detail user berdasarkan id. Method yang akan kita gunakan adalah GET

1. Buka file start/routes.ts, lalu tambahkan route get ke dalam group, sehingga menjadi seperti berikut

Route.group(() => {
  Route.post('users', 'UsersController.store')
  Route.get('users', 'UsersController.index')
  Route.get('users/:id', 'UsersController.show')
}).prefix('/api/v1')

2. Buka file UsersController lalu tambahkan method show ke dalam class UsersController

public async show({ params, response }: HttpContextContract) {
    try {
      const users = await User.findBy('id', params.id)

      return response.status(200).json({ code: 200, status: 'success', data: users })
    } catch (err) {
      return response.status(500).json({ code: 500, status: 'error', message: err.message })
    }
}

3. Lalu test API dengan request `http://127.0.0.1:3333/api/v1/users/:id` menggunakan method GET dengan parameter id merupakan id dari user

Maka akan muncul response seperti di atas, dan sekarang kamu berhasil membuat get detail user

Mengubah Data User

Kali ini kita akan membuat API untuk mengubah data user

1. Buka file routes, kemudian tambahkan route put kedalam route group sehingga code menjadi seperti berikut

Route.group(() => {
  Route.post('users', 'UsersController.store')
  Route.get('users', 'UsersController.index')
  Route.get('users/:id', 'UsersController.show')
  Route.put('users/:id', 'UsersController.update')
}).prefix('/api/v1')

2. Buka file UsersController, lalu tambahkan method update kedalam class UsersController

public async update({ params, request, response }: HttpContextContract) {
    const input = request.only(['username', 'email'])
    try {
      const users = await User.findBy('id', params.id)
      users?.merge(input)

      await users?.save()

      return response.status(200).json({ code: 200, status: 'success', data: users })
    } catch (err) {
      return response.status(500).json({ code: 500, status: 'error', message: err.message })
    }
}

3. Lalu test API dan masukan request URL `http://127.0.0.1:3333/api/v1/users/:id` dengan method PUT dan parameter id merupakan id dari user

Dan sekarang kamu sudah berhasil membuat API untuk mengubah data user

Menghapus Data User

Terakhir kita akan membuat API untuk menghapus data user di database

1. Buka file route kemudian tambahkan route delete ke dalam route group, sehingga code menjadi seperti berikut

Route.group(() => {
  Route.post('users', 'UsersController.store')
  Route.get('users', 'UsersController.index')
  Route.get('users/:id', 'UsersController.show')
  Route.put('users/:id', 'UsersController.update')
  Route.delete('users/:id', 'UsersController.destroy')
}).prefix('/api/v1')

2. Lalu buka file UsersController dan tambahkan method destroy ke dalam class UsersController

public async destroy({ params, response }: HttpContextContract) {
    try {
      const users = await User.findBy('id', params.id)
      await users?.delete()

      return response.status(200).json({ code: 200, status: 'success', data: users })
    } catch (err) {
      return response.status(500).json({ code: 500, status: 'error', message: err.message })
    }
}

3. Lalu test API dengan request api `http://127.0.0.1:3333/api/v1/users/:id` dengan method DELETE dan parameter id merupakan id dari user

Selamat kamu sudah berhasil membuat API delete data user.

Sekian tutorial dari saya dalam membuat CRUD API sederhana dengan menggunakan framework AdonisJS 5. Terima kasih dan sampai jumpa di artikel selanjutnya!

Aplikasi dapat di-download di: