Mencoba AdonisJS 4.0 : Setup Project

AdonisJS 4.0 “Dawn” sudah memasuki tahap Pre-release. Walaupun secara resmi belum dirilis, namun kita sudah bisa mencicipi web framework nodejs ini. Pada tulisan ini, saya akan mencoba fitur AdonisJS antara lain, Adonis CLI untuk scaffold project, Routing, Model dan Migrations.

Adonis CLI

Untuk memulai, kita butuh nodejs dan @adonis/cli terinstall di komputer. Untuk install nodejs, silahkan cari refrensi sendiri, untuk @adonisjs/cli dapat diinstall menggunakan perintah

npm install @adonisjs/cli -g

Setup Project

Buat project baru dengan menjalankan

adonis new dawn-blog

# Output

    _       _             _         _
   / \   __| | ___  _ __ (_)___    | |___
  / _ \ / _` |/ _ \| '_ \| / __|_  | / __|
 / ___ \ (_| | (_) | | | | \__ \ |_| \__ \
/_/   \_\__,_|\___/|_| |_|_|___/\___/|___/

✔ Your current Node.js & npm version match the AdonisJs requirements!
✔ Cloned [adonisjs/adonis-slim-app]
✔ npm: Dependencies installed
✔ Default environment variables copied
✔ generated unique APP_KEY
┌───────────────────────────────────┐
│        Application crafted        │
│                                   │
│        cd dawn-blog               │
│        adonis serve               │
└───────────────────────────────────┘

Kemudian jalankan local web server dengan perintah

adonis serve --dev

# Output
2017-08-12T07:14:01.632Z - info: serving app on http://127.0.0.1:3333

Buka http://localhost:3333 di browser

Install Lucid ORM

Secara default adonis cli menggunakan template adonis-slim-app sehinga Lucid ORM harus kita install secara manual.

adonis install @adonisjs/lucid

Buka berkas start/app.js dan edit bagian providers menjadi seperti berikut

const providers = [
  '@adonisjs/lucid/providers/LucidProvider'
]

dan juga bagian aceProviders

const aceProviders = [
  '@adonisjs/lucid/providers/MigrationsProvider'
]

Setup Database

Setup database untuk keperluan local development, dalam kasus ini saya menggunakan database sqlite

Jalankan perintah berikut ini

npm install sqlite3 --save-dev

Kemudian, edit berkas .env dan tambahkan baris berikut ini

DB_CONNECTION=sqlite

Buat Model dan Migration

Buat model dengan adonis cli

adonis make:model Post

Lalu buat migration untuk membuat tabel di database

adonis make:migration post

Edit berkas migration yang berada di folder database/migrations/xxxxxxxxx_post_schema.js

Tambahkan baris berikut ini,

table.string('title')
table.text('content')

Sehingga menjadi seperti ini

'use strict'

const Schema = use('Schema')

class PostSchema extends Schema {
  up () {
    this.create('posts', (table) => {
      table.increments()
      table.string('title')
      table.text('content')
      table.timestamps()
    })
  }

  down () {
    this.drop('posts')
  }
}

module.exports = PostSchema

Kemudian jalankan migration dengan perintah

adonis migration:run

Repl

Laravel punya perintah artisan tinker untuk mengakses consolenya, adonis punya repl dengan fungsi serupa

adonis repl

Setelah masuk console, coba membuat post baru

> Post = use('App/Models/Post')
> await Post.create({title:'Hello Adonis',content:'This is first post'})
> await Post.find(1)

Routing

Setelah kita berhasil membuat Model, kita lanjutkan membuat route, edit berkas start/routes.js tambahkan baris berikut ini

Route.get('/post', 'PostController.index')
Route.get('/post/:id', 'PostController.detail')

Controller

Setelah membuat route yang kita arahkan ke controller, kita lanjutkan membuat controllernya

adonis make:controller PostController

Kemudian edit berkas controller menjadi seperti berikut ini

'use strict'

const Post = use('App/Models/Post')

class PostController {

    async index() {
        let posts = await Post.all()
        return posts
    }

    async detail({params}) {
        let post = await Post.find(params.id)

        return post
    }

}

module.exports = PostController

Yay

Sebelum kita coba di browser, mari kita check terlebih dahulu route yang kita buat dengan perintah

adonis route:list

# Output

┌───────────┬──────────┬───────────────────────┬────────────┬───────────┬────────┐
│ Route     │ Verb(s)  │ Handler               │ Middleware │ Name      │ Domain │
├───────────┼──────────┼───────────────────────┼────────────┼───────────┼────────┤
│ /         │ HEAD,GET │ Closure               │            │ /         │        │
├───────────┼──────────┼───────────────────────┼────────────┼───────────┼────────┤
│ /post     │ HEAD,GET │ PostController.index  │            │ /post     │        │
├───────────┼──────────┼───────────────────────┼────────────┼───────────┼────────┤
│ /post/:id │ HEAD,GET │ PostController.detail │            │ /post/:id │        │
└───────────┴──────────┴───────────────────────┴────────────┴───────────┴────────┘

Sekarang kita coba membuka di browser,

• http://localhost/post

• http://localhost:3333/post/1

Next

Selanjutnya apa lagi yang harus dipelajari? Masih banyak fitur fitur adonis 4.0 yang dapat dicoba, sampai jumpa di tulisan selanjutnya sambil menunggu dokumentasi resmi adonis 4.0 dirilis.