Application

Swift et l’accessibilité : introduction à VoiceOver

Publié par

1

Photo by Daniel Ali on Unsplash

Et si on parlait d’accessibilité pour nos applications mobiles ? En 2017, rien qu’en France, 12 millions de personnes seraient touchées par un handicap (source). Alors vous imaginez dans le monde !

J’ai été contactée pour mon application KayakTraker par une personne atteinte de déficience visuelle, qui voulait savoir si l’application était compatible VoiceOver… gros blanc 😦 Du coup, me suis prise au jeu… 🙂

Et bonne nouvelle, sous iOS, il existe beaucoup de fonctions d’accessibilité, dont VoiceOver dont nous allons parler ici. Comme en plus, c’est relativement simple à mettre en oeuvre, alors pourquoi s’en priver ?

Pourtant, encore trop souvent, l’accessibilité pour les concepteurs.rices d’applications mobiles passe loin après le design, les fonctionnalités, les patterns… Et c’est dommage car avec un peu d’empathie et d’efforts, il est possible de faire beaucoup mieux !

En fait, si vous utilisez Xcode, votre application est même probablement déjà compatible en grande partie avec VoiceOver. Apple à fait pour nous une grande partie du travail, et nous donne des outils sympas pour le terminer 🙂

Donc commençons par une petite application de démo : 1 Label, 2 Buttons, 1 TextField. Lorsque l’on clique sur le bouton « Click me ! », on affiche « Hello » dans le TextField, et le bouton « Raz » remet le TextField à 0 :

Application de démo Voice Over

Pour tester l’application avec VoiceOver, on peut dans un premier temps l’installer sur un device physique. Il faudra ensuite activer Voice Over dans les paramètres : Général > Accessibilité > VoiceOver. Cela permet déjà un premier test et de voir quelles informations manquent.

Mais ce n’est pas très pratique pour développer…

Heureusement, si il n’est pas possible (actuellement) d’activer les options d’accessibilité sur le simulateur, il est possible d’utiliser l’Accessibility Inspector depuis Xcode. Pour cela, rendez-vous dans le menu Xcode > Open Developer Tool > Accessibility Inspector.

On voit bien que le plus gros est fait, mais il reste quelques finitions…

Pour cela Apple à prévu les options d’accessibilité depuis le storyboard. D’une façon générale, chaque élément (Button, TextField…) possède des options d’accessibilité, qu’il suffit d’activer et de compléter :

Pour plus d’infos sur les traits, vous pouvez vous référer à la documentation officielle : https://developer.apple.com/

Voilà, une fois ces étapes accomplies, nous avons une application nettement plus accessible pour les personnes qui en ont besoin ! Ce n’est vraiment pas beaucoup de travail comparé à l’immense service que nous rendons !

Et le plus beau pour la fin : les options d’accessibilités gèrent aussi les traductions, comme toutes les autres éléments de l’interface 🙂

Vous pouvez donc retrouver vos labels et gérer vos traductions dans les fichiers strings dédiés. D’ailleurs, pour le rafraîchissement de ces fichiers, BartyCrouch est votre ami… mais cela fera l’objet d’un autre article.

Voilà pour cette introduction à l’accessibilité pour les applications iOS / Swift via VoiceOver. ce n’est bien sûr qu’une introduction, et VoiceOver ne prend en compte qu’une partie de l’accessibilité.

L’accessibilité se pense en globalité : au niveau du design, au niveau du parcours… J’en parlerai également dans de futurs articles ! En attendant, comme d’habitude, n’hésitez pas à me faire part de vos remarques / suggestions dans les commentaires !

L’application mobile Bring Me Back

Publié par

0

Ça ne vous est jamais arrivé de garer votre voiture sur un parking de supermarché ou dans une rue d’une ville inconnue et au moment de repartir, horreur, impossible de la retrouver ?

