Neste artigo, começaremos a criar um sistema de login básico utilizando JavaScript. Utilizaremos a ferramenta NodeJS para criar o BackEnd. Utilizaremos as dependências Express, que realiza a parte middleware de nossa aplicação; EJS, para gerar os templates HTML e Nodemon + dotenv, que atualiza a nossa aplicação ao alterar os arquivos.
Então vamos lá:
Para inicializar o projeto, crie uma pasta com o nome Nodejs_Login. Abra essa pasta com o Visual Studio Code ou com seu editor favorito. No terminal, iniciaremos a aplicação com o comando:
npm init
Pressione enter até terminar de configurar o package.json. Não entraremos nos detalhes de configuração do arquivo package.json.
Para instalar as dependências, utilize os seguintes comandos:
npm i express ejs
Para instalar o nodemon e o dotenv:
npm i –save-dev nodemon dotenv
Agora, crie um arquivo chamado .env, que conterá as nossas variáveis de ambiente que poderemos carregar no nosso servidor. Crie também um arquivo chamado .gitignore, que ignora arquivos, não comprometendo nosso ambiente.
Dentro do arquivo .gitignore, adicione:
.env node_modules
Fazemos isso pois esses arquivos possuem informações confidenciais, que não poderão er compartilhadas.
Dentro do seu package.json, criaremos um script chamado devStart que conterá o nodemon server.js. Isso fará nosso atualizar a cada vez que alterarmos algo no nosso código.
"scripts": {
"devStart": "nodemon server.js"
}
Começaremos agora a criar o nosso sistema de login!
Crie um arquivo chamado server.js. Esse arquivo conterá o código que iniciará o servidor. Precisamos importar o express:
const express = require('express');
const app = express();
app.set('view-engine', 'ejs');
app.get('/', (req, res) => {
res.render('index.ejs', {nome: 'João'});
})
app.listen(3000);
Dentro da sua pasta principal, crie uma subpasta chamada views e, dentro dela, um arquivo chamado index.ejs. Esse arquivo conterá o seguinte código:
<h1>Olá <%= nome %></h1>
Você perceberá que chamamos esse index.ejs no nosso server.js. Agora, via terminal, execute o comando npm run devStart para iniciar o servidor. Você verá um texto “Olá João” no seu navegador.
Criaremos agora, dentro da pasta view, um arquivo chamado login.ejs e um arquivo chamado registro.ejs, que conterão as nossas telas de login e registro, respectivamente.
No nosso arquivo server.js, adicione o código para chamada das telas:
app.get('/login', (req, res) => {
res.render('login.ejs');
})
app.get('/registro', (req, res) => {
res.render('registro.ejs');
})
No arquivo login.ejs, adicionaremos o texto: Login. Faça o mesmo no arquivo registro.ejs, adicionando o texto: Registro.
No seu navegador, coloque a url para acessar a página de login:
localhost:3000/login
Faça o mesmo para a página de registro:
localhost:3000/registro
E com isso, configuramos o nosso ambiente. Gostou deste artigo? Comente abaixo!