[UFMS Digital] Tutorial Checkout de Presença Fundamentos de Web - Módulo 4

[Música] Olá pessoal tudo bem Professor Luciano EDP aqui e a gente resolveu gravar esse mini tutorial para ajudar a vocês realizarem atividade de checkout do módulo 4 da disciplina de fundamentos web ok então eu trago aqui eh o enunciado dessa atividade né a atividade de checkout do módulo 4 é uma atividade que vai buscar realizar construção de uma aplicação ou de um trecho né de um pequeno pedaço de uma aplicação frontend utilizando eh JavaScript né nessa atividade eu fiz uma proposta de se construir aquele formulário em HTML5 que tinha sido a atividade de checkout do

módulo 2 utilizando algum outro tipo de Framework front end eh e esse Framework ele eh eu dei algumas sugestões como Bootstrap Carry vool angular react porque eles são os mais utilizados hoje em dia né Eh inclusive na nossa atividade eh ele segue o mesmo eh o mesmo formulário que foi utilizado na atividade eh do checkout do módulo dois e ali eu apresento para vocês alguns outros links sobre como trabalhar com os formulários eh cada um dos inputs dos elementos né do formulário em HTML5 como que a gente vai como que eu espero que esses dados

do formulário sejam trabalhados em relação à obrigatoriedade e acessibilidade né que como eu tinha colocado ali e a execução né e eu acredito que muitos alunos tiveram muita dificuldade principalmente na execução dessa atividade tá eh em primeiro lugar infelizmente né muit das muitas das documentações que nós temos nesses frameworks eles vão acabar estando somente em inglês então a minha sugestão a princípio é Além de estudar um pouquinho de inglês né mas a gente sabe que nem sempre é possível a gente tem uma dificuldade uma curva de aprendizagem maior eh utilizar algum tipo de tradutor também

para essa para essa documentação eh e tem muito material gratuito disponível em diversos sites de cursos que podem eh mostrar para vocês como fazer alguma eh apli ação curta ou um um eh como resolver um pequeno problema enfim nessa atividade eu trouxe duas abordagens ali né A primeira é a de utilizar de forma apenas Nativa então utilizar toda tudo aquilo que um Framework Vai disponibilizar para fazer a construção de uma página de formulário e de uma página de relatório mostrando esses dados do formulário ou uma abordagem mais híbrida né que seria eh utilizar o auxílio

deuma de alguma outra linguagem de programação que não o JavaScript para poder apresentar Por que essas duas abordagens né Eh para realizar o envio de um dado do formulário para um relatório é preciso que a gente tenha um serviço uma aplicação que vá ser responsável por pegar essa informação e na na numa página real né ele pegar e essa informação enviaria para um servidor esse servidor ele faria algum tipo de tratamento ele faria aquilo que ele foi programado para realizar salvaria isso em algum tipo de banco de dados em algum tipo de armazenamento e quando

houver uma necessidade de eh processar esses dados ou mesmo de eh relatar né criar um relatório sobre esses dados ele é acessado por um outra um outro serviço uma outra página e essa página Vai lá renderizar vai criar essa essa esse HTML mostrando né esses dados aí de acordo com como a página foi programada eh a gente consegue através dos frameworks JavaScript eh simular esses servidores e existem diversas formas de fazer a simulação de servidores né mas o foco dessa dessa atividade não está na simulação dos Servidores em si está na construção do formulário e

na visualização desses dados posteriormente tá muito o foco é muito maior ainda na construção do formulário tá então para ajudar aqui vocês eu fiz o seguinte né eu criei eh utilizando o JavaScript então utiliz o typescript na realidade né eu utilizei o react com o o o Vit com a linguagem typescript e adicionei ali alguns outros frameworks visuais então e por exemplo eu tinha sugerido a utilização do Bootstrap Então nesse pequeno tutorial eu coloquei a utilização do material euu né Eh paraa construção dos elementos visuais por exemplo tá ão Todas aquelas sugestões que eu dei

para vocês são sugestões e vocês não são obrigados a utilizá-las tá vocês podem inclusive utilizar outros frameworks né O interessante é conseguir fazer a utilização desses frameworks então o que que eu fiz eu coloquei um no no meu site pessoal né um linkzinho que depois eu vou passar pr pra tutoria e eles vão disponibilizar para vocês lá no sitezinho e tem dentro de projetos form web tá então assim que vocês acessarem o form web e vocês vão se deparar com um IDM né um um um layam e de um pequeno projetinho que eu preparei para

que vocês possam utilizá-lo como base tá só lembrando não é utizar o meu e enviar o meu é o meu A ideia é que vocês consigam trazer ele PR máquina de vocês estudar olhar como que eu realizei e depois buscar um Framework parecido cada um tem a sua peculiaridade a sua forma tá de se programar então por exemplo eu utilizei um com como tinha comentado n utilizar ele o o o principal pré-requisito é o node n como a maioria dos dos frameworks atuais então basicamente o node e eh o projeto já tem ali dentro da

