Criar uma aplicação web com Node.js, MongoDB, Mongoose, Express e EJS - Parte III

Nesta terceira parte, daremos continuidade ao que foi visto na parte 1(link) e na parte 2(link), onde vimos como criar um CRUD do zero com um sistema de cadastro utilizando ExpressJS e MongoDB. Neste artigo, falaremos da parte de um conceito um pouco mais aprofundado, dando continuidade a este mesmo projeto que é o conceito de paginação de resultados, faremos algumas alterações no front e no backend para que a parte de visualização do usuário fique mais agradável e compreensível, fazendo com que, por exemplo, caso sua aplicação tenha uma quantidade de dados já um pouco grande, como uns 500 registros, eles não sejam todos listados de uma vez só na tela do usuário, deixando desconfortável ou até mesmo muito difícil de se navegar em uma tela só.

Caso você não tenha acompanhado os artigos anteriores, aconselho fazê-lo para a melhor compreensão do conteúdo. Em breve disponibilizarei o link com o repositório para visualizarmos os códigos.

Paginação com Node.js e MongoDB

Hoje iremos utilizar 2 funções principais, a primeira delas é a função skip ela irá indicar ao MongoDB que deve ignorar um número x de resultados de uma consulta, na hora que for retornar do servidor de banco. A segunda delas é a função limit, que dirá ao mongo que ele deverá retornar apenas um número limitado de documentos, independente se a busca feita retornaria mais elementos. As duas funções devem ser utilizadas depois de um find.

A lógica que iremos seguir para criarmos a paginação é a seguinte: iremos determinar um tamanho para a página, por exemplo, 5 elementos. Em seguinda, descubra o total de elementos que foram solicitados, por exemplo, 17 elementos, e logo após, divida o total pelo tamanho da página, fazendo sempre o arredondamento para cima. Usando o exemplo acima, você tem a quantidade de páginas. Por fim, utilizando o exemplo acima, teremos 2 páginas com 5 elementos cada e uma com 2 elementos.

O tamanho “correto ou ideal” da página, terá que ser avaliado por você, levando em consideração a performance da mesma e qual será a melhor experiência para o usuário. Tenha sempre em mente que, muitas páginas com poucos elementos fica super fácil para o banco de dados retornar, mas fica um pouco difícil para o usuário ficar navegando entre elas, por outro lado, se houver poucas páginas com muitos elementos, a experiência não será agradável da mesma forma, portanto, ache um equilíbrio e aí é onde está o segredo.

Como o nosso exemplo é de pequeno porte, ficaremos com apenas 5 por página.

Paginação de resultados no Node.js

Nosso primeiro passo será modificar uma função que já criamos no módulo db.js nos tutoriais anteriores para que ela retorne os resultados já de maneira paginada.

Olhando acima, você verá que iniciamos definindo uma constante com o tamanho das páginas sendo 5, em seguida, adicionamos um parâmetro dentro da nossa função findAll que espera a página que será apresentada. Com este parâmetro, calculamos o skip que dirá quantos elementos da consulta deverão ser ignorados. Se a página for a primeira, os elementos mostrados serão os 10 primeiros, caso seja a segunda, o skip será 10 e serão mostrados os elementos de 11 a 20 e assim sucessivamente, variando de acordo com o tamanho da sua aplicação.

Nosso próximo passo será ir até a pasta routes, no módulo index.js, onde iremos modificar a nossa rota GET padrão em 2 pontos diferentes.

OBS: Tenha certeza de que a rota acima esteja por último no seu arquivo index.js.

A observação acima diz respeito ao funcionamento das rotas na aplicação. Neste caso, elas são testadas começando da primeira até a última, deixamos por último para que ela não interfira no processamento da aplicação.

Pronto, agora reinicie sua aplicação e teste se tudo está funcionando corretamente passando a seguinte URL:

E veja se o resultado foi o esperado. Tenha em mente que fiz a adição de vários registros para que a página 2 existisse.

Em seguida, faremos com que nosso usuário não precise ficar mudando os parâmetros na url para conseguir acessar a listagem dos documentos.

Paginação com EJS e ExpressJS

Para que apareça para o nosso usuário o número de páginas que existem e que ele consiga ter acesso às mesmas, vamos ter que desenvolver uma lógica para construir o HTML de paginação que será da parte de frontend e uma segunda lógica para o retorno das informações do backend.

