L'API REST

Bien, pour l'instant, vous avez un frontend qui fonctionne correctement et quelques todos dans votre base de données. Il est maintenant temps de coder une API REST pour relier les deux.

Pour ce faire, vous allez utiliser un contrôleur. Les contrôleurs reçoivent les requêtes HTTP et les traitent. Ils peuvent appeler des services en arrière-plan pour les aider à le faire. Nous n'étudierons pas les services dans ce tutoriel.

Ouvrez le fichier api.controller.ts dans le répertoire src/app/controllers/ et remplacez son contenu.

import { Get, HttpResponseOK } from '@foal/core';

export class ApiController {

  @Get('/todos')
  getTodos() {
    const todos = [
      { id: 1, text: 'My task 1' },
      { id: 2, text: 'My task 2' }
    ];
    return new HttpResponseOK(todos);
  }

}

Les contrôleurs disposent de méthodes spéciales qui définissent les routes et leurs gestionnaires respectifs. Ces fonctions sont décorées par l'un des décorateurs Get, Post, Patch, Put ou Delete qui définissent la méthode HTTP et le chemin de la route.

Dans ce cas, le contrôleur répond avec un statut 200 et une donnée mock (les deux faux todos).

Rafraîchissez votre navigateur, vous devriez voir les deux todos affichés.

Maintenant, nous aimerions retourner les todos stockés dans la base de données. Mettez à jour le code comme suit :

import {
  Context, Delete, Get, HttpResponseCreated, HttpResponseNoContent,
  HttpResponseNotFound, HttpResponseOK, Post
} from '@foal/core';

import { Todo } from '../entities';

export class ApiController {

  @Get('/todos')
  async getTodos() {
    const todos = await Todo.find();
    return new HttpResponseOK(todos);
  }

}

Si vous rafraîchissez votre navigateur, vous devriez maintenant voir les tâches que nous avons créées avec la ligne de commande.

Ajoutez les fonctionnalités de création et de suppression.

  @Post('/todos')
  async postTodo(ctx: Context) {
    // Create a new todo with the body of the HTTP request.
    const todo = new Todo();
    todo.text = ctx.request.body.text;

    // Save the todo in the database.
    await todo.save();

    // Return the new todo with the id generated by the database. The status is 201.
    return new HttpResponseCreated(todo);
  }

  @Delete('/todos/:id')
  async deleteTodo(ctx: Context) {
    // Get the todo with the id given in the URL if it exists.
    const todo = await Todo.findOneBy({ id: ctx.request.params.id });

    // Return a 404 Not Found response if no such todo exists.
    if (!todo) {
      return new HttpResponseNotFound();
    }

    // Remove the todo from the database.
    await todo.remove();

    // Returns an successful empty response. The status is 204.
    return new HttpResponseNoContent();
  }

L'objet Context, qui est transmis à chaque gestionnaire de route, contient l'objet requête d'Express. Celui-ci représente la requête HTTP et possède des propriétés pour les paramètres d'URL de la requête, son corps, ses en-têtes HTTP, etc.

Tapez maintenant un nouveau todo dans le champs de texte et appuyez sur Entrée. La tâche apparaît dans la liste des tâches. Rafraîchissez la page, elle devrait toujours y être. Si vous cliquez sur la case à cocher, le todo est supprimé avec succès.

La dernière chose à savoir est la manière dont l'ApiController est lié au gestionnaire de requêtes. Vous avez défini jusqu'à présent des routes dans ce contrôleur mais vous n'avez jamais lié le contrôleur nulle part. Cela se fait dans le fichier app.controller.ts, le point d'entrée de votre application.

Ouvrez le fichier app.controller.ts dans src/app.

import { controller, IAppController } from '@foal/core';

import { ApiController } from './controllers';

export class AppController implements IAppController {
  subControllers = [
    controller('/api', ApiController),
  ];
}

Ce contrôleur est le contrôleur principal de l'application. Il est directement appelé lorsqu'une requête est reçue. Il peut avoir des sous-contrôleurs qui vont dans le répertoire controllers/.