portifolio framewoks para desenvolvimento de software 4 semestre

Prévia do material em texto

Faculdade Anhanguera Educacional 
Análise e Desenvolvimento De 
Sistemas 
 
 
 
 
Aline Lima Dos Santos 
 
 
 
 
Portfólio - Frameworks para desenvolvimento de 
software 
 
4° Semestre 
 
 
 
 
 
 
 
 
1 
 
São Paulo 2025 
Faculdade Anhanguera Educacional 
Análise e Desenvolvimento De Sistemas 
 
 
 
 
Aline Lima Dos Santos 
 
 
 
Portfólio - Frameworks para desenvolvimento de software 
Disciplina - Frameworks para desenvolvimento de software 
 
 
4° Semestre 
 
 
 
 
 
 
 
 
 
 
 
2 
 
 
 
 
 
São Paulo 
2025 
 
1. INTRODUÇÃO 4 
2. MÉTODOS E RESULTADOS 5 
2.1 Recursos utilizados……………………...…………..:………..…………………..……………5 
2.2 Etapas Realizadas:……………………..………………………………………………..….…..6 
2.3 Resultados:……………………..………………………………………………..….…..19 
3. RELATÓRIO/CONCLUSÃO 19 
4.REFERÊNCIAS…………………………………………………………………………………20 
 
 
 
 
 
3 
1. INTRODUÇÃO 
 
Esta atividade prática tem como objetivo reforçar e aplicar os conhecimentos aprendidos 
nas aulas, utilizando ferramentas que facilitam o desenvolvimento de sistemas. Foram 
usadas as ferramentas NetBeans, Tomcat e Java JDK, que permitem criar e testar 
aplicações de forma simples e eficiente. Durante a prática, foi necessário instalar todas as 
ferramentas e criar um formulário de cadastro de endereço, com campos como CEP, Rua, 
Bairro, Cidade, Número e Complemento. Também foi solicitado o cadastro de informações 
pessoais, como nome e sobrenome, para complementar o exercício e demonstrar o 
funcionamento das ferramentas utilizadas. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4 
 
2. MÉTODOS E RESULTADOS 
 
Para a execução da atividade prática, foram seguidos os seguintes procedimentos: 
2.1Recursos utilizados: 
Atividade 1 
a) Realizar a instalação das ferramentas Tomcat, NetBeans e Java JDK necessárias para o 
desenvolvimento do projeto. 
 b) Após o download, descompactar a pasta do Tomcat e mover os arquivos para o disco 
local (C:), garantindo o funcionamento correto do servidor. 
 c) Em seguida, abrir o NetBeans e criar um novo projeto Java Web, configurando o 
ambiente para iniciar o desenvolvimento da aplicação. 
 
 
 
 
 
 
 
 
 
5 
2.2 Etapas realizadas: 
 
 
 
 
6 
 
 
 
 
 
 
7 
Atividade 2 
a) Crie um novo projeto. 
b) Organize e defina a estrutura de pastas e arquivos que serão utilizados. 
c) No arquivo index.html, desenvolva um formulário contendo os seguintes campos: CEP, 
Rua, Bairro, Cidade, Estado, Número e Complemento. 
d) Personalize o estilo no arquivo style.css, aplicando o framework Bootstrap 5 para 
aprimorar o visual da página. 
e) No arquivo controller.js, implemente o código JavaScript responsável por acessar e 
utilizar a API de endereços dos Correios para buscar os dados automaticamente a partir do 
CEP informado. 
f) Por fim, execute o projeto e realize os testes no navegador. 
 
 
 
8 
 
 
9 
 
 
10 
 
ATIVIDADE 3 – Desenvolvimento do Projeto 
a) Criação do Projeto: 
1. Abra o NetBeans e vá até o menu File > New Project. 
 
2. Escolha a opção Java Web dentro da categoria Java with Ant e selecione Web 
Application. 
 
3. Dê o nome cadastroUsuario ao projeto. 
 
b) Configuração do Projeto: 
1. Configure o servidor Apache Tomcat e selecione a versão do Java EE que será 
utilizada. 
 
2. Marque o uso do framework Spring Web MVC e garanta que esteja usando uma 
versão atualizada do Spring. 
 
c) Inserindo o Bootstrap: 
1. No arquivo index.jsp, adicione o CDN do Bootstrap 5 dentro da seção para 
aplicar estilos modernos à página. 
 
11 
d) Verificação de Redirecionamento: 
1. No arquivo WEB-INF/redirect.jsp, confirme se o redirecionamento está apontando 
corretamente para o arquivo index.htm. 
 
e) Criação do Formulário: 
1. Dentro do arquivo index.jsp, monte um formulário contendo os seguintes campos: 
 