sua configuração todos os pacotes né E que são necessários e deixei ele armazenado ele salva ali em um Git para quem quiser pegar o o projeto ele tá público Ok E aí aqui eu vou mostrar um trechinho aqui para vocês né no vesco da do que que eu fiz ele é basicamente um projeto padrão do do react tá onde eu basicamente criei duas páginas tá na verdade um componente né que ele vai ser renderizado em uma página e uma outra página que é a primeira é a página que representa o formulário o formulário HTML que

vai ser aquele que vai pegar recolher todos esses dados e uma página que representa para a o o relatório onde ele vai pegar então Aqueles dados que foram preenchidos no formulário e renderizar no HTML5 tá então aqui para mostrar para vocês né Eh eu utilizei o básico do do do react com typescript para realizar a atividade eh dentro lá do sitezinho na página lá no final eu deixei alguns links para vocês consultarem o básico de como gerar a página como gerar o formulário o que que é cada uma desses elementos cada uma dessas linhas tá

eh O O react ele tem já um padrão tanto de eh roteamento de páginas Então como que ele vai mostrar essas páginas como que os dados vão trafegar nessas páginas né Lembrando que nesse exemplo eu não faço uso de servidores e eu eh nem mesmo simulado então o envio eh dessa informação é feito de forma eh automática por meio eh de Stories por meio de uma biblioteca eh os status os estados né da do do react ok tá e eu sugiro que quando atividade não deixar explícita que vocês precisam subir algum tipo de servidor enfim

né Vocês eh tem diversas ferramentas de desenvolvimento que vocês podem utilizar para fazer essa simulação de transferência de dado ou muitas das vezes quem tiver trabalhando com frontend somente às vezes a gente faz o nós chamamos de dados mocados né que é um mooc né é um Jon é um XML que tem ali uma quantidade de dados já pré-determinado e você vai carregar ela na sua aplicação para você ver como que a como que a interface vai funcionar então aqui eu basicamente defini uma interface que representa formulário de dados né de acordo com aquela de

acordo com a estação que foi feito no no no no checkout né do módulo 4 tá então aqui eu tenho eh obviamente não tá exatamente igual né de proposta eu tirei algumas coisinhas né para vocês não eh ficarem tentados a fazer aí um uma cópia Tá mas assim eu represento esse formulário de dados e eu vou renderizar esse formulário eh dentro de um de um componente react né um componente que representa uma página né eh e aí como eu tinha comentado eu uso eh um Hook depois vocês podem pesquisar essas essas informações quem for utilizar

react Mas já adianto que a premissa a tecnologia vai ser muito semelhante em outros eh em outros frameworks então eu eu uso aqui isso é o que vai simular né o meu preenchimento e o armazenamento de dados do formulário e ele vai simular esse esse preenchimento de acordo com os tipos da interface que eu defini logo acima então eu crio ali né um um form data n o form data é o que vai ser responsável por armazenar todos os dados que que forem preenchidos pela pessoa que for abrir essa página e obviamente que eu coloquei

ali eh a como a atividade diz nós temos que ter uma validação né então cada um dos Campos podem ter algum tipo de validação principalmente se ele for obrigatório tá não coloquei nada elaborado Por Exemplo máscara de CPF validação de CPF nada disso até porque na atividade também não foi solicitado dessa forma mas nada impede que você possa realizar título de experiência título de aprendizado Ok eh então eu tenho as minhas as minhas funções que são as funções responsáveis por eh coletar e fazer o link desses inputs né Desse dado aí que tá sendo eh

por meio desse formulário e armazenar ele em uma variável tem toda a função que eh corresponde a quando um campo é alterado tá então geralmente para fazer validação ou fazer algum tipo de de verificação é preciso que quando esse campo for alterado alguma função seja eh eh ativada tá é o mesmo para select input são os campos né Geralmente os campos de texto select são aqueles select Box né que é aquilo que a gente abre uma caixinha de opções o check box por exemplo é aquele quadradinho onde a gente geralmente usa o checkbox para múltiplas

seleções logo em seguida eu defino uma função que é a função responsável por fazer a validação então por exemplo quando existem Campos que são Campos obrigatórios né Por exemplo aqui ó se o campo for obrigatório ele tiver nulo né isso vai dar um erro aqui ele vai ele vai setar que tem um um erro porque esse campo provavelmente é um campo obrigatório então ele precisa ser preenchido ele não pode estar vazio como tá aqui ó se ele estiver vazio ele vai lançar um um um temp error aqui ele vai deixar true né nessa variável full

name por exemplo tá E e Essas funções de validação elas são funções que são chamadas quando nós fazemos um submit do formulário Ou seja quando nós preenchemos o formulário ou não né E clicamos lá no botão que ent o botão de envio desses dados Então a primeira coisa que ele vai fazer é verificar se ele tá válido né se ele tiver válido ele vai usar uma função aqui do react né do do do roteamento do react que vai chamar o Barra report barra report é o que é é a página que Nós criamos que renderiza

