Desenvolvimento com o Framework Node js

Prévia do material em texto

<p>UNIVERSIDADE PITÁGORAS UNOPAR ANHANGUERA</p><p>CURSO</p><p>NOME</p><p>ATIVIDADE PRÁTICA</p><p>DESENVOLVIMENTO COM FRAMEWORK NODE.JS</p><p>CIDADE</p><p>ANO</p><p>NOME</p><p>ATIVIDADE PRÁTICA</p><p>DESENVOLVIMENTO COM FRAMEWORK NODE.JS</p><p>Trabalho apresentado à Universidade, como requisito parcial para a obtenção de média semestral nas disciplinas norteadoras do semestre letivo.</p><p>Tutor (a): INSERIR NOME</p><p>CIDADE</p><p>ANO</p><p>SUMÁRIO</p><p>INTRODUÇÃO	3</p><p>MÉTODOS E RESULTADOS	4</p><p>CONCLUSÃO	5</p><p>REFERÊNCIAS BIBLIOGRÁFICAS	6</p><p>INTRODUÇÃO</p><p>Este portfólio de aula prática em Desenvolvimento com o Framework Node.js abrange atividades fundamentais para o aprendizado e aplicação de conceitos essenciais no desenvolvimento de servidores web e validação de dados. O portfólio inclui quatro atividades práticas que exploram desde a criação de um servidor HTTP básico até a implementação de testes de integração, consolidando o uso do Node.js em diversas etapas do desenvolvimento de software.</p><p>A primeira atividade envolve a criação de um servidor HTTP capaz de responder a quatro tipos de requisições distintas: "/", "/sobre", "/contato" e qualquer outra rota, retornando "Página não encontrada" para as rotas não definidas. O principal objetivo desta tarefa é fornecer uma base sólida para o funcionamento de servidores web, fundamentais para aplicações de diversas naturezas.</p><p>A segunda atividade concentra-se na configuração de um ambiente de testes para uma aplicação Node.js, utilizando o framework Mocha. Através da implementação e teste de uma função simples de soma, o foco é oferecer uma experiência prática em testes automatizados, ressaltando a importância de garantir a qualidade e a confiabilidade do código desenvolvido.</p><p>Na terceira atividade, o desafio está na criação de uma aplicação web de validação de CPF, utilizando tecnologias front-end como HTML5, CSS3 e JavaScript, com suporte no back-end através do Node.js. A validação de dados é um aspecto crítico em sistemas que envolvem formulários, especialmente em ambientes web, onde a segurança e a precisão dos dados são primordiais.</p><p>Por fim, a última atividade explora a implementação de testes de integração para verificar o funcionamento correto das rotas do servidor HTTP. Para isso, o portfólio utiliza o Mocha e a biblioteca Chai para realizar asserções, consolidando o aprendizado sobre como testar a integridade e o desempenho de uma aplicação Node.js.</p><p>Este portfólio oferece uma visão abrangente das etapas e ferramentas envolvidas no desenvolvimento com Node.js, proporcionando uma base prática para a construção de aplicações web eficientes e robustas.</p><p>MÉTODOS E RESULTADOS</p><p>Atividade 1 – Fundamentos do NODE.JS</p><p>O objetivo desta atividade foi desenvolver um servidor HTTP básico utilizando apenas módulos nativos do Node.js, com o intuito de compreender o processo de instalação, configuração e execução de um servidor web. A atividade também visa familiarizar-se com o ambiente de desenvolvimento Node.js e a execução de scripts JavaScript no servidor.</p><p>1. Procedimentos</p><p>1.1. Inicialização do Projeto Node.js</p><p>O primeiro passo da atividade consistiu em criar um novo projeto Node.js. Para isso, foi necessário criar uma pasta destinada ao projeto, onde seria armazenado todo o código desenvolvido. A navegação até essa pasta foi realizada via terminal. Uma vez dentro do diretório, utilizou-se o comando npm init -y para inicializar o projeto e gerar automaticamente o arquivo package.json, que contém as configurações básicas do projeto.</p><p>1.2. Instalação de Dependências</p><p>Como a atividade não requeria o uso de bibliotecas ou pacotes adicionais, apenas os módulos nativos do Node.js foram empregados. Não foi necessário instalar pacotes como express ou outros servidores HTTP pré-configurados, pois o foco era construir a aplicação de forma mais próxima da estrutura básica do Node.js.</p><p>1.3. Criação do Arquivo ‘servidor.js’</p><p>Na raiz do projeto, foi criado um arquivo denominado servidor.js, que seria responsável por armazenar o código do servidor. O código utilizado para a implementação do servidor foi escrito manualmente, e a lógica básica consistiu em importar o módulo nativo http do Node.js e utilizá-lo para criar um servidor HTTP. O servidor foi configurado para escutar na porta 3000 e responder a qualquer requisição com uma mensagem simples.</p><p>const http = require('http');</p><p>const servidor = http.createServer((req, res) => {</p><p>res.statusCode = 200;</p><p>res.setHeader('Content-Type', 'text/plain');</p><p>res.end('Servidor HTTP Node.js está funcionando!\n');</p><p>});</p><p>const porta = 3000;</p><p>servidor.listen(porta, () => {</p><p>console.log(`Servidor rodando em http://localhost:${porta}/`);</p><p>});</p><p>1.4. Execução do Código</p><p>Após a construção do código no arquivo servidor.js, foi necessário testar a aplicação. Para isso, dentro do VSCode, o terminal foi aberto utilizando a opção "New Terminal" no menu "Terminal". Com o terminal aberto, o servidor foi iniciado com o comando node servidor.js, que executa o arquivo criado.</p><p>1.5. Verificação do Funcionamento do Servidor</p><p>Uma vez que o comando node servidor.js foi executado, o servidor começou a escutar as requisições HTTP na porta 3000. A mensagem "Servidor rodando em http://localhost:3000/" foi exibida no terminal, confirmando que o servidor estava em execução. Para testar o servidor, abriu-se o navegador e acessou-se o endereço http://localhost:3000. O navegador exibiu a mensagem "Servidor HTTP Node.js está funcionando!", validando que o servidor estava funcionando corretamente e respondendo às requisições.</p><p>Atividade 2 - Testando e Depurando Aplicações Node.Js</p><p>O objetivo desta atividade foi implementar um ambiente de testes automatizados utilizando o Mocha, um framework de testes JavaScript, para garantir o funcionamento correto de funções matemáticas simples. A atividade visa compreender o ciclo de desenvolvimento baseado em testes, que envolve a criação de funções, escrita de testes e a execução automatizada desses testes.</p><p>1. Procedimentos</p><p>1.1. Configuração do Projeto</p><p>O primeiro passo foi a criação de um novo diretório para o projeto. No terminal, navegou-se até a pasta onde o projeto seria armazenado e criou-se um novo diretório específico para a atividade. Uma vez no diretório, o comando npm init -y foi executado para inicializar o projeto Node.js, criando o arquivo package.json com as configurações básicas do projeto.</p><p>1.2. Instalação do Mocha</p><p>Para permitir a escrita e execução de testes automatizados, o Mocha foi instalado como uma dependência de desenvolvimento no projeto. A instalação foi realizada com o comando npm install mocha --save-dev, que incluiu o Mocha no package.json e disponibilizou suas funcionalidades para os testes.</p><p>1.3. Criação das Funções</p><p>Com o projeto configurado, o próximo passo foi a criação do arquivo math.js, onde foram implementadas algumas funções matemáticas simples, como soma, subtração, multiplicação e divisão. Este arquivo seria o foco dos testes subsequentes. O código foi escrito de forma clara e modular, facilitando a integração dos testes.</p><p>Exemplo de funções no arquivo math.js:</p><p>function soma(a, b) {</p><p>return a + b;</p><p>}</p><p>function subtracao(a, b) {</p><p>return a - b;</p><p>}</p><p>function multiplicacao(a, b) {</p><p>return a * b;</p><p>}</p><p>function divisao(a, b) {</p><p>if (b === 0) throw new Error("Divisão por zero não é permitida");</p><p>return a / b;</p><p>}</p><p>module.exports = { soma, subtracao, multiplicacao, divisao };</p><p>1.4. Escrevendo Testes com Mocha</p><p>Para testar as funções do arquivo math.js, foi criado um diretório chamado test na raiz do projeto. Dentro desse diretório, o arquivo math.test.js foi criado para implementar os testes unitários utilizando Mocha. As funções de teste verificaram se as operações matemáticas retornavam os valores esperados em diferentes cenários, incluindo casos normais e casos de erro, como a divisão por zero.</p><p>Exemplo de testes no arquivo math.test.js:</p><p>const assert = require('assert');</p><p>const math = require('../math');</p><p>describe('Funções de Matemática', () => {</p><p>it('Deve somar dois números', () => {</p><p>assert.strictEqual(math.soma(2,</p><p>3), 5);</p><p>});</p><p>it('Deve subtrair dois números', () => {</p><p>assert.strictEqual(math.subtracao(5, 3), 2);</p><p>});</p><p>it('Deve multiplicar dois números', () => {</p><p>assert.strictEqual(math.multiplicacao(4, 3), 12);</p><p>});</p><p>it('Deve dividir dois números', () => {</p><p>assert.strictEqual(math.divisao(9, 3), 3);</p><p>});</p><p>it('Deve lançar erro ao dividir por zero', () => {</p><p>assert.throws(() => { math.divisao(9, 0); }, /Divisão por zero não é permitida/);</p><p>});</p><p>});</p><p>1.5. Executando os testes</p><p>Para facilitar a execução dos testes, um script de teste foi adicionado ao arquivo package.json no seguinte formato:</p><p>"scripts": {</p><p>"test": "mocha"</p><p>}</p><p>Com essa configuração, os testes foram executados no terminal com o comando npm test, que rodou o Mocha e verificou todas as funções do arquivo math.js. O Mocha forneceu um relatório detalhado indicando quais testes passaram e, em caso de falhas, forneceu informações úteis para depuração.</p><p>1.6. Documentação e entrega</p><p>Após a execução bem-sucedida dos testes, a última etapa da atividade consistiu na documentação do processo e na entrega do código e dos resultados dos testes. O código foi revisado para garantir que estivesse claro e bem documentado, e todas as etapas realizadas foram descritas de forma detalhada para compor este relatório.</p><p>Atividade 3 - Desenvolvimento de Interfaces de Usuário com Node.Js</p><p>O objetivo desta atividade foi desenvolver uma aplicação web simples que valida números de CPF (Cadastro de Pessoas Físicas), utilizando as linguagens HTML, CSS e JavaScript. A aplicação consiste em um formulário HTML para a inserção de um número de CPF, estilizado com CSS3, e um código em JavaScript responsável por validar se o CPF inserido é válido de acordo com as regras de validação desse documento.</p><p>1. Procedimento</p><p>1.1. Configuração do projeto</p><p>O primeiro passo foi a criação de uma nova pasta para abrigar os arquivos do projeto. No terminal, navegou-se até o local onde a pasta seria criada, e foi dado um nome significativo ao diretório, como "ValidadorCPF". Essa pasta conteria os arquivos HTML, CSS e JavaScript necessários para a construção e funcionamento da aplicação.</p><p>1.2. Criação dos arquivos do projeto</p><p>Dentro da pasta criada, foram gerados três arquivos principais:</p><p>· cpf.html: arquivo responsável pela estrutura da página e pela criação do formulário de inserção de CPF.</p><p>· cpf.css: arquivo que contém o estilo da página, aplicando formatação visual ao formulário.</p><p>· cpf.js: arquivo JavaScript que contém a lógica de validação do CPF.</p><p>1.3. Escrevendo os códigos em cada arquivo</p><p>· HTML (cpf.html): No arquivo HTML, foi criado um formulário simples contendo um único campo para a inserção do número de CPF. O código HTML também incluiu um botão para submeter o formulário e uma área para exibir mensagens de erro ou sucesso após a validação.</p><p>Exemplo de código HTML:</p><p>Validador de CPF</p><p>Validador de CPF</p><p>Digite seu CPF:</p><p>Validar</p><p>· CSS (cpf.css): O arquivo CSS foi utilizado para estilizar o formulário, com foco na organização e na responsividade. Foram aplicados estilos ao botão de validação, aos campos de entrada de dados e às mensagens de erro ou sucesso, proporcionando uma interface amigável ao usuário.</p><p>Exemplo de código CSS:</p><p>body {</p><p>font-family: Arial, sans-serif;</p><p>background-color: #f4f4f4;</p><p>}</p><p>.container {</p><p>width: 300px;</p><p>margin: 0 auto;</p><p>padding: 20px;</p><p>background-color: white;</p><p>box-shadow: 0px 0px 10px 0px #ccc;</p><p>text-align: center;</p><p>}</p><p>input, button {</p><p>width: 100%;</p><p>padding: 10px;</p><p>margin: 10px 0;</p><p>border: 1px solid #ccc;</p><p>border-radius: 4px;</p><p>}</p><p>button {</p><p>background-color: #28a745;</p><p>color: white;</p><p>cursor: pointer;</p><p>}</p><p>button:hover {</p><p>background-color: #218838;</p><p>}</p><p>#message {</p><p>margin-top: 10px;</p><p>font-weight: bold;</p><p>}</p><p>· JavaScript (cpf.js): O arquivo cpf.js contém a lógica responsável por validar o CPF inserido. A validação verifica se o CPF é composto por 11 dígitos e aplica as regras de cálculo dos dígitos verificadores. Se o CPF for inválido, o código exibe uma mensagem de erro; caso contrário, exibe uma mensagem de sucesso.</p><p>Exemplo de código JavaScript:</p><p>document.getElementById('cpfForm').addEventListener('submit', function(event) {</p><p>event.preventDefault();</p><p>const cpf = document.getElementById('cpf').value;</p><p>const message = document.getElementById('message');</p><p>if (validarCPF(cpf)) {</p><p>message.textContent = "CPF válido!";</p><p>message.style.color = "green";</p><p>} else {</p><p>message.textContent = "CPF inválido.";</p><p>message.style.color = "red";</p><p>}</p><p>});</p><p>function validarCPF(cpf) {</p><p>if (cpf.length !== 11 || isNaN(cpf)) {</p><p>return false;</p><p>}</p><p>let soma = 0;</p><p>let resto;</p><p>for (let i = 1; i {</p><p>res.send('Hello World');</p><p>});</p><p>app.post('/data', (req, res) => {</p><p>const data =</p><p>req.body;</p><p>res.json({ ...data, message: 'Success' });</p><p>});</p><p>app.listen(3000, () => {</p><p>console.log('Servidor rodando na porta 3000');</p><p>});</p><p>3. Estrutura do projeto</p><p>Além do servidor HTTP, criei o arquivo math.js para implementar funções simples de matemática, como soma e subtração, que foram testadas posteriormente. Este arquivo foi necessário para incluir uma lógica básica que pudesse ser testada, além das rotas já implementadas no servidor.</p><p>function soma(a, b) {</p><p>return a + b;</p><p>}</p><p>function subtracao(a, b) {</p><p>return a - b;</p><p>}</p><p>module.exports = { soma, subtracao };</p><p>4. Escrever testes de integração</p><p>No diretório test, criei o arquivo integration.test.js para escrever os testes de integração. Utilizei o Mocha como framework de testes e o Chai para asserções, além do chai-http para enviar requisições HTTP para as rotas do servidor.</p><p>Os testes incluíram:</p><p>· Validação da rota GET /, verificando se retornava "Hello World".</p><p>· Validação da rota POST /data, garantindo que retornava o JSON enviado com a adição da mensagem de sucesso.</p><p>· Testes das funções de matemática implementadas no arquivo math.js.</p><p>O código dos testes foi o seguinte:</p><p>const chai = require('chai');</p><p>const chaiHttp = require('chai-http');</p><p>const server = require('../server');</p><p>const { soma, subtracao } = require('../math');</p><p>const { expect } = chai;</p><p>chai.use(chaiHttp);</p><p>describe('Testes de Integração', () => {</p><p>it('Deve retornar Hello World na rota GET /', (done) => {</p><p>chai.request(server)</p><p>.get('/')</p><p>.end((err, res) => {</p><p>expect(res).to.have.status(200);</p><p>expect(res.text).to.equal('Hello World');</p><p>done();</p><p>});</p><p>});</p><p>it('Deve retornar o JSON enviado com a mensagem de sucesso na rota POST /data', (done) => {</p><p>const data = { name: 'Test' };</p><p>chai.request(server)</p><p>.post('/data')</p><p>.send(data)</p><p>.end((err, res) => {</p><p>expect(res).to.have.status(200);</p><p>expect(res.body).to.include({ name: 'Test', message: 'Success' });</p><p>done();</p><p>});</p><p>});</p><p>it('Deve retornar a soma correta', () => {</p><p>const resultado = soma(2, 3);</p><p>expect(resultado).to.equal(5);</p><p>});</p><p>it('Deve retornar a subtração correta', () => {</p><p>const resultado = subtracao(5, 3);</p><p>expect(resultado).to.equal(2);</p><p>});</p><p>});</p><p>5. Executar os testes</p><p>Após escrever os testes, adicionei um script no arquivo package.json para facilitar a execução dos testes com o comando npm test. O script configurado foi o seguinte:</p><p>"scripts": {</p><p>"test": "mocha"</p><p>}</p><p>Executei os testes com o comando npm test e confirmei que todos os testes passaram com sucesso, indicando que o servidor estava funcionando corretamente e as funções de matemática implementadas retornavam os resultados esperados.</p><p>6. Documentação e entrega</p><p>Por fim, documentei todas as etapas realizadas e organizei os arquivos e pastas do projeto para entrega. A execução dos testes de integração foi fundamental para validar o comportamento das rotas e garantir a qualidade da aplicação desenvolvida.</p><p>CONCLUSÃO</p><p>A realização deste portfólio de aula prática em Desenvolvimento com o Framework Node.js permitiu consolidar conhecimentos fundamentais no desenvolvimento de servidores web, validação de dados e implementação de testes automatizados. Ao longo das quatro atividades, foi possível aplicar e aprofundar conceitos essenciais na criação e manutenção de aplicações web, evidenciando a versatilidade e a eficiência do Node.js em diversos contextos de desenvolvimento.</p><p>A criação de um servidor HTTP básico, na primeira atividade, forneceu uma base sólida para o entendimento da estrutura de servidores web, destacando a importância de gerenciar rotas e respostas adequadas em aplicações modernas. Esta etapa foi crucial para compreender o funcionamento do Node.js em um cenário real de desenvolvimento backend, além de reforçar a importância de construir servidores estáveis e escaláveis.</p><p>Na segunda atividade, a configuração de um ambiente de testes automatizados, utilizando Mocha, introduziu a prática de garantir a qualidade e a confiabilidade do código desde o início do ciclo de desenvolvimento. A implementação de uma função simples de soma e seus respectivos testes foi um exercício valioso para entender como o uso de frameworks de testes contribui para um desenvolvimento mais seguro e eficiente, reduzindo a incidência de erros em produção.</p><p>A terceira atividade, voltada para a validação de CPF em um formulário web, abordou um aspecto crítico em aplicações que envolvem o processamento e a segurança de dados de usuários. A integração entre as tecnologias front-end (HTML5, CSS3 e JavaScript) e o Node.js no backend destacou a importância de desenvolver aplicações web que garantam tanto a experiência do usuário quanto a integridade dos dados.</p><p>Por fim, a implementação de testes de integração na última atividade consolidou o aprendizado sobre como verificar a integridade de uma aplicação Node.js. A utilização do Mocha e da biblioteca Chai para testar o comportamento das rotas foi essencial para reforçar a importância dos testes na garantia do funcionamento correto e desempenho do sistema.</p><p>De forma geral, este portfólio proporcionou uma experiência prática completa, permitindo aplicar, de maneira estruturada, conceitos teóricos em cenários reais de desenvolvimento. O uso do Node.js, em conjunto com ferramentas de teste e tecnologias front-end, demonstrou como é possível construir aplicações web robustas, escaláveis e seguras, formando uma base sólida para o desenvolvimento contínuo de sistemas mais complexos no futuro.</p><p>REFERÊNCIAS BIBLIOGRÁFICAS</p><p>DIGITALOCEAN. How to create a web server in Node.js with the HTTP module. Disponível em: https://www.digitalocean.com/community/tutorials/how-to-create-a-web-server-in-node-js-withthe-http-module-pt.</p><p>MEDIUM. Testes de integração para aplicações Node.js com Mocha e Chai. Medium, [s.d.]. Disponível em: https://medium.com/desenvolvimento-com-node-js/testes-deintegra%C3%A7%C3%A3o-para-aplica%C3%A7%C3%B5es-node-js-com-mocha-e-chai610a1ba15e1b.</p><p>DEVMEDIA. Validar CPF com JavaScript. Disponível em: https://www.devmedia.com.br/validarcpf-com-javascript/23916.</p><p>MEDIUM. Testes de integração para aplicações Node.js com Mocha e Chai. Disponível em: https://medium.com/desenvolvimento-com-node-js/testes-de-integra%C3%A7%C3%A3o-paraaplica%C3%A7%C3%B5es-node-js-com-mocha-e-chai-610a1ba15e1b.</p><p>21</p>