Auteur/autrice : TheCodM

Laravel est bien plus qu’un simple framework PHP ; c’est aussi toute une communauté qui joue un rôle essentiel dans son évolution et son succès. Cette communauté se distingue par son engagement, ses contributions, et ses ressources éducatives qui facilitent l’adoption et l’utilisation du framework. Dans cet article, nous explorerons quelques aspects de la communauté Laravel : les événements, les contributeurs notables, et les nombreuses ressources disponibles pour les développeurs.

Laracon : La Conférence Internationale de Laravel

Laracon est l’événement phare de la communauté Laravel. Cette conférence se tient deux fois par an, historiquement aux États-Unis et en Europe, bien que des éditions en ligne aient eu lieu ces dernières années en raison de la crise sanitaire. Laracon rassemble des développeurs du monde entier pour discuter des dernières nouveautés du framework, partager des expériences et apprendre de nouveaux concepts.

Les sujets abordés lors de Laracon vont au-delà de Laravel et couvrent des thèmes variés du développement web. C’est un lieu de rencontre où les développeurs peuvent non seulement améliorer leurs compétences techniques mais aussi nouer des relations professionnelles et personnelles. L’édition en présentiel de 2024 à Amsterdam a marqué un retour très attendu à une interaction en face-à-face, renforçant encore la cohésion de la communauté.

La prochaine étape à Dallas, Texas, prévue en août 2024 est déjà complète, et nous attendons avec impatience le Laraconn EU 2025 !

Spatie : Un Pilier de l’Open Source Laravel

Spatie est une société belge qui s’est distinguée par la création de nombreux paquets open-source pour Laravel. Ces paquets sont reconnus pour leur qualité et leur utilité, et sont largement utilisés dans la communauté. Parmi les paquets les plus populaires de Spatie, on trouve :

• spatie/laravel-permission : Ajoute facilement des rôles et des permissions à une application Laravel.
• spatie/image-optimizer : Optimise les images pour améliorer les performances des sites web.
• spatie/laravel-activitylog : Enregistre les actions des utilisateurs pour un suivi précis de l’activité.
• spatie/laravel-backup : Simplifie la mise en place de sauvegardes complètes de l’application.
• spatie/laravel-medialibrary : Permet d’associer des fichiers médias aux modèles Eloquent.

Ces contributions font de Spatie une référence incontournable dans l’écosystème Laravel. Lisez également notre article sur nos paquets préférés de l’écosystème Laravel.

Laracasts : Apprendre et Maîtriser Laravel

Laracasts est une plateforme éducative dédiée au développement web, avec un focus particulier sur Laravel. Elle propose des screencasts et des tutoriels couvrant une large gamme de sujets, allant de Laravel et PHP à JavaScript, Vue.js, et bien d’autres technologies pertinentes.

Jeffrey Way, le fondateur de Laracasts, est lui-même un contributeur actif à la communauté Laravel. Ses vidéos sont réputées pour leur clarté et leur pédagogie, rendant l’apprentissage de Laravel accessible même aux débutants. Laracasts est devenu une ressource incontournable pour de nombreux développeurs souhaitant approfondir leurs connaissances et rester à jour avec les meilleures pratiques du développement Laravel.

Laravel News

Le blog le plus complet autour de Laravel ! Laravel News est un incontournable pour les développeurs qui utilisent le framework Laravel. Il propose un large contenu autour des actualités de Laravel, que ce soit la présentation de paquets, la mise en avant d’événements, la centralisation de ressources documentaires, ou encore la description détaillée de toutes les nouvelles versions du framework disponibles. Une newsletter hebdomadaire est disponible, recensant les nouveautés et les meilleures informations de la semaine.
Laravel News est une aubaine pour tous ceux qui veulent faire une veille active autour de l’éco-système Laravel.

Conclusion

