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
Últimas entradas de mchojrin (ver todo)
Publicada el
Categorizado como Ejemplos Etiquetado como ,

Por mchojrin

Ayudo a desarrolladores PHP a afinar sus habilidades técnicas y avanzar en sus carreras

11 comentarios

  1. Saludos!

    Gracias por el contenido que publicas.

    Tengo una consulta, yo quiero hacer una integración en tiempo real usando Datatables (https://datatables.net/), es decir que cuando un usuario registre, modifique o actualice un datos de X tabla. Esta sea actualizada en tiempo real para los demás usuarios conectados, sin saturar el servidor.

    Yo trabajo con el patron MVC con PHP, quisiera saber si me podrías orientar en esto.

    Responder

  2. Muchas gracias, de gran ayuda. ¿Es posible hacer un sistema muy parecido, con un gráfico X Y de coordenadas, para guardar y consultar geolocalización de usuarios?. He tratado, pero no resulta. Saludos

    Responder

      1. Hola, gracias por responder. La principal dificultad es que no soy Programador. A pesar de hacer muchos cursos, no puedo escribir el código en PHP para hacer el gráfico SVG y darle valor al eje X de los meridianos y al eje Y de los paralelos y así obtener el cruce de ejes con valores positivos a un lado y los negativos al otro. Hasta busqué un Programador, pero no resultó. Gracias.

        Responder

        1. Ya… pues habría que ver exactamente qué código escribiste y qué errores encontraste.

          También te puedo sugerir que si tuviste problemas con un programador busques otro que pueda ayudarte mejor.

          Exitos!

          Responder

    1. Gracias Miguel! Me alegra que te haya servido 🙂

      La conexión a la base de datos puedes realizarla usando funciones específicas de tu motor (Por ejemplo mysqli_* si usas MySQL) o bien con PDO (El método que te recomiendo).

      Saludos!

      Responder

¿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.