Et bien moi, cela m’arrive tout le temps :(, et je ne vous parle même pas de la galère quand en plus c’est dans un pays étranger…

Alors je sais, il y a Google Maps… Sauf que voilà, je trouve que rajouter un point de repère nécessite trop de manipulations… et surtout j’avais envie de faire un peu de Flutter 🙂

Donc Bring me Back ne sait faire qu’une chose, mais elle fait simplement : vous ramener à votre point de départ.

En pratique, vous avez juste à mémoriser votre point de départ, et a demander à l’application de vous y ramener quand vous le désirez !

L’intérêt de Flutter, c’est bien sûr le multiplateforme, et la rapidité de développement. Et je n’ai pas été déçue ! Grâce à l’utilisation du package « Flutter_mapbox_navigation« , la partie la plus compliquée se fait très simplement. Un grand merci à l’auteur ! Je pense d’ailleurs que l’usage de ce package fera l’objet tôt ou tard d’un tutoriel !

En attendant que je me décide à mettre l’application sur le Play Store et peut-être l’App Store, vous pouvez déjà télécharger le fichier .apk ici : https://www.dropbox.com/

N’hésitez pas à me faire des retours de bugs, suggestions… !

L’application Reiki Energy est sortie en version 4…

Publié par

0

Il s’agit surtout d’une mise à jour technique, mais elle apporte quand même son lot d’amélioration :

  • Une meilleure compatibilité avec iOS 13 et IPadOS 13
  • Une meilleure gestion du mode sombre
  • La durée totale d’une séance complète est maintenant affichée au démarrage du soin
  • Quelques bugs (dont un dans la gestion des préférences) ont été corrigés 🙂

D’un point de vue technique, cette version intégralement en Swift 5 et contient (enfin..) des tests unitaires et des tests d’interfaces. Cela me permettra d’envisager plus sereinement les évolutions !

Comme d’habitude, l’application est téléchargeable ici :

Et je suis à votre disposition pour toute suggestion / commentaire ici : https://vincent-barousse.blog/contact/

Développement Swift / iOS : Améliorer la qualité de son code grâce à SwiftLint

Publié par

0

La qualité du code est actuellement LE sujet dans le monde du dev (et avec raison !). Si vous êtes développeur.se pro et passionné.e, vous n’êtes sans doute pas passé à coté !

Donc, si le TDD est votre religion, que vos tests unitaires sont nickels et couvrent 100% du code, qu’Xcode ne retourne plus un seul warning, et que Sonarqube est devenu votre meilleur ami… Et bien vous pouvez encore vous améliorer, grâce à SwiftLint !

Si Sonarqube fera l’objet d’un autre article de blog, je vais aujourd’hui vous parler de SwiftLint.

SwiftLint, c’est un outil créée et maintenu par Realm pour améliorer le respect des conventions d’écritures en Swift, disponible ici : https://github.com/realm/SwiftLint

Comme souvent, il y a plusieurs manières de l’intégrer dans un projet, personnellement, j’aime bien Cocoapods !

Comme code d’exemple, je vais reprendre la démo « InfoKayak », mise à jour pour Swift 5.

Sans SwiftLint, Xcode 11.3 ne trouve rien à redire au code (pas de warning, pas d’erreur) :

Editez maintenant le fichier Podfile en y ajoutant la ligne :  » pod ‘SwiftLint’  » :

Mettez à jour et installer les pods, puis rouvrez le projet avec Xcode. Pour le moment, il n’y a pas de changements 🙂

En fait, pour activer SwiftLint, il faut un petit script. Dans les « Build Phases » du projet, cliquez sur le « + » , ajoutez une « New run script phase », et mettez-y ce script :

On Build et Oh ! 286 warnings et 22 erreurs 😦 WTF ?

Allez, avant de faire un burn out, une bonne nouvelle, SwiftLint est capable de corriger automatiquement une grosse partie de ces problèmes 🙂 .

Pour cela, depuis un terminal, mettez vous dans le dossier de votre projet, et exécutez la commande « ./Pods/SwiftLint/swiftlint autocorrect« .

Ensuite, effacez le dossier de build d’Xcode, et au besoin, relancez l’IDE. Normalement, la situation devrait s’être grandement améliorée : il n’y a plus que 2 erreurs et 5 warnings à corriger manuellement, chose que je fais immédiatement… 😉

Dans certaines situations, on ne peux pas corriger (cas de librairie externes lesquelles nous n’avons pas la main…), il est donc possible de paramétrer SwiftLint plus finement.

Pour tout ce qui est règles globales, il faut créer un fichier .swiftlint à la racine de votre projet. Par exemple, le mien contient ceci :

Lorsqu’il s’agit d’un besoin temporaire, on peut désactiver une règle directement dans le code avec l’instruction // swiftlint:disable <rule> . La liste des règles se trouve ici : https://realm.github.io/SwiftLint/rule-directory.html

Voilà, j’espère que cette petite introduction vous aura donné envie de vous mettre à Swiftlint et à vous mettre à la qualité ! En tous cas moi, je suis accro !

Nouvelle mise à jour de l’application mobile Kayak Tracker !

Publié par

0

Toujours ravie de satisfaire les demandes des utilisateurs.rices, j’ai rajouté quelques fonctions dans l’application Kayak Tracker.

Vous pouvez maintenant exporter vos tracks soit d’application à application (via un email), soit dans Google Earth !

Voici la vidéo explicative :

Parmi les autres nouveautés / améliorations, il y a également de nouveaux fonds de carte (vue satellite, vue mixte) et une amélioration des traductions !

Comme d’habitude, l’application est à télécharger sur l’app store :

Et bonnes balades !

Swift Map Filter Reduce mémo

Publié par

0

Lorsque l’on pense opérations sur des types Array ou Dictionary en Swift, on a souvent le réflexe for-in loop… Mais Swift propose d’autres méthodes comme map, filter, reduce… potentiellement plus efficaces. Voici donc un petit mémo à ce sujet 🙂

Map

Map sert à parcourir une collection er à appliquer la même opération à chaque élément de cette collection. La fonction map retourne un array contenant le résultat. Dans l’exemple suivant, la fonction map est utilisée pour retourner le carré de chaque item d’un tableau :

Le type de retour de la fonction map n’est pas limité au type des éléments d’origine :

Et enfin, la fonction map peut être utilisée sur tout type de collection :

Filter

La fonction filter parcourt un array ou une collection et retourne un array contenant les éléments correspondant à la condition demandée. Ex: recherche des entiers divisibles par 2:

Reduce

Reduce sert à combiner tous les éléments d’une collection pour créer une nouvelle valeur. Dis comme cela, ce n’est pas très parlant, mais voici quelques exemples :

  • Ajouter toutes les valeurs d’un array à une valeur initiale de 15 :
  • Fusionner des chaînes :

flatMap et compactMap

  • flatMap :
  • compactMap :

En résumé :

  • map permet de retourner un array contenant le résultat d’une transformation appliquée à chaque item.
  • filter retourne un array contenant seulement les éléments correspondant à une condition donnée.
  • reduce retourne une seule valeur calculée en combinant chaque item avec une valeur initiale.

L’application mobile iOS « Kayak Tracker »

Publié par

2

Un carnet de bord pour toutes vos activités nautiques : kayak, canoë, rafting, sup… Grâce à l’application Kayak Tracker, vous pouvez suivre votre sortie en temps réel, l’enregistrer et la commenter, et même suivre vos données cardiologiques (grâce à l’Apple Watch) !


Kayak Tracker est une application destinée à tous les fans de kayak, canoë, rafting, windsurf, kitesurf, stanup padle voile, yatchning… Bref, tous les accros aux sports d’eau.

Transformez votre iPhone en véritable carnet de bord pour vos sorties en kayak, canoe, rafting…

Avec cette application jolie et simple d’usage, vous pouvez :

  • Savoir à tous moment où vous vous trouvez, la distance que vous avez parcourue et le temps écoulé.
  • Pour chaque parcours, vous retrouvez la distance parcourue, la durée totale de trajet, la vitesse maximale et la vitesse moyenne ainsi que le dénivelé.
  • Vous pouvez personnaliser vos sorties ne ajoutant des photos (jusqu’à 3) et des commentaires.
  • L’application vous communique également les conditions météo du lieu où vous vous trouvez, et celle de l’endroit où vous comptez aller.
  • Grâce à votre Apple Watch, vous retrouverez également vos données cardiologiques dans vos parcours (courbe cardio, bpm max, min et moy).
  • Toujours grâce à votre Apple Watch, vous commandez toutes les fonctions utiles de l’ampli (start, stop sauvegarde, position…) sans sortir votre iPhone ! Plutôt pratique pour éviter de lui faire prendre un bain 🙂

Cerise sur le gâteau, pas besoin de compte, toutes vos données sont stockées dans votre téléphone, pour le plus grand respect de votre vie privée !

Kayak tracker est conçue pour fonctionner en arrière plan sur votre téléphone lorsque vous enregistrez un parcours, et est optimisée pour une gestion de l’énergie optimale (testée sur des randonnées de 6 heures sans problème). Vous la lancez au début de votre randonnée, et vous l’oubliez jusqu’à la fin de la promenade !

Attention, les sports d’eau sont potentiellement dangereux pour votre matériel, et rappelez-vous que vous les faites pour votre entière responsabilité. Soyez prudent.es ! Le développeur de cette application ne saurait être tenu pour responsable d’aucun dommage pouvant arriver à votre Apple Watch ou votre iPhone. Utilisez une Apple Watch série 2 au minimum (modèles étanches) et mettez toujours votre téléphone dans un sac étanche !

Application à télécharger sur l’App Store :

Bonnes navigations !


Premiers test sur le terrain pour l’application mobile iOS « Kayak Tracker » !

Publié par

2

J’ai réalisé cette semaine les premiers tests sur le terrain de ma nouvelle application mobile destinée aux pratiquant.es de sports tels que le kayak, le rafting, stand up paddle…

Dans un décors aussi magnifique que la vallée de la Loire, il y a des moments meilleurs que d’autres dans la vie de dév !

Cette application est un « must have » !

Grâce à elle, l’utilisateur.rice à accès à ses parcours (avec les détails tels que la distance parcourue, la vitesse moyenne, la vitesse maximum, le dénivelé…), et bien entendu sa position en temps réel.

Mais l’appli permet aussi le suivi des données cardio lors de l’exercice grâce à l’Apple Watch, ainsi que le suivi de la météo locale…

Encore quelques bugs à corriger, et je pense que vous pourrez la retrouver sur l’App Store d’ici une ou deux semaine !

Tutoriel Swift : formatage de numéros de téléphones avec PhoneNumberKit

Publié par

0

PhoneNumConverterExample

Dans le cadre de mon activité de freelance, j’ai récemment dû répondre à une offre dans laquelle il était demandé :

 

– De créer un champ texte intégrant un numéro de téléphone

 

– Ce champ texte devra formater le numéro de téléphone pour avoir le même affichage que dans l’appli « Contacts » d’Apple.

 

– Le formatage doit se faire dans les normes locales de chaque pays.

 

– Puis le numéro de téléphone doit, toujours en fonction de la localisation, être converti à la norme E164.

 

– L’utilisation de frameworks externes est autorisée.

 

– Forcément, il faut réaliser tout cela pour moins de 5 euros et en 5 mn 😦 …

 

Comme j’ai trouvé le challenge intéressant (et avec l’espoir de facturer à un tarif un peu plus décent…), je me suis penché sur la question.

La première option qui m’est venue à l’esprit est de partir d’une « page blanche », et de tout coder. Après tout, filtrer et formater des entrées utilisateur n’est pas bien compliqué.

Oui mais pour que cela fonctionne pour tous les pays, cela devient nettement plus gourmand en temps et en neurones…

C’est ainsi que j’ai découvert le génialissime framewok « PhoneNumberKit« 

Lire la suite →

Tutoriel Swift : des animations faciles avec Lottie !

Publié par

2

IphoneX Lottie Snowman

Je ne sais pas si vous vous êtres déjà frotté à la programmation d’animations pour iOS ou mac OS, mais moi je trouve cela passablement compliqué et rébarbatif !

Heureusement, Airbnb à eu la bonne idée de mettre à notre disposition le framework Lottie !

Il s’agit ni plus ni moins que d’une méthode simple pour importer directement un fichier d’animation créé avec Adobe After Effects dans notre application Swift !

Comment ? Voyons cela…

Lire la suite →