Collectez des signatures directement dans vos applications mobiles

Vous avez probablement utilisé une signature électronique récemment pour effectuer un achat par carte de crédit ou pour confirmer la livraison d'un colis. Désormais, Altova MobileTogether 2.0 vous permet d'intégrer des signatures dans vos propres applications mobiles, pour toutes les plateformes.

Les applications mobiles qui collectent des données à partir de lieux distants, qui diffusent une pétition, qui autorisent un accord, ou qui se contentent de documenter une interaction réelle, peuvent toutes utiliser la capture de signatures. L'application de démonstration Altova Parcel Delivery, qui met en valeur les fonctionnalités GPS, a été mise à jour avec des signatures pour la vérification de la livraison. L'application Parcel Delivery est installée sur le serveur de démonstration Altova MobileTogether, et vous pouvez l'utiliser sur votre propre appareil mobile via l'application MobileTogether Client.

L'application de livraison de colis simule le fonctionnement d'un service de livraison urbain. Elle demande au destinataire de signer un champ de signature sur l'appareil mobile du livreur, afin de confirmer la réception, comme on peut le voir sur la capture d'écran ci-dessous, prise sur une petite tablette Android.

Une fois l'intégralité du trajet de livraison effectuée, l'application de livraison de colis affiche un récapitulatif des livraisons, avec les signatures du destinataire pour vérification.

Ces captures d'écran illustrent le processus le plus courant pour les signatures dans les applications mobiles : la signature est capturée, stockée, puis réaffichée ultérieurement, à un moment et un endroit différents.

Dans la plupart des applications, l'affichage de la signature se fera sur un appareil différent de celui où elle a été capturée. Par exemple, un employé utilisera une application mobile pour soumettre un rapport de dépenses signé, que le responsable visualisera et approuvera, ou un acheteur signera électroniquement un bon de commande et enregistrera une copie dans la base de données des achats. MobileTogether inclut des fonctionnalités pour aider les développeurs qui souhaitent afficher des signatures sur plusieurs plateformes.

Pour illustrer cette fonctionnalité, nous avons créé une application simple permettant de sauvegarder des signatures dans un fichier et de les afficher à nouveau sur différents appareils. Par exemple, une signature capturée sur un téléphone Android peut être affichée sur une tablette iPad, ou une signature capturée à partir d'une application fonctionnant sous Windows 10 peut être affichée sur n'importe quel appareil mobile. Ci-dessous, vous trouverez une vue partielle de la page d'accueil de l'application "Signatures", où l'utilisateur peut choisir de capturer une nouvelle signature ou de consulter les signatures déjà enregistrées. Les boutons "Capturer" et "Consulter" ouvrent chacun des sous-pages dédiées à ces opérations.

Capture de signature

La conception de la sous-page de capture de signature est très simple, avec seulement quatre éléments : une étiquette en haut, le champ de signature, et deux boutons permettant à l'utilisateur de sauvegarder la signature ou de l'effacer pour réessayer.

Le champ de signature est ajouté à la sous-page en faisant glisser une icône depuis la fenêtre d'aide MobileTogether Controls. La taille du champ est automatiquement ajustée pour occuper toute la largeur de l'appareil sélectionné pour la simulation, et aucune propriété spéciale n'a besoin d'être définie. Les couleurs du champ de signature sont basées sur les paramètres par défaut de l'appareil. Dans l'exemple ci-dessus, un appareil iOS a été sélectionné pour la conception, et les couleurs par défaut sont de l'encre blanche sur un fond noir. Par la suite, lorsque l'application s'exécute sur Android, les couleurs par défaut seront de l'encre noire sur un fond gris, et pour Windows Phone, de l'encre noire sur un fond blanc.

La fenêtre d'aide "Sources de la page" ci-dessus affiche l'élément que nous avons défini pour enregistrer l'image de la signature, ainsi que des éléments pour enregistrer ses couleurs et des données supplémentaires sur l'appareil, ce qui sera utile pour l'afficher ultérieurement pour consultation. En fonction du fonctionnement de votre propre application, vous pourriez vouloir enregistrer la date et l'heure actuelles, ou éventuellement les coordonnées géographiques, en même temps que les signatures. Notre application ajoutera chaque nouvelle signature à la fin d'un fichier appelé signatures.xml sur le serveur MobileTogether. Pour cet exemple simple, tous les utilisateurs accèdent au même fichier.

Lorsqu'on conçoit une application où certains utilisateurs créent des signatures et d'autres les examinent sur un appareil différent, il est préférable d'afficher les signatures capturées dans la taille et les couleurs par défaut de l'appareil de l'examinateur. MobileTogether propose une fonction spéciale appelée "mt-change-image-colors" pour faciliter cette opération.

Affichage de la signature

La signature capturée peut être affichée soit dans un champ de signature, soit sous forme d'image. Quelle que soit l'option choisie, la signature originale est automatiquement redimensionnée pour s'adapter à tout appareil d'affichage, de sorte qu'une signature capturée sur une tablette s'affiche automatiquement sur un téléphone, et inversement.

La capture d'écran ci-dessous a été réalisée sur un iPhone et montre la sous-page "Avis" affichant une signature en blanc sur fond noir, alors que l'original a été capturé sur un appareil Android en noir sur fond gris.

À droite, se trouve l'expression qui convertit les couleurs. Notez que les couleurs de l'encre et de la toile sont traitées en une seule étape. Il faut procéder ainsi, car la conversion peut nécessiter l'inversion de deux couleurs. Si vous effectuez la conversion en deux étapes, vous pourriez transformer l'encre noire en blanc et faire correspondre la couleur de la toile. La conversion intermédiaire donnerait un rectangle plein, et la signature disparaîtrait !

Couleurs personnalisées

Vous neêtes pas limité aux couleurs par défaut. Dans la fenêtre d'aide des propriétés pour chaque contrôle de signature, le champ "Couleur du texte" définit la couleur de l'encre de la signature, et le champ "Couleur de fond" définit la couleur de la zone de dessin. Utilisez des variables XPath pour enregistrer les valeurs afin de pouvoir les convertir ultérieurement.

Nous avons amélioré l'application de démonstration "Signature" en ajoutant une page supplémentaire qui permet à l'utilisateur de sélectionner des couleurs personnalisées à partir de listes déroulantes

Téléchargez gratuitement MobileTogether Designer pour ajouter la capture de signatures à vos propres applications mobiles multiplateformes en un temps record. Votre installation comprendra les modèles de toutes les applications d'exemple installées sur le serveur de démonstration MobileTogether. Si vous souhaitez examiner l'application de démonstration de capture de signature décrite dans cet article, elle est disponible sur GitHub à l'adresse suivante : https://github.com/altova/MobileTogether-signature-capture

l’appli gratuite MobileTogether

Visitez la boutique d'applications de votre appareil pour télécharger l'application, qui est gratuite :