Le dynamisme de la communauté Laravel explique aussi le succès de ce framework. Les événements comme Laracon, les ressources éducatives de Laracasts et les nombreux paquets open-source disponibles montrent l’engagement et la passion des développeurs pour améliorer et étendre Laravel. Que vous soyez débutant ou développeur expérimenté, la communauté Laravel offre toutes les ressources pour bien développer.
TheCodingMachine est spécialisé sur Laravel depuis 2025, vous avez un projet en Laravel ? Contactez-nous.

Aujourd’hui, TypeScript a le vent en poupe grâce à la consistance et la cohérence que le typage permet d’apporter au code JavaScript. Toutefois, il n’est pas si simple d’exploiter pleinement le potentiel de TypeScript et de son typage.

En effet, une mauvaise implémentation de votre typage et des règles qui lui sont associées entraînent une non-détection des erreurs par le compilateur ainsi qu’un code complexe, difficilement maintenable et refactorable.

Dans cet article, le cofondateur de TheCodingMachine, David Négrier, vous donne ses astuces et outils pour exploiter pleinement le potentiel du typage et éviter les erreurs.

Bref, facilitez-vous la vie avec un code simple, bien construit et facile à retravailler !

Typer, mais pourquoi faire ?

• Éviter les régressions: en cas de changements du code (refactoring, correction de bugs, ajout de fonctionnalité etc…), le compilateur vous alertera des incohérences ou oublis

• Gagner du temps: grâce au typage l’IDE est plus pertinent dans ses suggestions d’autocomplétion.

Les outils et les solutions qu’on vous propose

– TS-reset

Un paquet qui prend tous les typages codés par défaut (JSON.parse(), …) et remplace le typage any par un typage unknown.

Ceci permet d’être plus stricte dans l’analyse des types et donc remonter une erreur sur ce type de code:

const user = JSON.parse('{"id": 1, "firstName": "John"}')
console.log(user.firstName) // 'user' is of type 'unknown'.

Sans ts-reset aucune erreur ne sera remontée car tout est autorisé sur any. Alors qu’avec le développeur est forcé de vérifier le typage:

const user = JSON.parse('{"id": 1, "firstName": "John"}')
if (
  user instanceof Object
  && 'firstName' in user
  && typeof user.firstName === 'string'
) {
  console.log(user.firstName) // 'user.firstName' is a string.
}

– Créer une interface

Il est important de créer des interfaces pour définir la structure d’un objet avec ses différents champs.

interface User {
  id: number;
  firstName: string;
}

// On ajoute `as User` pour indiquer que cette variable est de type User
const user = JSON.parse('{"id": 1, "firstName": "John"}') as User
console.log(user.firstName) // Affiche "John"

Mais que se passe-t-il si le format change dans le JSON d’origine ?

Par exemple, si on remplace firstName par first_name dans le fichier JSON, un bug est créé et on retrouve ”undefined” dans nos logs (sans message d’erreur). 

Cela est dû au fait que la vérification ne s’effectue pas lors de l’exécution, mais uniquement lors de la compilation. Les interfaces disparaissent dans le code compilé.

L’erreur provient de l’utilisation de as User, le mot clé as en TypeScript permet de définir un “Type Assertion” et donc de forcer, du point de vue du compilateur, le type d’une variable. 
Si le type est faux, l’analyse faite par TypeScript devient incorrecte. L’erreur est humaine et le compilateur a tendance à faire moins d’erreurs. En particulier, lorsque une application complexe évolue au cours du temps. Donc un as dans TypeScript doit toujours être un sujet de vigilance !

– Utiliser les Type predicate

Afin d’éviter le as il faut restreindre (narrow) le type. Une solution lorsqu’on a une interface est d’utiliser un Type predicate:

interface User {
  id: number;
  firstName: string;
}

// On définit un type predicate de la forme `parameterName is Type` 
function isUser(user: any): user is User {
  return user
    && typeof user.id === 'number'
    && typeof user.firstName === 'string'
}

const user = JSON.parse('{"id": 1, "firstName": "John"}')
if (! isUser(user)) { // On appelle le predicate
  throw new Error('Invalid user')
}
console.log(user.firstName) // Ici on est sûr d'avoir un User

