Atividade Vue 3 — SerieFlow

Disciplina: Programação Web 2 Assunto: SPAs e Frameworks JavaScript Client-Side Professor: Me. Danilo Bueno Grupos: duplas Duração: 3 aulas de 50 minutos em sala (+ 1 aula de teoria)

Importante

• Material de apoio — SPAs e Frameworks JavaScript
• Slides da aula

Contextualização

A SerieFlow é uma startup que começou como um catálogo estático de séries — um HTML com uma lista hardcoded que o sócio fundador atualizava manualmente toda semana. Com o crescimento da base de usuários, a equipe percebeu que precisava de uma interface mais dinâmica: filtros por gênero, buscas por título, páginas de detalhe.

Você foi contratado como desenvolvedor front-end para modernizar o projeto, migrando para Vue 3 + Vite — a stack escolhida pela equipe técnica.

O array de séries já está pronto. Sua missão é configurar o ambiente, estruturar o projeto e começar a componentização.

Como começar

Após configurar o ambiente na Missão 1, crie o arquivo src/data/series.js com o conteúdo abaixo:

export const series = [
  {
    id: 1,
    titulo: "Breaking Bad",
    genero: "Crime / Drama",
    nota: 9.5,
    ano: 2008,
  },
  { id: 2, titulo: "Succession", genero: "Drama", nota: 8.9, ano: 2018 },
  {
    id: 3,
    titulo: "Severance",
    genero: "Ficção Científica",
    nota: 8.7,
    ano: 2022,
  },
  { id: 4, titulo: "The Wire", genero: "Crime / Drama", nota: 9.3, ano: 2002 },
  { id: 5, titulo: "Fleabag", genero: "Comédia", nota: 8.7, ano: 2016 },
  {
    id: 6,
    titulo: "Chernobyl",
    genero: "Drama / História",
    nota: 9.4,
    ano: 2019,
  },
];

Como funciona

• Trabalhem em dupla
• Cada integrante responde o questionário individual no Moodle

Cronograma

Missão 1 — Configurando o ambiente

A SerieFlow usa Vite + Vue 3. Antes de codar, garantam que o ambiente está funcionando.

Tarefa 1.1 — Verificar instalações

No terminal, verifique se Node.js e NPM estão instalados:

node --version
npm --version

Se algum não estiver instalado, acesse nodejs.org e instale a versão LTS.

Tarefa 1.2 — Criar o projeto

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

Abra http://localhost:5173 no navegador. Vocês devem ver a tela inicial do Vue + Vite.

Tarefa 1.3 — Explorar a estrutura

Abra o projeto no VS Code e identifique o papel de cada arquivo:

• index.html — qual é a função desse arquivo em uma SPA?
• src/main.js — o que faz app.mount('#app')?
• src/App.vue — o que são as seções <template>, <script setup> e <style>?
• package.json — quais scripts estão disponíveis e o que cada um faz?

Por que a pasta node_modules/ não deve ser versionada no Git? O que aconteceria se outra pessoa clonasse o repositório sem ela?

Missão 2 — Exibindo as séries

Com o ambiente rodando, vamos exibir os dados da SerieFlow na tela.

Tarefa 2.1 — Limpar o projeto inicial

Substitua o conteúdo de src/App.vue por uma estrutura limpa:

<template>
  <main>
    <h1>SerieFlow</h1>
  </main>
</template>

<script setup></script>

<style scoped></style>

Crie também a pasta src/data/ e adicione o arquivo series.js com o array fornecido em “Como começar”.

Tarefa 2.2 — Exibir uma única série

Antes de trabalhar com a lista completa, declare um único objeto diretamente no <script setup> do App.vue e exiba suas propriedades no template:

<template>
  <main>
    <h1>SerieFlow</h1>
    <h2>{{ serie.titulo }}</h2>
    <p>{{ serie.genero }}</p>
    <span>⭐ {{ serie.nota }}</span>
  </main>
</template>

<script setup>
const serie = { titulo: "Breaking Bad", genero: "Crime / Drama", nota: 9.5 };
</script>

Confirme que os dados aparecem na tela.

Mude o valor de nota no objeto (por exemplo, de 9.5 para 10.0) e salve. O que aconteceu na tela? O que isso indica sobre a relação entre o <script setup> e o <template>?

Tarefa 2.3 — Listar as séries com v-for

Remova o objeto serie do <script setup> e importe o array do arquivo series.js. Use v-for para exibir uma lista com o título e a nota de cada série.

Tarefa 2.4 — Testar

Adicionem uma série ao array (diretamente no series.js) e salvem. A lista atualiza automaticamente? E se removerem uma série?

Missão 3 — Primeiro componente

A SerieFlow precisa que cada série seja exibida como um card visual, não como item de lista.

Tarefa 3.1 — Criar SerieCard.vue

Crie o arquivo src/components/SerieCard.vue. Use dados estáticos (hardcoded) por enquanto — apenas para confirmar que o componente aparece na tela:

<template>
  <div class="card">
    <h2>Breaking Bad</h2>
    <p>Crime / Drama · 2008</p>
    <span class="nota">⭐ 9.5</span>
  </div>
</template>

<script setup></script>

<style scoped>
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  margin: 0.5rem;
}
.nota {
  font-weight: bold;
}
</style>

Tarefa 3.2 — Usar o componente em App.vue

Importe e use <SerieCard /> dentro do App.vue. Confirme que ele aparece na tela.

Tarefa 3.3 — Um card por série

Substitua a lista simples da Missão 2 por um <SerieCard /> para cada item do array (usando v-for). Como o componente ainda usa dados hardcoded, todos os cards vão mostrar “Breaking Bad” — isso é esperado.

O que precisaria mudar no componente para que cada card exibisse os dados da série correta? (não implemente — apenas reflita)

Missão 4 — Desafio: buscar uma série real

A SerieFlow quer que o usuário possa buscar qualquer série por título, conectando à TVMaze API — uma API pública de séries que não exige cadastro nem chave.

Tarefa 4.1 — Explorar a API

Testem a URL abaixo diretamente no navegador:

https://api.tvmaze.com/singlesearch/shows?q=breaking+bad

Observem a resposta JSON. Identifiquem onde estão os campos: nome, resumo, imagem e nota.

O que acontece se vocês buscarem um título que não existe? Qual é a resposta da API nesse caso? Como o código precisaria tratar isso?

Tarefa 4.2 — Criar BuscaSerie.vue

Crie src/components/BuscaSerie.vue com um input de busca e um botão:

<template>
  <div class="busca">
    <input v-model="termoBusca" placeholder="Nome da série..." />
    <button @click="buscar">Buscar</button>

    <div v-if="serie">
      <!-- exibir dados da série aqui -->
    </div>

    <p v-if="erro">{{ erro }}</p>
  </div>
</template>

<script setup>
import { ref } from "vue";

const termoBusca = ref("");
const serie = ref(null);
const erro = ref("");

async function buscar() {
  // seu código aqui
}
</script>

Tarefa 4.3 — Implementar a busca

Complete a função buscar() usando fetch e async/await. Exibam o nome, a nota e a imagem da série. Se a API não encontrar nenhum resultado, exibam uma mensagem de erro.

A URL de busca segue o padrão:

https://api.tvmaze.com/singlesearch/shows?q=TERMO

Substituam TERMO pelo valor de termoBusca.value na hora de montar a URL.

A função buscar() é chamada pelo botão. No material de apoio, o fetch aparece também dentro de onMounted. Qual é a diferença entre os dois padrões? Para que serve cada um?

Entrega individual

Cada integrante da dupla deve responder o Questionário SerieFlow no Moodle individualmente.