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.tsDatasource 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.
Select /explorer to test out the API
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
}
You can also see the new Database/Collection that entering thiis new value has created, i used mongoDB Compass for a GUI experience.
GET /todos/{id}
using the ID you received from yourPOST
, and see if you get your Todo object back.
PATCH /todos/{id}
, using the same ID, with a body of{ "desc": "need milk for cereal" }
And that’s it, you have a Todo App API!