API REST Frontend Exercicio Avaliativo 3 - HTML5 CSS3 JavaScript

Cliente para API REST Exercício Avaliativo 3 Objetivo Proporcionar ao aluno a oportunidade e condições de familiarizarse com tecnologias para o desenvolvimento de websites utilizando as HTML5 CSS3 e JavaScript A prática adquirida será utilizada posteriormente na elaboração de interfaces de aplicações que utilizam a Web como plataforma O Exercício Os alunos desenvolverão um pequeno projeto que deverá obrigatoriamente ser construído utilizando HTML5 e suas tags específicas e ter o layout implementado através de CSS5 A interatividade da página será obtida através do uso de códigos em JavaScript Será criada tarefa no AVA para a postagem dos trabalhos e posterior avaliação dos mesmos O exercício receberá uma nota que equivalerá à nota do terceiro trabalho da disciplina O exercício deverá ser entregue e apresentado na data de 06122022 Essa é a última data do semestre Trabalhos não entregues e apresentados até lá receberão a nota ZERO O projeto poderá ser desenvolvido em grupos de até 3 elementos O Projeto Implementação de camada frontend para uma API REST Aplicações web modernas utilizam largamente o conceito de Web APIs separando as partes do código HTML e CSS responsáveis por realizar o layout das páginas web dos dados representados majoritariamente através de JSON e manipulados através de JavaScript Para praticar esses conceitos será construída pelos alunos uma ou mais páginas a critério dos grupos para implementar o cadastro de um sistema de postagens simulando uma rede social simplificada Está disponível no AVA um arquivo chamado Sparkzip É uma pequena aplicação construída em linguagem Java que implementa um servidor HTTP com um endpoint Ponto de acesso de APIs para acesso e armazenamento de postagens Este arquivo deve ser descompactado em uma pasta local e o servidor ativado executandose o arquivo runbat Para quem roda Windows e runsh Para usuários Linux Ao ser executado deverá ser exibido na tela a seguinte interface Figura 1 Interface gráfica do servidor de postagens O servidor disponibiliza seus dados através da seguinte URL httpslocalhost4567postagem e implementa todos os métodos de uma API REST a saber Método HTTP Exemplo URL Significado GET httpslocalhost4567postagem Busca todas as postagens armazenadas GET httpslocalhost4567postagem1 Busca a postagem com id 1 GET httpslocalhost4567postagem titleabc Busca todas as postagens que contêm o termo abc em seu título não importando a posição e se está escrito em letras maiúsculas ou minúsculas GET httpslocalhost4567postagem start0limit5 Busca 5 postagens a partir da posição 0 dos dados armazenados PUT httpslocalhost4567postagem Atualiza uma postagem no servidor POST httpslocalhost4567postagem Insere uma postagem no servidor DELETE httpslocalhost4567postagem25 Apaga a postagem com id 25 do servidor OPTIONS httpslocalhost4567postagem Mostra as opções disponíveis no servidor Figura 2 os recursos disponibilizados pelo servidor Para saber o formato dos JSONs transmitidos entre a aplicação e o servidor utilize uma ferramenta de cliente REST do navegador como RESTClient Insomnia ou outras Procure por REST client na loja do seu navegador preferido Faça uma requisição GET O cadastro a ser construído deve consumir a API através de JavaScript eou JQuery possuir layout responsivo funcional Nada de tabelas onde não se consiga clicar quando acessado através de celulares e implementar paginação de dados de tamanho variável permitindo optar por tamanhos de páginas de 5 10 25 ou 50 linhas de dados conforme exemplo na Figura 3 Figura 3 Exemplo de interface HTML com dados paginados Para a inserção de dados pode ser implementada outra página HTML ou utilizado um formulário em janela modal acionado por um botão na interface que contém a listagem A alteração dos dados também pode ser feita em modal ou outra página e deve ser acionada ao clicar sobre a linha da tabela A exclusão deverá ser feita a partir da interface de alteração mediante solicitação de confirmação por parte do usuário Atenção com o campo tags das postagens que serve para informar termos de interesse utilizando hashtags Essas informações transitam em formato de vetores Ao finalizar a pasta do projeto com todos os artefatos necessários deverá ser compactada e postada no AVA Os alunos devem inscreverse nos grupos criados para as duplas de forma que possam receber os pareceres e notas da avaliação A postagem só é de fato efetivada ao selecionarse a opção Enviar Tarefa Bom trabalho a todos