Auteur/autrice : TheCodM

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é

Dans un site, un statut “hors ligne” qui passe à “en ligne” sans que vous n’ayez rien fait ? Un commercial qui vous parle dans une messagerie ? Alors, le web temps réel n’est pas loin…

Le web temps réel est un système permettant de répondre à des évènements dans un laps de temps souvent très court (quelques millisecondes). Dans les projets, le temps réel est très souvent utilisé afin de synchroniser les données de plusieurs utilisateurs et ce, de manière quasi instantanée et simultanée. Et, les applications sont multiples : mises à jour en direct des scores dans les jeux en ligne, collaboration en temps réel comme dans un document, notifications, trading … Il s’agit d’informer les utilisateurs des changements dès qu’ils se produisent, sans nécessiter d’action comme par exemple le rafraîchissement de la page.

Le temps réel en web, c’est quoi au juste ?

Quelques exemples

Un bon exemple, pour illustrer le temps réel est celui des systèmes de messageries instantanées sur les réseaux sociaux. Dans l’application Facebook, les messages sont reçus immédiatement après leur envoi, sans nécessité de rafraîchir la page. Cela marque bien la différence avec les anciennes méthodes qu’on pouvait retrouver sur les boîtes e-mails (le bouton ”envoyer/recevoir”) ou sur les forums de discussion.

Un autre exemple parlant est celui d’un système d’enchères. L’enchérisseur doit voir le montant actuel de l’offre se mettre à jour automatiquement. Sans cela, l’expérience utilisateur pourrait être frustrante. Et c’est tout là l’intérêt du web temps réel : améliorer l’expérience utilisateur.

Si vous voulez faire l’expérience du temps réel, n’hésitez pas à vous rendre dans notre métaverse : Workadventu.re !

Poussons l’explication un peu plus loin …

Le temps réel correspond techniquement à la mise en place d’un système automatisé répondant à des événements divers se produisant sur l’application suite à l’action des utilisateurs (mais pas seulement, on peut imaginer des événements déclenchés par des capteurs de données, des machines) et permettant donc de notifier les autres utilisateurs de la réalisation des dits événements. Evidemment, le temps réel n’est pas obligatoire, la majorité des sites peuvent très bien s’en passer. Pourtant, il est devenu peu à peu indispensable car il améliore énormément l’expérience utilisateur.

Panorama des technologies pour faire du web temps réel

Alors quelles sont les technologies qui permettent de faire du temps réel ? Par exemple, NodeJS est très souvent utilisé notamment pour son système asynchrone non bloquant.

Panorama de ces technologies :

WebSocket

Il s’agit de la technologie la plus répandue. Elle permet d’ouvrir une connexion bidirectionnelle entre un client (un navigateur web) et un serveur puis de persister cette connexion afin que le client puisse envoyer des informations au serveur et vice-versa. Vous pouvez comparer cette technologie à une communication par téléphone. 

Des librairies comme Socket.io permettent de “facilement” implémenter les websockets. Des technologies comme Soketi permettent aussi d’installer des serveurs websockets sans trop de configuration de votre part.

Si vous ne souhaitez pas ou pouvez pas développer votre propre serveur de websockets, il existe des services tiers payants comme Pusher ou Ably permettant de vous faciliter le travail.
De plus, chez TheCodingMachine, nous sommes certifiés Laravel et ces derniers viennent justement de sortir une technologie first-party pour l’implémentation des websockets : Laravel Reverb, rendant la chose encore plus facile à implémenter d’un point vue technique et sécurité.

SSE (Server Sent Events)

Il s’agit d’une technologie de communication à sens unique : le serveur envoie des données au client quand il en a besoin.

Vous pouvez utiliser un serveur avec Mercure comme solution gratuite et open source.

Si vous n’avez pas besoin de recevoir des données de la part des utilisateurs, c’est un choix solide face aux websockets.

Polling

Ce n’est pas une technologie en particulier mais plutôt un pattern. Le client (navigateur) fait régulièrement des requêtes HTTP au serveur (par exemple toutes les 5 secondes) afin de mettre à jour les données. C’est du rafraichissement automatique.

Attention à la charge des serveurs avec le nombre de requêtes par seconde que cela peut générer. Il s’agit plus d’une synchronisation que d’un temps réel.

WebRTC / Peer-to-peer

