Roteiro de Aula Prática
Framework para
desenvolvimento de
software
Disciplina: Framework para desenvolvimento de
software
ROTEIRODEAULAPRÁTICA1
Unidade:
Aula(WhiteLabel)/Seção(KLS):
SOFTWARE
☒Software/☐Acessoon-line
☐Pago/☒NãoPago
Infraestrutura:
Computador;
SoftwareIDENetBeanscomJavaJDKinstaladoeconfigurado.
Descriçãodosoftware:
NetBeanséumaIDEdedesenvolvimentogratuitaedecódigoaberto.Útilnodesenvolvimento
desoftwaresutilizandoas linguagens: Javascript,HTML5, PHP,C/C++eJava. Ferramenta
multiplataformapodendoser instaladanoLinux,macOSeWindows.
ATIVIDADEPRÁTICA1
Atividadeproposta:
Configurar umservidor queseránecessárioparaquea IDENetBeansexecuteosprojetos
desenvolvidossobreessa ferramenta.Paraessaatividade, faremosa instalaçãodoTomcat
comoservidor padrãopara rodasasaplicaçõesepara testar, vocêdeverá “levantar” uma
aplicaçãowebsimplesparatestaresseservidor.
Objetivos:-CriarfamiliaridadecomambientededesenvolvimentoNetBeans.-ConfigurarservidorTomcatparaexibiraplicaçõesdesenvolvidasemJava;-Compreendercomotestaroservidortomcat.
Procedimentosparaarealizaçãodaatividade:
Paracumprir comopropostodessaaulaprática, énecessário ter previamente instaladoo
NetbeanseoJavaJDK.
1-Acessarapáginadoservidorde internetTomcat.Suaescolhasedáporsetratardeum
servidor tambémdesenvolvidopelaApache,mesmacriadoradoNetBeans.Oqueassegurará
total integração entre as ferramentas. Para isso, acesse a página do Tomcat em:
<https://tomcat.apache.org/download-native.cgi>.
2- Trabalharemos com a versão 8.x do servidor. Procure na página por essa versão para ter
acesso à área de download.
3- Ao acessar a área de download, procure pela sessão “Core” da página. Nela, nós teremos
acesso a versões distintas desse servidor. Atenção à arquitetura de sua máquina para que você
não escolha a versão errada. De modo geral, a versão para arquitetura 32bits está sendo
descontinuada porque essa arquitetura de processadores foi descontinuada. Muito
provavelmente você utilizará a versão 64bits, mas tenha certeza. Para isso, você pode acessar
a propriedade do “Meu Computador” e encontrar a informação de arquitetura de seu
processador.
4- Faça o download da versão de arquivos .zip, ou seja, faremos o download da versão zipada
de arquivos, ou seja, 64-bit Windows.zip. Veja:
5- Após o download ser realizado, descompacte o arquivo em um local no seu computador.
Pode ser na pasta Downloads mesmo, pois vamos mudar a localização da pasta.
6- Agora, vamos mover essa pasta apache-tomcat-8.5.82 para o Disco Local C: de nosso
computador. Vamos colocá-lo solto, como mostra a imagem a seguir:
7- Agora, abra o NetBeans e crie um novo projeto, um projeto Java Web. Para isso, será
necessário escolher essa opção na categoria Java with Ant > Java Web > Web Application.
8- Escolha o local onde o projeto será salvo, dê um nome para o projeto e Click no botão
“Next”.
9- Na tela que surgirá, será necessário escolher o servidor Apache Tomcat or TomEE e
cnofigurar a opção “Server Location” que é a pasta que acabamos de colocar no disco local C:
Nessa mesma tela pode-se definir um usuário e senha para acessar o servidor.
10- Na tela seguinte será exibida a versão do Java EE que está sendo utilizada e você deverá
avançar, clicando no botão “Next”. Na tela seguinte, selecione o framework Spring Web MVC e
clique no botão “Finish”. Ao escolher essa opção, uma estrutura em HTML será criada graças
ao framework escolhido na etapa anterior. Execute a aplicação e acesse o link gerado pelo
Tomcat no navegador para ver sua aplicação.
Checklist:
1- Download das ferramentas e preparação do ambiente de desenvolvimento com NetBeans.
2- Download do servidor Tomcat no site oficial do Apache.
3- Organizar pasta do servidor no computador e iniciar o NetBeans;
4- Criar um novo projeto do tipo Java Web, e realizar as etapas de configuração do servidor.
5- Instalar o framework Spring MVC para construir uma projeto simples web para executar o
servidor e testar a aplicação no navegador.
Resultado:
Aluno, você deverá entregar:
Configuração do servidor Tomcat na versão 8.x para servidor às aplicações web desenvolvidas
na IDE Netbeans. Você deverá configurar, ao criar um novo projeto web, o servidor tomcat e
instalar o framework Spring MVC para construção de um projeto simples web utilizando o
framework em questão para testar a configuração do servidor tomcat.
Referências:
Tutorial
Tomcat
Instalação
e
configuração
Básica.
Disponível em:
<http://www.mhavila.com.br/topicos/java/tomcat.html>. Acesso em: 20, setembro de 2022.
C
ROTEIRODEAULAPRÁTICA2
Unidade:Digiteaqui
Aula(WhiteLabel)/Seção(KLS):Digiteaqui
SOFTWARE
☒Software/☐Acessoon-line
☐Pago/☒NãoPago
Infraestrutura:
Computador;
SoftwareIDENetBeanscomJavaJDKinstaladoeconfigurado.
Descriçãodosoftware:
NetBeanséumaIDEdedesenvolvimentogratuitaedecódigoaberto.Útilnodesenvolvimento
desoftwaresutilizandoas linguagens: Javascript,HTML5, PHP,C/C++eJava. Ferramenta
multiplataformapodendoser instaladanoLinux,macOSeWindows.
ATIVIDADEPRÁTICA2
Atividadeproposta:
Criar umpequenoprojeto compostodeumformuláriopara consumodeAPI deendereço
oferecidapelosCorreios. Aproposta consisteemdigitar oCEPepartir disso, os demais
camposserempreenchidoscomasinformaçõesderua,bairro,cidadeeestado.Esseconsumo
deAPI deveráser feito com javascript.OFormuláriopara issodeverá ser construídoem
HTML5eapartedeestilopode-secriarumarquivodeestiloetambémutilizaroframework
Bootstrap.
Objetivos:
Compreender oprocessodeconstruçãodeumprojetowebutilizandoHTML5, Javascript e
CSS3;
CriarformulárioutilizandoalinguagemHTML5;
EstilizaroformuláriocriadoemHTML5comCSS3;
Configurarautilizaçãodoframeworkdeestilosbootstrap5;
ImplementarconsumodeAPIdeendereçodisponibilizadopeloscorreiosutilizandojavascript;
Procedimentosparaarealizaçãodaatividade:
Paraaconduçãodessaatividade, crieumnovoprojetoHTML5/Javascript.Notequenessa
atividadevocêfaráusoapenasdoframeworkBootstrap,seassimdesejar.Recomenda-sesua
utilizaçãoparaqueaestilizaçãodapáginacriadapossaserfeitaacontento.
1-Crieumnovoprojeto,escolhanascategoriasoHTML5/Javascript>HTML5/JSApplication.
Fiqueavontadeparaescolheronomequedesejarparaoprojeto,mas,paraefeitosdidáticos,o
chamaremos de cadastroEndereco.
2- Na etapa seguinte, será oferecido a opção de utilizar algum template. Nesse primeiro
momento, optaremos por não utilizar nenhum template, bastando, para isso, escolher a opção
“no site template”.
3- Na estrutura de diretórios, será necessário criar os arquivos de javascript e css. Note que o
arquivo index.html já foi criado automaticamente. No entanto, será necessário alterá-lo para
inserir o código necessário para criação de um pequeno formulário composto de, no mínimo, 5
campos sendo eles: CEP, Rua, Bairro, Cidade, Estado. No entanto, pode-se inserir mais dois
campos: Número e Complemento. Deverá ficar parecido com o que mostra a imagem a seguir:
Fonte: Elaborado pelo autor.
4- A estrutura de código criada no arquivo index.html, deverá ser semelhante ao que é
mostrado a seguir:
<!DOCTYPE html>
<!–
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this
license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/html.html to edit this template–>
<html>
<head>
<title>Cadastre-se</title>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
</head>
<body>
<div>TODO write content</div>
</body>
</html>
5- Agora, é necessário alterar o código apresentado, para escrever, nessa estrutura, o
formulário apresentado anteriormente.
6- Crie o arquivo de CSS. Isso pode ser feito clicando sobre o diretório “Site Root” com o botão
direito do mouse e, em seguida, escolher a opção “Cascading Style Sheet..” Ao arquivo, dô o
nome de style.
7- Agora, da mesma forma, crie o arquivo de Javascript e dê o nome a ele de controller.js.
8- Sugere-se utilizar o navegador Google Chrome para ver o resultado do código
implementando por você no NetBeans. Por esse motivo, pode ser necessário instalar/ativar
extensão do netbeans no referido navegador. Veja:
9- Caso aconteça, vá nas configurações do navegador, encontre a opção extensões e pesquise
por NetBeans. Caso já tenha instalado, basta que a extensão seja ativada. De outra forma,
basta instalar a referida extensão. A ativação pode ser feita como mostra a imagem a seguir:
Checklist:
1- Ambiente de desenvolvimento NetBeans com máquina virtual Java JDK devidamente
instalados e funcionando.
2- Criação de um projeto web para implementar códigos em HTML5, CSS3 e Javascript.
3- Criação dos arquivos de css e javascript no projeto.
4- Implementação de código em HTML5 para criar um pequeno formulário composto de, no
mínimo, 5 campos de endereço sendo: CEP, Rua, Bairro, Cidade e Estado.
5- Configuração de extensão netbeans no navegador google Chrome para que seja possível
ver o website implementado, funcionando.
Resultados da aula prática:
Aluno, você deverá entregar:
Criação, estrutura, organização e codificação de um projeto simples escrito utilizando as
tecnologias HTML5, CSS3 e Javascript, bem como framework bootstrap, para estilização de um
formulário de endereço que consumirá API do correio e, a partir do preenchimento de um
campo e CEP, fornecerá as demais informações relativas ao referido CEP como; Rua, Bairro,
Cidade e Estado.
Referências:
Acessando webservice de CEP . Disponível em: <https://viacep.com.br/>. Acesso em: 20,
setembro de 2022.
ROTEIRODEAULAPRÁTICA3
Unidade:Digiteaqui
Aula(WhiteLabel)/Seção(KLS):Digiteaqui
SOFTWARE
☒Software/☐Acessoon-line
☐Pago/☒NãoPago
Infraestrutura:
Computador;
SoftwareIDENetBeanscomJavaJDKinstaladoeconfigurado.
Descriçãodosoftware:
NetBeanséumaIDEdedesenvolvimentogratuitaedecódigoaberto.Útilnodesenvolvimento
desoftwaresutilizandoas linguagens: Javascript,HTML5, PHP,C/C++eJava. Ferramenta
multiplataformapodendoser instaladanoLinux,macOSeWindows.
ATIVIDADEPRÁTICA3
Atividadeproposta:
Implementarumformuláriodecadastroutilizandospringmvcebootstrap5.Esseformuláriode
cadastrodeverácontercampospara inserçãodenome, sobrenome, email, senha,CEP, rua,
bairro,cidade,estado,númeroecomplemento.
Objetivos:
AplicarconceitosrelacionadosàutilizaçãodosframeworksSpringwebMVCeBoostrap5para
construçãodeumformulário totalmenteestilizadocomCSS, decadastrodeusuário,muito
comumente encontrado emaplicações diversas naweb, principalmente para cadastro de
usuáriosemwebsitesdee-commerce.
Procedimentosparaarealizaçãodaatividade:
Énecessário ter devidamenteconfiguradoa IDENetbeans, amáquinavirtual JavaJDKeo
servidor Tomcat, queseráutilizadopara levantar aaplicaçãodesenvolvidaemSpringweb
MVC.Oresultadoesperadodeveseassemelharaoqueévistonaimagemaseguir:
1- Crie um novo projeto, semelhante à construção realizada nas atividades anteriores. Vá em
File > New Project.
2- Escolha a opção Java Web disponível na categoria Java with Ant. Em seguida ,na área
Projects, escolha Web Application.
3- Na sequência, será necessário definir um nome para o projeto no campo “Project Name”.
Padronize e dê o nome de cadastroUsuario.
4- Avance para a tela seguinte e confira se o servidor Apache Tomcat está definido e veja se a
máquina virtual (Java EE Version) foi setada, em seguida, avance para a etapa seguinte.
5- Agora, é necessário margar o Framework Spring Web MVC para que o mesmo seja
carregado no projeto. Deixe a opção “Spring Library” com a versão do Spring 4.3.29, ou
superior.
6- A árvore de diretório criada pela IDE deve ser semelhante ao que é exibido na imagem a
seguir:
7- Em seguida, ao arquivo index.jsp, criado pelo Spring, você deverá adicionar o CDN do
bootstrap, para isso, procure pelo framework na versão 5, na internet, e localize o link do CDN.
Depois, inseri-o na área do <head> da página index.jsp. O código deve ser algo parecido com:
<link
href=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css”
rel=”stylesheet”
integrity=”sha384
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC”
crossorigin=”anonymous”>
8- Faça uma pequena conferência visual no arquivo WEB-INF/redirect.jsp e veja se nas
configuarções desse arquivo, o redirecionamento que está sendo feito, aponta para o arquivo
index.htm. Deverá estar assim:
<%@page contentType=”text/html” pageEncoding=”UTF-8″%>
<%response.sendRedirect(“index.htm”); %>
9- Construa seu formulário conforme solicitado no enunciado dessa atividade, não esquecendo
que toda a estilização do mesmo deverá ser feita utilizando classes prontas do Bootstrap 5.
10-Insira um título na página do formulário com o termo “Formulário de Cadastro”.
11- As classes com estilos prontos, definidas pelo Bootstrap, podem ser pesquisadas direto no
site oficial em: <https://getbootstrap.com/docs/5.0/getting-started/introduction/>.
Checklist:
1- Ambiente de desenvolvimento NetBeans, JDK, servidor Tomcat 8.x devidamente configurado
e funcionando.
2- Criação de um projeto utilizando o framework Spring Web MVC.
3- Configuração do CDN do Bootstrap 5 no arquivo index.jsp, criado pelo Spring Web MVC.
3- Verificação do redirecionamento feito no arquivo redirect.jsp, do projeto web.
4- Escrita do código para criação do formulário.
5- Utilização de estilos definidos pelo Bootstrap 5 em todo o formulário criado.
6- Iniciar servidor Tomcat.
7- Verificar se a aplicação está rodando normalmente, através do servidor Tomcat.
Resultados da aula prática:
Aluno, você deverá entregar:
Criação, estruturação, estilização e codificação de um pequeno formulário, composto de 12
campos, com utilização do maior número de estilos possíveis e disponíveis através do
framework Bootstrap 5, com projeto estruturado sobre o Framework Spring Web MVC.
Referências:
Serving Web Content with Spring MV. Disponível em: <https://spring.io/guides/gs/serving-web
content/>. Acesso em: 20, setembro de 2022.
Introdução
ao
Spring
web
MVC.
Disponível
em:
<https://netbeans.apache.org/kb/docs/web/quickstart-webapps-spring_pt_BR.html>. Acesso em:
20, setembro de 2022.
ROTEIRODEAULAPRÁTICA4
Unidade:Digiteaqui
Aula(WhiteLabel)/Seção(KLS):Digiteaqui
SOFTWARE
☒Software/☐Acessoon-line
☐Pago/☒NãoPago
Infraestrutura:
Computador;
SoftwareIDENetBeanscomJavaJDKinstaladoeconfigurado.
Descriçãodosoftware:
NetBeanséumaIDEdedesenvolvimentogratuitaedecódigoaberto.Útilnodesenvolvimento
desoftwaresutilizandoas linguagens: Javascript,HTML5, PHP,C/C++eJava. Ferramenta
multiplataformapodendoser instaladanoLinux,macOSeWindows.
ATIVIDADEPRÁTICA4
Atividadeproposta:
Implementar uma aplicação para cadastro de usuário utilizandoHTML5/JavaScript. Esse
formulariopodeser semelhanteaoconstruídonaatividadeanterior edeveráconter dados
básicoscomo:Nome, Sobrenome, email, senha, cep, rua, bairro, cidade, estado, numeroe
complemento.SeránecessárioconstruirpartedocódigoemJavaScriptparavalidaroscampos,
verificandose todos forampreenchidos, validaroe-mail, paraverificar seele foi preenchido
corretamente.Essavalidaçãodoe-maildeveráser implementadacomframework javaouaté
mesmobiblioteca, comoaJQuery. Todoo formuláriodeverá ser TOTALMENTEestilizado
utilizandooframeworkbootstrap.
Objetivos:-AplicarconceitosdeprogramaçãowebutilizandoLinguagemHTML5,CSSejavascript;-Utilizar recursosprontosdoFrameworkBootstrapparaestilizaçãodo formuláriocriadoem
HTML5;-Implementar oconsumodaAPI ViaCep, parapreenchimentoautomáticados camposde
endereçoapartirdoCEP.-Utilizar a biblioteca JQuery para implementar a validação de campos do formulário,
principalmenteocampodee-mail.
Procedimentosparaarealizaçãodaatividade:
Para realização dessa atividade, será necessário ter configurado o ambiente de
desenvolvimentoNetBeans, javaJDKeservidorTomcat.
1-VamoscriarumnovoprojetodotipoHTML5/JavaScript.
2- Ao projeto, daremos o nome de cadUsuario e não faremos uso de nenhum template
disponível no processo de criação de um novo projeto, pois construiremos nosso formulário
totalmente baseado no framework Bootstrap.
3- Em uma das telas que surgem no momento de criação de um novo projeto
HTML5/JavaScript, será necessário desmarcar algumas ferramentas que são disponibilizadas.
Elas não serão necessárias nesse momento para o que vamos implementar em termos de
projeto. Desmarque todas as opções. Veja:
4- Crie um formulário simples contendo todos os campos a seguir: Nome, Sobrenome, email,
senha, cep, rua, bairro, cidade, estado, numero e complemento. Esse formulário deverá separar
as informações de endereço para que possamos implementar o consumo da API (ViaCEP),
tarefa já realizada em atividade anterior. Acesse o site do bootstrap 5 em:
<https://getbootstrap.com/docs/5.0/getting-started/introduction/> e pesquise as informações
necessárias para construção do formulário de cadastro que devemos construir nessa atividade.
5- Adicione a biblioteca do JQuery, que auxiliará na validação de campos do formulário. Deverá
ficar semelhante a isso:
<head>
<title>Cadastro de Cliente</title>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link
href=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css”
rel=”stylesheet”
integrity=”sha384
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC”
crossorigin=”anonymous”>
<script
type=”text/javascript”
src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
</head>
6- Crie um arquivo separado para implementar o consumo da API de endereços por CEP. Você
pode dar o nome a esse arquivo de main.js.
7- Crie agora um novo arquivo para implementar as validações. Faça separadamente do
arquivo onde será colocado o javascript de consumo da API. Isso para evitar que tenha
problemas na execução do código em javascript em seu projeto. A esse arquivo dê o nome de
validation.js.
8- Não esqueça de implementar a validação para todos os campos. Pesquise sobre expressões
regulares, pois será necessário para realizar a validação do campo de e-mail com uso de
JQuery.
9- OResultado final pode se assemelhar ao apresentado na imagem a seguir:
Checklist:
1- Criar novo projeto do tipo HTML5/Javascript.
2- Realizar pesquisas para utilização de estilos definidos no framework Bootstrap 5.
3- Construir o formulário em HTML5.
4- Adicionar a biblioteca JQuery para implementar a validação de campos, sobretudo o campo
de e-mail.
5- Implementar dois arquivos de javascript, um para as validações e outro para consumo da
API da ViaCEP.
Resultados da aula prática:
Aluno, você deverá entregar:
Aplicação prática de construção de código HTML5/Javascript com uso de framework bootstrap
5 e biblioteca javascript JQuery para validação de campos de formulário de cadastro de
Clientes.
Referências:
Como
validar
email
com
javascript.
Disponível
em:
<https://www.horadecodar.com.br/2020/09/13/como-validar-email-com-javascript/>. Acesso em:
22, setembro de 2022.
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>. Acesso
em: 22, setembro de 2022.
Bootstrap. Disponível em: <https://getbootstrap.com/docs/5.0/getting-started/introduction/>.
Acesso em: 22, setembro de 2022.