Prévia do material em texto

NOME: SAMUEL POTTER BARBOSA
RA: 3853759205 
PORTIFÓLIO – RELATÓRIO DE AULA PRÁTICA
 DISCIPLINA: FRAMEWORKS PARA DESENVOLVIMENTO DE SOFTWARE
 
Sumário
 INTRODUÇÃO ...........................................................................….. 3
 DESENVOLVIMENTO...............................................................….... 4
 MÉTODOS E RESULTADOS………….....................................… 4-16
 CONCLUSÃO ................................................................................ 17
 
 
INTRODUÇÃO 
Este conjunto de atividades buscou consolidar o aprendizado teórico através da prática. O 
desenvolvimento foi realizado utilizando o ecossistema Java (JDK, NetBeans e Tomcat), o que
permitiu criar um ambiente de trabalho ágil e eficiente.
O trabalho consistiu em:
• Configuração: Instalação e preparação de todas as ferramentas necessárias 
conforme o roteiro.
• Desenvolvimento de Formulários: Criação de uma interface de cadastro de 
endereços contendo todos os campos essenciais (CEP, logradouro, bairro, 
etc.).
• Integração de Dados: Implementação de formulários de cadastro completo, 
unindo as informações de endereço aos dados de identificação, como nome e
sobrenome."
 
DESENVOLVIMENTO
MÉTODO E RESULTADOS
Atividade 1: Configuração do Ambiente e Criação do Projeto
A etapa inicial do desenvolvimento focou na estruturação do ambiente de trabalho necessário 
para aplicações Java Web. O processo seguiu os seguintes passos:
• Preparação do Software: Primeiramente, realizei a instalação do Java JDK (essencial 
para o desenvolvimento e execução de códigos Java), da IDE NetBeans e do servidor 
de aplicações Apache Tomcat.
• Configuração do Servidor: Para garantir uma organização adequada e evitar 
problemas de permissão de arquivos, a pasta do Tomcat foi descompactada e movida 
diretamente para a raiz do sistema (Disco Local C:). Essa prática facilita o mapeamento
do servidor dentro da ferramenta de desenvolvimento.
• Inicialização do Sistema: Com o ambiente devidamente configurado, utilizei o 
NetBeans para criar um novo Projeto Java Web. Esta etapa foi fundamental para 
integrar o servidor Tomcat ao fluxo de trabalho, permitindo que as páginas e formulários 
desenvolvidos nas atividades seguintes pudessem ser testados e executados em um 
ambiente de servidor real..
 
MÉTODO E RESULTADOS 
• Organização do Projeto: Defini o diretório de destino para o salvamento dos arquivos, 
garantindo que toda a estrutura do projeto fosse armazenada de forma organizada e de 
fácil acesso no sistema.
• Configuração do Ambiente de Execução: Selecionei o servidor Apache Tomcat como
o gerenciador da aplicação. Esse passo foi essencial para que o NetBeans pudesse 
compilar e rodar o projeto Java Web, permitindo visualizar o funcionamento dos 
formulários em um navegador em tempo real.
 
