Making a Todo API with Node.js and MongoDB using Loopback4

Hello Peppos!!

LoopBack is a Node.js and TypeScript framework based on Express, open-source and Highly customizable. It allows you to quickly create APIs in a really easy way.

In this tutorial we are going to create a Todo App API using this framework, make sure that Node.js and MongoDB are installed before doing this project.

This tutorial is based on the Todo Tutorial made by LoopBack4.

Installing and running LoopBack4 for the first time

Installing LoopBack4 is as easy as running the following command:

npm install -g @loopback/cli

Then to create a new project:

lb4 app

Answer the following questions this way for the Todo App(or conforming to your project needs):

? Project name: todo-list
? Project description: A todo list API made with LoopBack 4.
? Project root directory: (todo-list)
? Application class name: (TodoListApplication)
? Select features to enable in the project:
 ◉ Enable eslint: add a linter with pre-configured lint rules
 ◉ Enable prettier: install prettier to format code conforming to rules
 ◉ Enable mocha: install mocha to run tests
 ◉ Enable loopbackBuild: use @loopback/build helpers (e.g. lb-eslint)
 ◉ Enable vscode: add VSCode config files
 ◉ Enable docker: include Dockerfile and .dockerignore
 ◉ Enable repositories: include repository imports and RepositoryMixin
 ◉ Enable services: include service-proxy imports and ServiceMixin
 # npm will install dependencies now
 Application todo-list was created in todo-list.

Start the project by entering the project folder with cd getting-started and run with:

npm start

In your browser you can search for http://127.0.0.1:3000/ping to make sure that the project is running.

You can also make an ‘Hello World’ by starting on the STEP 5 in https://loopback.io/getting-started.html, just keep in mind that you will need to create another project for the next steps.

Model

This is for the app to have different properties, to represent data for use. To that end, we’re going to create a Todo model that can represent instances of a task for our Todo list.

Enter the following command to start creating the model:

lb4 model

And respond the following questions this way:

This will create a model with the Todo App properties.

Datasources

Datasources are LoopBack’s way of connecting to various sources of data, such as databases, APIs, message queues and more. You can think about it as a connector between the app and the database.

To build one to connect to mongoDB just create the Datasource with:

lb4 datasource

And respond in the following way:

? Datasource name: db
? Select the connector for db:  MongoDB (supported by StrongLoop)
? Connection String url to override other settings (eg: mongodb://username:password@hostname:port/database): mongodb://localhost/loop
? host: localhost
? port: 3000
? user: 
? password: [hidden]
? database: loopApp
? Feature supported by MongoDB v3.1.0 and above: Yes
  create src/datasources/db.datasource.ts
  update src/datasources/index.ts
Datasource Db was/were created in src/datasources

Repository

A Repository represents a specialized Service interface that provides strong-typed data access (in this project CRUD) operations of a domain model against the underlying database or service.

To create one enter the following command:

lb4 repository

And select this way:

? Please select the datasource DbDatasource
? Select the model(s) you want to generate a repository Todo
? Please select the repository base class DefaultCrudRepository (Juggler bridge)

   create src/repositories/todo.repository.ts
   update src/repositories/index.ts

Repository TodoRepository was created in src/repositories/

Controller

A Controller is a class that implements operations defined by an application’s API. It implements an application’s business logic and acts as a bridge between the HTTP/REST API and domain/database models. You can think about it like the link between front and back end.

To create one enter the following command:

lb4 controller

And select/write this way:

? Controller class name: todo
Controller Todo will be created in src/controllers/todo.controller.ts

? What kind of controller would you like to generate? REST Controller with CRUD functions
? What is the name of the model to use with this CRUD repository? Todo
? What is the name of your CRUD repository? TodoRepository
? What is the name of ID property? id
? What is the type of your ID? string
? Is the id omitted when creating a new instance? Yes
? What is the base HTTP path name of the CRUD operations? /todos
   create src/controllers/todo.controller.ts
   update src/controllers/index.ts

Controller Todo was created in src/controllers/

Testing the program

To test the program you can enter the command npm start to start the project and search http://127.0.0.1:3000 to run it.

home

Select /explorer to test out the API

API explorer

Here you can test out the Loopback4 API by using the methods displayed on this page.

Here are some requests you can try:

• POST /todos with a body of

{
  "title": "string",
  "desc": "string",
  "isComplete": true
}

output

You can also see the new Database/Collection that entering thiis new value has created, i used mongoDB Compass for a GUI experience.

DataBase and Collection on MongoDB Compass

Data on compass

• GET /todos/{id} using the ID you received from your POST, and see if you get your Todo object back.

input

output

• PATCH /todos/{id}, using the same ID, with a body of { "desc": "need milk for cereal" }

Result on MongoDB Compass

And that’s it, you have a Todo App API!