Frameworks para Desenvolvimento de Software

Roteiro de Aula Prática Framework para desenvolvimento de software Disciplina Framework para desenvolvimento de software ROTEIRO DE AULA PRÁTICA 1 Unidade Aula White LabelSeção KLS SOFTWARE Software Acesso online Pago Não Pago Infraestrutura Computador Software IDE NetBeans com Java JDK instalado e configurado Descrição do software NetBeans é uma IDE de desenvolvimento gratuita e de código aberto Útil no desenvolvimento de softwares utilizando as linguagens Javascript HTML5 PHP CC e Java Ferramenta multiplataforma podendo ser instalada no Linux macOS e Windows ATIVIDADE PRÁTICA 1 Atividade proposta Configurar um servidor que será necessário para que a IDE NetBeans execute os projetos desenvolvidos sobre essa ferramenta Para essa atividade faremos a instalação do Tomcat como servidor padrão para rodas as aplicações e para testar você deverá levantar uma aplicação web simples para testar esse servidor Objetivos Criar familiaridade com ambiente de desenvolvimento NetBeans Configurar servidor Tomcat para exibir aplicações desenvolvidas em Java Compreender como testar o servidor tomcat Procedimentos para a realização da atividade Para cumprir com o proposto dessa aula prática é necessário ter previamente instalado o Netbeans e o Java JDK 1 Acessar a página do servidor de internet Tomcat Sua escolha se dá por se tratar de um servidor também desenvolvido pela Apache mesma criadora do NetBeans O que assegurará total integração entre as ferramentas Para isso acesse a página do Tomcat em httpstomcatapacheorgdownloadnativecgi 2 Trabalharemos com a versão 8x 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 64bit Windowszip 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 apachetomcat8582 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 podese 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 8x 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 C Referências Tutorial Tomcat Instalação e configuração Básica Disponível em httpwwwmhavilacombrtopicosjavatomcathtml Acesso em 20 setembro de 2022 ROTEIRO DE AULA PRÁTICA 2 Unidade Digite aqui Aula White LabelSeção KLS Digite aqui SOFTWARE Software Acesso online Pago Não Pago Infraestrutura Computador Software IDE NetBeans com Java JDK instalado e configurado Descrição do software NetBeans é uma IDE de desenvolvimento gratuita e de código aberto Útil no desenvolvimento de softwares utilizando as linguagens Javascript HTML5 PHP CC e Java Ferramenta multiplataforma podendo ser instalada no Linux macOS e Windows ATIVIDADE PRÁTICA 2 Atividade proposta Criar um pequeno projeto composto de um formulário para consumo de API de endereço oferecida pelos Correios A proposta consiste em digitar o CEP e partir disso os demais campos serem preenchidos comas informações de rua bairro cidade e estado Esse consumo de API deverá ser feito com javascript O Formulário para isso deverá ser construído em HTML5 e a parte de estilo podese criar um arquivo de estilo e também utilizar o framework Bootstrap Objetivos Compreender o processo de construção de um projeto web utilizando HTML5 Javascript e CSS3 Criar formulário utilizando a linguagem HTML5 Estilizar o formulário criado em HTML5 com CSS3 Configurar a utilização do framework de estilos bootstrap 5 Implementar consumo de API de endereço disponibilizado pelos correios utilizando javascript Procedimentos para a realização da atividade Para a condução dessa atividade crie um novo projeto HTML5Javascript Note que nessa atividade você fará uso apenas do framework Bootstrap se assim desejar Recomendase sua utilização para que a estilização da página criada possa ser feita a contento 1 Crie um novo projeto escolha nas categorias o HTML5Javascript HTML5JS Application Fique a vontade para escolher o nome que desejar para o projeto mas para efeitos didá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 indexhtml 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 podese 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 indexhtml deverá ser semelhante ao que é mostrado a seguir DOCTYPE html Click nbfsnbhostSystemFileSystemTemplatesLicenseslicensedefaulttxt to change this license Click nbfsnbhostSystemFileSystemTemplatesOtherhtmlhtml to edit this template html head titleCadastresetitle meta charsetUTF8 meta nameviewport contentwidthdevicewidth initialscale10 head body divTODO write contentdiv 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 controllerjs 8 Sugerese utilizar o navegador Google Chrome para ver o resultado do código implementando por você no NetBeans Por esse motivo pode ser necessário instalarativar 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 httpsviacepcombr Acesso em 20 setembro de 2022 ROTEIRO DE AULA PRÁTICA 3 Unidade Digite aqui Aula White LabelSeção KLS Digite aqui SOFTWARE Software Acesso online Pago Não Pago Infraestrutura Computador Software IDE NetBeans com Java JDK instalado e configurado Descrição do software NetBeans é uma IDE de desenvolvimento gratuita e de código aberto Útil no desenvolvimento de softwares utilizando as linguagens Javascript HTML5 PHP CC e Java Ferramenta multiplataforma podendo ser instalada no Linux macOS e Windows ATIVIDADE PRÁTICA 3 Atividade proposta Implementar um formulário de cadastro utilizando spring mvc e bootstrap 5 Esse formulário de cadastro deverá conter campos para inserção de nome sobrenome email senha CEP rua bairro cidade estado número e complemento Objetivos Aplicar conceitos relacionados à utilização dos frameworks Spring web MVC e Boostrap 5 para construção de um formulário totalmente estilizado com CSS de cadastro de usuário muito comumente encontrado em aplicações diversas na web principalmente para cadastro de usuários em websites de ecommerce Procedimentos para a realização da atividade É necessário ter devidamente configurado a IDE Netbeans a máquina virtual Java JDK e o servidor Tomcat que será utilizado para levantar a aplicação desenvolvida em Spring web MVC O resultado esperado deve se assemelhar ao que é visto na imagem a seguir 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 4329 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 indexjsp 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 inserio na área do head da página indexjsp O código deve ser algo parecido com link hrefhttpscdnjsdelivrnetnpmbootstrap502distcssbootstrapmincss relstylesheet integritysha384 EVSTQN3azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC crossoriginanonymous 8 Faça uma pequena conferência visual no arquivo WEBINFredirectjsp e veja se nas configuarções desse arquivo o redirecionamento que está sendo feito aponta para o arquivo indexhtm Deverá estar assim page contentTypetexthtml pageEncodingUTF8 responsesendRedirectindexhtm 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 httpsgetbootstrapcomdocs50gettingstartedintroduction Checklist 1 Ambiente de desenvolvimento NetBeans JDK servidor Tomcat 8x 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 indexjsp criado pelo Spring Web MVC 3 Verificação do redirecionamento feito no arquivo redirectjsp 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 httpsspringioguidesgsservingweb content Acesso em 20 setembro de 2022 Introdução ao Spring web MVC Disponível em httpsnetbeansapacheorgkbdocswebquickstartwebappsspringptBRhtml Acesso em 20 setembro de 2022 ROTEIRO DE AULA PRÁTICA 4 Unidade Digite aqui Aula White LabelSeção KLS Digite aqui SOFTWARE Software Acesso online Pago Não Pago Infraestrutura Computador Software IDE NetBeans com Java JDK instalado e configurado Descrição do software NetBeans é uma IDE de desenvolvimento gratuita e de código aberto Útil no desenvolvimento de softwares utilizando as linguagens Javascript HTML5 PHP CC e Java Ferramenta multiplataforma podendo ser instalada no Linux macOS e Windows ATIVIDADE PRÁTICA 4 Atividade proposta Implementar uma aplicação para cadastro de usuário utilizando HTML5JavaScript Esse formulario pode ser semelhante ao construído na atividade anterior e deverá conter dados básicos como Nome Sobrenome email senha cep rua bairro cidade estado numero e complemento Será necessário construir parte do código em JavaScript para validar os campos verificando se todos foram preenchidos validar o email para verificar se ele foi preenchido corretamente Essa validação do email deverá ser implementada com framework java ou até mesmo biblioteca como a JQuery Todo o formulário deverá ser TOTALMENTE estilizado utilizando o framework bootstrap Objetivos Aplicar conceitos de programação web utilizando Linguagem HTML5 CSS e javascript Utilizar recursos prontos do Framework Bootstrap para estilização do formulário criado em HTML5 Implementar o consumo da API ViaCep para preenchimento automática dos campos de endereço a partir do CEP Utilizar a biblioteca JQuery para implementar a validação de campos do formulário principalmente o campo de email Procedimentos para a realização da atividade Para realização dessa atividade será necessário ter configurado o ambiente de desenvolvimento NetBeans java JDK e servidor Tomcat 1 Vamos criar um novo projeto do tipo HTML5JavaScript 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 HTML5JavaScript 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 httpsgetbootstrapcomdocs50gettingstartedintroduction 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 titleCadastro de Clientetitle meta charsetUTF8 meta nameviewport contentwidthdevicewidth initialscale10 link hrefhttpscdnjsdelivrnetnpmbootstrap502distcssbootstrapmincss relstylesheet integritysha384 EVSTQN3azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC crossoriginanonymous script typetextjavascript srchttpsajaxgoogleapiscomajaxlibsjquery171jqueryminjsscript 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 mainjs 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 validationjs 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 email com uso de JQuery 9 O Resultado final pode se assemelhar ao apresentado na imagem a seguir Checklist 1 Criar novo projeto do tipo HTML5Javascript 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 email 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 HTML5Javascript 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 httpswwwhoradecodarcombr20200913comovalidaremailcomjavascript Acesso em 22 setembro de 2022 Validando email em inputs HTML com javascript Disponível em httpswwwdevmediacombrvalidandoemaileminputshtmlcomjavascript26427 Acesso em 22 setembro de 2022 Bootstrap Disponível em httpsgetbootstrapcomdocs50gettingstartedintroduction Acesso em 22 setembro de 2022 lOMoARcPSD48609375 SUPERIOR DE TECNOLOGIA EM DESENVOLVIMENTO BACKEND NOME ROTEIRO DE AULA PRÁTICA FRAMEWORKS PARA DESENVOLVIMENTO DE SOFTWARE SÃO PAULO 2024 NOME RGA lOMoARcPSD48609375 ROTEIRO DE AULA PRÁTICA FRAMEWORKS PARA DESENVOLVIMENTO DE SOFTWARE Portifólio apresentado à Universidade ANHANGUERA como requisito para a obtenção de média semestral na disciplina de Frameworks para desenvolvimento de software SÃO PAULO 2024 lOMoARcPSD48609375 1 INTRODUÇÃO As atividades propostas tem por objetivo solidificar e fixar os conhecimentos adquiridos em aulas foram realizadas através das ferramentas NetBeans Tomcat e Java JDK as ferramentas proporcionaram ambientes altamente iterativos de fácil desenvolvimento Conforme solicitado no roteiro de aula prática foi necessário instalar todas as ferramentas necessárias criar um formulário para cadastro de endereço contendo informações como CEP Rua Bairro Cidade Número e Complemento também foi necessário criar alguns formulários de cadastro contendo além das informações acima Nome e sobrenome lOMoARcPSD48609375 2 DESENVOLVIMENTO 21 MÉTODO E RESULTADOS ATIVIDADE 1 a Instalar TomCat NetBeans e o Java JDK b Descompactar a pasta do TomCat e mover para o disco Local C C c Abrir o NetBeans e criar um novo projeto Java Web Imagem 1 Criação de um novo projeto d Escolher o local onde será salvo o projeto e Selecionar o servidor TomCat Imagem 2 Selecionando servidor TomCat lOMoARcPSD48609375 f Definir usuário e senha para o servidor Imagem 3 Configurando servidor TomCat g Selecionar o framework Spring Web MVC h Executar uma aplicação teste no NetBeans i Acessar o link gerado pelo Tomcat no navegador para ver sua aplicação em funcionamento Imagem 4 Estrura básica de spring MVC lOMoARcPSD48609375 Imagem 5 Código para testar o projeto na web Imagem 6 Resultado teste web ATIVIDADE 2 a Criar um novo Projeto b Definir a estrutura do Projeto lOMoARcPSD48609375 c No indexhtml criar um formulário com os campos CEP Rua Bairro Cidade Estado Número e Complemento d Estilizar o Stylecss utilizando o framework Bootstrap 5 para estilização adicional e Implementar no controllerjs a lógica para consumir a API de endereço dos Correios usando Javascript f Testar no Navegador Imagem 7 Codigo para cadastro lOMoARcPSD48609375 Imagem 8 edição css Imagem 9 edição java lOMoARcPSD48609375 Imagem 10 Resultado do código Imagem 11 Consulta de CEP lOMoARcPSD48609375 4 Imagem 12 Consulta de CEP não existente ATIVIDADE 3 a Criação do Projeto o No NetBeans ir em File New Project o Selecionar Java Web na categoria Java with Ant e escolher Web Application o Nomear o projeto como cadastroUsuario b Configuração do Projeto o Definir o servidor Apache Tomcat e a versão do Java EE o Marcar o framework Spring Web MVC e usar a versão Spring atualizada c Adicionar Bootstrap o No arquivo indexjsp adicionar o CDN do Bootstrap 5 no head d Verificar o redirecionamento lOMoARcPSD48609375 o No arquivo WEBINFredirectjsp verificar se o redirecionamento aponta para indexhtm e Construir o Formulário o No indexjsp criar o formulário com os campos Nome Sobrenome Email Senha CEP Rua Bairro Cidade Estado Número e Complemento o Utilizar classes do Bootstrap 5 para estilizar o formulário f Título da Página o Adicionar o título Formulário de Cadastro na página do formulário g Teste da Aplicação o Iniciar o servidor Tomcat e verifiar se a aplicação está rodando corretamente Imagem 13 Código para geração do formulário lOMoARcPSD48609375 Imagem 14 Direcionamento Indexjs Imagem 15 Resultado formulario lOMoARcPSD48609375 ATIVIDADE 4 1 Criação do Projeto o Criar um novo projeto HTML5JavaScript no NetBeans o Nomar o projeto como cadUsuario e não u lizar nenhum template 2 Configuração Inicial o Desmarcar todas as ferramentas adicionais durante a criação do projeto 3 Construção do Formulário o Criar um formulário em HTML5 com os campos Nome Sobrenome Email Senha CEP Rua Bairro Cidade Estado Número e Complemento o Utilizar o Bootstrap 5 para estilizar o formulário 4 Adicionar JQuery o No head do indexhtml adicionar o CDN do Bootstrap e JQuery 5 Consumo da API ViaCEP o Criar um arquivo mainjs para implementar o consumo da API ViaCEP e preencher os campos de endereço automaticamente 6 Validação de Campos o Criar um arquivo validationjs para implementar a validação dos campos do formulário o Utilizar expressões regulares para validar o campo de email com JQuery 7 Teste da Aplicação o Verificar se todos os campos são validados corretamente e se o consumo da API ViaCEP está funcionando lOMoARcPSD48609375 Imagem 16 Codigo CadUsuario Imagem 17 Conf CSS lOMoARcPSD48609375 Imagem 18 Resultado do código 3 CONCLUSÃO Essas atividades proporcionaram uma compreensão prática de configuração de servidores e ambientes de desenvolvimento criação e estilização de formulários web com HTML5 CSS3 e Bootstrap Consumo de APIs externas e validação de dados com JavaScript e JQuery e a utilização de frameworks como Spring MVC para desenvolvimento de aplicações web robustas Essas habilidades são fundamentais para o desenvolvimento de aplicações web eficiente ajudando na compreensão para desafios mais complexos no futuro