Avec ce code, si firstName devient first_name on aura une erreur “Invalid user” au runtime. En effet, le type predicate est conservé et exécuté.

Toutefois, implémenter des types predicate c’est fastidieux et repose toujours sur la responsabilité du développeur qui doit l’implémenter dans son code de manière proactive. 

Il faut aussi être vigilant lors de l’écriture du type predicate pour ne pas faire d’erreur à ce moment-là et bien penser à le mettre à jour lorsqu’on modifie le type lié.

– La librairie Zod

Zod est une libraire qui écrit des types predicate pour nous.
Grâce à elle nous pouvons remplacer le type predicate isUser et définir une variable UserSchema qui est un objet zod:

interface User {
  id: number;
  firstName: string;
}

const UserSchema = z.object({
  id: z.number(),
  firstName: z.string(),
})

const maybeUser = JSON.parse(...)
const user = UserSchema.parse(maybeUser)
// À partir d'ici user est de type `{ id: number, firstName: string }

Zod peut aussi déduire l’interface à partir du Type Guard et on peut donc se passer d’écrire l’interface :

type User = z.infer<typeof UserSchema>

Lors de l’exécution, Zod affichera une erreur détaillé s’il y a un soucis:

ZodError: [{
  "code": "invalid_type",
  "expected": "string",
  "received": "undefined",
  "path": ["firstName"],
  "message": "Required",
}]

Zod est donc particulièrement utile : 

• Dans les projets Front qui utilisent des inputs venant de l’extérieur, en particulier d’API.
• dans les projets Back qui utilisent Node.JS, en cas d’input HTTP, d’upload de fichier, d’input CLI ou de réponse d’API, …

Il est néanmoins inutile d’utiliser Zod pour un service qui utilise déjà des données validées (données en provenance d’un Controller par exemple). Dans ce cas, les interfaces peuvent suffir… ou alors il est possible d’utiliser l’inférence propre à TypeScript.
Une autre librairie similaire est valibot.

– Type Inference

TypeScript fait de l’inférence de type. C’est-à-dire qu’en analysant les contraintes appliquées à chaque variable il peut en déduire son type. Ceci évite de devoir tout typer tout le temps :

const a = 1 // a est de type number
const b = [0, 1, null] // b est de type (number | null)[]
const c = a // c est de type number
const d = { id: 1, firstName: "John" } // d est de type { id: number; firstName: string; }
window.onmousedown = function (e) { /* ... */ }; // e est de type MouseEvent

Il est donc possible de se passer d’interface la plupart du temps. Nous recommandons fortement de s’appuyer sur l’inférence de type et utiliser Zod  là où c’est nécessaire pour gagner en efficacité et en maintenabilité de votre code !

– GraphQL et le paquet graphql-codegen

L’utilisation de Zod et TypeScript peut être synonyme de verbosité. En effet, pour être correcte nous devrions ré-écrire les structures des objets renvoyés par l’api dans notre code front. Le travail est fait 2 fois: en back et en front.

Contrairement à du JSON, GraphQL définit un schéma, or cela va typer l’API correctement.

Le paquet graphql-codegen est un outil qui va scanner votre code TypeScript et va trouver les requêtes GraphQL à l’intérieur. 

Puis, à partir de ces requêtes et du schéma généré par le serveur, graphql-codegen va générer automatiquement des types TypeScript. 

Néanmoins, mettre en place graphql-codegen nécessite un peu de travail notamment en CI/CD.

– Swagger/OpenAPI (via API Platform)

Dans la même idée, certains framework (type API Platform) permettent de générer les interfaces typescript en fonction des retours des endpoints REST.

Il existe aussi des générateurs pour les standards Swagger/OpenAPI.

– Framework trpc

Il s’agit d’un framework Node.Js dans lequel on définit côté serveur une procédure qui prend un type Zod en input puis côté client on appelle la fonction ce qui permet un typage fort des deux côtés.

Il s’agit de faire des appels RPC entre le serveur et le client.
Hono propose aussi ce genre de fonctionnalité.

