Captura firmas en tus aplicaciones móviles

Probablemente haya firmado digitalmente recientemente para realizar una compra con tarjeta de crédito o para aceptar la entrega de un paquete. Ahora, Altova MobileTogether 2.0 le permite integrar firmas digitales en sus propias aplicaciones móviles para todas las plataformas.

Las aplicaciones móviles que recopilan datos desde ubicaciones remotas, difunden una petición, autorizan un acuerdo o simplemente documentan una interacción en el mundo real, pueden utilizar la captura de firmas. La aplicación de ejemplo "Altova Parcel Delivery", que muestra la funcionalidad GPS, se ha actualizado con firmas para la verificación de la entrega. La aplicación "Parcel Delivery" está instalada en el servidor de demostración de Altova MobileTogether, y puede ejecutarse en su propio dispositivo móvil a través de la aplicación MobileTogether Client.

La aplicación "Entrega de Paquetes" simula el funcionamiento de un servicio de entrega metropolitano y solicita al destinatario que firme un campo de firma en el dispositivo móvil del conductor para verificar la entrega, como se muestra a continuación en una captura de pantalla tomada en una pequeña tableta Android.

Una vez que se ha completado toda la ruta de entrega, la aplicación de entrega de paquetes muestra un resumen de las entregas, mostrando las firmas del destinatario para su verificación.

Estas capturas de pantalla ilustran el flujo de trabajo más común para las firmas en aplicaciones móviles: la firma se captura, se guarda y luego se muestra nuevamente en un momento y lugar posteriores.

En la mayoría de las aplicaciones, la visualización de la firma se realizará en un dispositivo diferente al que se utilizó para capturarla. Por ejemplo, un empleado puede utilizar una aplicación móvil para enviar un informe de gastos con firma, que un gerente revisará y aprobará, o un comprador puede firmar electrónicamente una orden de compra y guardar una copia en la base de datos de compras. MobileTogether incluye funciones que ayudan a los desarrolladores que desean mostrar firmas en múltiples plataformas.

Para demostrar esta funcionalidad, creamos una aplicación sencilla que permite guardar firmas en un archivo y mostrarlas nuevamente en una variedad de dispositivos. Por ejemplo, una firma capturada en un teléfono Android puede mostrarse en un iPad, o una firma capturada desde una aplicación que se ejecuta en Windows 10 puede mostrarse en cualquier dispositivo móvil. A continuación, se muestra una vista parcial de la página de inicio de la aplicación "Firmas", donde el usuario puede elegir capturar una nueva firma o revisar las firmas que ya se han almacenado. Los botones "Capturar" y "Revisar" abren páginas secundarias correspondientes a esas funciones.

Captura de firmas

El diseño de la subpágina para la captura de la firma es muy sencillo, con solo cuatro elementos: una etiqueta en la parte superior, el campo para la firma, y dos botones que permiten al usuario guardar la firma o borrarla e intentarlo de nuevo.

El campo para la firma se añade a la subpágina arrastrando un icono desde la ventana de ayuda de MobileTogether Controls. El campo se dimensiona automáticamente para ocupar el ancho del dispositivo seleccionado para la simulación, y no es necesario definir propiedades especiales. Los colores del campo de firma se basan en los valores predeterminados del dispositivo. En el ejemplo anterior, se seleccionó un dispositivo iOS para el diseño, y los colores predeterminados son tinta blanca sobre un fondo negro. Posteriormente, cuando la aplicación se ejecute en Android, los colores predeterminados serán tinta negra sobre un fondo gris, y para Windows Phone, tinta negra sobre un fondo blanco.

La ventana de ayuda "Fuentes de la página" que se muestra arriba, muestra el elemento que definimos para guardar la imagen de la firma, así como elementos para registrar sus colores y datos adicionales sobre el dispositivo, lo que será interesante mostrar más adelante para su revisión. Dependiendo del flujo de trabajo de su propia aplicación, es posible que desee registrar la fecha y hora actuales, o incluso las coordenadas de geolocalización, junto con las firmas. Nuestra aplicación añadirá cada nueva firma al final de un archivo llamado "signatures.xml" en el servidor MobileTogether. Para este ejemplo sencillo, todos los usuarios acceden al mismo archivo.

Cuando se está diseñando una aplicación en la que algunos usuarios crean firmas y otros las revisan en un dispositivo diferente, el comportamiento ideal es mostrar las firmas capturadas con el tamaño y los colores predeterminados del dispositivo del revisor. MobileTogether ofrece una función especial llamada "mt-change-image-colors" que ayuda a lograr esto.

Pantalla de firma

La firma capturada puede mostrarse ya sea en un campo de firma o como una imagen. Utilizando cualquiera de estas opciones, la firma original se redimensiona automáticamente para cualquier dispositivo de visualización, de modo que una firma capturada en una tableta se adapta automáticamente a un teléfono, o viceversa.

La captura de pantalla que se muestra a continuación fue tomada con un iPhone y muestra la subpágina de "Revisión", donde se muestra una firma con el esquema de color blanco sobre negro, que es el predeterminado en iOS, aunque la firma original fue capturada en un dispositivo Android con un esquema de color negro sobre gris.

A la derecha se muestra la fórmula que convierte los colores. Observe que tanto los colores de la tinta como los del lienzo se procesan en un solo paso. Es necesario hacerlo de esa manera en caso de que la conversión requiera invertir dos colores. Si se realiza la conversión en dos pasos, es posible que se cambie la tinta negra por blanca y se modifique el color del lienzo. La conversión intermedia resultaría en un rectángulo sólido, ¡y la firma desaparecería!

Colores personalizados

No está limitado a los colores predeterminados. En la ventana de ayuda de las propiedades para cada control de firma, el campo "Color del texto" define el color de la tinta de la firma, y el campo "Color de fondo" define el color del fondo. Utilice variables XPath para guardar los valores que se utilizarán para la conversión posterior.

Hemos mejorado la aplicación de demostración "Signature" añadiendo una página que permite al usuario seleccionar colores personalizados a través de menús desplegables

Descargue el diseñador MobileTogether, que es gratuito, para añadir la función de captura de firmas a sus propias aplicaciones móviles multiplataforma en tiempo récord. Su instalación incluirá los diseños de todas las aplicaciones de ejemplo instaladas en el servidor de demostración de MobileTogether. Si desea examinar la aplicación de demostración de captura de firmas que se describe en esta publicación, se ha subido a GitHub en la siguiente dirección: https://github.com/altova/MobileTogether-signature-capture

Aplicación MobileTogether

Visite la tienda de aplicaciones de su dispositivo para descargar la aplicación, que es gratuita