
Tutorial – Criando um Backend e um FrontEnd com JavaScript
GitHub BackEnd https://github.com/marcoscaldas/BackEnd.git
GitHub FrontEnd https://github.com/marcoscaldas/FrontEnd.git
Você já pensou em criar uma aplicação completa do zero? Esse é o momento de tirar a ideia do papel e botar a mão na massa! Neste tutorial, vamos explorar juntos como construir um backend poderoso e um frontend interativo utilizando apenas JavaScript. Isso mesmo, você vai aprender a desenvolver as duas partes essenciais de uma aplicação moderna usando a linguagem que domina o mundo web.
Aqui, você não vai só aprender os conceitos teóricos. Vamos direto ao ponto com um passo a passo prático, claro e dinâmico. Desde a criação de um servidor com Node.js, até a montagem de uma interface incrível com HTML, CSS e JavaScript, você estará no controle total do processo.
Prepare-se para conectar suas ideias a um banco de dados, criar rotas, lidar com requisições, e, claro, dar vida ao seu projeto com um design funcional e atraente.
Se você sempre quis entender como front e backend se comunicam, este é o tutorial que vai mudar sua forma de ver o desenvolvimento web.
Instalando os Pacotes
No momento da criação desse tutorial vamos instalar os pacotes a seguir, porém caso ocorra alguma atualização é importante consultar a documentação em www.npmjs.com
- npm init -y
- npm i express
- npm i nodemon -g
- npm i knex
- npm i sqlite3
- npm i cors
Entendendo os Pacotes
O npm init -y é usado para inicializar um projeto Node.js rapidamente, gerando um arquivo package.json com as configurações padrão.
O pacote express, instalado com o comando npm i express, é uma biblioteca popular para criar e gerenciar servidores web no Node.js. Ele simplifica o desenvolvimento de APIs e aplicações web, fornecendo ferramentas para lidar com rotas, requisições HTTP, middleware e muito mais.
O pacote nodemon, instalado com o comando npm i nodemon -g, é uma ferramenta que monitora automaticamente as mudanças no código do seu projeto Node.js. Sempre que você salva uma alteração, ele reinicia o servidor automaticamente, economizando tempo e facilitando o desenvolvimento. A opção -g instala o nodemon globalmente, permitindo que ele seja usado em qualquer projeto do seu sistema.
O pacote knex, instalado com npm i knex, é um query builder para bancos de dados SQL no Node.js. Ele facilita a criação, manipulação e execução de consultas SQL de forma programática, usando JavaScript. Compatível com bancos como MySQL, PostgreSQL, SQLite e outros, o Knex simplifica tarefas como criar tabelas, inserir dados e realizar consultas complexas.
O pacote sqlite3, instalado com npm i sqlite3, é usado para trabalhar com o banco de dados SQLite em aplicações Node.js.
npm i cors
O que é uma requisição CORS?
CORS — Cross Origin Resource Sharing (Compartilhamento de recursos com origens diferentes) é um sistema que utiliza headers adicionais ao tradicionais para determinar as permissões de uma aplicação ao acessar dados de um servidor de origem distinta. Um exemplo de requisição cross-site é quando seu frontend está hospedado em “http://a.com” e a partir dele você precisa pedir alguns dados para sua API que está hospedada em “http://b.com”. Por segurança, os navegadores por padrão bloqueiam esse tipo de requisição iniciado por um script (fetch, axios.get …), isso significa que sua aplicação só poderá fazer solicitações para a API se incluir os cabeçalhos CORS corretos e se o servidor estiver configurado corretamente.
Começando o Desenvolvimento
Vamos criar um arquivo inicial chamado app.js para testar nosso servidor, e depois com os códigos iniciais inseridos vamos rodar o servidor com o comando nodemon app.js
O comando nodemon app.js pode ser somente nodemon app sem o .js
Após rodar o servidor abrir o navegador com o endereço conforme imagem.



Obs: O código fonte encontra-se no meu GitHub e esse passo a passo na criação do servidor encontra-se na documentação do https://expressjs.com/en/starter/hello-world.html
Entendendo o app.Js
No programa app.js é possível observar que cada arrow function associada a uma rota recebe dois parâmetros: req (request) e res (response).
Eles podem receber qualquer nome, mas req e res são os geralmente utilizados.
O parâmetro req contém as informações que são passadas para a rota – por quem a acionou.
Já res refere-se à resposta da rota – como as mensagens exibidas nas duas rotas anteriormente criadas.
Antes do listen() acrescentar o seguinte código:

A linha app.use(express.json()); adiciona um middleware para reconhecer que o formato ‘combinado’ para os dados a serem enviados pelo cliente e recebidos pelo programa no servidor é o JSON.Como se fosse um parse.
Na rota utilizamos o método POST ou VERBO POST.
Rotas com GET podem ser acessadas diretamente no navegador.
As demais podem ser testadas a partir de nossos programas, ou através de softwares como o INSOMNIA ou POSTMAN ou pelo site reqbin.com porém tem que instalar uma extensão no Chrome.