– Protobuf

Solution plus bas niveau, il s’agit d’un mécanisme de Serialization, un peu comme du JSON mais fortement typé.

On définit des types Protobuf qui génèrent des interfaces TypeScript.

Particulièrement utile pour optimiser les performances car les messages sont compressés de manière binaire.

– No Front, l’approche JS Less

Solution la plus radicale, mais sans Front, la question ne se pose plus ! On appelle cela le JS Less et de nombreuses solutions existent, vous pouvez lire notre article sur le sujet.

Avec l’émergence des solutions Headless, pas facile de disposer d’un front-end rapidement alors de nouvelles solutions arrivent pour vous simplifier la vie. Chez TheCodingMachine on commence à être fan des solutions Front-End As a service… Découvrez pourquoi :

Le problème d’une plateforme Headless est qu’elle est … Headless !

Lorsque l’on met en œuvre une solution Headless (parce qu’ils présentent de nombreux avantages), difficile de disposer d’un Front-end rapidement ! C’est même le principe… Malheureusement, investir dans le développement d’une interface Front-end entièrement sur-mesure représente un coût souvent assez important : prestation d’un designer, développement HTML et CSS, optimisation du SEO et du responsive design, … Est-ce que cela veut dire que les meilleures solutions du marché sont hors de portée pour les entreprises qui ne disposent pas de budgets conséquents ?

Il est parfois aussi tout simplement difficile de se projeter en partant d’une feuille totalement blanche. C’est particulièrement risqué dans un secteur où une partie des usages sont ancrés et associés à un certain nombre de bonnes pratiques (gestion du panier, des favoris, parcours d’achat,…).

Pour remédier à cela, la plupart des solutions Headless proposent un Front-end basique. C’est le cas de Sylius, par exemple, qui propose une interface Front-end de base reposant sur Twig (moteur de templating basé sur PHP). Bien que cette version standard soit parfaitement adaptée pour des boutiques simples, elle est moins optimisée qu’une vitrine reposant uniquement sur des pures technologies Front-end comme Vue.Js ou React.Js. Ainsi, à moins d’investir sur des développements spécifiques, ce thème standard peut vite atteindre des limites en termes de performances à la fois techniques et SEO.

Bref, il est difficile d’avoir le meilleur des deux mondes ! C’est-à-dire un Front-End (votre vitrine) pouvant évoluer séparément de votre Back-End (votre arrière-boutique) sans développements supplémentaires et des performances optimales.

Heureusement des solutions Front End As a Service émergent …

C’est la problématique à laquelle Alokai (anciennement Vue Storefront) répond. Ce type de solutions sont appelées Front-End As a Service. Le principe du Headless est de pouvoir connecter tous les composants de votre e-commerce (Front, Paiement, ERP, Gestion des stocks,…) à travers des API. Alokai propose donc un Front-end “clé en main” prêt à être connecté au reste de votre éco-système via des API prêtes à l’emploi et respectant toutes les bonnes pratiques.

Les avantages sont nombreux : 

• Déploiement rapide et sécurisé. La séparation du Front-End et du Back-End permet des mises à jour et des améliorations indépendantes, réduisant ainsi les temps d’arrêt et les risques d’erreurs ;
• Migration progressive de votre e-commerce, plus besoin de tout bouleverser pour simplement changer de vitrine. Redonnez le pouvoir à vos équipes marketing ! Vous pouvez même offrir des expériences utilisateur personnalisées en utilisant des données comportementales et de navigation pour adapter le contenu ;
• Optimisation conséquente des performances techniques avec l’usage de technologies adaptées comme Vue.Js et Nuxt.Js qui permettent par exemple un chargement asynchrone ou le lazy loading ou bien encore l’optimisation des images voire la gestion simplifiée de la logique de cache ;
• Un mode Progressive Web Application directement disponible afin d’améliorer le responsive design et l’expérience mobile ;
• L’optimisation du SEO grâce à la génération côté Front.

