Hands-on • IzaTec

Sistema Avaliação

Vue.js Sistema de Avaliação

Objetivos do desafio:

Vamos construir uma aplicação em Vue.js (via CDN, sem build tools tipo Vite ou Webpack).
O foco vai ser ilustrar conceitos básicos, como:
- Two-way data binding (v-model)
- Eventos (@click, @input, etc.)
- Gerenciamento de estado simples (sem Vuex ou Pinia, provavelmente com data, props, emit, ou um objeto global reativo)
O cenário é uma simulação de controle de eventos, com:
- Palestrantes
- Participantes
- Participantes avaliam os eventos com uma nota entre 0 e 3, onde:
  - 3 = Muito Satisfeito
  - 2 = Satisfeito
  - 1 = Irrelevante
  - 0 = Insatisfeito
A ideia é ir implementando aos poucos, passo a passo.

Código fonte

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Evento Vue.js</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body class="bg-light">

<div id="app" class="container py-5">
  <h1 class="mb-4 text-center">🚀 Evento Vue.js</h1>

  <div class="card mb-4">
    <div class="card-body">
      <p><strong>Palestrante:</strong> {{ palestrante }}</p>
      <p><strong>Organizador:</strong> {{ organizador }}</p>
    </div>
  </div>

  <h2 class="mb-3">Adicionar Participante</h2>

  <div class="card mb-4">
    <div class="card-body">
      <div class="row g-3">
        <div class="col-md-4">
          <input v-model="novoParticipante.nome" class="form-control" placeholder="Digite seu nome" />
        </div>
        <div class="col-md-4">
          <input v-model="novoParticipante.cidade" class="form-control" placeholder="Digite sua cidade" />
        </div>
        <div class="col-md-4">
          <select v-model.number="novoParticipante.avaliacao" class="form-select">
            <option disabled value="">Selecione a avaliação</option>
            <option :value="3">3 - Muito Satisfeito</option>
            <option :value="2">2 - Satisfeito</option>
            <option :value="1">1 - Irrelevante</option>
            <option :value="0">0 - Insatisfeito</option>
          </select>
        </div>
        <div class="col-12">
          <button @click="adicionarParticipante" class="btn btn-primary w-100">Adicionar Participante</button>
        </div>
      </div>
    </div>
  </div>

  <h2 class="mb-3">Lista de Participantes</h2>

  <ul class="list-group">
    <li v-for="(participante, index) in participantes" :key="index" class="list-group-item d-flex justify-content-between align-items-center">
      <div>
        <strong>{{ participante.nome }}</strong> - {{ participante.cidade }}<br>
        <small class="text-muted">Nota: {{ participante.avaliacao }} ({{ avaliacoesTexto[participante.avaliacao] }})</small>
      </div>
      <button @click="removerParticipante(index)" class="btn btn-outline-danger btn-sm">Remover</button>
    </li>
  </ul>
</div>

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        palestrante: 'Gleyson Sampaio',
        organizador: 'Iza Tec',
        novoParticipante: {
          nome: '',
          cidade: '',
          avaliacao: ''
        },
        participantes: [],
        avaliacoesTexto: {
          3: 'Muito Satisfeito',
          2: 'Satisfeito',
          1: 'Irrelevante',
          0: 'Insatisfeito'
        }
      }
    },
    methods: {
      adicionarParticipante() {
        const { nome, cidade, avaliacao } = this.novoParticipante;
        if (nome && cidade && avaliacao !== '') {
          this.participantes.push({ ...this.novoParticipante });
          this.novoParticipante.nome = '';
          this.novoParticipante.cidade = '';
          this.novoParticipante.avaliacao = '';
        } else {
          alert('Por favor, preencha nome, cidade e avaliação.');
        }
      },
      removerParticipante(index) {
        this.participantes.splice(index, 1);
      }
    }
  }).mount('#app');
</script>
</body>
</html>

Esse é o pontapé inicial! Ele já demonstra o uso do {{ }} pra interpolação de variáveis e o conceito de reatividade com data().

Participantes

Bora pra próxima etapa então: criar uma lista de participantes, onde cada um tem um nome e uma cidade.

A gente vai:

Criar dois inputs para digitar nome e cidade.
Usar v-model para fazer o two-way data binding.
Criar um botão que, ao ser clicado, adiciona o participante à lista.
Mostrar os participantes com v-for.

Aqui a gente já aplicou:

v-model pra capturar os dados.
v-for pra exibir a lista.
Um método adicionarParticipante com verificação simples.

Explicação

const { nome, cidade } = this.novoParticipante;

Objetivo: Extrair os dados digitados (nome e cidade) do participante atual.
Conceito usado: Desestruturação de objeto (object destructuring).

this.participantes.push({ ...this.novoParticipante });

Objetivo: Adicionar o participante digitado à lista de participantes de forma independente.
Conceito usado: Spread operator para copiar propriedades e evitar referência ao mesmo objeto.

this.novoParticipante.nome = '';
this.novoParticipante.cidade = '';

Objetivo: Limpar os campos de nome e cidade após o participante ser adicionado à lista.
Conceito usado: Atribuição de valores vazios para resetar o estado do objeto.

if (nome && cidade)

Objetivo: Verificar se ambos os campos (nome e cidade) estão preenchidos. Se sim, a execução continua dentro do bloco if.
Conceito usado: Avaliação booleana para verificar se as variáveis nome e cidade não estão vazias (ou seja, são valores "truthy").

else { alert('Por favor, preencha nome e cidade.'); }

Objetivo: Caso algum dos campos esteja vazio, exibir um alerta solicitando que o usuário preencha os dados corretamente.
Conceito usado: Condição else para tratar o caso em que os campos não estão preenchidos.

Essa parte do código está bem estruturada, utilizando a lógica de verificação simples e feedback pro usuário

Antes de mergulhar no Vue.js, é essencial dominar as noções básicas de JavaScript. Isso te dará uma base sólida para entender os conceitos do Vue de forma mais fácil e eficiente!

ChatGPT Pompts

Fala, amigão! Temos um desafio bem legal: vamos ilustrar o desenvolvimento de uma aplicação Vue.js para simular o controle de eventos. Nela, teremos um palestrante e os participantes poderão avaliar a qualidade do evento com uma nota (3 - Muito Satisfeito, 2 - Satisfeito, 1 - Irrelevante, 0 - Insatisfeito). Vamos usar a CDN e explorar recursos básicos como two-way data binding, eventos e gerenciamento de estado, tudo com um cenário bem simples, que vamos implementar gradativamente.
Mas não implemente nada agora, só preciso que confirme se captou o objetivo?

Ta ficando bom em, agora iremos criar mais uma variavel participantes onde iremos digitar o nome e cidade de onde estão assistindo em forma de objetos e claro os inputs e v-for para simular a inclusão certo ?

Vamos fazer um ajuste, tem como novoNome: '' e novaCidade: '' serem um objeto participante? fica mais legal não ?

Vc é fera em, me detalhe a implementação abaixo:

  const { nome, cidade } = this.novoParticipante;
  if (nome && cidade) {
    this.participantes.push({ ...this.novoParticipante });
    this.novoParticipante.nome = '';
    this.novoParticipante.cidade = '';
  } else {
    alert('Por favor, preencha nome e cidade.');
  }

Sintaxe

Vamos apresentar as duas abordagens de sintaxe

Setup

Vamos criar o nosso projeto utilizando as abordagens disponíveis