UNIVERSIDADE PITÁGORAS UNOPAR ANHANGUERA

ENGENHARIA DE SOFTWARE

DENIS SIQUEIRA MOURA

ATIVIDADE PRÁTICA
FRAMEWORKS PARA DESENVOLVIMENTO DE SOFTWARE

JACAREÍ/SP
2024
 DENIS SIQUEIRA MOURA

ATIVIDADE PRÁTICA
FRAMEWORKS PARA DESENVOLVIMENTO DE SOFTWARE

Trabalho apresentado à Universidade, como requisito

parcial para a obtenção de média semestral nas
disciplinas norteadoras do semestre letivo.

JACAREÍ/SP
2024
1
 SUMÁRIO

1 INTRODUÇÃO.................................................................................................. 3
2 DESENVOLVIMENTO....................................................................................... 4
2.1 ATIVIDADE 1 ................................................................................................. 4

2.2 ATIVIDADE 2 ................................................................................................. 8

2.3 ATIVIDADE 3 ............................................................................................... 12

2.4 ATIVIDADE 4 ............................................................................................... 15

3 CONCLUSÃO ................................................................................................. 24

REFERÊNCIAS BIBLIOGRÁFICAS..................................................................... 25

2
 1 INTRODUÇÃO

O presente portfólio destaca uma série de atividades práticas centradas na

utilização de frameworks no desenvolvimento de software. O enfoque principal
abrange a configuração de ambientes de desenvolvimento, criação de projetos web,
e implementação de formulários utilizando ferramentas como NetBeans, Tomcat,
HTML5, Javascript, CSS3, Bootstrap 5, Spring MVC, e frameworks Java e jQuery.

A primeira atividade visa criar familiaridade com o ambiente de

desenvolvimento NetBeans, configurando o servidor Tomcat para executar aplicações
Java. A instalação e teste do servidor serão realizados, culminando na implementação
de uma aplicação web básica para validar o correto funcionamento do ambiente.

A segunda atividade concentra-se na criação de um projeto web que interage

com a API de endereços dos Correios. Utilizando HTML5, Javascript e CSS3, será
desenvolvido um formulário que, ao inserir um CEP, preencherá automaticamente os
campos com informações de rua, bairro, cidade e estado. A estilização do formulário
será realizada mediante a utilização do framework Bootstrap 5.

A terceira atividade aborda a implementação de um formulário de cadastro

utilizando os frameworks Spring MVC e Bootstrap 5. Este formulário incluirá campos
para inserção de informações como nome, sobrenome, e-mail, senha, CEP, rua,
bairro, cidade, estado, número e complemento. O objetivo é aplicar conceitos desses
frameworks na construção de formulários estilizados e funcionais.

Na quarta atividade, será desenvolvida uma aplicação de cadastro de usuário

utilizando HTML5, Javascript e Bootstrap. O formulário será totalmente estilizado com
Bootstrap, e a validação de campos, incluindo o e-mail, será implementada em
Javascript, com a possível utilização da biblioteca jQuery. Além disso, será integrada
a API ViaCep para preenchimento automático de campos de endereço a partir do
CEP.

O conjunto de atividades proposto visa proporcionar uma abordagem prática

e abrangente no uso de frameworks essenciais no desenvolvimento de software,
permitindo a aplicação eficaz de conceitos aprendidos em um contexto real de
programação web.

3
 2 DESENVOLVIMENTO

2.1 ATIVIDADE 1

A execução da primeira atividade prática foi conduzida seguindo um conjunto

de passos para configurar o servidor Tomcat na IDE NetBeans. O objetivo principal
era criar um ambiente propício para o desenvolvimento e teste de aplicações web
usando o framework Spring MVC.

O processo iniciou com o acesso à página oficial do servidor Tomcat, uma

escolha estratégica devido à integração eficaz com a IDE NetBeans, ambas
desenvolvidas pela Apache. Optou-se pela versão 8.x do servidor, alinhada com os
requisitos do projeto.

Após acessar a área de download, foram tomadas precauções para selecionar

a versão correta, considerando a arquitetura do sistema operacional. A escolha pela
versão 64 bits foi direcionada pela prevalência desta arquitetura em sistemas
modernos. O download da versão zipada foi realizado e, em seguida, os arquivos
foram extraídos para uma localização conveniente, no caso, o Disco Local C: do
computador.

Com a pasta do Tomcat devidamente posicionada, o NetBeans foi aberto, e um

novo projeto Java Web foi criado. A escolha das configurações adequadas, como a
seleção do servidor Apache Tomcat, a definição da localização do servidor, e a
possibilidade de estabelecer credenciais de acesso, foram fundamentais nesse
processo.

Na etapa seguinte, a versão do Java EE foi exibida, permitindo a continuidade

do procedimento. A opção pelo framework Spring Web MVC foi crucial para a criação
de uma estrutura inicial em HTML. Após a conclusão dessas etapas, pôde-se executar
a aplicação e verificar seu funcionamento ao acessar o link gerado pelo Tomcat no
navegador.

