Introdução

Neste tutorial, vamos explorar como construir um dashboard interativo que visualiza as fases da lua utilizando Vue.js e Chart.js. As fases da lua são fenômenos astronômicos que vêm fascinado a humanidade por séculos e, por meio deste guia prático, você aprenderá a configurar um projeto Vue.js, integrar a biblioteca Chart.js para geração de gráficos interativos, e consumir dados de uma API que provê informações sobre as fases da lua. Serão abordadas desde a instalação das dependências até a criação de componentes reutilizáveis, proporcionando uma aplicação visualmente atraente e funcional. Além disso, você também verá como implementar testes básicos para garantir que seu dashboard funcione corretamente.

Etapas

  1. Configurando o Ambiente de Desenvolvimento

    Certifique-se de que você tem o Node.js instalado em sua máquina. Para verificar, execute o comando `node -v` no terminal. Se Node.js não estiver instalado, você pode baixá-lo em nodejs.org. Em seguida, crie um novo projeto Vue.js utilizando o Vue CLI.

    commands
    # Verificar se o Node.js está instalado
    node -v
    # Se não estiver instalado, acesse https://nodejs.org e faça o download
    # Criar um novo projeto Vue.js
    npm install -g @vue/cli
    vue create dashboard-lua

  2. Instalando Dependências da Biblioteca Chart.js

    Uma vez que o projeto Vue.js está criado, navegue até o diretório do projeto e instale o Chart.js. O Chart.js é uma biblioteca de gráficos adaptativa que nos permitirá visualizar as fases da lua de forma interativa.

    commands
    # Navegar até o diretório do projeto
    cd dashboard-lua
    # Instalar o Chart.js
    npm install chart.js

  3. Criando um Componente Vue para o Gráfico

    Crie um novo componente Vue chamado `LunarPhaseChart.vue` na pasta `src/components`. Esse componente será responsável por renderizar o gráfico das fases da lua.

    LunarPhaseChart.vue
    <template>
  <div>
    <canvas id="lunarChart"></canvas>
  </div>
</template>

<script>
import { Line } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, PointElement, LinearScale } from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, LineElement, PointElement, LinearScale);

export default {
  name: 'LunarPhaseChart',
  props: ['data'],
  mounted() {
    this.renderChart(this.data, { responsive: true, maintainAspectRatio: false });
  }
}
</script>
<style scoped>
canvas {
  max-width: 600px;
  max-height: 400px;
}
</style>

  4. Integrando a API de Fases da Lua

    Para obter as fases da lua, vamos utilizar uma API. Você pode encontrar APIs gratuitas que fornecem essas informações, como a API da NASA ou outras similares. Aqui, vamos supor que você tenha uma URL de API que retorna os dados necessários em formato JSON. No componente `App.vue`, vamos fazer uma requisição para essa API utilizando axios.

    commands
    # Instale o axios para fazer requisições HTTP
    npm install axios

    App.vue
    <template>
  <div id="app">
    <h1>Dashboard de Fases da Lua</h1>
    <LunarPhaseChart v-if="chartData" :data="chartData" />
  </div>
</template>

<script>
import axios from 'axios';
import LunarPhaseChart from './components/LunarPhaseChart.vue';

export default {
  name: 'App',
  components: {
    LunarPhaseChart
  },
  data() {
    return {
      chartData: null
    };
  },
  created() {
    axios.get('URL_DA_API_COM_DADOS_DAS_FASES')
      .then(response => {
        this.chartData = {
          labels: response.data.map(item => item.date),
          datasets: [{
            label: 'Fases da Lua',
            data: response.data.map(item => item.phase),
            borderColor: '#42A5F5',
            fill: false
          }]
        };
      })
      .catch(error => {
        console.error('Erro ao buscar os dados da API:', error);
      });
  }
}
</script>

  5. Estilizando o Dashboard

    Para tornar o dashboard visualmente atraente, você pode usar CSS ou uma biblioteca de UI como Bootstrap ou Tailwind CSS. Insira estilos para a página principal em `App.vue` e adicione classes de estilo ao seu componente `LunarPhaseChart`.

    App.vue
    <style>
#app {
  text-align: center;
  background-color: #f9f9f9;
  padding: 20px;
}
</style>

  6. Testando o Dashboard Localmente

    Com o projeto configurado e os componentes criados, agora você pode testar sua aplicação. Execute o comando abaixo na raiz do projeto para iniciar o servidor local e visualize seu dashboard no navegador.

    commands
    # Iniciar o servidor local
    npm run serve

  7. Implementação de Testes Unitários

    Utilize a biblioteca Vue Test Utils para implementar testes unitários em seus componentes. Teste o componente `LunarPhaseChart` para validar se ele renderiza corretamente os gráficos com os dados recebidos.

    LunarPhaseChart.spec.js
    import { shallowMount } from '@vue/test-utils';
import LunarPhaseChart from '@/components/LunarPhaseChart.vue';

describe('LunarPhaseChart.vue', () => {
  it('renders chart when data is provided', () => {
    const wrapper = shallowMount(LunarPhaseChart, {
      propsData: {
        data: {
          labels: ['2023-01-01', '2023-02-01'],
          datasets: [{
            data: [0, 1],
            label: 'Fases da Lua',
            borderColor: '#42A5F5',
            fill: false
          }]
        }
      }
    });
    expect(wrapper.exists()).toBe(true);
  });
});

  8. Publicando o Dashboard

    Depois de testar seu projeto localmente, você pode publicá-lo utilizando plataformas como GitHub Pages, Netlify ou Vercel para compartilhar o dashboard com o mundo.

    commands
    # Para gerar a versão de produção
    npm run build
    # Siga as instruções da plataforma escolhida para publicar (ex: Netlify)

Conclusão

Neste tutorial, você aprendeu a criar um dashboard interativo para visualizar as fases da lua utilizando Vue.js e Chart.js. Desde a configuração do ambiente, criação de componentes, integração com APIs e estilização, até a implementação de testes unitários, você agora tem as ferramentas necessárias para expandir esse projeto com novas funcionalidades. Com essa base sólida, você pode explorar ainda mais a visualização de dados e criar aplicações ricas e interativas.

Hashtags

#VueJS #ChartJS #Dashboard #VisualizaçãoDeDados #APIs #DesenvolvimentoWeb