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

Dando continuidade a nossa série de artigos sobre como fazer um sistema de cadastro simples em Node.js, utilizando MongoDB e ExpressJS, desenvolvendo o CRUD.

Nesta quarta e última parte, iremos ver um conceito importante quando se trata da construção de interfaces, que é a parte de modularização da página, onde utilizaremos o recurso chamado partial views do EJS, que é a view engine que estamos utilizando com o framework Express js.

Para dar uma estilizada, usaremos o framework conhecido como Bootstrap, que é amplamente utilizado para dar estrutura a aplicações web mais responsivas e com boas experiências para os usuários.

O que é o Bootstrap?

Em um breve resumo, o Bootstrap é um framework front-end que nos fornece estruturas de CSS para criação de sites e aplicações responsivas de forma bem simples e rápida. Também funciona muito bem com sites para desktop e páginas de dispositivos móveis.

Como o Bootstrap é distribuído?

As 2 formas mais comuns de distribuição pelo site oficial e npm. Você também tem a opção de criar a sua própria distribuição, caso queira, utilizando o código-fonte, ou utilizando a própria rede de distribuição do Bootstrap conhecida como CDN do BootStrap. Basicamente, um CDN permite que um site da web recupere com frequência arquivos que são distribuídos publicamente usados em servidores distribuídos globalmente.

Mais a frente neste artigo, faremos a instalação para podermos dar aquela melhorada no visual da nossa aplicação.

O que são Partial Views?

Depois desse breve resumo sobre o Bootstrap, voltamos para o assunto inicial. Mas afinal,o que são essas Partial views? É bastante comum quando estamos desenvolvendo uma aplicação que existam certas partes das telas (views) que se repetem. Tendo isso em mente, todas as linguagens de programação para web possuem recursos de Partial Views, que são justamente uma modularização da interface, separando-a em “partes” da tela, construídas separadas e depois montadas em conjunto para que o usuário veja apenas o resultado final.

Nossa aplicação é bem simples e por isso possui apenas 3 views, sendo elas: index, new e error, conforme vemos abaixo:

A estrutura acima é bem básica, logo, não teria necessidade de fazer essa modularização com Partial Views, vamos abordar aqui apenas para conhecimento/entendimento, também para mostrar que é um poderoso conceito, além de tornar seu frontend mais legível e elegante, torna o desenvolvimento de novas páginas de uma forma muito mais ágil, pois aproveita os elementos genéricos criados apenas uma vez, sendo utilizado em outras telas.

Se formos até as nossas views index.ejs e new.ejs, podemos notar que em ambas existem muitas tags em comum no começo e no fim delas.

Index:

New:

Vamos começar por elas.

Partial View com EJS

O EJS possui a funcionalidade de criar partial views de forma bem fácil. Começaremos criando um arquivo top.ejs na pasta views. Top será referente ao TOPO da nossa página e nele iremos adicionar toda estrutura da parte comum que teremos em todas as views da nossa aplicação. No arquivo criado, adicione a estrutura abaixo:

No código acima, no arquivo top.ejs, podemos notar algumas variáveis JS que deverão vir do nosso backend, através do model que é passado na nossa função render do Node.js.

Em seguida, nós iremos criar um segundo arquivo dentro da pasta views, esse arquivo irá se chamar bottom.ejs, bottom será referente ao RODAPÉ e nele vamos adicionar apenas 2 linhas por enquanto:

Agora você deve estar se perguntando como fazemos para que uma view possa utilizar essas partial views que acabamos de criar. Pois bem, vamos começar indo até a nossa index.ejs e no topo do arquivo remova a parte que é repetida dentro do top.ejs e no lugar do pedaço de código excluído, use o include como demonstraremos abaixo para incluir a nossa partial view na primeira linha do arquivo, ficando da seguinte forma:

E na parte de baixo, faremos o mesmo com o bottom.ejs:

Após o processo acima, quando o arquivo HTML for ser construído para que possa ser enviado ao browser para ser renderizado, o EJS vai ler a primeira linha e entender que a parte HTML dessa linha, vem de outro arquivo, então irá até esse arquivo, copiará seu conteúdo e utilizará neste local.

Observe que com apenas esses 2 includes utilizados, temos nossa aplicação modularizada em 3 partes, top = topo, center = centro, bottom = rodapé, o que facilita a manutenção e reuso do código.

Tendo em mente que agora podemos reutilizar o nosso código, faremos as mesmas substituições no arquivo new.ejs e error.ejs para não precisarmos mais repetirmos os blocos de códigos no começo e no fim de nossos arquivos HTML. Como nossa aplicação é bem simples, não dá para notar o quanto temos de ganho, mas caso façamos aplicações maiores, os ganhos e facilitações para manutenção do nosso código fazem total diferença.

Vamos começar pelo arquivo error.ejs:

E new.ejs:

Depois de feitas as alterações acima, rode novamente sua aplicação Node como fazemos, lembre-se de subir seu banco do MongoDB também e você irá notar que tudo rodou direitinho mas que nada mudou para o usuário. Tudo é renderizado igualmente como era antes, mas tenha em vista que as alterações que fizemos, servem para tornar a nossa vida de desenvolvedor mais fácil.

O nosso próximo passo aqui será adicionar o framework de frontend que vamos utilizar e que resumi de forma breve no começo deste artigo. Você também notará como será mais fácil fazermos a “manutenção” do nosso código após essa modularização.

Adicionando o Bootstrap ao projeto

Vamos começar adicionando as duas dependências do Bootstrap que podem ser obtidas neste link do site oficial. A primeira delas é a de CSS e deve ser adicionada no topo do nosso arquivo top.ejs, substituindo a chama antiga do CSS que estava no arquivo:

Como adicionamos o código acima no top.ejs, agora todas as telas que utilizam essa partial view vão estar com o CSS do Bootstrap adicionada a elas. Note a produtividade que tivemos, se pararmos para pensar, imaginem uma aplicação com 12 telas e você tendo que mexer de uma por uma para fazer a manutenção do código?

Observe que adicionei duas meta-tags como o que a página do Bootstrap no link acima sugere, isso garante maior compatibilidade com os recursos que o framework oferece e também tem a responsividade em dispositivos móveis.

Nosso próximo arquivo que será modificado será o bottom.ejs. Iremos agora adicionar o script JS necessário para o funcionamento do Bootstrap, ele será adicionado logo antes da tag </body>. Ficando da seguinte forma:

Só com essas leves mudanças que fizemos, rode a aplicação e veja os novos efeitos visuais da nossa aplicação.

Mas sempre podemos melhorar nossa aplicação de alguma forma, vamos agora usar alguns dos “poderes” do Bootstrap para que façamos algumas alterações na nossa estrutura, como também usar algumas classes CSS definidas pelo Bootstrap.

Nosso primeiro passo, será começar definindo uma div class container que vai englobar toda a parte de conteúdo do body das nossas telas. Para fazermos isso, basta que adicionemos o conjunto de tags div que mostrarei abaixo, mas basicamente você terá que abrir a div no top.ejs e fechar no bottom.ejs de modo que ambas fiquem dentro do body.

top.ejs:

Observe que mudamos apenas uma linha, logo acima da tag H1, bem no fim do arquivo top.ejs.

bottom.ejs:

Note que no arquivo bottom.ejs também mudamos apenas uma linha que fica bem no começo do arquivo.

Após essa mudança nos arquivos já teremos uma mudança mais perceptível nas páginas já existentes, que terão uma margem maior e estarão centralizadas de outra forma.

A div container que criamos faz a sua página funcionar em um grid-system de 12 colunas, ou seja, o Bootstrap permite que possamos organizar os conteúdos de nossas páginas em 12 blocos que possuem tamanhos iguais. Se você organizar direitinho utilizando o espaço que foi disponibilizado, a sua aplicação web será responsiva, alterando seus conteúdos conforme a tela do aparelho que estiver acessando a mesma precisar.

Espero que essa série de artigos possam ajudar vocês a terem uma noção melhor de como construir uma aplicação web básica utilizando Node.JS, MongoDB, ExpressJS e EJS. Tendo em vista que essa aplicação pode ser usada em vários tipos de serviço diferentes, também aconselho se aprofundar mais um pouco na parte de Bootstrap, pois, o frontend de fato não foi desenvolvido aqui neste artigo, trouxe apenas uma introdução e mostrei como adicionar o Bootstrap na sua aplicação.

Em um próximo artigo, farei a parte de estilização da nossa aplicação para abrir um leque maior de possibilidades e melhor explicar como o Bootstrap pode ser útil realmente. Irei criar o repositório com os código-fonte dessa série que concluímos aqui e disponibilizarei o link para o melhor acompanhamento do conteúdo.

Também trarei esse conteúdo referente ao CRUD em uma outra linguagem na nossa próxima série de artigos, a linguagem JAVA.