Chez TheCodingMachine nous sommes assez convaincus par ces solutions Front-End as a Service et c’est pourquoi nous avons décidé de faire un socle technique (Sylius + Alokai) prêt à l’emploi. On peut alors aller vite, très vite pour le déploiement d’une solution toute nouvelle.

Et, cerise sur le gâteau, ces solutions peuvent aussi fonctionner si l’on a envie de cacher des vieilleries (vous n’auriez pas un Drupal ou un Magento 1 qui trainent ?)…

Bref, si vous souhaitez en discuter avec nous, nous serions ravis de vous présenter ce que l’on peut faire et vous faire une démonstration.

Deux questions se posent rapidement lorsque l’on parle d’IA : que faire et comment faire ! Déjà le « que faire » n’est pas si évident parce nous sommes habitués à réfléchir en termes de processus ou de données et assez peu de manière globale. Alors, même si vous pouvez trouver beaucoup de uses case sur le web, difficile de les faire correspondre à sa problématique. 

Ensuite, le « comment faire » n’est pas si évident non plus. Faire de la recherche pure n’est pas à la portée de toutes les bourses ! Heureusement, de nombreux outils se développent et vous permettent d’intégrer l’IA de plus en plus facilement. 

Alors cet article vous propose de répondre à ces questions de manière très pratique. Vous allez savoir quoi faire et comment le faire !

La génération de contenus

La génération de contenu est l’application la plus répandue de l’IA. Grâce à des modèles avancés comme GPT-3.5 et GPT-4, vous pouvez automatiser la création de textes, d’images, et autres formats de contenu à partir de simples prompts.

Que faire : 

Recherchez ce que vous produisez comme contenu, avec par exemple : marketing (articles ou publication sur les réseaux sociaux), RH (les fiches de poste par exemple), eCommerce (descriptions de produits)… 

Comment faire : 

• OpenAI GPT : Offrant une API, les modèles GPT peuvent générer du contenu textuel de haute qualité. GPT-3.5 Turbo et GPT-4o sont accessibles gratuitement via ChatGPT pour des tests, permettant aux développeurs de se familiariser avec les capacités de ces modèles avant une intégration complète.
• Mistral AI : Ce modèle propose une variété de versions open source et commerciales. Les modèles open source tels que Mistral 7B sont idéaux pour les projets nécessitant un haut niveau de personnalisation sans coût élevé.

La reconnaissance vocale et la synthèse vocale

La reconnaissance vocale permet d’améliorer l’accessibilité et l’interaction utilisateur. Elle effectue la transcription automatique de discours, la commande vocale, et l’ajout de sous-titres.

Que faire ?

Soit vous souhaitez améliorer l’accessibilité de vos outils (et c’est une très bonne intention mais c’est un peu limité), soit vous souhaitez permettre aux utilisateurs de contrôler des applications ou des appareils par la voix. Et ça, on peut dire que c’est un domaine tout neuf ! On pourrait tout à fait imaginer remplacer un fastidieux formulaire de rapport d’intervention (avec un gros formulaire au format mobile) par une vraie discussion vocale homme-machine : 

“ Bonjour Jean-Paul, vous êtes bien à tel endroit ? (le mobile est géolocalisé) 

• Oui, 
• Vous avez effectué un remplacement du moteur auxiliaire ? (l’application dispose de la liste des interventions)
• Finalement, non, il y avait juste un fusible à changer
• ….”

On n’est plus si loin de la Science-fiction !

Comment faire ?

• Google speech-to-text ou text-to-speech : Avec une API supportant 165 langues, ce service est parfait pour les applications globales. Il propose des modèles spécialisés pour différents types d’audio, comme les appels téléphoniques ou le secteur médical.
• Whisper : Ce modèle open source de reconnaissance vocale offre une API flexible et fonctionne avec des fichiers et des prompts optionnels, facilitant son intégration dans divers systèmes.
• TTS (Text-to-Speech) : Ce modèle propose des API pour convertir des textes courts (jusqu’à 4096 caractères) en audio, avec plusieurs choix de voix, idéal pour les notifications ou les assistants personnels.

