Swift et l’accessibilité : introduction à VoiceOver

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 :

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’enregistrement NSUserDefaults en Swift

L'enregistrement clé-valeur en swift _ nsuserdefaults

L’enregistrement de données sous forme de clé-valeur en développement mobile à déjà été abordé dans l’article sur les SharedPreferences.

Aujourd’hui, je vous propose de faire la même chose, mais en Swift. C’est beaucoup plus simple, mais nous nous limitons alors aux plateformes Apple (iOS, iPadOS, MacOS, WatchOS).

Comme pour les SharedPreferences, NSUsersDefaults est donc un système simple et rapide qui permet d’enregistrer des valeurs de type Float, Bool, Double, Int, mais aussi des objets (array, dictionary…. ), et des urls. C’est donc une façon de gérer la persistance des données à la fois simple et puissante 🙂 .

Pour cette démo, j’ai créé une petite application très simple dans laquelle l’utilisateur enregistre une phrase, et celle-ci est stockée comme une clé-valeur grâce à UserDefaults :

Afin de vérifier la persistance, n’hésitez pas à relancer l’application, et vous verrez que votre phrase reste mémorisée 🙂

Alors pour utiliser UserDefaults, il faut déjà créer une instance de UserDefaults, et définir ses clés de préférences :

Ensuite, l’enregistrement d’une valeur se fait avec l’instruction « préférences.set » :

Et la lecture d’une valeur avec :

Et c’est tout !

Ce qui fait que notre controller contient juste ce code :

Je pense que c’est la méthode la plus simple en Swift pour sauvegarder des informations ! Mais elle est aussi très puissante, puisqu’il est non seulement possible d’enregistrer des valeurs « simples », comme des entiers, des nombres et de booléens, mais aussi des valeurs plus complexes, comme des tableaux et des dictionnaires. En « bidouillant » un peu, on peut même enregistrer des images !

Bref, pas de raisons de s’en priver !

Comme toujours, le code source est disponible sur mon dépôt Git : https://gitlab.com/camilleBar/swift-nsuserdefaults-ios-demo-project

Et si vous avez des questions / suggestions, n’hésitez pas, commentez !

L’application mobile Bring Me Back

Ç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… !

Deep Learning avec TensorFlow

Ce qu’il y a de bien avec le confinement, c’est que les week-ends semblent durer plus longtemps ! Du coup, cela me laisse le temps de me cultiver !

Le dernier livre en date, « Deep Learning avec TensorFlow », est en fait la suite du livre « Le Machine Learning avec Python », dont je parle ici.

Pour celleux qui ne seraient pas encore trop au clair avec les notions de Machine Learning (ML), Deep Learning, Intelligence Artificielle (AI), voici un petit résumé des épisodes précédents 🙂

Les débuts de l’Intelligence Artificielle remontent assez loin, on cite souvent Alan Turing dans les années 1950. Elle désigne tous les traitements automatisés que l’on retrouve en Industrie (automates) et en informatique (logiciels). Là, je sens que j’ai cassé un mythe…

En fait, dans l’imaginaire collectif, AI désigne surtout une Intelligence Artificielle Forte (AGI), qui serait totalement autonome et auto-apprenante. Hélas (?), cela n’existe pas encore à l’heure où j’écris ces lignes – a priori – 😉

Le Machine Learning, c’est déjà plus glamour, car là, ce sont les machines qui « apprennent par elles-mêmes ». Attention cependant, tout cela est basé sur des mathématiques, des statistiques, il n’y a donc pas d’AGI ni de miracle derrière tout cela, seulement beaucoup d’intelligence humaine. On utilise des modèles de type régression, Naïve Bayes, clustering, arbres de décision, random Forest…

Le deep learning enfin fait partie du ML, mais fait appel à des réseaux de neurones. Elle fonctionne par bio-mimétisme : la machine essaye de reproduire le mécanisme de notre cerveau ! Il est apparu il y a 10 ans environ, notamment dans la reconnaissance d’images ou de langage naturel.

On en vient alors à TensorFlow !

TensorFlow est un outil d’apprentissage automatique développé par Google, il est open source et basé sur Google Brain.

Du coup, on parle de Deep Learning, donc de réseaux de neurones.

Après une courte (ré)-introduction aux concepts de base du ML, ce livre fait donc une introduction aux réseau de neurones artificiels et à leur entrainement.

Il aborde successivement les réseaux de neurones convolutifs, les réseaux de neurones récurrents, les autoencodeurs et enfin l’apprentissage par renforcement.

