Un dashboard en tiempo real basado en PHP y Bootstrap

Algo que está muy de moda por estos días es la creación de tableros de comandos (Dashboards) que se mantengan actualizados en tiempo real.

Si bien la definición de tiempo real es algo vaga (Formalmente se trata de sistemas en los cuales el tiempo de respuesta es crítico), hay una suerte de conocimiento en común respecto de lo que quiere decir: que los cambios se vean en forma inmediata (o casi).

En lo que hace a aplicaciones web, de lo que se trata es de permitir al visitante recibir novedades sin tener que recargar la página.

Para lograr este efecto se necesitan dos partes coordinadas:

  1. Una aplicación front-end con la que el usuario interactuará en forma directa
  2. Un servidor que mantenga la información actualizada en todo momento

Un frontend para el Dashboard

Del lado del frontend, lo que necesitaremos serán dos cosas:

  1. Una capa de presentación (HTML + CSS)
  2. Una capa de interacción con el backend (JavaScript)

Presentación del dashboard

Del lado de la presentación, dado que se trata de un dashboard, lo que querremos hacer es mostrar información resumida, en algún formato fácil de interpretar por una persona (Usualmente se tratará de gráficos pero podemos usar cualquier forma que nos parezca adecuada).

Una librería que resulta muy útil para realizar este tipo de tareas es Bootstrap (Que, de paso, nos da una visualización estándar).

En este ejemplo haré un dashboard muy sencillo, sólo a modo de ilustración, pero con los mismos principios puedes hacer otros mucho más vistosos.

Veamos el HTML:

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>
<body>
<h1>Hola, este es mi dashboard</h1>
<div class="container">
    <div class="row">
        <div class="col-sm">
            <div class="card">
                <div class="card-body">
                    Usuarios conectados en este momento: <strong><span id="connected_users">0</span></strong>
                </div>
            </div>
        </div>
        <div class="col-sm">
            <div class="card">
                <div class="card-body">
                    Facturación del día: <strong>$ <span id="daily_revenue">0.00</span></strong>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Aquí lo que estoy haciendo es crear el esqueleto de mi dashboard.

Para el ejemplo tomé dos métricas que pueden resultar interesantes:

  • Cantidad de usuarios conectados
  • Facturación del día

La pantalla inicial se verá así:


Si te fijas, el tag link (en la sección head) incluye el CSS que necesito para usar Bootstrap.

Interacción con el backend del dashboard

El siguiente paso es agregar la interacción con el backend (¡Que aún no está hecho! Cierto… no nos adelantemos, al final del artículo tendrás todo lo que buscas :).

Lo primero es incluir la librería jQuery:

<script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>

Podría escribir todo el JavaScript necesario sin utilizarla, es cierto, pero sería muchísimo más trabajo del necesario y, honestamente, prefiero evitármelo :p

Algo que puedes notar es que estoy incluyendo la librería desde otro servidor (code.jquery.com, un CDN).

Y ahora me queda incluir algo de código mío (el que efectivamente interactuará con mi servidor):

<script type="text/javascript">
    window.setInterval(function () {
        updateStats();
    }, 2000);

    function updateStats() {
        updateConnectedUsers();
        updateDailyRevenue();
    }

    function updateConnectedUsers() {
        jQuery.get(
            'get_connected_users.php',
            function (data) {
                $('#connected_users').text(data);
            }
        );
    }

    function updateDailyRevenue() {
        jQuery.get(
            'get_daily_revenue.php',
            function (data) {
                $('#daily_revenue').text(data);
            }
        );
    }
</script>

Aquí lo que estoy haciendo es generar un mecanismo de polling de modo que el cliente esté constantemente pidiendo actualizaciones al servidor (y reflejándolas en el HTML para el visitante).

Muy bien, sólo nos queda ver el backend 🙂

Un backend para el dashboard

Del lado del backend sólo debo crear los archivos que puedan responder a las preguntas del frontend (get_connected_users.php y get_daily_revenue.php).

En mi ejemplo haré algo de trampa, no voy a consultar a una base de datos ni nada, simplemente generaré valores aleatorios, pero claramente, en una aplicación real, deberías usar algún tipo de almacenamiento.

get_connected_users.php:

<?php

header('Content-Type: text/javascript');
echo rand(0, 200);

get_daily_revenue.php:

<?php

session_start();

$acummulatedRevenue = $_SESSION['acummulatedRevenue'] ?? 0;

header('Content-Type: text/javascript');

$_SESSION['acummulatedRevenue'] = $acummulatedRevenue + rand( 0, 100000 ) / 100;

echo number_format( $_SESSION['acummulatedRevenue'], 2, ',', '.' );

Lo importante de ambos scripts es la línea header(‘Content-Type: text/javascript’);.

Esto es lo que hace que la llamada Ajax entienda que lo que recibe del servidor es, efectivamente, texto jSON

Dashboards más profesionales

Con lo que te mostré hasta aquí tienes todo lo necesario para hacer un dashboard básico (y bastante poco estético :p).

Ciertamente existen plantillas de dashboards mucho más atractivas que puedes usar (o ser creativo y crear las tuyas!), algunas que puedes probar:

¡Ya estás list@ para agregar bonitos dashboards a tus aplicaciones! ¡Adelante!

mchojrin

Docente y consultor PHP at Leeway Academy
Ayudo a desarrolladores PHP a acelerar su llegada a Sr.

¿Te quedó alguna duda? Publica aca tu pregunta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

A %d blogueros les gusta esto: