0

Projeto para portfólio -> Consumindo dados do front

Leonardo Demetrio
Leonardo Demetrio

Fala galera, tudo bem ?


Hoje eu vou mostrar um projeto que vocês podem fazer para o portfólio de vocês !


Vamos construir um backend NodeJs que consome os dados de um formulário do frontend. Depois vamos salvar esses dados em um arquivo JSON e puxar eles em uma tabela.

Neste caso não usarei um banco de dados para persistir os dados, dessa forma acredito que todo mundo possa fazer o projeto.


1 - montando a estrutura do projeto.


2 - Fazendo o arquivo index.html


<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/css/form.css">
   
    <title>Document</title>
</head>


Veja que eu importei o form.css ali em cima


<body>
   <div class="container">
      <h1>Formulário</h1>

         <form action="" method="POST" id="formulario">
               <div class="container__NomeSenha">
                  <div>
                      <label for="name">Nome completo</label>
                      <input type="text" name="Nome" id="name">
                   </div>
                   <div class="age">
                     <label for="idade">Idade</label>
                     <input type="number" name="Idade" id="idade" >
                   </div>
                </div>
                <hr>
                  <label for="cep">CEP</label>
                  <input type="number" name="CEP" id="cep">

                  <label for="">Sobre você</label>
                  <textarea name="Biografia" cols="30" rows="2"> </textarea>

               <div>
                   <input type="radio" name="tipo" value="FrontEnd"> FrontEnd <br>
                   <input type="radio" name="tipo" value="BackEnd"> BackEnd <br>
                   <input type="radio" name="tipo" value="DevOps"> DevOps <br>
                   <input type="radio" name="tipo" value="FullStack"> FullStack<br>
              </div>
                <hr>


                 <p>Qual o tipo de oportunidade você prefere ? </p>
              <div>
            <input type="checkbox" name="trabalho" value="presencial">Presencial
            <input type="checkbox" name="trabalho" value="Remoto" > Remoto
                </div>

                <select name="Estado" >
                    <option value="ac">ACRE</option>
                    <option value="ba">BAHIA</option>
                    <option value="SP">SÃO PAULO</option>
                </select>


                <button>Incluir</button>
            </form>
        </div>
</body>

Se preferir, basta copiar e colar o código acima


na TAG <FORM > existe um componente chamado ACTION ="" que iremos utilizar depois


Por fim fechamos o HTML com a tag

</html>


No final, vocês terão algo +- assim


3 - Configurando o CSS - arquivo form.css


vamos primeiro resetar nosso arquivo CSS


O * significa todos os componentes, eles vão receber um padding e margin 0, um box sizing do tipo border-box, a cor das letras branca e a família de fonte padrão.


Vamos adicionar alguns comportamentos padrões para os imputs, textarea e select



Agora vamos estilizar o nosso títluo h1 e o body da página



Vamos selecionar a classe container e passar algumas propriedades para ela, o mesmo para a tag <label> e <p>



Por fim, vamos estilizar a classe .container__nomeSenha e seus filhos.


Se tudo der certo, você terá algo +- assim :



4 - Agora vamos para a parte que interessa, vamos criar o nosso servidor.


Para isso, vocês devem ter o Node instalado no seu computador.



se você tiver o git bash instalado na sua máquina, vá até a pasta do arquivo server.js, clique com botão direito em qualquer lugar e seleciona git bash here. O Git Bash irá abrir e você poderá instalar as dependências do Node por lá



Se preferir, você pode usar o terminal do VS Code também, é só navegar até a pasta server com os comandos cd do terminal.



se você estiver no git bash ou no Vs Code e digitar o comado:

dir

vocês poderam ver o arquivo server.js na pasta


Ok, agora vamos lá. No meu caso eu vou fazer no Git bash, mas você pode fazer no VsCode


vamos digita os seguintes comandos

1º - npm init -y e dar enter
2º - npm i --save express@4.16.3 body-parser@1.18.2 -E e dar enter

Use as mesmas configurações que eu estou utilizando do express


Configurando o arquivo server.js


No arquivo JavaScript vamos criar 4 variáveis

1º requerindo o express que instalamos com o npm

2º executando a função do express dentro de um tabela

o mesmo para o body-parser e temos o 'fs' que é o sistema de leitura e escrita do javascript.



const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const fs = require('fs');


vamos começar criando as entradas para o servidor

em app.post estamos passando uma '/', ou seja, caso o usuário entre em http://localhost:8080/ quem vai escutar é esse app.post


o mesmo vai para app.get, caso o navegador entre em http://localhost:8080/getAtributes , quem vai pegar esse endereço é o app.get.




Agora vamos adicionar mais umas linhas de código, agora referente a leitura e escrita.



Em baixo do nosso console.log, vamos adicionar esse código, com ele nós vamos escrever os dados inseridos no nosso arquivo JSON. A função WriteFile irá escrever os dados e a função readFile ira ler os dados do arquivo.



Aqui está o código completo


const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const fs = require('fs');

app.use(bodyParser.urlencoded({extended:true}));

console.log('conectado');

fs.access('../data/items.json', fs.constants.F_OK, (err) => {
    console.log(err ? 'Arquivo items.json não existe' : '');
});


const readFile = () => {
    const atual = fs.readFileSync('../data/items.json', 'utf-8');
    return atual == '' ? [] : JSON.parse(atual);
}