○ Nome 
 
○ Sobrenome 
 
○ E-mail 
 
○ Senha 
 
○ CEP 
 
○ Rua 
 
○ Bairro 
 
○ Cidade 
 
○ Estado 
 
○ Número 
 
○ Complemento 
 
2. Utilize as classes do Bootstrap 5 para deixar o formulário com um design organizado 
e responsivo. 
 
 
12 
f) Título da Página: 
1. Adicione o título “Formulário de Cadastro” na aba do navegador ou no topo da 
página. 
 
g) Testando a Aplicação: 
1. Inicie o servidor Tomcat e verifique se a aplicação está sendo executada 
corretamente e se o formulário é exibido conforme o esperado. 
 
13 
 
 ATIVIDADE 4 – Criação de formulário interativo 
a) Configuração Inicial do Projeto 
Ambiente: Iniciar um novo projeto HTML5/JavaScript no NetBeans, nomeado 
como cadUsuario. 
Dependências: Adicionar o Bootstrap 5 (via CDN) para estilização e a 
biblioteca jQuery (via CDN) para manipulação do DOM e AJAX. 
b) Construção e Estilização 
Formulário: Criar o formulário HTML5 com os campos de cadastro e endereço 
(Nome, E-mail, CEP, Rua, etc.). 
Design: Utilizar classes do Bootstrap 5 para garantir que o formulário seja 
responsivo e visualmente agradável. 
c) Integração de Funcionalidades 
14 
Consumo da API (ViaCEP): Implementar a lógica no arquivo main.js para 
consumir a API ViaCEP a partir do campo CEP. 
Preenchimento Automático: Programar o preenchimento automático dos 
campos de endereço (Rua, Bairro, Cidade, Estado) com os dados retornados 
pela API. 
d) Validação de Dados 
 Script de Validação: Criar um arquivo validation.js dedicado para as regras de 
validação. 
Regras: Utilizar o jQuery e Expressões Regulares (RegEx) para validar o 
formato do campo de e-mail e garantir que todos os campos obrigatórios 
sejam preenchidos. 
e) Testes 
Funcionalidade Completa: Verificar se todas as validações estão funcionando 
corretamente e se o preenchimento automático de endereço (consumo da 
API ViaCEP) foi implementado com sucesso. 
15 
 
 
16 
 
 
17 
 
 
 
 
 
18 
2.3 Resultados 
Criei um formulário super moderno e responsivo (graças ao HTML e Bootstrap) que 
funciona muito bem usando JavaScript e jQuery. Foi feita a integração com o ViaCEP, onde 
o endereço é preenchido sozinho só com o CEP tendo muita agilidade, também garantimos 
a qualidade dos dados com validações (tipo checar o e-mail) para evitar erros.No geral, o 
projeto mostrou praticidade, usando essas ferramentas e já entendendo a estrutura de 
grandes sistemas (como o Spring MVC). 
 
 
3. RELATÓRIO/CONCLUSÃO 
Este projeto foi crucial para transformar nossa teoria em prática. Conseguimos montar uma 
aplicação web completa que funciona muito bem.O maior aprendizado foi a integração de 
tecnologias: usamos Bootstrap para o visual, JavaScript/jQuery para a interatividade e APIs 
para buscar dados externos (como o endereço). Isso prova que sabemos construir sistemas 
que funcionam.Além disso, garantimos a qualidade dos dados com a validação do 
formulário, mostrando preocupação com a segurança e a precisão das informações.Em 
resumo, demonstramos as habilidades técnicas necessárias para desenvolver sistemas web 
funcionais, integrar dados e seguir as melhores práticas de organização (padrão MVC). 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19 
 
 
 
4. REFERÊNCIAS 
https://netbeans.apache.org/front/main/index.html 
https://www.oracle.com/br/java/technologies/downloads/ 
https://tomcat.apache.org/download-90.cgi 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20 
https://netbeans.apache.org/front/main/index.html
https://www.oracle.com/br/java/technologies/downloads/
https://tomcat.apache.org/download-90.cgi
	 
	Faculdade Anhanguera Educacional 
	Análise e Desenvolvimento De Sistemas 
	1.​INTRODUÇÃO 
	2. MÉTODOS E RESULTADOS 
	2.1Recursos utilizados: 
	 
	 
	 
	 
	 
	 
	 
	 
	2.2 Etapas realizadas: 
	 
	 
	Atividade 2 
	ATIVIDADE 3 – Desenvolvimento do Projeto 
	a) Configuração Inicial do Projeto 
	b) Construção e Estilização 
	c) Integração de Funcionalidades 
	d) Validação de Dados 
	e) Testes 
	 
	 
	2.3 Resultados 
	3. RELATÓRIO/CONCLUSÃO