esse componente report aqui que representa o o relatório que vai ser impresso tá eh como eu havia comentado né Nós utilizamos o material u tá então muitos desses elementos Eles não estão no meu exemplo que eu vou disponibilizar para vocês e nos que vocês forem utilizar eh muitas das vezes no Bootstrap por exemplo né Eh frameworks que tem um apelo visual que tem já uma biblioteca visual eh com um um design visual já bem estabelecido Muito provavelmente vocês não vão fazer a construção do formulário diretamente em html não que não seja possível incluindo no react

ele pode ser possível mas para manter um padrão e mostrar como que nós podemos utilizar mais de um Framework por exemplo para essa atividade eu optei por usar o Mat u então por exemplo para mostrar o formulário eu uso alguns elementos como o box typograph que é o que que é o que mostra um texto na tela então ao invés de usar um H1 n do HTML ou UMP né que é o de parágrafo e o group que aí ele tem alguns elementos de Campos de Field set que é o que a gente solicitou no

no na atividade né que e os dados sejam agrupados em três grupos né de três Campos eh de dados pessoais enfim tem toda a descrição ali e o elemento que representa o eh nesse caso aqui o input né o input do do formulário então a gente usa o form control por exemplo né junto com form control os elementos do Mat u para dar aquele visual e também para trazer pra gente as questões Principalmente as questões de acessibilidade a leitura eh das lables eh texto alternativo para qualquer tipo de leitor de tele e tudo mais de

acordo com o que foi pedido na atividade então ele basicamente esse formulário aqui eu vou passar rapidinho para vocês assim só por cima porque vocês vão ter acesso depois né então aqui eu tô desenhando basicamente o formulário desenho todo o formulário todas as atividades aqui tem o o menu eh selection de estados né que vocês podem fazer ou podem deixar paraa pessoa escrever também e aí a gente chega lá no finalzinho que a gente vai ter o campo de enviar né Enviar esse submeter esse formulário E aí ele vai para essa nossa página de eh

relatório essa página de relatório ela é extremamente simples ela foi basicamente eh criada para mostrar eh Campo valor Então a gente tem ali um map o map uma função de vetores né que vai percorrer esses dados de entrada do formulário e vai mostrar de acordo com chave valor chave valor então é o campo do formulário e o valor do formulário então uma página extremamente simples tá questão do formulário e eu vou mostrar aqui para vocês ele já tá em execução mostrar aqui para vocês como que a gente e executa esse formulário então aquele código que

tá lá disponível para vocês ele tá dessa forma aqui então tenho os Field sets né com alguns grupos grupos de dados pessoais grupos de dados de e contato e dados de cadastro aqui por exemplo né enfim se a gente Tenta enviar ele vai te dizer Olha tem um monte de Campo obrigatório aí que é preciso né então V fazer aqui um não tem validação nenhuma tá então só pra gente só aqui para mostrar para vocês né ó se eu tentar enviar ainda el vai dizer que tem mais Campo obrigatório né De acordo com a atividade

Zinha lá e aí Eu preencho aqui essas informações e vou lá e envio né pr pra página de relatório de cadastro nesse relatório de cadastro eu tenho de acordo com o os campos né campo e valor então eu tenho full name e o dado que foi enviado CPF e o dado que foi enviado enfim tá para cada um dos dados né o interesse Aqui de acordo com com o que foi eh marcado com cheque né no checkbox por exemplo tá E lá no final na nossa página sobre a esse projetinho eu tenho ali um um

um dois links que vão mostrar os passos né como que eu vou fazer isso utilizando react tá eh tem um uma página legada né uma página que já é mais antiga que fala só sobre o formulário eh tem alguns elementos do react que foi atualizado então provavelmente essa página ela vai est desatualizado em relação a isso mas eu sugiro que vocês utilizem ela para ter uma base sobre o formulário ela é uma página muito bem construída né aqui eu vou mostrar um trechinho para vocês que ela vai basicamente mostrar como que é o formulário e

ela tá em português ok e a página também em português de introdução ao react Dev tá e sugiro aí que vocês deem uma lida nem sempre vai ter material tá em português para para ser utilizado eh portanto assim n infelizmente vocês vão ter que se desdobrar um pouquinho para realizar Essas atividades que a documentação tiver em inglês ok Então é isso a ideia do do tutorial não é dar resposta para vocês mas mostrar um caminho que vocês podem seguir eu optei por um Framework em conjunto com um outro Framework e Mostrei mais ou menos como

que eu fiz ali Qual foi o caminho que Eu segui caso eu tivesse que fazer essa essa atividade né independente do Framework que vocês forem utilizar a ideia é muito parecida tá então vocês podem utilizar esse material esse projeto e esse vídeo como uma base para que vocês consigam realizar com sucesso a atividade de vocês ok então tenham Bons estudos [Música]