const writeFile = (arrayElemet) => {
    const currentData = readFile();
    currentData.push(arrayElemet);
    const updateFile = JSON.stringify(currentData);
    fs.writeFileSync('../data/items.json', updateFile,'utf-8')
}

app.post('/',(req, resp) => {
    
    writeFile(req.body);
    console.log(req.body);
    resp.send('<h1>Parabéns</h1>');  
});
  
app.get('/getAtributes', (req,resp)=>{
    resp.send(readFile()); 
})

app.listen(3003);


Neste caso, ele está ouvindo na porta 3003, ou seja, http://localhost:3003. Se no seu computador a porta 3003 estiver ocupada, basta mudar ela em app.listen()


Agora vamos criar uma nova pasta dentro de Assets chamada data e nela vamos criar um arquivo chamado items.json. Esse arquivo irá conter nossos dados, iremos simular nele um banco não relácional.




5 - Agora vamos testar nossa aplicação


Com o terminal na pasta do arquivo server.js, vamos digitar o comando:

node server.js


No arquivo index.html, vamos passar o valor http://localhost:3003/ no campo action


Agora vamos testar, para testar vamos usar o live server do vs code


No arquivo index.html vamos escolher a opção Open with Live Server.


Caso não tenha, baixe a estenção na parte de estenções e reinicie o VScode



Preencha com alguns dados e clique em incluir:



Se tudo der certo, você vai ver as seguintes informações, será passado um JSON e uma tela de parabéns irá aparecer que foi passada com H1 dentro do arquivo server.js



Se olharmos o arquivo items.js, terá a seguinte informação lá

Veja que ele gravou os dados no arquivo.



6 - Configurando os arquivos da tabela


No arquivo tabela.html vamos criar o seguinte código:

<!DOCTYPE html>
    <html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./css/tabela.css">
        <title>Tabela</title>
    </head>
    <body>
        <div class="container">
            <table id="tabelaInscritos" >
                <caption>Inscritos</caption>
            </table>
        </div>



        <script src="./script/tabela.js" ></script>
    </body>
</html>


Vejam que na tag <table>, não há nada além do Caption, isso é porque vamos deixar o JavaScript popular a tabela.


Agora vamos configurar o arquivo tabela.css


Vamos fazer o reset dos componentes e configurar o body


Agora vamos configurar a classe contaienr e a caption


Por fim, vamos configurar as tagas tbody e thead



Se tudo der certo, vamos ter o seguinte resultado:



7 - Configurando o JavaScript


Agora vamos fazer a última parte de configurar o arquivo tabela.js


Para esse script, vamos criar uma funciton que terá uma fetch dentro que vai ficar fazendo requisições no /getAtributes


A função cria tag é chamada devolvendo uma tag nova para que não haja reaproveitamento, dessa forma elimina certos bugs.


A função populaHead, imprime na tabela o cabeçalho com os respectivos elementos do JSON


Logo abaixo, vamos criar a função populaTabela que será responsável por jogar os dados na tabela e por fim a função fetch que será responsável por fazer requisições no endereço de IP informado.



Por fim , temos que chamar a função.



Código tabela.js :


const fetchTeste = () => {
    const path = 'http://localhost:3003/getAtributes';
    let teste = [];
    
    
    const criate = (e) => {
        return document.createElement(e);
    }

    function populaHead(keys){
        const th = criate('thead');
        const row = criate('tr');
        keys.forEach(e => {
            row.innerHTML += `<th>${e}</th>`;
        });
        th.appendChild(row);
        return th;
    }

    
    function populaTabela(array){
        const tb = criate ('tbody');
        for(let i = 0; i < array.length; i++){
            const row = criate('tr');
            Object.values(array[i]).forEach(e => {
                  row.innerHTML += `<td>${e}</td>`;
            });

            tb.appendChild(row);

        }
        console.log(tb);
        return tb;
        
    }


    fetch(path).then(response => response.json()).then(e => {
        const table = document.querySelector('#tabelaInscritos');
        const keysObject = Object.keys(e[0]); // pega os nomes das keys
        console.log(Object.keys(e))
        table.appendChild(populaHead(keysObject));
        table.appendChild(populaTabela(e));
        
       
        
    });
    

}

fetchTeste();


Nós fizemos uma inserção de dados lá em cima no primero teste.



Se rodarmos a tabela e o formulário com o liveServer para não termos erro de CORS


Caso você tenha esse erro na aba desenvolvedor do navegador e o liveServer não funcionar para tira-lo, você pode baixar uma extenção para remover o CORS, no firefox temos a CORS Everywhere

Lembrando que o CORS é uma medida de segurança do navegador, ok?


Agora temos os dados na tabela


Os dados estão sendo inseridos no formulário, armazenados no arquivo JSON (nosso banco de dados) e sendo mostrados na tabela




Bom galera espero que tenham gostado e conseguido, qualquer dúvida podem comentar aqui.


github do projeto : https://github.com/leovd100/Projeto-sistema-de-cadastro-HTML-CSS-JS-e-NODEJS


Fiquem com Deus e até a próxima!

0
0

Comentários (2)

1
Cleferson Santos

Cleferson Santos

23/05/2021 01:38

Muito top,mano.

1
Paulo Junior

Paulo Junior

23/05/2021 10:10

Parabéns, muito bom!

Analista de sistemas. Sou apaixonado por tecnologia, marketing e games

Brasil