Analyse de documents

L’IA peut automatiser l’analyse et l’extraction de données à partir de documents, c’est pas mal lorsque vous devez traiter une grande quantité de documents.

Que faire ?

• Automatiser l’extraction de données de factures, contrats, et autres documents peut considérablement réduire les erreurs et le temps de traitement si vous devez les intégrer dans votre système de gestion.
• l’IA peut aussi faciliter la recherche d’informations spécifiques dans une grande base de documents (vous pouvez aussi réfléchir à comment générer des documents spécifiques – cf partie 1).

Outils pour l’analyse de documents

• Document AI : Un outil spécialisé dans l’extraction de données et la classification de documents. Il permet d’automatiser des tâches répétitives et de gagner du temps dans la gestion des documents.

Un exemple concret

Un exemple concret d’intégration de l’IA est la réalisation d’une application de gestion de documents, (projet imaginé par OpenAI). Cette application utilise l’IA pour remplir automatiquement les informations des documents téléchargés (nom, description, type, mots clés) et dans une version avancée, elle pourrait permettre de rechercher des informations sur l’ensemble des fichiers, offrant une gestion documentaire intuitive et efficace :

• Remplissage automatique : Utilisation de l’IA pour extraire et remplir les informations des documents téléchargés.
• Requête et recherche : Capacité à rechercher et à requêter des informations spécifiques à travers tous les documents, facilitant ainsi la gestion et l’accès aux données.

Conclusion

Intégrer l’IA dans votre projet web présente de nombreux avantages : génération de contenu, reconnaissance et synthèse vocale et analyse de documents. L’IA peut non seulement vous procurer des gains de productivité mais aussi améliorer l’expérience utilisateur. Ces outils se développent très vite et de plus en plus d’API sont disponibles : Google, OpenAI, et Mistral AI…

« Vers l’infini et au-delà ! » En route vers de nouveaux projets !

Un article de Fourkane, développeur chez TCM Lyon

Ce sujet vous intéresse ? Lisez également notre article sur les applications pour l’entreprise de l’Intelligence Artificielle générative.

Imaginez une application mobile révolutionnaire, une sorte de génie numérique qui réalise vos désirs les plus fous : elle vous prépare le café matinal, planifie votre journée, vous maintient connecté•e avec vos proches, effectue vos courses, et même – pourquoi pas – elle pourrait se rendre au travail à votre place lorsque la fatigue se fait trop sentir ! Après plusieurs mois d’utilisation, elle est devenue votre indispensable compagnon numérique.

Pourtant, un jour, sans crier gare, votre connexion internet vous abandonne, le wifi se met en grève et vous vous retrouvez coincé•e avec un réseau EDGE des plus chaotiques. La machine à café refuse d’obéir, votre agenda se perd dans les méandres du cyberespace, les conversations avec vos proches ont disparu et vos courses ne se commandent plus automatiquement. Un écran blanc s’affiche, suivit d’un chargement infini… bref, l’application cesse de répondre… Tout semble s’effondrer à cet instant précis. Une application si merveilleuse, si vitale, devient soudainement inutilisable à cause d’une simple coupure d’internet ?

Découvrons ensemble comment cette application prétendument « géniale » peut réellement le devenir, même lorsque la connexion internet flanche.

L’expérience utilisateur au coeur des applications

Lors de la création d’une application mobile, tout tourne autour de l’expérience vécue par les utilisateurs•rices. C’est ce qui guide chaque étape de réflexion. L’exemple précédemment évoqué est extrême, mais il illustre de manière saisissante les conséquences d’une défaillance du réseau. Cependant, des situations plus concrètes peuvent également mettre en lumière l’importance cruciale du mode hors ligne.

Imaginons une application où des employés•ées doivent badger un QR Code pour débuter des missions à des endroits spécifiques. Si ces QR Codes sont placés dans des zones de réseau instable, comme des zones géographiques mortes ou des bâtiments avec une mauvaise réception, l’utilisateur•rice se retrouvera confronté•e à la frustration de voir l’application, vantée par ses supérieurs, dysfonctionner.

