Lista 09 - Node + Express + Vue.js

Prazo: 09/02/2022

Descrição:

Enviar, através do formulário. Será necessário criar um repositório no GitHub para realizar o envio dessa atividade.

Exercício Prático

Backend

1. Você deve converter o projeto criado anteriormente com Node e Express em uma API REST
2. Basicamente o projeto passará a responder a requisições para duas rotas /pokemons e /pokemons/id
3. Ambas as URLs devem retornar apenas JSON
4. A primeira URL deve retornar as seguintes informações:
   • id
   • nome
   • tipos
5. A segunda o URL deve retornar a seguintes informações quando id informado existir:
   • Nome
   • Número da espécies
   • A foto do pokemon
   • Tipos
   • PvMax
   • Ataque
   • Defesa
   • Ataque Especial
   • Defesa Especial
   • Velocidade
   • Peso
   • Altura
6. Quando o id não existir, a API deve retornar com erro 404 e um json com a mensagem “Pokemon não encontrado”

Frontend

1. O seu objetivo neste atividade é transformara Pokedex desenvolvida na lista anterior em um SPA (Single Page Application). Para isso você deve utilizar o framework VueJs, aliado a dois framework do seu ecossistema Vuex e Vue-Router
2. A rota principal /pokemons deve mostrar um card para cada pokemon. Neste card as seguintes informações devem estar presentes:
   • Nome
   • A foto do pokemon
   • Número da espécie
   • Tipos (todos para aqueles pokemons que possuem mais de um tipo)
3. Na página principal deve haver um campo de texto (input) que deverá ser usado para buscar um pokemon, por nome ou por tipo. Quando algo for digitado nesse campo, a lista de pokemons deve ser automaticamente atualizada.
   • Dica: Concatene o nome e os tipos de um pokemon e realize uma busca na string resultante dessa operação.
   • Veja o exemplo de funcionamento dessa funcionalidade aqui
4. A rota raiz /, deve mostrar o mesmo conteúdo da rota /pokemons
5. Ao clicar no card do pokemon listado na página principal (/pokemons), a pokedex deve mostrar mais detalhes do pokemon escolhido
   • Para isso será necessário utilizar o VueRouter, assim você poderá atualizar apenas uma porção dela, evitando o refresh da página inteira
   • Dica: Utilize o id pokemon para recuperar as informações no backend.
   • Dica2: Utilize a URL /pokemons/id para a página que mostra os detalhes de um pokemon
6. A seguintes informações devem ser mostradas na página de detalhes de um pokemon:
   • Nome
   • Número da espécie
   • A foto do pokemon
   • Tipos
   • PvMax
   • Ataque
   • Defesa
   • Ataque Especial
   • Defesa Especial
   • Velocidade
   • Peso
   • Altura
7. Caso o usuário tente visualizar um pokemon que não existe, você deve redirecioná-lo para uma página de erro e nela deve ser mostrada a mensagem de erro enviada pelo backend
   • Dica: Trate o erro 404 enviado pelo backend

Mais detalhes

• Dica: Durante o desenvolvimento teste seu código com o arquivo Pokedex-light

• Print da minha Pokedex ao acessarmos /pokemons ou /

• Print da minha Pokedex ao acessarmos /pokemons/6

• Filtro em ação