Este app foi desenvolvido com o objetivo de consumir duas APIs: a Trace Moe e a AniList. Ao consumir a API Trace Moe, o app consegue reconhecer os episódios e animes correspondentes às imagens inseridas pelos usuários. Além disso, utilizando a API AniList, é possível trazer informações detalhadas sobre cada um dos animes encontrados.
O app foi construído pensando em oferecer aos usuários uma experiência em português, facilitando a navegação e compreensão do conteúdo disponível. A interface do usuário é simples e intuitiva, permitindo que qualquer pessoa possa utilizá-la sem dificuldades. Foi utilizado um conjunto de tecnologias para garantir a qualidade e a eficiência do aplicativo. Entre elas, destacam-se o TypeScript e o Cypress, que ajudaram a criar um código mais seguro e robusto, além de permitirem a execução de testes automatizados.
Este foi o quinto repositório de código apresentado no Curso Superior de TSI do IFMS como requisito para obtenção da nota parcial das atividades da unidade curricular Construção de Páginas Web IV.
| ← Repositório anterior | Próximo repositório → |
|---|
As seguintes tecnologias foram utilizadas para desenvolver este app:
| Papel | Tecnologia |
|---|---|
| Prototipagem | Figma |
| Ambiente de execução | Node |
| Linguagem de programação | TypeScript |
| Biblioteca de interface de usuário | React |
| Empacotador de módulos | create-react-app |
| Framework de teste | Cypress |
| Base de dados | Trace Moe |
Os créditos pelas mídias utilizadas estão disponíveis aqui.
-
Clone o repositório de código em sua máquina;
-
Abra um shell de comando de sua preferência (prompt de comando, PowerShell, terminal etc.);
-
Instale as dependências do projeto através do seguinte comando:
$ npm installCaso esteja utilizando o gerenciador de pacotes Yarn, execute o seguinte comando como alternativa:
$ yarn- Execute o seguinte comando para iniciar o app:
Para npm:
$ npm run startPara Yarn:
$ yarn start- Execute o Cypress através do seguinte comando:
Para npm:
$ npm run cy:openPara Yarn:
$ yarn cy:open-
O comando acima abrirá uma janela do Cypress solicitando que selecione o tipo de teste: E2E (teste de ponta a ponta) e Component (teste de componente). Selecione a opção desejada;
-
Selecionada a opção desejada, será solicitado que selecione um navegador web para executar os testes. É recomendado selecionar o navegador Electron, pois o mesmo foi desenvolvido pelo time do framework Cypress e contém ferramentas integradas que podem colaborar com a escrita dos testes unitários;
-
Selecionado o navegador web, os testes unitários, seja de ponta a ponta ou de componente, serão apresentados por diretório para que você os selecione para que sejam executados.