Une technologie idéale pour le streaming vidéo ou audio. Fonctionne avec une connexion direct en peer-to-peer (entre deux clients). Vous pouvez utiliser les APIs WebRTC natives disponibles dans les navigateurs modernes afin d’implémenter ce système. Vous aurez certainement besoin d’un serveur de signaling. Il s’agit d’un serveur permettant, lorsqu’un nouvel utilisateur se connecte, de donner la liste des autres utilisateurs afin de savoir avec qui établir le lien peer-to-peer.

Technologie efficace et rapide mais qui a des limites si vous souhaitez connecter de trop nombreux utilisateurs entre eux. Des librairies comme simple peer vous aideront à implémenter cette technologie.

Le WebRTC reste tout de même un cas à part dans l’échange de données en temps réel car il est vraiment développé pour l’échange de voix/vidéo et non de données “simples” où on préfèrera utiliser les autres solutions (ou alors passer par le serveur de signaling).

Et encore quelques autres…

Il existe encore bien d’autres moyens de faire du temps réel : 

• MQTT : Message Queuing Telemetry Transport → utilisé en IoT, protocole de messagerie en pub/sub (publish / subscribe) avec un système de broker intermédiaire aux clients.
• SignalR : spécifique à l’écosystème .NET → similaire au websocket, connexion bidirectionnelle
• Long polling : une variante du polling où le serveur retient la réponse à envoyer jusqu’à ce qu’il y ait de nouvelles données.
• Un serveur push avec HTTP/2 …

Technologie	Description Simplifiée	Bidirectionnel	Efficacité	Simplicité	Utilisation Typique
WebSocket	Le client (navigateur) et le serveur peuvent s’échanger des informations à tout moment et dans les deux sens.	✅	⚡️⚡️⚡️	➕➕ (grâce aux nombreuses ressources disponibles)	Jeux en ligne, messagerie instantanée, échange de données.
WebRTC Peer-to-Peer	Deux clients s’échangent des données entre eux (très bon pour la vidéo ou l’audio).	✅	⚡️⚡️⚡️	➕➕(grâce aux nombreuses ressources disponibles)	Appels vidéo ou audio.
SSE (Server-Sent Events)	Le serveur envoie des informations au client quand il a des nouvelles.	❌	⚡️⚡️	➕➕	Notifications en direct, actualités, mises à jour.
Polling	Le client fait une requête régulièrement au  serveur.	❌	⚡️	➕➕➕	Vérification régulière de nouvelles données, applications très légères.

Prêt à ajouter du web temps réel dans votre application ?

Si vous n’utilisez pas de services payants et décidez d’implémenter vos propres serveurs pour la gestion du temps réel, quelques questions de sécurité et de scalabilité se posent.

Sécurité

En implémentant un système de temps réel, il faut s’assurer que seules les bonnes personnes envoient et reçoivent les données via cette couche supplémentaire.

Cela demande plus de travail pour mettre en place l’authentification, l’autorisation et la gestion des sessions. Assurez-vous aussi de chiffrer vos données en transit en utilisant des protocoles sécurisés comme WSS (websockets) ou HTTPS (polling, sse).

Les données stockées (comme l’historique de chat) devraient aussi être chiffrées / protégées.

Scalabilité

Les applications en temps réel ne sont pas les plus simples à scaler. Si votre application grandit (et votre nombre d’utilisateurs aussi) il faudra opter pour du scaling horizontal avec un système de load balancing. 

Déployer votre application avec Docker ou Kubernetes pourra aider. On peut facilement imaginer la duplication des containers faisant tourner le système de temps réel.

Pas de connexion internet ?

Une application en temps réel augmente fortement l’expérience utilisateur mais cela nécessite une connexion internet permanente et stable afin de s’assurer que l’expérience n’en soit pas gâchée.

Conclusion

Le web temps réel, c’est un peu comme de la magie : puissant et utile mais nécessitant de la maîtrise. Que ce soit pour discuter avec des amis, jouer en ligne ou faire des transactions rapides, le temps réel est partout, rendant l’expérience utilisateur plus rapide, réactive et efficace que jamais.

Cependant, son implémentation est loin d’être triviale et nécessite de bien réfléchir à vos cas d’utilisation et à la technologie qui sera la mieux adaptée.

Dans beaucoup de cas, choisir les WebSockets avec un serveur NodeJS et Socket.io fera l’affaire et vous permettra aussi d’expérimenter rapidement.

