Laravel, Vue y el Big Data¶

Hoy en día el uso de la ingeniería de datos está a la orden del día. Es por ello que una de las aplicaciones de los proyectos reactivos es la de poder presentar grandes cantidades de datos de una manera fácil de entender.

En este apartado, vamos a partir de un proyecto en Laravel con Vue que consume una base de datos en MongoDB. Para este proyecto nos hará falta:

Integración de MongoDB o API que nos permita consultar grandes cantidades de datos.
Axios.
d3.js visualización de datos.

Instalar las dependencias¶

Aunque nuestro proyecto en Laravel esté ya configurado con Vue, nos hace falta algunas dependencias:

npm install d3

Conectar con MongoDB¶

Configura tu conexión en config/database.php:

'mongodb' => [
    'driver' => 'mongodb',
    'host' => env('DB_HOST', 'localhost'),
    'database' => env('DB_DATABASE', 'miDB'),
],

Crear el consumo de la API¶

Tal y como hemos visto a lo largo de la UT anterior, se ha de crear una serie de controladores que nos permitan consumir la API.

Crear proyecto reactivo¶

Necesitamos nuestro componente vue:

import axios from 'axios';
import * as d3 from 'd3';

export default {
  data() {
    return {
      datos: [],
    };
  },
  mounted() {
    this.obtenerDatos();
  },
  methods: {
    obtenerDatos() {
      axios.get('http://localhost:8000/api/datos')
        .then(response => {
          this.datos = response.data;
          this.renderizarGrafico();
        });
    },
    renderizarGrafico() {
      const svg = d3.select("#contenedor")
        .append("svg")
        .attr("width", 500)
        .attr("height", 300);

      const xScale = d3.scaleBand()
        .domain(this.datos.map(d => d.fecha))
        .range([0, 500])
        .padding(0.1);

      const yScale = d3.scaleLinear()
        .domain([0, d3.max(this.datos, d => d.valor)])
        .range([300, 0]);

      svg.selectAll(".bar")
        .data(this.datos)
        .enter()
        .append("rect")
        .attr("class", "bar")
        .attr("x", d => xScale(d.fecha))
        .attr("y", d => yScale(d.valor))
        .attr("width", xScale.bandwidth())
        .attr("height", d => 300 - yScale(d.valor));
    },
  },
};

Las líneas marcadas variarán según el enfoque que le demos a la consulta, hay que tener siempre presente que nos va a hacer falta una gran cantidad de datos. Puede darse el caso que la base de datos esté en otro servidor.

Además habría que generar el controlador que nos permita obtener los datos.

Actividad¶

AC 913. (RA9 / CE9g / IC1 / 3p) - Genera una aplicación cuya base de datos contenga los datos que se te ha proporcionado. Con ella haz que se visualicen los datos por país y población y ciudad y país.
AP 914. (RA9 / CE9g / IC1 / 3p) Consume la API pública de Open-Meteo (https://api.open-meteo.com/v1/forecast) que ofrece datos meteorológicos por coordenadas geográficas.

Con esa información, genera una aplicación:

Visualice mediante un gráfico de líneas que muestre la temperatura diaria en una ciudad durante una semana.
Permita seleccionar una ciudad de entre varias opciones predefinidas (por ejemplo: Valencia, Madrid, París, Berlín).
Muestre los ejes correctamente etiquetados: fecha en el eje X y temperatura (°C) en el eje Y.