Iremos iniciar pela parte de frontend. O arquivo que vamos mexer é o index.ejs, que é a nossa view que retorna os registros, para que ela possa renderizar a quantidade total dos elementos e o HTML que contém a paginação para que o usuário possa navegar livremente entre elas.

O código abaixo deverá ser adicionado ao final do arquivo index.ejs, logo antes do botão de cadastrar um novo cliente.

Caso você execute o código acima e não funcione, não se preocupe, como ainda não temos a parte de backend desenvolvida, ele não funcionará mesmo.

Agora vamos para a parte do backend. Nosso primeiro passo será abrir o arquivo db.js e adicionar uma nova função a ele. Essa função countAll será responsável por retornar a quantidade de documentos da nossa coleção clientes.

Veja que fiz a alteração do module.exports com a nova função e também com a nossa constante do tamanho da página.

Em seguida, iremos até o nosso arquivo que se encontra na pasta routes/index.js e iremos fazer algumas alterações na última rota que criamos anteriormente, basicamente iremos construir o model com as informações que precisaremos receber do nosso frontend.

Vendo as alterações acima, observe que espero receber a quantidade de clientes utilizando a countAll e que antes coloquei o await, como countAll é uma função assíncrona, teremos que utilizá-lo para que ele aguarde até que a função seja retornada.

E por último, temos a constante que nos retornará a quantidade de páginas. Ela é resultado da divisão do total de documentos pelo tamanho da página como fizemos lá no nosso arquivo db.js.

Caso tudo esteja correto, nossas alterações já devem estar funcionando, reinicie a aplicação e veja se o resultado foi o resultado abaixo:

Note que ao navegar entre as páginas, conforme adicionamos vários registros, elas funcionam normalmente com os registros adicionados e se você for ao seu mongoDB compass e abrir banco de dados, verá todos os registros adicionados. Lembre-se sempre de conferir isso após uma solicitação feita, para ter certeza que está tudo funcionando e suas rotas e endpoints estão sendo executados corretamente.

Certo, nosso último passo neste artigo será dar uma última melhorada na visualização da nossa aplicação. Apenas para ficar melhor a parte visual para o usuário.

Como anteriormente, iremos iniciar pelo frontend. Nossa intenção é desenvolver uma lógica para fazer com que a página que o usuário está navegando deixe de ser um link quando estiver sendo visualizada, em outras palavras, para que o número da página no HTML não fique “azulzinho”. Se você estiver na página 2, por exemplo, o número 2 perderá a característica de link.

Para que isso aconteça, faremos a seguinte alteração no nosso código:

Veja que fizemos apenas a adição de um if que diz que se a variável que está sendo iterada é diferente da página atual. Caso a variável seja diferente,escreva um link na tela, caso não, escreva apenas o número.

Nosso próximo e último passo, será mudarmos a nossa última rota construída acima, será uma alteração bem sutil, mas que fará toda a diferença. Vá até o arquivo index.js e faça a seguinte alteração:

Veja que a mudança foi mínima, apenas adicionamos uma nova propriedade pag no JSON, mas que agora quando você testar, estará assim:

Observe como ficou o resultado, se você olhar para a URL verá: localhost:3000/2 e o número 2 apenas escrito sem o aspecto de link.

Neste artigo, vimos como fazer a paginação dos resultados de solicitações para um banco de dados que criamos em artigos anteriores.

O nosso próximo passo será como modularizar melhor essas páginas, utilizando um conceito importante quando se trata da construção de interfaces, que é a modularização de páginas utilizando o recurso de partial views do EJS. Faremos o modelamento utilizando a view-engine (motor de visualização) ExpressJS, onde iremos criar os arquivos top.ejs e bottom.ejs que serão o cabeçalho e o rodapé da aplicação. Também iremos tentar dar uma melhor estilizada utilizando o framework de css conhecido como bootstrap. Caso você nunca tenha ouvido falar do Bootstrap, aconselho dar uma pesquisada sobre antes, só para entender do que se trata, pois mostrarei algo bem básico e você poderá estilizar da forma que achar melhor.

E por último, para quem curte a linguagem Java, estou desenvolvendo uma aplicação na linguagem com o mesmo princípio dos tutoriais desta série aqui. O objetivo final será desenvolver a aplicação de uma loja virtual e trarei tudo em breve em novos artigos, desde o CRUD até o deploy da aplicação, com tudo funcionando também como o link do repositório para que possamos acompanhar tudo acontecendo.