Article de Paulin BAT

Comme toutes nouvelles technologies, l’intelligence artificielle générative fait couler beaucoup d’encre. Dans cet article, nous essayerons de répondre à la question suivante : Comment tirer parti de l’intelligence artificielle générative dans un contexte d’entreprise ?

Petit rappel de ce qu’est l’intelligence artificielle générative… pour ceux qui n’auraient rien suivi !

L’intelligence artificielle générative (IA générative) vise à développer des applications capables de générer du contenu de manière autonome, en imitant ou en simulant des processus de création humaine. Ces systèmes utilisent des modèles d’apprentissage automatique, en particulier des réseaux de neurones, pour produire des données nouvelles et originales sous forme de texte, d’images, de musique, de vidéos, ou d’autres types de médias.

Quelles applications imaginer pour l’entreprise ?

Sur le marché, nous pouvons distinguer deux types d’entreprises : celles dont le cœur de métier est de proposer de l’IA générative (ChatGPT par exemple) et surtout celles qui s’en servent pour améliorer leur offre et leur positionnement concurrentiel sans altérer leur business model. 

C’est surtout le deuxième type d’entreprises qui nous intéresse. Et, voici quelques idées d’utilisation de l’IA générative dans ce cadre :

• Génération de documents : si vous produisez des documents pour vos clients comme des rapports et des analyses, l’IA peut vous apporter de vrais gains de productivité.
• Gestion du service client : les chatbots basés sur l’IA générative peuvent offrir une assistance 24 heures sur 24, 7 jours sur 7, en répondant aux questions des clients, en fournissant des informations sur les produits et en aidant à résoudre des problèmes courants.
• Personnalisation de l’expérience utilisateur : les IA génératives peuvent analyser les données des clients et créer des recommandations personnalisées pour les produits par exemple.

Autrement, l’IA peut être massivement utilisé en interne pour beaucoup d’usages :

• pour l’optimisation des opérations : planification de la chaîne d’approvisionnement, gestion des stocks, planification des horaires et prévision de la demande.
• la génération de développement, en générant automatiquement des parties de code source.
• la création de contenus de formation
• ou les analyses prédictives et prévisions : les IA génératives peuvent analyser les données historiques et créer des prévisions pour aider les entreprises à prendre des décisions éclairées en matière de planification et de stratégie.

Qu’est-ce que nous faisons aujourd’hui ?

Evidemment, nous développons des projets qui mettent en œuvre de l’intelligence artificielle. Par exemple, nous avons récemment réalisé une application métier où l’utilisateur charge des documents pour qu’ils soient automatiquement vérifiés et analysés dans le but d’extraire des informations pour éviter de les ressaisir. Dans un relevé de compte, par exemple, l’application vérifie que le titulaire du compte correspond à l’utilisateur puis remonte le numéro de compte automatiquement. 

Un autre exemple d’un projet réalisé pour un client à Hong-Kong, le développement d’une application permettant de générer un audit technique pour des bâtiments de manière automatique à partir des données et des commentaires saisis par l’utilisateur. 

Mais c’est en interne que l’intelligence artificielle est encore plus intéressante. Nous en tirons déjà beaucoup d’avantage :

• Créer des idées de contenus et écrire ces contenus beaucoup plus rapidement (seriez-vous capable de deviner quelles phrases de cet article ont été générées par l’IA ?). Evidemment, le contenu généré ne sera pas parfait et donc doit être relu et ajusté mais il constitue un socle de départ qui est en général de bonne qualité.
• Assister nos collaborateurs pendant la phase de conception des applications métiers de nos clients en générant par exemple les compte-rendus des ateliers, en analysant les modèles de données produits etc. 
• Pour développer, les jeunes embauchés n’utilisent plus Stackoverflow pour chercher des solutions à leurs problèmes techniques. Ils préfèrent à cela ChatGPT ! Ça n’a l’air de rien mais c’est un changement fondamental dans la recherche de l’information.

Et, on espère que les tests unitaires voire les tests fonctionnels pourront bientôt être générés (parce que cela nous changera la vie).

Conclusion

On est encore loin de pouvoir générer une application même si d’énormes progrès ont été accomplis. Le NoCode, sur lequel nous écrivions un article l’année dernière couplé à de l’intelligence artificielle générative pourrait faire le web de demain… à suivre donc !