Repositorio para el seminario de ToolJet de la asignatura de Negocio Electrónico.
- 1. ¿Qué es ToolJet?
- 2. Descripción de la aplicación
- 3. Mockups de la aplicación
- 4. Creación de las tablas de la base de datos
- 5. Creación de la página principal con el listado de productos
- 5.1 Creación de la query
listarProdutos - 5.2 Creación de la página
Productos - 5.3 Añadimos los componentes necesarios para mostra los productos
- 5.4 Creación de la query
actualizarCarritocon JavaScript - 5.5 Configuramos que el script
actualizarCarritose ejecute al cargar la página - 5.6 Añadimos los componentes de la parte superior de la página de productos
- 5.7 Creación de la query
vaciarCarrito
- 5.1 Creación de la query
- 6. Creación de la página para tramitar el pedido
- 7. Creación de la página de pedidos
ToolJet es una plataforma de desarrollo low-code de código abierto que permite crear aplicaciones y paneles de control de forma rápida, permtiendo a conexión con diferentes fuentes de datos.
En este seminario vamos a desarrollar una aplicación que simula una tienda online.
La aplicación consta de tres páginas:
- Productos: Listado de productos.
- Comprar: Página donde muestra el contenido del carrito y se tramita el pedido.
- Pedidos: Listado de pedidos realizados.
La aplicación es un prototipo que le ayudará a realizar la práctica 3 de la asignatura de Negocio Electrónico.
La página principal de la aplicación muestra un listado de productos disponibles en la base de datos.
-
En la lista de productos podemos modificar la cantidad de cada tipo que queremos añadir al carrito.
-
Para añadirlos hay que pulsar sobre el botón
Añadir a la cesta. -
En la esquina superior derecha se muestra el número de elementos que se han añadido al carrito.
El botón Ver JSON nos permite visualizar el estado del carrito en formato JSON.
Esta funcionalidad se ha añadido únicamente para facilitar la depuración de la aplicación.
El botón Vaciar carrito nos permite eliminar todos los elementos del carrito.
Cuando se pulsa sobre el botón Comprar la aplicación nos redirige a otra
página donde se muestra el contenido del carrito y podemos tramitar el pedido.
En esta página nos aparece una tabla con el resumen de la compra y el importe total del pedido.
Al pulsar sobre el botón Tramitar pedido el pedido se insertará en la base de datos y se vaciará el carrito.
Si el pedido se inserta con éxito nos aparecerá un mensaje de confirmación y redirigirá a la página principal.
La aplicación consta de tres páginas:
- Productos: Listado de productos.
- Comprar: Página donde muestra el contenido del carrito y se tramita el pedido.
- Pedidos: Listado de pedidos realizados.
En esta página se muestra una tabla con todos los pedidos realizados por el cliente.
Seleccionaremos la base de datos ToolJet:
Una vez seleccionada la base de datos, vamos a crear dos tablas:
productos: Contiene los datos de los productos.pedidos: Contiene los datos de los pedidos realizados por el cliente.
Observe que el tipo de dato seleccionado para el carrito es JSON.
Por ejemplo, un carrito con dos productos tendría el siguiente formato:
[{"id": 1, "cantidad": 2, "precio": 10.0}, {"id": 2, "cantidad": 1, "precio": 5.0}]Una vez que hemos creado las tablas vamos a insertar algunos datos en la tabla productos.
En primer lugar vamos a crear una query a la que vamos a llamar listaProdutos, que nos permita obtener una lista de los productos que hay en la base de datos.
Añadimos una nueva página a la aplicación que se llame Productos.
En primer lugar, vamos a añdir un componente ListView a la página Productos.
En las propiedades del componente ListView vamos a seleccionar el campo List data y vamos a configurar la query listarProdutos que hemos creado anteriormente.
{{queries.listaProductos.data}}
Esto hará que el componente ListView muestre los datos que devuelve la query listarProdutos.
Añadimos un componente de tipo Image y configuramos la propiedad URL para que muestre la imagen del producto.
{{listItem.imagen}}
Añadimos 3 componentes de tipo Text para mostrar:
- el nombre,
- el identificador,
- el precio del producto.
Nombre
Configuramos la propiedad Data para mostrar el nombre del produto.
{{listItem.nombre}}
Identificador
Configuramos la propiedad Data para mostrar el identificador del producto.
{{listItem.id}}
Note
Hemos utilizado un componente Text auxiliar para mostrar el texto ID.
Precio
Configuramos la propiedad Data para mostrar el precio del producto.
{{listItem.precio}}
Note
Hemos utilizado dos componentes Text auxiliares para mostrar el texto Precio: y el carácter €.
Añadimos un componente de tipo Number Input para que el usuario pueda seleccionar la cantidad de productos que quiere añadir al carrito.
Añadimos un componente de tipo Button para que el usuario pueda añadir el producto al carrito.
En este botón vamos a añadir un evento onClick para que cuando el usuario haga click sobre el botón se ejecute una Query, que en nuestro caso se llamará actualizarCarrito.
Esta query tiene que existir previamente para poder añadirla al evento onClick.
Vamos a crear una query que se llame actualizarCarrito que permita ejecutar código JavaScript.
El código JavaScript que vamos a ejecutar es el siguiente:
// Hacemos una copia mutable del array carrito
let carrito = [...(variables.carrito || [])];
// Obtenemos el id y la cantidad del ListView
let id = parseInt(components.listview.selectedRow.idProducto.text);
let cantidad = parseInt(components.listview.selectedRow.cantidad.value);
let precio = parseFloat(components.listview.selectedRow.precio.text);
// Buscamos si el id del producto ya existe en el carrito
let itemExistente = null;
let encontrado = false;
for (let i = 0; i < carrito.length; i++) {
if (carrito[i].id === id) {
itemExistente = carrito[i];
encontrado = true;
break;
}
}
// Si el producto ya existe, actualizamos la cantidad
// y sino existe, lo añadimos
if (encontrado) {
itemExistente.cantidad = cantidad;
} else {
carrito.push({ "id": id, "cantidad": cantidad, "precio": precio });
}
// Guardamos el estado del carrito
actions.setVariable('carrito', carrito)
// Sumamos la cantidad de items del carrito
let numeroProductos = 0;
for (let i = 0; i < carrito.length; i++) {
numeroProductos = numeroProductos + carrito[i].cantidad;
}
// Guardamos el número total de productos
actions.setVariable('numeroProductos', numeroProductos)Note
Una vez que ha creado la query actualizarCarrito y ha añadido el código JavaScript, ya puede añadir esta query al evento onClick del botón Añadir a la cesta.
Para que el script actualizarCarrito se ejecute automáticamente al cargar la página, vamos a añadir un evento On page load a la página Productos.
En primer lugar, accedemos a la opción de Events Handler de la página Productos.
Creamos un nuevo evento de tipo On page load y añadimos la query actualizarCarrito.
En la parte superior de la página de productos vamos a añadir un componente Text para mostrar el número de productos.
Configuramos la propiedad Data para mostrar el número total de productos que tiene el carrito.
{{variables.numeroProductos}}
Para inicializar la variable global numeroProductos vamos a añadir un evento On page load a la página Productos.
En primer lugar, accedemos a la opción de Events Handler de la página Productos.
Ahora creamos un nuevo evento On page load y definimos la variable global numeroProductos con el valor 0.
Además del número de productos, vamos a añadir tres componentes de tipo Button:
Ver JSON: Muestra el contenido del carrito en formato JSON. Se ha añadido únicamente para facilitar la depuración de la aplicación.Vaciar carrito: Elimina todos los elementos del carrito.Comprar: Nos redirige a la página de tramitar el pedido.
Ver carrito en formato JSON
Vaciar carrito
En este botón vamos a configurar dos enventos onClick:
- Uno para ejecutar la query
vaciarCarrito. - Otro para mostrar un mensaje de confirmacion en un alert.
Note
La query vaciarCarrito tiene que existir previamente para poder añadirla al evento onClick. La crearemos en el siguiente paso.
Comprar
Al pulsar sobre el botón de Comprar la aplicación nos redirige a la página Comprar para tramitar el pedido.
Note
La página Comprar tiene que existir previamente para poder añadirla al evento onClick. La crearemos en el siguiente paso.
Vamos a crear una query que se llame vaciarCarrito que permita ejecutar código JavaScript.
La query quedará así:
El código JavaScript que vamos a ejecutar es el siguiente:
// Inicilizamos el array del carrito
actions.setVariable('carrito', []);
// Inicilizamos el número de productos
actions.setVariable('numeroProductos', 0);
// Inicilizamos el precio total
actions.setVariable('precioTotal', 0);Añadimos una nueva página a la aplicación que se llame Comprar.
Vamos a crear una query que se llame calcularPrecioTotal que permita ejecutar código JavaScript.
La query quedará así:
El código JavaScript que vamos a ejecutar es el siguiente:
// Obtenemos una copia de la variable global carrito
let carrito = variables.carrito;
// Calculamos el precio total del pedido
let precioTotal = 0;
for (let i = 0; i < carrito.length; i++) {
precioTotal = precioTotal + (carrito[i].precio * carrito[i].cantidad);
}
// Actualizamos la variable global con el total
actions.setVariable('precioTotal', precioTotal);Para que el script calcularPrecioTotal se ejecute automáticamente al cargar la página, vamos a añadir un evento On page load a la página Comprar.
En primer lugar, accedemos a la opción de Events Handler de la página Comprar.
Creamos un nuevo evento de tipo On page load y añadimos la query calcularPrecioTotal.
Añadimos un componente de tipo Table para mostrar el contenido del carrito.
Configuramos la propiedad Data para mostrar el contenido de la variable global carrito.
{{variables.carrito}}
Añadimos un componente de tipo Text para mostrar el precio total del pedido.
Configuramos la propiedad Data para mostrar el precio total del pedido.
Total: {{variables.precioTotal}} €
Añadimos un componente de tipo Button para que el usuario pueda tramitar el pedido.
En este botón vamos a añadir un evento onClick para que cuando el usuario haga click sobre el botón se ejecute una Query, que en nuestro caso se llamará insertarPedido.
Note
La query insertarPedido tiene que existir previamente para poder añadirla al evento onClick. La crearemos en el siguiente paso.
Vamos a crear una query que se llame insertarPedido que permita insertar un pedido en la tabla pedidos.
Configuramos la query para que inserte un nuevo pedido
en la tabla pedidos.
En la pestaña Setup tenemos que indicar qué datos se van a insertar en cada una de las columnas:
fecha:NOW()total:{{parseFloat(variables.precioTotal)}}carrito:{{variables.carrito}}id_usuario:{{globals.currentUser.id}}
En la pestaña Settings configuramos los algunos eventos:
Query success: Mostramos un mensaje al usuario indicando que el pedido se ha tramitado correctamente.
Query success: Redirigimos al usuario a la página principal donde se muestra el listado de productos.
Query success: Ejecutamos la queryvaciarCarritopara vaciar el carrito.
Query Failure: Mostramos un mensaje al usuario indicando que ha habido un error al tramitar el pedido.
Vamos a crear una query a la que vamos a llamar listaPedidos, que nos permita obtener una lista de los pedidos que hay en la base de datos.
Añadimos una nueva página a la aplicación que se llame Pedidos.
Accedemos a la opción de Events Handler de la página Pedidos.
Creamos un nuevo evento de tipo On page load y añadimos la query listaPedidos.
Vamos a añdir un componente Table a la página Pedidos.
En las propiedades del componente Table vamos a seleccionar el campo Data y vamos a configurar la query listaPedidos que hemos creado anteriormente.
{{queries.listaPedidos.data}}
Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-CompartirIgual 4.0 Internacional.