Les connexions internet instables ne se limitent pas uniquement à des situations isolées. Elles peuvent provenir de divers facteurs, tels que des connexions limitées (dans des hôtels ou à l’étranger), des pannes de courant, des conditions météorologiques extrêmes, ou même une mauvaise couverture de la part du fournisseur de services.

Lorsque nous entreprenons la création d’une application mobile, la considération de la perte ou de la mauvaise qualité de connexion doit être au cœur de chaque fonctionnalité développée. Cela garantit une expérience optimale de l’application, même lorsque les conditions de connectivité sont difficiles.

Le mode hors ligne vous dites ?

Implémenter le mode hors ligne dans une application mobile permet à celle-ci de continuer à fonctionner et à offrir certaines fonctionnalités, même lorsque l’appareil n’a pas ou peu d’accès à Internet. Cependant, assurer une utilisation continue de l’application ne relève pas de la magie. Certaines fonctionnalités ne peuvent pas fonctionner sans connexion internet, mais il existe diverses façons de gérer la perte de connexion, comme nous l’illustrerons ci-dessous.

Par exemple, une messagerie en temps réel nécessite une connexion active pour fonctionner pleinement. Si ce sujet vous intéresse, nous avons un article ici : Le temps réel en web, quand chaque seconde compte ! Toutefois, même dans ces cas, des solutions alternatives peuvent être envisagées pour améliorer l’expérience utilisateur•rice malgré l’absence de connexion.

Comment améliorer concrètement l’expérience utilisateur•rice grâce au mode hors ligne ?

Prenons pour exemple une application de messagerie instantanée élémentaire. Dans cette application, le premier écran présente la liste des conversations (1), et dès qu’on sélectionne l’une d’elles, l’ensemble de la conversation s’affiche (2).

Si nous n’avions pas pris en compte les futurs utilisateur•rices, nous aurions supposé que tout fonctionnait parfaitement : le premier écran aurait simplement envoyé une requête via le réseau Internet pour récupérer mes conversations. Une fois la réponse obtenue, elle aurait été affichée dans l’application et voilà, affaire réglée. Cependant, le problème survient si, pour l’une des raisons évoquées précédemment, le réseau venait à disparaître. Dans cette situation, l’application continuerait à charger indéfiniment jusqu’à ce qu’un message d’erreur peu explicite apparaisse du genre “Network error”…

Voyons comment le mode hors ligne peut concrètement enrichir l’expérience utilisateur•rice dans ce contexte spécifique :

La notification visuel

La première étape consiste à informer l’utilisateur•rice que son expérience est altérée et pourquoi. Cela permet d’éviter les frustrations découlant de l’utilisation d’une application dans des conditions où elle ne peut fonctionner pleinement. Nombreuses sont les applications qui ne peuvent pas être utilisées à leur plein potentiel hors connexion. C’est le cas de YouTube, qui bloque la lecture des vidéos, ou de Messenger, qui affiche un bandeau en haut de l’application pour signaler l’absence de connexion. Pour autant, personne n’a l’impression que l’application “bug”.

En ce qui concerne notre application de messagerie, concentrons-nous sur la première interface : les conversations sont stockées dans une base de données, mais je ne peux pas accéder à cette base sans connexion Internet. Ainsi, je pourrais envisager d’afficher une erreur claire et précise, à la manière de YouTube, décrivant explicitement le problème rencontré :

Il est crucial d’employer des termes appropriés, simples et compréhensibles, sans recourir à un langage technique, pour garantir une explication claire, directe et précise.

Ne pas bloquer l’utilisateur

Dans le contexte de notre application, la notification précédente bloque entièrement l’accès aux discussions (sans affecter le reste de l’application). Cependant, une meilleure approche permettrait d’offrir une notification moins intrusive et agressive, tout en donnant à l’utilisateur•rice la possibilité d’accéder à quelques fonctionnalités supplémentaires comme pouvoir visualiser des conversations.

