CRUD todo-list API usando LoopBack4

4 min readApr 14, 2021

Usando a CMD, vamos começar por criar o nosso projeto ao qual podemos chamar app-todo-list, executando o seguinte código na CMD

lb4 app-todo-list

Depois preenchemos os dados da nossa app como na figura seguinte e executamos, para que o projeto seja criado

Depois é nos apresentada uma mensagem com os passos seguintes que são

executamos “cd app-todo-list” para entrarmos na pasta do nosso projeto e “npm start” para ativar o servidor da nossa API e vermos que está tudo a funcionar

Eu vou só fazer o primeiro para continuar o desenvolvimento, se executarmos o comando dir dentro da pasta do nosso projeto, podemos ver o que foi criado automaticamente, como podemos ver na figura seguinte

Vamos agora criar o modelo para os nossos dados, executando o seguinte comando na CMD

lb4 model

E preenchemos mais uma vez os dados como mostra na figura seguinte

Agora vamos começar a definir as propriedades do nosso modelo

import {Entity, model, property} from '@loopback/repository';@model()
export class Todo extends Entity {
  @property({
    type: 'number',
    id: true,
    generated: false,
  })
  id?: number;@property({
    type: 'string',
    required: true,
  })
  title: string;@property({
    type: 'string',
  })
  desc?: string;@property({
    type: 'boolean',
  })
  isCompleste?: boolean;@property({
    type: 'string',
  })
  remindAtAddress?: string;@property({
    type: 'string',
  })
  remindAtGeo?: string;@property({
    type: 'any',
  })
  tag?: any;constructor(data?: Partial<Todo>) {
    super(data);
  }
}export interface TodoRelations {
  // describe navigational properties here
}export type TodoWithRelations = Todo & TodoRelations;

Agora vamos criar a datasource usando o seguinte comando

lb4 datasource

Preenchemos os dados

O nome da datasource e selecionamos a forma como queremos guardar os dados da nossa API, para este primeiro exemplo vamos guardar num ficheiro selecionando a seguinte opção na CMD

Na linha assinalada inserimos o caminho para o ficheiro onde vamos guardar os nossos dados, mas este documento ainda não foi criado

De seguida criamos a pasta data, na raiz do nosso projeto e dentro dessa pasta criamos o ficheiro db.json, dentro deste ficheiro inserimos o seguinte código, para termos já alguns exemplos no nosso ficheiro

{
  "ids": {
    "Todo": 5
  },
  "models": {
    "Todo": {
      "1": "{\"title\":\"Take over the galaxy\",\"desc\":\"MWAHAHAHAHAHAHAHAHAHAHAHAHAMWAHAHAHAHAHAHAHAHAHAHAHAHA\",\"id\":1}",
      "2": "{\"title\":\"destroy alderaan\",\"desc\":\"Make sure there are no survivors left!\",\"id\":2}",
      "3": "{\"title\":\"play space invaders\",\"desc\":\"Become the very best!\",\"id\":3}",
      "4": "{\"title\":\"crush rebel scum\",\"desc\":\"Every.Last.One.\",\"id\":4}"
    }
  }
}

Vamos agora criar o repositório, inserindo o seguinte comando na CMD

lb4 repository

E seguir os seguintes passos e executar, para que seja criado

Vamos agora definir o controller para que seja criado, usando o seguinte comando na CMD

lb4 controller

Agora o controller esta criado, com todas as ligações

Para finalizar e verificarmos que está tudo a funcionar vamos executar o seguinte comando

npm start

De seguida inserimos o seguinte url no browser

http://localhost:3000/explorer/#/

Este será o resultado, onde temos todas as funções da nossa API

Agora podemos fazer alguns testes entre os quais, contar os documentos que temos inseridos, inserir um novo todo e mostrar os dados que já temos no nosso ficheiro, e depois voltar a contar os documentos inseridos ou ver todos os documentos inseridos.

Clicamos na função que queremos testar, por exemplo contar os documentos que estão no nosso ficheiro db.json

Depois basta clicarmos em try it out para correr a função, devemos tambem apagar os filtros que estão assinalados na imagem anterior e por fim clicar em execute como podemos ver na imagem seguinte