Projeto SerieLog — Estado e Reatividade

Disciplina: Programação Web 2 Assunto: Estado e Reatividade Professor: Me. Danilo Bueno Grupos: duplas Duração: 4 aulas de 50 minutos em sala

Importante

Contextualização

A SerieLog é uma plataforma pessoal de registro de séries. Você e seu colega foram contratados como devs front-end para construir a interface da plataforma — desde a listagem até o cadastro de novas séries.

O backend já está pronto: um servidor JSON Server rodando localmente que expõe uma API REST com os dados das séries.

Antes de começar: siga o Apêndice da descrição do projeto para subir o backend na sua máquina.

Como começar

Crie um novo projeto Vue 3 com Vite:

npm create vite@latest serielog -- --template vue --no-interactive
cd serielog-front
npm install
npm run dev

Após criar o projeto, substitua o conteúdo de src/App.vue pelo código abaixo. Este é o ponto de partida — o projeto está estruturado mas ainda não faz nada.

<template>
  <main>
    <h1>SerieLog</h1>
    <p>Carregando séries...</p>
  </main>
</template>

<script setup>
  // missões a partir daqui
</script>

Missão 1 — Listando séries da API

Antes de testar: o backend precisa estar rodando. Se ainda não configurou, siga o Apêndice da descrição do projeto e execute npx json-server db.json no terminal do projeto backend.

1.1 Ao abrir a aplicação, o usuário deve ver a lista de todas as séries cadastradas no backend (http://localhost:3000/series).

1.2 Cada item da lista deve exibir: título, gênero, nota e status (assistida ou pendente).

Por que é necessário usar ref([]) em vez de let series = []? O que acontece se você usar uma variável comum?

Missão 2 — Formulário de cadastro

2.1 Adicione um formulário com campos para título, gênero, nota, ano e status de assistida. Os campos devem estar vinculados a um objeto de estado reativo.

2.2 Verifique que o estado reflete os valores digitados em tempo real antes de avançar.

Por que agrupamos os campos do formulário em um único ref({...}) em vez de criar um ref separado para cada campo?

Missão 3 — Enviando o cadastro

Antes de codar, revise os verbos HTTP:

Verbo	Ação
`GET`	lê dados
`POST`	cria dados
`PUT/PATCH`	atualiza dados
`DELETE`	remove dados

3.1 Ao submeter o formulário, a nova série deve ser enviada ao backend e aparecer na listagem imediatamente, sem recarregar a página.

3.2 Após o cadastro bem-sucedido, o formulário deve voltar ao estado inicial.

Missão 4 — Painel de estatísticas

4.1 Exiba dois contadores que reflitam sempre o estado atual da lista:

total de séries cadastradas
quantas séries já foram assistidas

Cadastre novas séries e confirme que os contadores atualizam sem nenhuma ação extra.

Entrega individual

Ao final das aulas, cada integrante da dupla deverá:

Responder o questionário individual (perguntas reflexivas das missões)