Contruye aplicaciones web con AdonisJS, MVC y TypeScript

AdonisJS es un framework de desarrollo web para Node.js que nos proporciona una estructura sólida y herramientas integradas para construir aplicaciones web robustas y escalables.

Está fuertemente inspirado por otros frameworks MVC, como Laravel en el mundo de PHP. AdonisJS está diseñado para simplificar el desarrollo de aplicaciones al ofrecer una arquitectura coherente y herramientas listas para usar.

AdonisJS se enfoca en mejorar nuestra productividad y mantener nuestro código organizado. Proporciona un conjunto completo de herramientas que incluye un ORM (Object-Relational Mapper), un sistema de enrutamiento, y una capa de middleware, entre otros.

Estas características nos permiten manejar tareas comunes de desarrollo web sin tener que configurar todo desde cero.

Instalación de AdonisJS

Para comenzar a trabajar con AdonisJS, primero debemos instalarlo. Usamos npm o yarn para crear un proyecto de AdonisJS.

npm init adonisjs@latest my-project

Este comando genera una estructura de proyecto base con todas las configuraciones necesarias. A continuación, accedemos al directorio del proyecto y ejecutamos el servidor:

cd my-project
npm run dev

Si todo funciona veréis un “It Works!” en la pantalla (sí, no se han matado más, podía haber puesto un logo o algo pero ¡no!. It Works)

Estructura del proyecto

Una vez que se crea un nuevo proyecto, AdonisJS proporciona una estructura de directorios y archivos predeterminados para organizar el código de la aplicación. La estructura de archivos incluye los siguientes directorios y archivos:

• app: Este directorio contiene la lógica de la aplicación, incluidos los controladores, las vistas y los modelos.
• config: Este directorio contiene los archivos de configuración de la aplicación.
• database: Este directorio contiene las migraciones de la base de datos y los archivos de semillas.
• public: Este directorio contiene los archivos públicos como CSS, JS y archivos de imagen.
• resources: Este directorio contiene los archivos fuente de la aplicación, como las vistas y los archivos de estilo.
• routes: Este directorio contiene los archivos de enrutamiento de la aplicación.
• .env: Este archivo contiene variables de entorno para la aplicación.

Cómo usar AdonisJS

Veamos cómo empezar a construir una aplicación simple con AdonisJS. Crearemos una pequeña aplicación de blog con rutas, controladores y modelos básicos.

Definir rutas

En AdonisJS, las rutas se definen en el archivo start/routes.js. Aquí es donde podemos especificar cómo se deben manejar las solicitudes HTTP.

import router from '@adonisjs/core/services/router'

router.on('/').render('pages/home')

router.get('/hello-world', () => {
  return 'Hello world from the home page.'
})

router.get('/posts/:id', ({ params }) => {
  return `This is post with id ${params.id}`
})

Crear controladores

Los controladores manejan la lógica de la aplicación para cada ruta. Podemos crear un controlador utilizando la CLI de AdonisJS:

node ace make:controller PostController

El archivo generado se encuentra en app/Controllers/Http/PostController.js y podemos definir los métodos para manejar nuestras rutas:

import type { HttpContext } from '@adonisjs/core/http'

export default class UsersController {
  async index(ctx: HttpContext) {
    return [
      {
        id: ctx.params.id,
        username: 'virk',
      },
      {
        id: 2,
        username: 'romain',
      },
    ]
  }
  
  async create({}: HttpContext) {}

  async store({ request }: HttpContext) {}

  async show({ params }: HttpContext) {}

  async edit({ params }: HttpContext) {}

  async update({ params, request }: HttpContext) {}
  
  async destroy({ params }: HttpContext) {}
}

Ahora podemos cambiar el router para que use nuestro controller

router.get('/posts/:id', (ctx) => {
  return new UsersController().index(ctx)
})

Crear modelos

Los modelos en AdonisJS representan tablas en la base de datos y nos permiten interactuar con los datos. Utilizamos la CLI para generar un modelo:

npm ace make:model Post

El archivo generado se encuentra en app/Models/Post.js y define el esquema del modelo:

import { DateTime } from 'luxon'
import { BaseModel, column } from '@adonisjs/lucid/orm'

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

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

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

Para crear las tablas en la base de datos, usamos migraciones. Primero, generamos una migración:

node ace make:migration posts

Luego, definimos el esquema en el archivo de migración generado en database/migrations/:

import { BaseSchema } from '@adonisjs/lucid/schema'

export default class extends BaseSchema {
  protected tableName = 'posts'

  async up() {
    this.schema.createTable(this.tableName, (table) => {
      table.increments('id')

      table.timestamp('created_at')
      table.timestamp('updated_at')
    })
  }

  async down() {
    this.schema.dropTable(this.tableName)
  }
}

Finalmente, ejecutamos la migración para crear la tabla:

node ace migration:run