Middlewares
Um middleware é uma espécie de mediador entre duas partes, algo que fica no meio (middle).
Vamos construir um exemplo, para ilustrar uma possível funcionalidade para um middleware. Digamos que os administradores de um sistema gostariam de analisar quantas vezes ou em quais horários determinadas rotas estão sendo acionadas.
Algo como um controle de logs, que poderia registrar ações como transferências financeiras, exclusões ou alterações de dados, por exemplo.
Nesse caso, antes de acionar essas rotas, podemos fazer o sistema passar por um middleware que irá registrar essas ações. Acrescente o seguinte trecho ao app.js.



MIGRATIONS
Para criar a tabela com Migrations instalar o pacote:
npx knex init
Vai ter como resposta Created ./knexfile.js

Editar o arquivo knexfile.js

Criando a Tabela no Banco de Dados
Para criar o arquivo que irá conter a definição da estrutura da tabela de livros, rode o comando:
npx knex migrate:make create_livros

É criado um diretório chamado migrations dentro do diretório data.
No arquivo criado deixar conforme imagem.

Executando npx knex migrate:latest
O comando npx knex migrate:latest
serve para executar as migrações mais recentes em um banco de dados usando o Knex.js, que é uma ferramenta de query builder para bancos de dados SQL no Node.js.
O que ele faz?
- Migrações são scripts que definem alterações no banco de dados, como a criação ou modificação de tabelas, colunas e outros elementos do esquema.
- Ao rodar
npx knex migrate:latest
, o Knex irá:- Verificar se existem migrações pendentes (que ainda não foram aplicadas).
- Executar as migrações não aplicadas na ordem em que foram criadas.
- Atualizar o banco de dados com as mudanças definidas nas migrações.

Seeds: “Semeando ” dados iniciais com npx knex seed:make 001_add_livros

O comando npx knex seed:make 001_add_livros
é usado para criar um novo arquivo de seed no Knex.js. Seeds são scripts que permitem inserir dados iniciais ou de teste no banco de dados.
Neste caso, o comando cria um arquivo de seed chamado 001_add_livros
, que pode ser usado para adicionar registros na tabela livros
(ou outra tabela definida no script). O número 001
geralmente indica a ordem das seeds a serem executadas.
Editar esse arquivo dentro da pasta ./data/seeds

Populando o Banco de Dados com npx knex seed:run
O comando npx knex seed:run
é usado para executar os arquivos de seed no Knex.js. Ele insere os dados definidos nos scripts de seed no banco de dados. Essencialmente, esse comando popula o banco de dados com dados iniciais ou de teste, facilitando a configuração do ambiente de desenvolvimento ou testes.

Criando Conexão com Banco de Dados
O arquivo de configuração criado anteriormente (knexfile.js) serve para definir o driver do banco de dados e parâmetros da conexão utilizados no processo de criação das migrations e seeds da aplicação.
Agora, precisamos criar um arquivo que vai conter esses detalhes de conexão com o banco de dados a serem utilizados pelo programa.
Para isso, crie o arquivo db_config.js dentro da pasta data, e insira as seguintes linhas:

Organizando as Rotas
Na pasta raiz do projeto criar uma arquivo livros.js para organizar a rotas.

Atualizando o app.js
Inserir antes do app.listen a rota para livros com seguinte código:

Acessando a API

CRUD – Create, Read, Update, Delete
Acrescentar ao arquivo livros.js as seguintes linhas:


Adicionando Filtros
Podemos adicionar filtros no arquivo livros.js conforme image:


Importando o CORS
No arquivo livros.js acrescente os códigos das linhas 3 e 4 conforme imagem:

Consumindo a API
Para consumir nossa API podemos criar um documento simples conforme imagem:


