Acquisire firme nelle vostre applicazioni mobile

Probabilmente, di recente, avete utilizzato un display elettronico per effettuare un acquisto con carta di credito o per accettare la consegna di un pacco. Ora, con Altova MobileTogether 2.0, è possibile integrare la funzione di firma nelle vostre applicazioni mobile, per tutte le piattaforme.

Le applicazioni mobili che raccolgono dati da località remote, diffondono una petizione, autorizzano un accordo o semplicemente documentano un'interazione reale, possono tutte utilizzare la funzionalità di acquisizione di firme. L'applicazione di esempio Altova Parcel Delivery, che dimostra le funzionalità GPS, è stata aggiornata con la possibilità di acquisire firme per la verifica della consegna. L'applicazione Parcel Delivery è installata sul server di dimostrazione Altova MobileTogether e può essere eseguita sul proprio dispositivo mobile tramite l'applicazione MobileTogether Client.

L'applicazione Parcel Delivery simula il funzionamento di un servizio di consegna urbano e richiede al destinatario di apporre la propria firma su un'area dedicata sul dispositivo mobile del corriere, al fine di confermare la consegna, come si può vedere nello screenshot qui sotto, catturato su un piccolo tablet Android.

Una volta completato l'intero percorso di consegna, l'app di consegna pacchi mostra un riepilogo delle consegne effettuate, con le firme del destinatario per la verifica.

Questi screenshot illustrano il flusso di lavoro più comune per le firme nelle applicazioni mobile: la firma viene acquisita, memorizzata e poi visualizzata nuovamente in un momento e in un luogo successivi.

Nella maggior parte delle applicazioni, la visualizzazione della firma avverrà su un dispositivo diverso da quello su cui è stata acquisita. Ad esempio, un dipendente utilizzerà un'app mobile per inviare un rapporto spese firmato, che un responsabile visualizzerà e approverà, oppure un acquirente firmerà elettronicamente un ordine di acquisto e ne conserverà una copia nel database degli acquisti. MobileTogether include funzionalità che aiutano gli sviluppatori che desiderano visualizzare le firme su diverse piattaforme.

Per dimostrare questa funzionalità, abbiamo creato una semplice applicazione per salvare le firme in un file e visualizzarle nuovamente su diversi dispositivi. Ad esempio, una firma acquisita su un telefono Android può essere visualizzata su un iPad, oppure una firma acquisita da un'applicazione in esecuzione su Windows 10 può essere visualizzata su qualsiasi dispositivo mobile. Di seguito è riportata una vista parziale della pagina iniziale dell'applicazione "Firme", dove l'utente può scegliere di acquisire una nuova firma oppure visualizzare le firme già salvate. I pulsanti "Acquisisci" e "Visualizza" aprono rispettivamente delle sottopagine dedicate a tali operazioni.

Acquisizione della firma

La progettazione della sottosezione per la firma digitale è molto semplice e prevede solo quattro elementi: un'etichetta nella parte superiore, il campo per la firma e due pulsanti che consentono all'utente di salvare la firma o di cancellarla e riprovare.

Il campo per la firma viene aggiunto alla sottopagina trascinando un'icona dalla finestra di supporto "MobileTogether Controls". Il campo viene automaticamente dimensionato per occupare l'intera larghezza del dispositivo selezionato per la simulazione, e non è necessario definire proprietà speciali. I colori del campo per la firma si basano sulle impostazioni predefinite del dispositivo. Nell'esempio precedente, è stato selezionato un dispositivo iOS per la progettazione, e i colori predefiniti sono inchiostro bianco su sfondo nero. Successivamente, quando l'app viene eseguita su Android, i colori predefiniti saranno inchiostro nero su sfondo grigio, e per Windows Phone, inchiostro nero su sfondo bianco.

La finestra "Origini della pagina" mostrata sopra evidenzia l'elemento che abbiamo definito per salvare l'immagine della firma, e gli elementi per registrare i suoi colori e ulteriori dati sul dispositivo, che saranno utili da visualizzare in seguito per la consultazione. A seconda del flusso di lavoro della vostra applicazione, potreste voler registrare la data e l'ora correnti, oppure le coordinate di geolocalizzazione insieme alle firme. La nostra applicazione aggiungerà ogni nuova firma alla fine di un file chiamato "signatures.xml" sul server MobileTogether. In questo semplice esempio, tutti gli utenti accedono allo stesso file.

Quando si progetta un'applicazione in cui alcuni utenti creano firme e altri le visualizzano su un dispositivo diverso, la soluzione più efficace è mostrare le firme acquisite nelle dimensioni e nei colori predefiniti del dispositivo utilizzato per la visualizzazione. MobileTogether offre una funzione speciale chiamata "mt-change-image-colors" che facilita questo processo.

Visualizzazione della firma

La firma acquisita può essere visualizzata sia in un campo apposito per le firme, sia come immagine. Utilizzando uno di questi elementi, la firma originale viene automaticamente ridimensionata per adattarsi a qualsiasi dispositivo di visualizzazione, in modo che una firma acquisita su un tablet si adatti automaticamente a uno smartphone, o viceversa.

La schermata qui sotto è stata catturata su un iPhone e mostra la sezione "Recensioni" che visualizza una firma con il classico schema bianco su nero di iOS, nonostante l'immagine originale sia stata acquisita su un dispositivo Android con uno schema nero su grigio.

A destra è presente l'espressione che converte i colori. Si noti che sia i colori dell'inchiostro che quelli della tela vengono elaborati in un'unica passata: è necessario procedere in questo modo nel caso in cui la conversione richieda l'inversione di due colori. Se si effettuasse la conversione in due passate, si potrebbe trasformare l'inchiostro nero in bianco e far coincidere il colore della tela. La conversione intermedia risulterebbe in un rettangolo pieno e la firma andrebbe persa!

Colori personalizzati

Non siete limitati ai colori predefiniti. Nella finestra di aiuto delle proprietà per ogni elemento "Firma", il campo "Colore del testo" definisce il colore dell'inchiostro della firma, mentre il campo "Colore di sfondo" definisce lo sfondo. Utilizzate le variabili XPath per salvare i valori che verranno utilizzati per la conversione in un momento successivo.

Abbiamo migliorato l'applicazione dimostrativa "Signature" aggiungendo una pagina che permette all'utente di selezionare colori personalizzati tramite delle caselle a tendina

Scaricate gratuitamente MobileTogether Designer per aggiungere la funzionalità di acquisizione firme alle vostre applicazioni mobile multipiattaforma in tempi record. La vostra installazione includerà i progetti di tutte le applicazioni di esempio installate sul server dimostrativo di MobileTogether. Se desiderate esaminare l'applicazione dimostrativa di acquisizione firme descritta in questo articolo, è stata caricata su GitHub all'indirizzo: https://github.com/altova/MobileTogether-signature-capture

Applicazione mobile MobileTogether

Visitate l'app store del vostro dispositivo per scaricare l'applicazione gratuito applicazione: