Guía R-006 – Recogida de la firma manuscrita – Signature-pad

En la actualidad, muchas de las aplicaciones que se hacen para el móvil tienen que ver con el trabajo exterior a la empresas y casi siempre es relacionado con el Cliente, de tal forma que es muy habitual la recogida de la firma del Cliente, como garantía de la aceptación del servicio.

En este caso, el ejemplo se basa en mostrar lo sencillo que es la recepción de la firma (Cliente, Técnico, etc.) en esta plataforma de React.

Objetivo

Mostrar un ejemplo básico de una aplicación realizada en React para la captura de la firma manuscrita del (Cliente, Técnico, etc.)

DEMO: https://fhumanes.com/signature-test/

(1)  (2)  (3)  Pasos a seguir en el ejemplo

He hecho un programa PHPRunner para que podáis comprobar que el contenido está almacenado en la base de datos. https://fhumanes.com/signature-php

Si te interesa este tema, sigue leyendo el artículo en este enlace.

Guía R-005 – Caso práctico de React y FullCalendar

Como os había indicado, aquí está un ejemplo completo de utilización de la biblioteca FullCalendar utilizada desde React.

He tardado en publicar el ejemplo porque he estado probando distintas formas de hacer la funcionalidad de List, Add, Edit, View y Delete. Verás que las 3 tablas que contiene el ejemplo, tienen 3 formas distintas de visualización/construcción de estas funcionalidades, más si se tiene en cuenta su funcionamiento en pantallas pequeñas como la de los móviles.

También, me ha costado «afinar» el funcionamiento del Calendario, en los siguientes apartados:

  • Utilización de los Tooltip, para mostrar información del caso/evento sin tener que hacer clic para visualizarlo. He encontrado poca información y me he ayudado de la IA de DeepSeek, muchas veces me ha dado soluciones incorrectas, pero siempre me ha ayudado para explorar otras alternativas y por fin, di con la solución. Es una buena solución si estás sólo y no puedes consultar con nadie.
  • Para las acciones de «Delete» he estado utilizando Sweetalert, desde las páginas de «List», pero al utilizarlas desde página de diálogo, como «View», teniendo que «cerrar» esa página, me daba y da, muchos problemas, porque destruyo el registro antes de terminar el diálogo de Sweetalert, ya que es asíncrono y da control a otra parte del programa sin haberse terminado el diálogo. Lo he cambiado por la función «Dialog» de «Material UI»

Objetivo

Tener un ejemplo completo de React y FullCalendar con similares características que este ejemplo que había hecho en PHPRunner, Guía 64. También, disponer de la parte de SERVER sin depender/conectarse con PHPRunner.

DEMO: https://fhumanes.com/incidentes-react

Si estas interesado en este tema, sigue leyendo el artículo en este enlace.

Guía 95 – Añadir campos a formularios que no son campos (reales) de la Base de Datos

Este tema de añadir nuevos campos en formularios que no se corresponden a campos de las tablas de la base de datos, lo he utilizado muchas veces en los ejemplos, pero creo que no tengo uno que sea específico de este tema y es de gran ayuda para resolver algunas funcionalidades de las aplicaciones y , además, de cara al usuario del aplicativo puede ser más simple de utilizar.

En el ejemplo, se simula que se está haciendo una factura/albarán y que al elegir el Cliente se obtienen las direcciones de envío, que está en una estructura de «Master» -> «Detail», y se muestran en una lista de check para elegir. Además, y aquí viene la funcionalidad del ejemplo, se desea que se pueda añadir una nueva dirección en el mismo formulario.

Objetivo

Explicar cómo podemos añadir nuevos campos en los formularios, y que estos no tienen que ser campos de la tabla asociada.

DEMO: https://fhumanes.com/sh/

El check de «New Address» y el campo «memo» de dirección, no son campo de la tabla INVOICE.

Si te interesa este tema, sigue leyendo el artículo completo en este enlace.

Guía 94 – Campo de Selección en formato Tabla

Este ejemplo surge de la necesidad de un desarrollo donde se selecciona de una tabla de parámetros/condiciones una serie de opciones para la revisión de una maquinaria.

Esto es algo que se produce más o menos habitualmente, ya que en muchas ocasiones un código y título de una acción no se describe, completamente,  con esos 2 únicos datos, si no que se requiere un conjunto de información, normalmente estructurada en formato tabla.

El ejemplo que os muestro no es el caso real, pero me sirve para explicaros cuál es el tipo de solución. En este caso, funcionalmente, en la recepción de un vehículo en un taller, se recoge las acciones que hay que hacer a través de una tabla de servicios.

Objetivo

Mostrar una tabla de servicios con varias columnas que describen el mismo, para seleccionar qué acciones hay que realizar.

DEMO: https://fhumanes.com/seleccionTabla/st_vehiculo_list.php

Este es el aspecto de la opción de Añadir.

Si estas interesado en este tema, en este enlace tienes el artículo completo.

Guía 93 – Proteger los desarrollos PHPRunner

Este artículo es el resultado del estudio de este tema, solicitado por el desarrollador Rubén.

Rubén tiene un desarrollo con el que quiere vender servicios a otras empresas y por las características de las instalaciones necesita «proteger»  frente a posibles copias fraudulentas, su desarrollo.

Si consultáis en internet, veréis que se indica que como PHP no es un lenguaje compilado (es interpretado) no es posible protegerlo 100%, pero lo que sí se puede hacer es ponerlo un poco más difícil y eso es lo que hemos intentado.

En el supuesto que hemos utilizado es el siguiente:

1.- La aplicación (PHP) y la base de datos (MySQL), se instala en una máquina Windows del Cliente. Además de la protección del desarrollo, tenemos que dotar al sistema de copias de seguridad ejecutadas por el Cliente (usuario no técnico) y de la capacidad de actualización de tablas de parametrización en las que se basa la solución.

2.- La aplicación se instala en un hosting de la empresa suministradora del software (servicio llave en mano), también se le da soporte de copias de seguridad/restauración, del aplicativo. A cada empresa cliente se le debe ofrecer un dominio de acceso diferenciado y sus datos no pueden estar accesibles ni compartidos con otros clientes. En los backup, sólo estarán los datos de su Empresa.

Con el supuesto (1), también otros desarrolladores me preguntaron como hacer una instalación local con un número concreto de días de evaluación y después de esos días, que el aplicativo no funcionara.

Si estas interesado en este tema, sigue leyendo el artículo de este enlace.

Blog personal para facilitar soporte gratuito a usuarios de React y PHPRunner