CRIANDO O FRONTEND
Instalando os Pacotes
- npx create-react-app front
- npm install web-vitals
- npm i react-hook-form
- npm i axios
- npm i react-router-dom@6
- npm i react-google-charts
Entendendo os Pacotes
O pacote npx create-react-app front é usado para criar um novo projeto React chamado “front”. Ele configura automaticamente a estrutura básica do projeto, instala as dependências necessárias e prepara o ambiente de desenvolvimento, permitindo que você comece a construir sua aplicação React de forma rápida e simples.
O pacote web-vitals é usado para medir e monitorar as principais métricas de desempenho de uma página web, como o tempo de carregamento, a interatividade e a estabilidade visual. Ele ajuda a avaliar a experiência do usuário, fornecendo dados importantes para otimizar o desempenho da aplicação.
O pacote react-hook-form facilita a gestão de formulários em aplicações React, oferecendo uma maneira simples e eficiente de lidar com validação, coleta de dados e controle de estado, sem a necessidade de escrever muito código. Ele melhora a performance ao minimizar o re-render das componentes.
O pacote axios é uma biblioteca para fazer requisições HTTP em JavaScript, tanto no navegador quanto no Node.js. Ele facilita a comunicação com APIs, permitindo enviar e receber dados de forma simples e eficiente, com suporte a Promises e async/await.
O pacote react-router-dom@6 é utilizado para gerenciar navegação e roteamento em aplicações React. Ele permite definir rotas para diferentes componentes e facilitar a navegação entre páginas dentro de uma SPA (Single Page Application), mantendo o histórico de navegação sem recarregar a página.
O pacote react-google-charts permite integrar gráficos do Google Charts em aplicações React. Ele facilita a criação de gráficos interativos e personalizáveis, como barras, linhas e pizza, utilizando os dados da sua aplicação.
Começando o Desenvolvimento
Criar o projeto com o comando npx create-react-app front
Instalar o pacote npm install web-vitals dentro da pasta do projeto front.
Para rodar a aplicação entrar na pasta do projeto e digitar npm start
A primeira vez que rodar a aplicação pode ser que demore um pouco.

Alterar o html da Pasta Public

No arquivo index.js deixar o código conforme imagem.

No arquivo App.js deixar código conforme imagem.

Criando Componentes
Criar uma pasta components dentro de src e criar um arquivo com o nome MenuSuperior.js

Criar um arquivo InclusaoLivros.js na mesma pasta components

Editar o APP.js e depois testar npm start


Ajustar o arquivo InclusaoLivros.js

No return na tag form modificar para:
Dessa forma, indicamos que a função salvar será chamada quando enviar o formulário.
Acrescentar o register para cada campo do formulário.

Rodar um teste e deverá aparecer o alert conforme imagem.

Após o teste comentar as seguintes linhas em InclusaoLivros.js:

Criar na pasta src um arquivo config_axios.js
Esse arquivo cria uma instância Axios com a URL base do Web Service a ser acessado pelo app

Editar InclusaoLivros.js

Foram inseridos os imports

Incluído os códigos da linha 11.

Incluído o bloco do try catch

Mudamos o código <div className=”alert”></div>

COMEÇA AQUI A CRIAÇÃO DE ROTAS
Observamos que a nossa aplicação de front-end possui um menu superior e um formulário. O menu é renderizado a partir do componente MenuSuperior e o formulário, a partir do componente InclusaoLivros.
Queremos agora manter o menu superior e substituir a parte que exibe o formulário por um componente que exiba a listagem de livros ou o resumo do cadastro. Para fazer isso, vamos utilizar o React Router.
Para testar, precisamos criar dois novos componentes.
Podemos acrescentar um conteúdo inicial básico.
Começamos pelo arquivo ManutencaoLivros.js

Em seguida o arquivo ResumoLivros.js (também dentro de components):

Abra o arquivo app.js e deixe igual a imagem:

O último passo é ajustar a tag que cria o link para essas rotas. Elas estão no componente MenuSuperior.js A tag <a href=…> deve ser substituída pela tag <Link to=…>.

Atualizar Manutenção Livros

Esse componente renderiza um campo de formulário, a ser utilizado para a pesquisa de dados e o cabeçalho de uma tabela. A exibição de cada item na tabela fica a cargo de um novo componente: ItemLista.
Vamos criar este arquivo ItemLista.js, também na pasta components.

Criar o arquivo ItemLista.css dentro das pasta components.

EXCLUSÃO DE ITEM E ALTERAÇÃO DE VALOR
Alterar o ItemLista.js para exclusão ou alteração do item.

ManutencaoLivros.js
Acrescentar o import do React Hook Form.

O próximo passo é indicar os métodos do React Hook Form a serem utilizados. Dentro da arrow function ManutencaoLivros, insira a linha: const { register, handleSubmit, reset } = useForm();

Em seguida, edite a linha do form: <form onSubmit={handleSubmit(filtrarLista)}> , acrescentar o register no campo de formulário e chamar o evento no button com value Todos.

Agora criar as funções do CRUD
Altear o ManutencaoLivros.js e inserir antes do return o código a seguir:

No tbody fazer a chamada das funções:

Atualizar o ResumoLivros.js


Agora temos um BackEnd e um FrontEnd totalmente funcional claro que em escala reduzida de funcionalidades.





2 Comments
DAVI DA SILVA OLIVEIRA
Estou impressionado com o conteúdo produzido pelo professor Marcos. Fantástico! Obrigado e GRATIDÃO.
Marcos
Fico feliz em poder ajudar Davi, bons estudos e sucesso!