Dans le cas d’une connexion instable, il est préférable d’utiliser une notification visuelle impactante mais non intrusive lorsque la connectivité réseau fluctue plutôt qu’un effet stroboscopique entre l’écran chargé et l’écran d’erreur.

De plus, lors du chargement des données, il est préférable d’éviter les chargements en plein écran qui immobilisent l’utilisateur•rice. À la place, on privilégie les “écrans squelettes” (skeleton loader), qui représentent des espaces (souvent animés) réservés pour les informations en cours de chargement. Un écran squelette imite la structure et l’apparence de la vue complète, donnant ainsi un aperçu visuel du contenu en attente de chargement dans chaque bloc, que ce soit une image, du texte ou tout autre type d’information.

Il est toujours possible d’offrir une façon originale de notifier l’utilisateur que l’application passe en mode hors ligne en offrant un nouveau visuel à l’application. Par exemple passer l’application en noir et blanc :

Le stockage

Pour résoudre la problématique précédente, une solution consisterait à stocker localement  les 10 derniers messages des 10 dernières conversations sur le téléphone. Ainsi, même en cas de connexion faible ou inexistante, l’utilisateur•rice ne serait pas bloqué•e.

Le stockage est une solution efficace pour améliorer l’expérience utilisateur en cas de perte de connexion. Dans notre application, elle permettrait aux utilisateurs•rices de voir les derniers messages d’une conversation comme par exemple ou se situe l’adresse du restaurant où ils ont rendez-vous même si le réseau les a abandonnés.

Cette approche assure une utilisation continue et pratique de l’application, malgré les éventuelles perturbations de la connectivité.

Soumission différée

Une autre façon d’améliorer l’expérience utilisateur est de lui offrir la possibilité d’écrire et d’envoyer un message même en l’absence de connexion. L’utilisateur•rice peut accéder à une conversation, y rédiger un message et l’envoyer. Une notification visuelle claire indiquera que ce message sera transmis dès que le réseau sera rétabli. Cette fonctionnalité garantit une continuité d’utilisation de l’application sans interruption, même lorsque la connexion est instable.

C’est tout ?

Evidemment que non ! En effet, de nombreuses méthodes permettent d’améliorer considérablement une application mobile même lorsque la connexion réseau n’est pas optimale. Nous avons exploré les principaux éléments à prendre en compte lors de la conception d’une application de qualité autour d’un exemple des plus simple. Toutefois, les solutions sont variées et l’innovation persiste à découvrir des techniques avancées pour enrichir davantage l’expérience utilisateur•rice.

Il faut garder en tête que, faire simple et comprendre ce que l’utilisateur•rice va utiliser ou pas est le plus important. Nous pourrions prendre l’exemple d’applications plus complexes comme Google Docs où il est possible de collaborer sur un document en hors connexion et où la logique de fusion des versions à été faite de la plus simple des manières. En effet, le cas d’utilisation reste des moins fréquent, les équipes de Google ont donc opté pour une solution “simple” qui est de fusionner l’ensemble du texte modifié par les auteurs•rices au risque que le texte devienne incompréhensible. Il suffira ensuite de reformuler l’ensemble. Cela évite les pertes de contenu, simplifie le code source et sa compréhension et optimise le temps de développement pour répondre à de vraies problématiques utilisateurs•rices.

Les possibilités sont vastes, mais chaque innovation requiert une exigence, une expertise technique et une connaissance des besoins utilisateur•rice. Chez TheCodingMachine, nous aimons relever ces défis et nous y confrontons avec passion et expertise !

Que peut-on en conclure ?

Le mode hors ligne représente un défi technique avec ses petits challenges si l’on souhaite innover. Cependant, arriver à produire une application de qualité qui répond aux exigences actuelles des consommateurs•rices d’application mobile n’est pas difficile tant que ces derniers•ères sont placés•ées au cœur de la conception.

Auteur: Jérémy Dollé