Perso, plus j’avance dans mon apprentissage du ML, plus j’ai l’impression que l’on se rapproche des méthodes d’apprentissages que l’on utilise avec nos animaux domestiques. L’apprentissage par renforcement, qui utilise les récompenses, en est un exemple. Même si bien sûr nous sommes encore loin, pour le moment, de la complexité d’un cerveau animal. Mais cela à toujours un coté « magique » 🙂 !

En tous cas, je suis de plus en plus captivée par le ML, et si vous aussi vous avez envie d’approfondir le sujet, ce livre est fait pour vous !

En attendant, n’hésitez pas à laisser des remarques / commentaires si vous en avez !

Créer facilement ses classes modèles en Dart à partir d'un JSON

Convertir du json en modele dart facilement

Travaillant actuellement sur un projet en Dart / Flutter, j’ai fait la connaissance du super travail de Javier Lecuona, qu’il trouve ici mon éternelle gratitude 🙂 .

En effet, créer un modèle à partir de fichier JSON est potentiellement source de bugs, surtout lorsque le JSON est un peu complexe. C’est ici qu’intervient l’outil « JSON to Dart » : https://javiercbk.github.io/json_to_dart/

L’usage est simplisme ! Vous récupérez l’intégralité de votre JSON (ici un exemple issu de jsonplaceholder.com) :

Vous le collez dans l’interface de JSON to Dart :

Vous ajoutez le nom que vous désirez donner à votre classe, et il ne reste plus qu’à appuyer sur le bouton « Generate Dart » et à copier / coller le code généré !

Génial je vous dit !

Si vous connaissez la même chose pour Swift, n’hésitez pas à me le faire savoir ! 😉

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

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 !

Swift Map Filter Reduce mémo

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.

Flutter development : les ressources utiles

Grâce à une super présentation d’Edouard Marquez lors d’un Meetup organisé par le CDG de Tours, j’ai le plaisir d’être en pleine découverte de Flutter.

Donc, Flutter est un projet Open Source porté par Google, et basé sur le langage Dart. C’est (entre autres…) LE nouveau framework de Google pour la création d’applications mobiles multiplateformes.

Encore un me direz vous… oui mais celui-là est différent (je sais, on nous l’a déjà faite celle-là 🙂 ). Plus sérieusement, le fait qu’il soit porté par Google, avec une communauté de développeur.ses en constante augmentation, donne de très bons augures pour l’avenir de ce framework.

Je ne rentrerai pas ici dans la discussion Flutter vs React Native vs Cordova vs Xamarin… cela n’est pas le propos. Par contre, à titre perso, je peux dire que le langage Dart me plaît bien, et venant de Swift (avec aussi un passé en Java et en C), la courbe d’apprentissage n’est pas trop ardue.

Bref, vous l’aurez compris, je kiffe Flutter 🙂

Et comme je sais à que point c’est parfois compliqué de débuter avec un nouveau framework, j’ai décidé ici de vous partager mes ressources ! (bien entendu, je ferai évoluer cette liste au fur et à mesure de mes avancées dans le domaine…)

Les bases :

https://flutter.dev : le site de base. Plein de tutoriels, d’infos et surtout toujours à jour !

https://dart.dev : le site de référence pour le langage Dart

La communauté :

https://www.edouard-marquez.me/blog/ : plein de news sur l’évolution de Flutter et de sa communauté

Les tutoriels :

http://www.iflutter.in : le site de tutoriels le plus complet que j’ai pu trouver à ce jour

https://kodestat.gitbook.io/flutter/ : de nombreux tutos également

https://hackr.io/tutorials/learn-flutter

https://www.didierboelens.com

http://tphangout.com

https://flutterbyexample.com

Programmation Swift : iOS Developer Notes For Professionals

ios Dev Pros

Voici mon nouveau livre de chevet : iOS Developer Notes for Professionals !

Je crois que tout le langage Swift est abordé dans ce livre ! Cela va de la création toute simple d’une UIView au parsing de JSON, tout en passant par l’usage de des frameworks les plus utilisés (Fastlane…) et des designs paterns (MVC, MVVM…).

Bref, le top du top pour le développeur Swift !

Bon, finalement, le lire avant de s’endormir n’est pas forcément la meilleure idée, mais c’est le genre de livre à garder impérativement sous la main toute la journée de développement !

En plus, il est gratuit !

A télécharger (sans modération) ici :

iosDeveloperBook

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

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 !