Herramientas que siguen tu forma de trabajar
Crea formularios, paneles y herramientas internas conectadas a la información de tu empresa. Describe lo que necesita tu equipo, ajusta las pantallas y publica la aplicación con el acceso adecuado para cada persona.
Pantallas para tareas concretas
Una pantalla puede consultar una tabla, calcular valores y decidir qué mostrar. Por ejemplo, puedes crear un planificador de vacaciones, un tablero con indicadores y gráficas o una agenda con las franjas disponibles.
Con 20 días hábiles logras hasta 37 días corridos libres.
Adapta cada pantalla a tu proceso
Puedes definir la página en un único archivo HTML. Se sirve aislada, sin acceso a la sesión, las cookies ni el almacenamiento del navegador. La plataforma le entrega los datos mediante window.plane y añade la hoja de estilos, con clases como class=«btn» para un botón y class=«card» para una tarjeta.
- Un solo archivo, con su <style> y su <script> dentro.
- Sin librerías externas y sin CDN: lo que hace falta ya está en el documento.
- Sin localStorage, sin navegación propia y sin pantallas de acceso: eso lo pone la plataforma alrededor.
- Las medidas y los colores salen de las variables de la casa, no de números sueltos.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Chequeo preoperacional</title>
<style>
.pantalla { padding: var(--space-8); }
.tarjeta-total { background: var(--surface-card); }
</style>
</head>
<body>
<main class="pantalla">
<h1>Chequeo preoperacional</h1>
<article class="card kpi">
<span class="kpi-label">Efectivos</span>
<span class="kpi-val number">10</span>
</article>
<div class="caja-grafica" style="height: 18rem">
<canvas id="por-turno"></canvas>
</div>
</main>
<script>/* … */</script>
</body>
</html>Conecta cada pantalla con los datos que necesita
Cada página guarda la lista de tablas y columnas que puede consultar. Lo que no esté declarado se rechaza en el servidor sin llegar a consultarse. Sobre esa lista, window.plane permite listar, obtener, crear, actualizar y borrar registros.
- plane.listar con filtro, búsqueda, orden, límite y página.
- plane.usuario trae el nombre, el correo y los roles de quien consulta.
- Leer no exige cuenta si la aplicación es pública; crear, actualizar y borrar sí, siempre.
- Los permisos son los de quien consulta: si una llamada falla, la página recibe el mensaje del servidor.
window.addEventListener("plane:listo", async function () {
try {
var r = await plane.listar("excesos", {
filtro: { conductor: plane.usuario.cedula },
orden: "-fecha",
limite: 50
});
// r = { filas: [...], total: 375, pagina: 1, paginas: 8 }
pintar(r.filas);
} catch (error) {
avisar(error.message);
}
});plane:listo antes de pedir nada, y cada llamada va dentro de un try/catch.Recoge información con formularios
Puedes definir el formulario como una pantalla HTML con los campos del catálogo. Al enviarlo, plane.crear guarda el registro en la tabla; ese registro puede aparecer después en el tablero y en las gráficas. Una descripción puede servir para generar la primera versión de la pantalla.
- plane.crear, plane.actualizar y plane.borrar sobre las tablas que la página declara.
- Los campos utilizan el catálogo de la plataforma: rótulo, control, pista y estado de error, en claro y en oscuro.
- Guardar exige cuenta iniciada, aunque la aplicación sea pública. El aviso de iniciar sesión lo pone la plataforma; la página no lo escribe.
- Una columna que apunta a otra tabla se guarda con el valor a la vista, no con el identificador: la plataforma hace el enlace.
- Si el servidor rechaza el guardado, el error llega con su mensaje y el formulario se queda lleno.
- Nada se guarda en el navegador: lo que tiene que durar va a una tabla.
- ayer 5:58 128.400 km Efectivo
- mié 6:04 127.910 km Fuera de horario
document.getElementById("chequeo").addEventListener("submit", async function (e) {
e.preventDefault();
var f = e.target.elements;
try {
await plane.crear("chequeos", {
placa: f.placa.value,
kilometraje: Number(f.kilometraje.value),
frenos: f.frenos.checked,
// Lo que apunta a otra tabla se guarda con el valor a la vista.
conductor: plane.usuario.cedula
});
e.target.reset();
await cargarUltimos();
} catch (error) {
avisar(error.message);
}
});Consulta tus indicadores de un vistazo
La función plane.grafica carga Chart.js y configura los colores de las series, la rejilla, la leyenda, el tooltip, el formato de los números y el aviso de «sin datos». Puedes cambiar esa configuración desde la página.
- Ocho colores de serie en orden fijo, distinguibles en claro y en oscuro y con daltonismo.
- plane.colores, plane.numero y plane.paleta para pintar a mano lo que haga falta.
- Al filtrar se le cambian los datos a la gráfica; volver a crearla la haría parpadear.
var g = plane.grafica("#por-turno", {
type: "bar",
data: {
labels: ["T1", "T2", "T3"],
datasets: [{ label: "Chequeos", data: [5, 6, 2] }]
}
});
// Al filtrar no se vuelve a crear: se le cambian los datos.
g.data.datasets[0].data = valores;
g.update();Lo que ya está puesto antes de escribir una línea
La página recibe un contrato con los estilos y las funciones disponibles. La guía del proyecto y las peticiones de IA parten de la misma fuente, para que ambas describan el mismo comportamiento.
- El catálogo de estilos La misma hoja de estilos del panel: botones, tarjetas, tablas, campos, etiquetas, cifras, pestañas y alertas, en claro y en oscuro.
- window.plane Permite listar, obtener, crear, actualizar y borrar registros en las tablas que la página declara. Las demás operaciones se rechazan.
- Gráficas plane.grafica usa Chart.js y aplica los colores de la aplicación a las series, la leyenda y los mensajes de la gráfica.
- La fuente de iconos Viene cargada: un icono es un elemento vacío con dos clases, sin dibujar SVG ni traer una librería.
- Quién está mirando plane.usuario contiene el nombre, el correo y los roles de quien consulta la página, o nada si entró sin cuenta.
- Previsualizar como El constructor permite elegir un rol para comprobar qué verá ese usuario antes de publicar.
Publica la aplicación y define el acceso
Al publicar, la aplicación queda disponible mediante un enlace. Si es pública, cualquiera puede abrirla sin cuenta y solo leerla; si es privada, el servidor exige iniciar sesión antes de entregar los datos.
- Cada página elige quién la abre: todos, ciertos roles, o solo quien construye.
- Roles con el nombre que use el negocio: Conductor, Supervisor, Vendedor…
- Gestión de usuarios: invitar, cambiar la clave y quitar a alguien.
- Lo que una página esconde por rol no está protegido: lo que cierra la puerta a los datos es que la aplicación sea privada.
tuservidor.com/p/pedidos PrivadaLos roles deciden qué páginas se abren y qué se dibuja dentro. Lo que cierra la puerta a los datos es que la aplicación sea privada.
Guarda y restaura versiones de la aplicación
Al publicar se conserva una versión de la aplicación. También puedes crear una versión manual antes de un cambio importante y restaurarla cuando sea necesario.
- Se crea una versión automáticamente al publicar.
- Puedes crear versiones manuales cuando quieras.
- El historial muestra los cambios de cada versión y permite restaurarla.
- Ahora Página «Pedidos del mes» + tabla Pedidos Publicación
- Hoy, 11:40 Antes de cambiar el tipo de la columna Estado Manual Restaurar
- Ayer, 18:02 Roles por página: «Pedidos del mes» solo para Supervisor Publicación Restaurar
- 12 sep Primera publicación de la aplicación Publicación Restaurar
Configura la apariencia de la aplicación
- Nombre, icono y color principal de cada aplicación.
- 46 paletas de color más una personalizada, en modo claro y oscuro.
- Doce colores vivos para lo que significa un color: estados, categorías y leyendas.
- Tamaño de letra por aplicación, para pantallas que se consultan a distancia.
- Página de inicio y lado del menú lateral configurables.
Los rótulos y las etiquetas toman los colores de la paleta elegida y mantienen el contraste en modo claro y oscuro. Las páginas los reciben resueltos: no hay que aclararlos ni oscurecerlos a mano.
Construye la primera página describiéndola con una frase.
Con Planer en marcha, el comando de demostración crea un directorio de empleados con datos, tres páginas escritas en HTML y la aplicación ya publicada.