Página Web

3 4 Stephany Caroline Cavaleto Sant Anna Aberto sextafeira 21 mar 2025 0000 Vencimento quintafeira 3 abr 2025 2359 Objetivos Praticar programação assíncrona para efetuar requisições HTTP Praticar manipulação do DOM para exibir informações dinâmicas em uma página web URL GitHub Classroom httpsclassroomgithubcomat7aaBaaz Como entregar 1 No GitHub Classroom Completar a atividade de acordo com as questões enunciadas commitar commit e submeter push 2 No Moodle Colar o código hash do último commit efetuado essa é a versão que o professor irá corrigir A figura abaixo exemplifica onde encontrar a hash do último commit na página do seu repositório o código nesse exemplo é 661415f Alternativamente você pode obter o código de commit digitando git log no terminal do seu projeto Arquivos prévios indexhtml documento HTML inicialmente contendo apenas a estrutura mínima srcstylescss arquivo CSS contendo apenas a folha de estilos mínima srcmaints arquivo TypeScript inicialmente vazio Estrutura do projeto O projeto está configurado como um projeto Vite modo Vanilla sem frameworks em TypeScript Não altere a localização ou os nomes dos arquivos prévios Você pode criar arquivos ts adicionais para modularizar a aplicação desde que o maints seja mantido como ponto de entrada Ambiente de desenvolvimento As instruções abaixo assumem que você está usando o ambiente de desenvolvimento GitHub Codespaces com todas as dependências necessárias principalmente Nodejs e NPM já instaladas e configuradas Caso você esteja utilizando outro ambiente é sua responsabilidade garantir que todas as dependências estejam instaladas e configuradas corretamente Algumas preocupações para não corromper as convenções do projeto Não altere os atributos type e src do elemento script no arquivo indexhtml É preciso antes de usar o projeto instalar as dependências Marcar como feito 31032025 2123 MCZA01917SAprogweb Ativ 03 Programação assíncrona UFABC httpsmoodleufabcedubrmodassignviewphpid128061 14 npm install Para iniciar o servidor de desenvolvimento npm run dev O que fazer Você deve construir uma galeria de imagens dinâmica que exibe imagens originadas do website Pixabay Porém ao invés de utilizar a API oficial do Pixabay você deve utilizar uma API REST intermediária desenvolvida especialmente para essa atividade que faz requisições à API oficial e retorna os dados de forma simplificada Para mais detalhes sobre a API REST consulte a seção 6 A figura 1 ilustra o design da página web a ser reproduzido Screenshot da galeria de imagens A galeria tem o seguinte comportamento Na área de fotos área inferior temos uma grade de fotos A grade deve ser fluída recomendase para isso usar Grid Layout Cada foto deve ser clicável e ao ser clicada deve abrir em um nova janela a página da imagem no Pixabay Por padrão a grade mostra as fotos mais recentes do serviço consultar a documentação da API REST Na área de busca área superior temos Uma caixa de texto onde o usuário pode digitar tags separadas por espaço Um botão de busca que ao ser clicado deve atualizar a grade com imagens correspondentes às tags digitadas Um botão de limpar que ao ser clicado deve limpar a caixa de texto e exibir as fotos mais recentes O vídeo a seguir ilustra o comportamento esperado da aplicação Vídeo de demonstração 1 31032025 2123 MCZA01917SAprogweb Ativ 03 Programação assíncrona UFABC httpsmoodleufabcedubrmodassignviewphpid128061 24 API REST A API REST a ser utilizada na atividade encontrase no seguinte endereço httpspixabayproxy748269297649southamericaeast1runapp Em resumo temos dois endpoints disponíveis GET apirecents Retorna as fotos mais recentes GET apisearchtagstag1tag2 retorna as fotos correspondentes às tags informadas Consulte a documentação da API para saber em mais detalhes como usála Critérios de corretude A atividade deve atender aos seguintes requisitos mínimos Conter todos os componentes descritos na seção O que fazer ou seja área de fotos área de busca caixa de texto botão de busca e botão de limpar Garantir que a galeria de imagens seja dinâmica ou seja ao clicar no botão de busca a grade de fotos deve ser atualizada com as imagens correspondentes às tags digitadas Garantir que as imagens sejam clicáveis e ao serem clicadas abram em uma nova janela a página da imagem no Pixabay Garantir que o botão de limpar limpe a caixa de texto e reverta a grade de fotos para as fotos mais recentes Alguns aspectos terão avaliação mais flexível Você pode adotar layout e estilo diferentes do apresentado na Figura 1 desde que mantenha o comportamento descrito Você pode adicionar funcionalidades extras como paginação carregamento infinito etc Nesse caso existe a possibilidade de ganhar pontos extras Testes automáticos de qualidade Os documentos tanto HTML quanto CSS e o código TypeScript devem passar nos testes automáticos de qualidade linters O código TypeScript deve ser escrito de acordo com as regras do ESLint O ESLint utiliza o arquivo de configuração eslintconfigmjs para definir as regras de linting Não altere esse arquivo Para rodar os testes de qualidade executar Uma única vez npm install Sempre que desejar verificar a qualidade dos documentos npm test Atividades entregues com erros de linting terão desconto de nota 1 httpspixabaycom Adicionar envio Status de envio Status de envio Nenhum envio foi feito ainda Status da avaliação Não há notas 31032025 2123 MCZA01917SAprogweb Ativ 03 Programação assíncrona UFABC httpsmoodleufabcedubrmodassignviewphpid128061 34