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:
- Una aplicación front-end con la que el usuario interactuará en forma directa
- 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:
- Una capa de presentación (HTML + CSS)
- 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:
- https://startbootstrap.com/themes/admin-dashboard/
- https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/
- https://themes.getbootstrap.com/product/dashboard/
¡Ya estás list@ para agregar bonitos dashboards a tus aplicaciones! ¡Adelante!
- Cómo agregar una página de error 500 en un proyecto PHP - 31/10/2024
- ¿Cuántos contenedoresnecesita tu php? - 28/10/2024
- Cuál es el mejor framework PHP para hacer APIs REST - 25/10/2024
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.
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
Hola Alexis!
Si, es posible. ¿Qué dificultades has encontrado?
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.
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!
Muy bueno,agradecido!
?
Hola muy buen aporte, me gustaría saber como puedo conectar en mi base de datos.
Gracias
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!
Muchas gracias
De nada amigo! Un placer 🙂