Essa atividade não apenas estabeleceu um ambiente de desenvolvimento

funcional, mas também serviu como uma base sólida para as atividades

4
subsequentes, onde pôde-se explorar ainda mais as capacidades do Tomcat em
conjunto com o NetBeans e o framework Spring MVC.

Resultados:

Figura 1 – Prints da execução da atividade.

Figura 2 – Prints da execução da atividade.

5
Figura 3 – Prints da execução da atividade.

Figura 4 – Prints da execução da atividade.

6
Figura 5 – Prints da execução da atividade.

Figura 6 – Prints da execução da atividade.

7
 2.2 ATIVIDADE 2

A execução da segunda atividade consistiu na criação de um novo projeto

denominado "cadastroEndereco" no ambiente de desenvolvimento NetBeans,
utilizando tecnologias HTML5 e Javascript. Nessa atividade, o foco estava na
construção de um formulário de cadastro de endereço, empregando exclusivamente
o framework Bootstrap para a estilização.

Iniciou-se o projeto escolhendo a categoria HTML5/Javascript e optando por

não utilizar nenhum template, marcando a opção "no site template". A estrutura de
diretórios foi configurada, gerando automaticamente o arquivo index.html, que
precisou ser modificado para incorporar o formulário desejado.

A estrutura foi aprimorada com a criação dos arquivos CSS (style.css) e

Javascript (controller.js). Esses arquivos permitiram a aplicação de estilos e a
implementação de funcionalidades adicionais ao formulário.

Utilizou-se o navegador Google Chrome para visualizar o resultado do código,

e para isso, foi necessário instalar a extensão NetBeans no navegador. As
configurações foram realizadas no navegador, instalando a extensão conforme
necessário.

Essa etapa proporcionou a criação de um ambiente inicial para o

desenvolvimento do formulário de cadastro de endereço, pavimentando o caminho
para atividades subsequentes que explorarão ainda mais as capacidades do
Bootstrap e a interação Javascript na construção de interfaces web interativas e
visualmente atraentes.

8
Resultados:

Figura 7 – Prints da execução da atividade.

Figura 8 – Prints da execução da atividade.

9
Figura 9 – Prints da execução da atividade.

Figura 10 – Prints da execução da atividade.

10
Figura 11 – Prints da execução da atividade.

Figura 12 – Prints da execução da atividade.

11
 2.3 ATIVIDADE 3

A terceira atividade, focada na criação de um formulário de cadastro utilizando

Spring Web MVC e estilização com Bootstrap 5, demandou uma abordagem integrada
no ambiente NetBeans, com as devidas configurações prévias de Java JDK e servidor
Tomcat.

O processo teve início com a criação de um novo projeto no NetBeans,

seguindo a trajetória file > New Project e selecionando Java Web na categoria Java
with Ant. A escolha da opção Web Application proporcionou a definição do nome do
projeto como "cadastroUsuario". Certificando-se de que o servidor Apache Tomcat
estava corretamente configurado e a máquina virtual Java definida, avançou-se para
a próxima etapa.

A inclusão do framework Spring Web MVC no projeto foi realizada, marcando

a opção "Spring Library" com a versão 4.3.29 ou superior. A árvore de diretórios do
projeto foi organizada, refletindo as configurações feitas durante a criação.

Para a estilização do formulário, foi necessário adicionar o CDN do Bootstrap 5

ao arquivo index.jsp, localizado no diretório webapp.

A conferência visual do arquivo redirect.jsp em WEB-INF foi realizada para

garantir que o redirecionamento estivesse apontando para o arquivo index.htm.

O desenvolvimento do formulário em si seguiu as orientações do enunciado,

com a estilização sendo feita integralmente através das classes prontas do Bootstrap
5. O título "Formulário de Cadastro" foi inserido na página para proporcionar uma
melhor experiência ao usuário.

As classes com estilos prontos do Bootstrap foram exploradas diretamente no

site oficial do Bootstrap, garantindo a consistência e modernidade no design do
formulário.

Dessa forma, a terceira atividade resultou na criação de um formulário de

cadastro integrando o Spring Web MVC e o Bootstrap 5, proporcionando uma
aplicação web visualmente atrativa e funcional. Essa experiência consolida o

12
entendimento sobre a integração de frameworks no ambiente de desenvolvimento e a
capacidade de criação de interfaces web eficientes e esteticamente agradáveis.

Resultados:

Figura 13 – Prints da execução da atividade.

Figura 14 – Prints da execução da atividade.

13
Figura 15 – Prints da execução da atividade.

Figura 16 – Prints da execução da atividade.

14
 Figura 17 – Prints da execução da atividade.

2.4 ATIVIDADE 4

A quarta atividade exigiu a configuração prévia do ambiente de

desenvolvimento NetBeans, Java JDK e servidor Tomcat. Para a execução da tarefa,
um novo projeto HTML5/JavaScript denominado "cadUsuario" foi criado, e nenhum
template disponível foi utilizado, permitindo uma construção personalizada baseada
no framework Bootstrap.