MÉTODO E RESULTADOS
• Definição da Arquitetura: Selecionei o framework Spring Web MVC para estruturar o 
projeto. Essa escolha é fundamental para organizar a lógica da aplicação em camadas 
(Model, View e Controller), o que facilita a manutenção e torna o desenvolvimento mais 
ágil e padronizado.
• Teste Inicial de Execução: Com a estrutura básica montada, realizei a execução de 
uma aplicação de teste através do NetBeans. Esse passo serviu para validar se a 
comunicação entre o código, as bibliotecas do framework e o servidor estava operando 
sem erros.
• Homologação no Navegador: Por fim, acessei o link local gerado pelo servidor Tomcat
diretamente no navegador. Com isso, foi possível visualizar a aplicação em pleno 
funcionamento em um ambiente real de navegação, confirmando que o setup inicial do 
projeto foi concluído com sucesso.
 
 
MÉTODOS E RESULTADOS
Atividade 2: Construção do Formulário de Endereço Inteligente
Nesta segunda etapa, o foco foi o desenvolvimento da interface do usuário e a integração com 
serviços externos para automação de dados.
• Estruturação do Projeto: Iniciei um novo projeto focado na experiência do usuário 
(UX), definindo uma estrutura de arquivos organizada onde separamos as 
responsabilidades de marcação (HTML), estilização (CSS) e lógica (JavaScript).
• Interface de Usuário (View): No arquivo index.html, desenvolvi um formulário completo 
para captação de endereços. Foram implementados campos estratégicos como CEP, 
Rua, Bairro, Cidade, Estado, Número e Complemento, visando uma coleta de dados 
precisa.
• Estilização e Design: Para garantir uma interface moderna e responsiva, utilizei o 
arquivo style.css em conjunto com o framework Bootstrap 5. O uso do Bootstrap 
permitiu um layout limpo, adaptável a diferentes tamanhos de tela e visualmente 
profissional.
• Consumo de API e Lógica de Negócio: No arquivo controller.js, implementei a lógica 
principal da aplicação utilizando JavaScript. Desenvolvi uma função para consumir a 
API de endereços dos Correios, permitindo que, ao digitar o CEP, os demais campos 
(Rua, Bairro, etc.) sejam preenchidos automaticamente. Isso reduz erros de digitação e 
melhora a agilidade no cadastro.
• Validação e Homologação: Finalizei realizando testes no navegador para verificar a 
integração entre o front-end e a API externa. O resultado foi uma aplicação funcional, 
onde o fluxo de dados ocorre de forma dinâmica e estável, conforme demonstrado no 
print de Resultado do Teste.
 
 
 
 
MÉTODOS E RESULTADOS
DESENVOLVIMENTO: ATIVIDADE 3
• Implementação de Frameworks: Selecionei o framework Spring Web MVC, utilizando a 
versão mais atualizada disponível. Essa escolha permite uma arquitetura baseada em Inversão de 
Controle (IoC) e Injeção de Dependência, fundamentais para a escalabilidade do sistema.
• Integração de Estilização Externa: No arquivo index.jsp, realizei a inclusão do CDN do 
Bootstrap 5 dentro da tag . Isso possibilita o uso de componentes visuais modernos sem 
a necessidade de hospedar arquivos CSS pesados localmente.
• Gestão de Rotas e Redirecionamento: Verifiquei as configurações no arquivo 
WEB-INF/redirect.jsp para garantir que o fluxo de navegação estivesse apontando 
corretamente para o index.htm, assegurando que o usuário seja levado à página inicial correta 
ao acessar a aplicação.
• Construção da Interface de Cadastro: Desenvolvi o formulário completo no index.jsp, 
incluindo campos para dados pessoais (Nome, Sobrenome, Email, Senha) e dados de localização
(CEP, Rua, Bairro, Cidade, Estado, Número e Complemento).
• Design e Identificação: Apliquei classes nativas do Bootstrap 5 para garantir que o formulário 
fosse responsivo e visualmente organizado. Além disso, personalizei o cabeçalho da página com o 
título "Formulário de Cadastro".
• Validação Final e Execução: Iniciei o servidor Apache Tomcat para validar o deploy da 
aplicação. O teste consistiu em verificar se todas as rotas, estilos e campos do formulário estavam 
carregando corretamente no navegador, consolidando o sucesso da integração entre o backend 
Java e o frontend estilizado.
 
 
MÉTODOS E RESULTADOS 
DESENVOLVIMENTO: ATIVIDADE 4
Atividade 4: Desenvolvimento Front-end com Validação e Integração ViaCEP
Nesta última etapa, o objetivo foi criar uma interface puramente voltada ao cliente, utilizando 
tecnologias web modernas para garantir uma experiência de usuário fluida e segura.
• Estruturação do Projeto Client-Side: Iniciei um novo projeto no NetBeans utilizando a 
categoria HTML5/JavaScript. O projeto foi nomeado como cadUsuario e configurado de
forma limpa, sem o uso de templates pré-definidos ou ferramentas adicionais, garantindo
total controle sobre o código fonte.
• Arquitetura da Interface: Desenvolvi o formulário em HTML5, estruturando todos os 
campos necessários para um cadastro completo: dados de perfil (Nome, Sobrenome, 
Email e Senha) e dados de localização (CEP, Rua, Bairro, Cidade, Estado, Número e 
Complemento).
• Estilização e Dependências: No do arquivo index.html, integrei os CDNs do 
Bootstrap 5 e do jQuery. O Bootstrap foi aplicado para garantir um design responsivoe
profissional, enquanto o jQuery foi incluído para simplificar a manipulação do DOM e as 
requisições assíncronas.
• Automação com API ViaCEP: Implementei um arquivo externo chamado main.js 
dedicado à lógica de consumo da API ViaCEP. Através de uma requisição baseada no 
CEP digitado, o sistema realiza o preenchimento automático dos campos de endereço, 
otimizando o tempo de cadastro e evitando erros do usuário.
• Lógica de Validação e Segurança: No arquivo validation.js, desenvolvi uma camada de
segurança para o formulário. Utilizei o jQuery em conjunto com Expressões Regulares 
(Regex) para validar o campo de e-mail, garantindo que os dados inseridos sigam o 
padrão correto antes do envio.
• Homologação e Testes Finais: Realizei testes exaustivos na aplicação para validar 
dois pontos críticos:
1. A funcionalidade do script de preenchimento automático via API.
2. A eficácia das validações de campo, assegurando que o formulário impeça envios
com informações inconsistentes ou incompletas.
 
 
 
CONCLUSÃO
A realização destas atividades foi fundamental para consolidar o domínio técnico sobre o ciclo 
de desenvolvimento de aplicações modernas. Através da prática, foi possível converter 
conceitos teóricos em soluções funcionais, abrangendo desde a infraestrutura de backend até 
a experiência final do usuário no frontend.
Os principais aprendizados incluíram:
• Gestão de Infraestrutura: O domínio na configuração de servidores como o Apache 
Tomcat e a preparação de ambientes de desenvolvimento integrados (IDEs).
• Arquitetura de Software: A compreensão da organização de projetos utilizando o 
framework Spring MVC, essencial para a criação de sistemas escaláveis e robustos.
• Desenvolvimento de Interface (UI/UX): A aplicação prática de HTML5, CSS3 e 
Bootstrap 5 para construir formulários que são, ao mesmo tempo, visualmente 
profissionais e totalmente responsivos.
• Interatividade e Conectividade: A implementação de lógica avançada com JavaScript 
e jQuery para o consumo de APIs externas (ViaCEP), além da aplicação de camadas de
segurança através de validações de dados com expressões regulares.
	MÉTODO E RESULTADOS
	MÉTODO E RESULTADOS
	MÉTODO E RESULTADOS
	MÉTODOS E RESULTADOS
	MÉTODOS E RESULTADOS
	DESENVOLVIMENTO: ATIVIDADE 3
	CONCLUSÃO