Durante a criação do projeto, foi essencial desmarcar algumas ferramentas

desnecessárias para o escopo da implementação. Todas as opções foram
desabilitadas, focando na criação de um formulário simples, mas completo, com os
campos: Nome, Sobrenome, E-mail, Senha, CEP, Rua, Bairro, Cidade, Estado,
Número e Complemento.

A estilização do formulário foi inteiramente baseada no Bootstrap 5, utilizando

classes disponíveis no site oficial do Bootstrap. Essa abordagem proporcionou uma
interface moderna e responsiva ao formulário de cadastro.

15
 Para enriquecer a validação dos campos, a biblioteca JQuery foi incorporada
ao projeto.

Adicionalmente, foram criados dois arquivos JavaScript separados: main.js

para a implementação do consumo da API de endereços por CEP, e validation.js para
as validações de campos. Essa abordagem evita conflitos e garante uma organização
mais eficiente do código.

As validações incluíram o uso de expressões regulares para a verificação do

formato do e-mail, contribuindo para a integridade dos dados submetidos pelo usuário.
Essa experiência reforça o entendimento prático da integração de frameworks e
bibliotecas na construção de interfaces web interativas e visualmente atrativas.

Resultados:

Figura 18 – Prints da execução da atividade.

16
Figura 19 – Prints da execução da atividade.

Figura 20 – Prints da execução da atividade.

17
Figura 21 – Prints da execução da atividade.

Figura 22 – Prints da execução da atividade.

18
Figura 23 – Prints da execução da atividade.

Figura 24 – Prints da execução da atividade.

19
Figura 25 – Prints da execução da atividade.

Figura 26 – Prints da execução da atividade.

20
Figura 27 – Prints da execução da atividade.

21
Figura 28 – Prints da execução da atividade.

22
Figura 29 – Prints da execução da atividade.

23
 3 CONCLUSÃO

Ao longo deste portfólio, foram realizadas quatro atividades práticas que

compõem uma abordagem abrangente ao uso de frameworks no desenvolvimento de
software. Cada atividade foi estrategicamente projetada para explorar diferentes
aspectos do processo de programação web, envolvendo a configuração de servidores,
a criação de projetos web, a estilização de formulários e a implementação de
funcionalidades avançadas.

Na primeira atividade, a configuração do servidor Tomcat na versão 8.x foi

conduzida com sucesso, permitindo a integração eficiente com a IDE NetBeans. A
instalação do framework Spring MVC foi realizada para criar e testar um projeto web
simples, validando assim a configuração do servidor Tomcat.

A segunda atividade focou na criação de um projeto web utilizando HTML5,

CSS3, Javascript e o framework Bootstrap. O formulário desenvolvido foi conectado à
API dos Correios, proporcionando ao usuário uma experiência dinâmica e informativa
ao preencher o campo de CEP.

A terceira atividade abordou a estruturação de um formulário mais complexo,

composto por 12 campos, utilizando extensivamente o framework Bootstrap 5. A
criação do projeto sobre o Spring Web MVC permitiu a aplicação de estilos avançados,
resultando em um formulário esteticamente agradável e funcional.

Por fim, na quarta atividade, foi realizada a aplicação prática dos

conhecimentos adquiridos. A construção do formulário de cadastro de clientes
envolveu a utilização de HTML5, Javascript, Bootstrap 5 e a biblioteca JQuery. A
validação dinâmica dos campos demonstrou a aplicação eficaz de frameworks e
bibliotecas para melhorar a experiência do usuário e garantir a integridade dos dados.

Em síntese, este portfólio reflete a jornada bem-sucedida através de atividades

desafiadoras, proporcionando não apenas a aquisição de habilidades técnicas
essenciais, mas também a compreensão prática da aplicação de frameworks no
desenvolvimento web. Ao concluir estas atividades torno-me mais preparado para
enfrentar desafios mais complexos e explorar novas oportunidades na área de
desenvolvimento de software.

24
 REFERÊNCIAS BIBLIOGRÁFICAS

Acessando webservice de CEP. Disponível em: https://viacep.com.br/.

Bootstrap. Disponível em: https://getbootstrap.com/docs/5.0/getting-

started/introduction/. Acesso em: 31 jan. 2024.

validar e-mail com Javascript. Disponível em:

https://www.horadecodar.com.br/2020/09/13/como-validar-email-com-javascript/.

Introdução ao Spring web MVC. Disponível em:

https://netbeans.apache.org/kb/docs/web/quickstart-webapps-spring_pt_BR.html.

Serving Web Content with Spring MV. Disponível em:

https://spring.io/guides/gs/serving-web-.

Tutorial Tomcat - Instalação e configuração Básica. Disponível em:

http://www.mhavila.com.br/topicos/java/tomcat.html.

Validando e-mail em inputs HTML com Javascript. Disponível em:

https://www.devmedia.com.br/validando-e-mail-em-inputs-html-com-javascript/26427.

25