Auteur/autrice : TheCodM

L’Intelligence Artificielle Générative, quelles applications pour l’entreprise ?

Posted on by TheCodM

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.

Illustration d'une image générée par l'Intelligence Artificielle Générative

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 ! 

Quelles solutions de paiement pour mon site marchand ?

Posted on by TheCodM

Les solutions de paiement sur un site web marchand ne sont pas seulement variées ; elles sont très importantes pour l’expérience utilisateur, la conversion des ventes ou bien encore pour la sécurité des transactions. Choisir la bonne solution peut non seulement améliorer l’expérience d’achat mais peut aussi étendre votre portée à l’international. Voici un panorama approfondi des principales options disponibles. On fait souvent tous ces types d’implémentation chez TheCodingMachine ; on finit par bien les connaître. Elles permettent de répondre aux différents besoins des e-Commerçants : paiements par carte, paiements récurrents, gestion des abonnements et parfois plus encore !

Passerelles de paiement

Ces solutions de paiement, idéales pour les startups, entreprises en ligne, développeurs, et e-commerçants de toutes tailles, offrent une intégration facile et une gestion flexible des paiements en ligne.

Par exemple, PayPal, connue pour sa facilité d’utilisation et sa reconnaissance internationale, bien qu’elle puisse présenter des frais plus élevés pour les transactions internationales. Stripe se distingue par sa facilité d’intégration et sa flexibilité, supportant une grande variété de méthodes de paiement, y compris les cryptomonnaies dans certains marchés. Square fusionne les mondes en ligne et physique, offrant une solution de paiement intégrée qui comprend un traitement des paiements en ligne et un point de vente mobile. Adyen, quant à elle, cible principalement les entreprises de taille moyenne à grande avec sa capacité à accepter une vaste gamme de méthodes de paiement internationales et sa structure de frais personnalisable.

Solutions de paiement par les banques

Les banques traditionnelles, telles que la Société Générale avec son offre Sogenactif, ciblent leurs clients allant des PME aux grandes entreprises, cherchant à intégrer une solution de paiement en ligne sécurisée avec le support d’une banque reconnue. Les terminaux de paiement virtuels offerts par les banques permettent de traiter les paiements par carte de crédit via un terminal virtuel. C’est une option sûre mais qui a souvent des frais élevés. Les virements bancaires, quant à eux, offrent une méthode sécurisée pour les transactions importantes, bien qu’ils puissent être moins pratiques pour certains clients.

Quelles solutions de paiement pour mon site marchand ?

Paiement par virement Open Banking

Une autre solution de paiement disponible : les paiements par virement via l’Open Banking. Par exemple, l’API Bridge (en plus, c’est un de nos clients, donc on en profite pour lui faire un peu de pub !). Ces solutions offrent une alternative moderne et efficace aux méthodes traditionnelles de paiement. Contrairement aux banques qui imposent souvent des frais élevés pour les transactions, l’Open Banking offre une solution plus économique et transparente.

Avec l’API Bridge, les entreprises peuvent tirer parti de la connectivité entre les institutions financières en toute sécurité afin de faciliter les virements bancaires en ligne. Cette approche permet d’éliminer les intermédiaires coûteux et de réduire les frais associés aux transactions. De plus, les paiements par virement via l’Open Banking offrent un niveau élevé de sécurité, grâce à l’authentification forte et aux protocoles de chiffrements avancés.

Cryptomonnaies

Si vous voulez explorer des territoires plus innovants voire un peu exotiques, les solutions de paiement en cryptomonnaies telles que BitPay et Coinbase Commerce offrent aux e-commerçants une opportunité de capter une clientèle à la recherche de méthodes de paiement beaucoup plus modernes. BitPay permet, par exemple, les paiements en Bitcoin et autres cryptomonnaies, une option qui se développe en offrant des frais réduits et des transactions sécurisées. Coinbase Commerce facilite l’acceptation des cryptomonnaies, simplifiant l’intégration pour les entreprises de toutes tailles.

Paiements mobiles

L’évolution du commerce mobile redéfinit les paiements en ligne, avec des solutions de paiement comme Apple Pay, Google Pay, et Samsung Pay qui facilitent les achats en magasin ou en ligne via smartphone. Ces méthodes offrent une expérience d’achat rapide et sécurisée, tirant parti de la technologie NFC pour des transactions sans contact. L’intégration de ces options de paiement mobile peut significativement améliorer l’expérience utilisateur, en particulier pour les acheteurs utilisant leurs appareils mobiles pour naviguer et acheter.

Solutions locales et spécifiques à certains marchés

Pour les marchands visant une clientèle internationale, il est crucial d’offrir des méthodes de paiement adaptées à chaque marché. Alipay domine en Chine avec sa plateforme de paiement mobile et en ligne, tandis que PayU, Mollie, et Klarna fournissent des passerelles de paiement localisées en Europe, supportant des méthodes de paiement préférées comme iDEAL aux Pays-Bas ou Sofort en Allemagne. Intégrer ces solutions peut aider à pénétrer ces marchés en offrant aux clients des options de paiement familières et sécurisées.

Conclusion

Votre solution de paiement pour votre site marchand devra prendre en compte plusieurs facteurs critiques : les frais de transaction, la facilité d’intégration, l’expérience utilisateur, la sécurité, et la portée géographique. Adopter plusieurs solutions de paiement est souvent la clé pour répondre à l’ensemble de vos besoins.

Article d’Alexis Prevot
Vous avez des questions ? N’hésitez pas à en discuter avec Alexis sur Linkedin.

Vous pourriez également être intéressés par notre dernier article sur les plateformes E-commerce headless, découvrez le futur des plateformes avec Sylius  et Aimeos

Comment rédiger de bonnes spécifications ?

Posted on by TheCodM

Même si les méthodes agiles prennent de plus en plus le pas sur des méthodes plus anciennes comme la méthodologie waterfall, avoir un référentiel documentaire et en particulier des spécifications fonctionnelles est indispensable. Selon nous, savoir rédiger des spécifications présente de nombreux avantages : 

  • cela évite le syndrome “never-ending project” : avoir un périmètre clair (même une backlog) n’est souvent pas suffisant pour se dire : “c’est terminé, je passe en prod”. Il est toujours possible de raffiner son projet, d’ajouter telle ou telle fonctionnalité… et donc, cela permet de rassurer le donneur d’ordre (le client) sur l’atterrissage du projet. 
  • cela permet de partager facilement les connaissances pour accueillir de nouveaux développeurs sur le projet par exemple ; 
  • cela permet d’avoir un référentiel avec les utilisateurs lors de la maintenance, de la transmission ou de la refonte d’un projet (mais je connais des entreprises qui font du projet comme nous et qui refusent de maintenir le projet qu’ils ont développé –  je trouve que c’est un peu facile !) ;

Alors, comment rédiger des spécifications fonctionnelles de façon efficace et tout en évitant de vous faire perdre trop de temps ? 

Note 1 : Pour simplifier cet article, nous ne parlerons que du fonctionnel (donc pas des autres aspects d’un projet comme les performances, la sécurité etc.). 

Note 2 : Nous ne parlerons pas non plus des aspects plus généraux tels que la description générale du projet, la vue d’ensemble, le contexte etc.

Quelques conseils généraux pour rédiger des spécifications

  1. Préférez les schémas aux longues explications ! Un bon schéma est souvent plus facile à comprendre.
  2. Essayez de faire des descriptions claires et précises, en évitant le jargon technique excessif. Évitez d’être trop verbeux. 
  3. Découpez vos différentes spécifications en éléments digestes, un document de plus de 50 pages n’est pas une bonne idée, il faut trouver la bonne granularité.
  4. N’oubliez pas que c’est un document vivant, susceptible d’être mis à jour au fur et à mesure de l’évolution du projet.. Pensez aussi à la manière de gérer les modifications, les différentes versions, le statut de ce document ou bien encore les revues et la validation.

Pour vous aider dans la conception, n’hésitez pas à utiliser des outils tels que Asana ou encore Jira.

La méthode que j’aime bien

1. La cinématique générale de l’application : 

Commencez par le plus général. En général, on peut commencer par un diagramme de processus qui peut représenter les différentes étapes et les affecter à des types d’utilisateurs différents. Dans ce schéma, identifiez les points d’interaction entre les composants et les systèmes.

Par exemple, pour un site e-commerce (pour prendre un exemple que tout le monde connaît), les étapes pourraient être :

Schéma pour rédiger des spécifications techniques pour un site e-commerce

Le client sélectionne des produits qu’il ajoute à son panier, il valide son panier, indique s’il dispose d’un compte ou bien en crée un nouveau, valide l’adresse d’expédition, effectue le paiement…

2. Rédigez des scénarios ou des cas d’utilisation :

Pour rédiger des spécifications, commencez par rédiger des scénarios simples. Vous pouvez détailler les éléments suivants : 

  • les différentes interactions : acteurs, les actions possibles et les résultats attendus, 
  • les maquettes des écrans, 
  • les données d’entrée et de sortie, 
  • les règles métiers 
  • la gestion des erreurs, les exceptions 

Prenons un exemple, c’est plus parlant : 

cas d’utilisation n°XXX : Créer un compte client

Acteurs : client

Description : Ce cas d’utilisation permet à un client de créer un compte sur le site e-Commerce, ce qui lui permettra d’accéder à des fonctionnalités personnalisées et de se connecter ultérieurement.

Maquette : 

Rédiger des spécifications - Créer un compte

Scénario principal :

  • L’utilisateur accède à la page d’inscription.
  • L’utilisateur saisit son nom, son prénom, son adresse e-mail et un mot de passe.
  • Le système vérifie que l’adresse e-mail est unique.
  • L’utilisateur confirme la création de son compte.
  • Le système crée le compte utilisateur et envoie un e-mail de confirmation.

Règles métiers, gestion des erreurs : 

Si l’adresse e-mail n’est pas unique, le système affiche un message d’erreur et propose un lien vers la page “mot de passe oublié”. 
Si l’utilisateur ne remplit pas tous les champs obligatoires, le système affiche un message d’erreur.

Postconditions : Le compte utilisateur est créé, et l’utilisateur reçoit un e-mail de confirmation.

Les erreurs qu’il faut éviter pour rédiger des spécifications fonctionnelles

  • Manque de clarté et de précision : Les spécifications vagues ou ambiguës peuvent entraîner des malentendus entre les développeurs, les testeurs et les clients. Il est essentiel d’être précis et explicite dans la description des fonctionnalités, des processus et des exigences.
  • Manque de flexibilité : Les spécifications doivent être suffisamment flexibles pour s’adapter aux changements inévitables qui surviennent au cours du développement du projet. Il est important de prévoir un mécanisme de gestion des changements, permettant d’actualiser le document de façon ordonnée et transparente.
  • Feedback des Utilisateurs : Les spécifications doivent être orientées utilisateur. Rédiger des spécifications sans avoir les retours des utilisateurs finaux peut conduire à un produit qui ne répond pas à leurs besoins. Il est crucial de mener des analyses des besoins, d’effectuer des tests utilisateurs, et de s’assurer que le document est régulièrement mis à jour en fonction de leurs retours.

Pour conclure

Alors nous savons que rédiger des spécifications fonctionnelles complètes et claires demande des efforts, mais cela contribue au succès du projet en minimisant les ambiguïtés et en alignant les attentes de toutes les parties prenantes.

Par ailleurs, avec un peu d’habitude, vous irez de plus en plus vite et vos spécifications s’amélioreront au fil du temps !

Vous avez besoin d’aide pour rédiger des spécifications ? Les équipes de TheCodingMachine vous accompagnent.

Comment gérer la sécurité d’un projet web en suivant les recommandations de l’OWASP ?

Posted on by TheCodM

Ceci est une courte introduction au vaste domaine qui est la gestion de la sécurité d’un projet web. Suivre les recommandations de l’OWASP (Open Web Application Security Project) est indispensable pour protéger votre application contre les vulnérabilités et les menaces potentielles.

Prévenir des attaques : sécurité d'un projet web

Il y a trois thèmes à aborder pour gérer la sécurité d’un projet web :

1 – D’abord gérez la sécurité d’un projet web dans le code : 

La liste est un peu longue mais voilà les bonnes pratiques que vous devez adopter pour vous assurer que votre code est bien géré, et qu’il respecte les bases en termes de sécurité d’un projet web : 

  • l’authentification : L’authentification est le processus par lequel un système vérifie l’identité d’un utilisateur. Elle repose en général sur le nom de l’utilisateur et un mot de passe. L’authentification garantit que seuls les utilisateurs autorisés peuvent accéder aux systèmes et aux données. Assurez-vous que les mots de passe sont stockés de manière sécurisée à l’aide de hachages et de salages pour protéger les informations d’identification. Vous pouvez aussi utiliser une authentification à multiples facteurs (MFA) pour exiger une méthode d’identification supplémentaire, en plus du mot de passe (par exemple, les banques demandent souvent une confirmation par mobile).
  • la gestion des sessions : Les sessions sont des mécanismes qui permettent à un site web de maintenir l’état d’un utilisateur entre les différentes requêtes HTTP. Le vol de session permet à l’attaquant d’accéder aux données de l’utilisateur. Pour se protéger, vous pouvez utiliser des cookies sécurisés, la régénération de l’ID de session après l’authentification, la validation stricte des cookies de session ou encore l’utilisation de connexions sécurisées (HTTPS). 
  • la protection contre les injections : L’injection SQL est une technique de piratage qui consiste à insérer du code SQL malveillant dans les saisies d’un utilisateur d’une application. Cela peut permettre à un attaquant de manipuler une base de données ou d’extraire des informations. Pour prévenir l’injection SQL, il est essentiel de valider et de filtrer les entrées utilisateur de manière appropriée. L’utilisation d’un ORM (Object-Relational Mapping) permet en général d’éviter simplement les attaques par injection SQL. 
  • Protection contre les failles de sécurité d’un projet web dans les contrôles d’accès : Appliquez des règles strictes de contrôle d’accès pour garantir que seuls les utilisateurs autorisés ont accès aux ressources sensibles. Assurez-vous que les utilisateurs ne peuvent pas accéder à des parties de l’application auxquelles ils ne sont pas autorisés.
  • Protection contre les failles XSS (Cross-Site Scripting) : Les failles XSS (Cross-Site Scripting) permettent à des attaquants d’injecter du code JavaScript malveillant dans des pages web consultées par d’autres utilisateurs. Pour prévenir les attaques XSS, il est essentiel de valider et de filtrer les entrées utilisateur et d’utiliser des mécanismes de sécurité tels que les en-têtes de sécurité HTTP et les bibliothèques de sécurité d’un projet web. Les mécanismes de validation et d’échappement permettent à l’application de ne pas exécuter du code JavaScript malveillant.
  • Protection contre les failles CSRF (Cross-Site Request Forgery) : Ces failles permettent d’exécuter depuis un autre site une action non désirée à l’utilisateur. Par exemple, imaginez que vous visitez un site malveillant qui appelle une URL  qui permet de changer votre mot de passe depuis une image. Pour s’en prémunir, vous pouvez utiliser des jetons anti-CSRF pour vérifier l’authenticité des requêtes de l’utilisateur et empêcher ces attaques.
  • Sécurité des fichiers téléchargés : Restreignez les types de fichiers autorisés à être téléchargés. Assurez-vous que les fichiers téléchargés ne peuvent pas être exécutés sur le serveur. Dans le pire des cas, vous pouvez aussi scanner ces fichiers à l’aide d’un antivirus pour détecter des logiciels malveillants et de limiter les autorisations de téléchargement pour minimiser les risques potentiels. 
  • Chiffrement et sécurité des communications : Utilisez HTTPS pour chiffrer les communications entre le navigateur de l’utilisateur et le serveur web. Assurez-vous de stocker les données sensibles de manière sécurisée.

N’hésitez pas à vous référer aux top 10 OWASP (2021) : 

CodeRisqueCommentaire
A1:2021Broken access controlRestrictions appliquées incorrectement sur ce que les utilisateurs authentifiés ont le droit de faire
A2:2021Cryptographic failuresDonnées nécessitant des précautions particulières lors de l’échange avec le navigateur
A3:2021InjectionFailles d’injection, telles que les injections SQL, NoSQL, OS et LDAP
A4:2021Insecure designFailles créées par la conception de l’architecture, du projet
A5:2021Security misconfigurationConfigurations par défaut non sécurisées ou incomplètes, en-têtes HTTP mal configurés…
A6:2021Vulnerable and Outdated componentsBibliothèques, cadres (frameworks) et modules vulnérables
A7:2021Identification and Authentication failuresMise en œuvre incorrecte de l’authentification et de la gestion des sessions
A8:2021Software and Data integrity failures Désérialisation conduisant à l’exécution de code à distance
A9:2021Security logging and monitoring failuresPermet aux attaquants de poursuivre leurs attaques contre le système
A10:2021Server-side request forgery (SSRF)Contourne le pare-feu et permet le scan du serveur (par exemple)

2 – Ensuite, outillez la sécurité :

Au jour le jour, des outils permettent de vous assurer la sécurité de votre application : 

  • Les outils d’analyse statique : ces outils vous permettent d’analyser votre code afin de garantir une certaine cohérence, de limiter le risque de bug ainsi que d’identifier les vulnérabilités de votre code source. Voici quelques outils populaires pour l’analyse statique de code PHP :

PHP_CodeSniffer : Cet outil vérifie certaines bonnes pratiques du code PHP telles que la PSR-12. Il peut également être étendu pour inclure des règles personnalisées.

PHPStan : PHPStan est un analyseur statique avancé qui détecte les erreurs de type ainsi que les erreurs logiques dans le code PHP.

Scrutinizer : Scrutinizer est un outil d’analyse de code en ligne qui prend en charge PHP. Il fournit des rapports détaillés sur la qualité du code, les performances et les vulnérabilités.

PHPStorm : PHPStorm, un environnement de développement intégré (IDE) pour PHP, il a l’avantage de proposer des fonctionnalités d’analyse statique du code intégrées qui signalent les problèmes en temps réel pendant que vous écrivez du code.

  • la gestion des dépendances : vous devez vous assurer que les dépendances de votre application (bibliothèques, frameworks, modules, etc.) sont à jour et ne contiennent pas de vulnérabilités connues.

Composer : Composer est l’outil de gestion de dépendances le plus largement utilisé en PHP. Il permet de définir, d’installer et de gérer les bibliothèques et les packages PHP, en utilisant un fichier de configuration (composer.json) pour spécifier les dépendances requises. Composer récupère automatiquement les packages depuis le référentiel Packagist et gère les dépendances de manière efficace. Il permet aussi, via sa commande `audit`, de signaler des dépendances vulnérables (qu’il faudrait donc mettre à jour ou changer).

  • La gestion des logs : ces outils permettent le suivi et l’enregistrement des événements de sécurité, les erreurs et les activités de l’application. La gestion des logs est un élément clé permet de détecter les activités suspectes. 

Commencez par sélectionner un système de gestion des logs. PHP propose la fonction “error_log” pour les erreurs qui est souvent suffisante, mais vous pouvez également utiliser des bibliothèques de log PHP comme Monolog ou des outils tiers. Ecrivez ensuite dans votre code des instructions de logging aux points critiques, tels que les erreurs, les événements de sécurité, les connexions réussies/échouées, etc. Enfin, mettez en place une analyse régulière des logs et des sondes d’alertes pour détecter par exemple des tentatives d’intrusion et réagissez rapidement en cas de problèmes !

3 – Enfin, gérez la partie humaine de la sécurité : 

Il y a toute une partie humaine pour gérer la sécurité d’un projet web. 

  • la sensibilisation et la formation à la sécurité : Sensibilisez l’ensemble de l’équipe de développement voire vos utilisateurs à la sécurité de votre  application. Les connaissances, le partage des bonnes pratiques sont essentielles pour détecter et prévenir les vulnérabilités.
  • la gestion des incidents de sécurité : chercher à réduire un risque ne signifie pas qu’il est nul. Aussi, n’hésitez pas à préparer un plan de réponse aux incidents de sécurité pour réagir rapidement.
  • la documentation : Documentez les pratiques de sécurité, les procédures et les politiques de l’application pour que toute l’équipe ait accès aux informations nécessaires.

4 – Quelques expériences horribles…

Nous avons eu l’occasion d’expérimenter quelques-uns des problèmes de sécurité (même si ce n’était pas forcément notre code). Heureusement, nous nous en sommes toujours sorti mais l’expérience est rarement agréable, quelques exemples : 

  • les plus classiques :  Pages non protégées dans le back office ou bien oubli de l’annotation @Logged dans certains modules du projet… 
  • Fuites de projets utilisant Git (Salut WordPress !) : Fichier .env commité avec des informations de connexion et impossible à supprimer car Git stocke l’historique … 
  • Les « script kiddies », ces scripts qui scannent le web pour rechercher un site qui n’a pas été mis à jour… Et qui trouvent un de nos sites web avec une vulnérabilité connue et qui en profitent pour le défigurer, affichant des messages politiques plus que douteux. Suivez mon conseil : gardez vos dépendances de projet à jour !

Bref, n’importe quel développeur sérieux sait qu’il va être confronté à un problème de sécurité un jour ou l’autre même s’il a été très attentif. Autant s’y préparer ! 

Lisez également notre article sur la sécurité d’un projet web : 5 failles informatiques à éviter !

Pour conclure

En suivant ces bonnes pratiques et en intégrant la sécurité d’un projet web dans tout le cycle de vie de votre développement, vous devriez être en mesure de réduire considérablement les risques liés à la sécurité. N’oubliez pas qu’il est beaucoup moins coûteux de mettre en place ces bonnes pratiques au démarrage du projet qu’à la fin où il faudra gérer d’autres urgences et rattraper potentiellement plusieurs mois de travail !

PS : Si vous désirez aller plus loin, l’OWASP propose des guides et des outils spécifiques pour aider à renforcer la sécurité des applications web.

Numérique responsable : comment réduire l’impact environnemental d’un site Web ?

Posted on by TheCodM

Vous avez sûrement entendu parler du numérique responsable ! Vouloir réduire l’impact environnemental d’un site web, c’est évidemment bien, le faire c’est encore mieux. Alors comment s’y prendre ?
Bien que certains outils permettent d’avoir une vue d’ensemble de votre site web, il est souvent nécessaire d’analyser l’ensemble des pages de votre site une par une et l’examen de nombreuses dimensions est possible. En plus, pour augmenter la difficulté, la plupart des indicateurs techniques sont en partie corrélés.

Bref, cela peut prendre beaucoup de temps, alors cet article présente un condensé des points à surveiller et les outils pour les mesurer.

Illustration du numérique responsable représentant des ordinateurs au milieu de la nature. Image générée par l'IA.

1. Quels sont les points à surveiller – Les bonnes pratiques du Numérique responsable ?

Le poids de la page

Le poids de votre page correspond à la quantité de données de votre page et se mesure donc en octet (Méga-octets la plupart du temps). Plus la page sera de taille réduite, moins il y aura besoin d’énergie pour la transférer. Comme une page web est constituée de : 

  • D’un DOM (Document Object Model) : c’est le guide qui va renseigner le navigateur sur le contenu et la structure de la page, avant même son rendu.
  • De code statique : HTML et CSS.
  • Des scripts (Javascript) permettant d’animer et de dynamiser votre site.
  • Des fichiers : images, vidéos, …
  • Des plug-ins ainsi que des solutions tierces.

Le poids de votre page est essentiellement influencé par la quantité et le type de fichiers de votre page. Les images non optimisées peuvent considérablement augmenter la taille d’une page. Un vrai point noir dans le cadre du numérique responsable. Il convient d’utiliser des formats d’image modernes (comme WebP) et des techniques de compression. Il est aussi possible de limiter leur nombre ou de conditionner leur affichage. 

Si vous avez besoin de vous donner un ordre de grandeur, vous pouvez trouver des statistiques détaillées du poids des pages web (et de ces différents composants  sur le site HTTP Archive accessible via ce lien : https://httparchive.org/reports/page-weight

Le nombre de requêtes

Lorsque vous développez un site web, il comporte de nombreuses parties différentes. Vous avez les différents fichiers d’images que vous utilisez sur une page, les feuilles de style CSS qui contrôlent l’apparence du contenu, les fichiers JavaScript qui ajoutent toutes ces fonctionnalités intéressantes, etc.

Donc, lorsqu’une personne parcourt votre site web, son navigateur doit pouvoir télécharger toutes les ressources nécessaires à cette page à partir de votre serveur. Pour ce faire, il adresse des requêtes HTTP au serveur pour chaque ressource individuelle. Bref, pour faire simple, les requêtes sont ce qui permet à votre site de récupérer toutes les informations dont il a besoin auprès de votre serveur (qui stocke vos données et fichiers).

Toutefois, certains éléments spécifiques vont affecter particulièrement les requêtes, il s’agit par exemples :

  • D’extensions (fréquentes en WordPress notamment),
  • Les polices personnalisées et les émojis,
  • Des scripts liés à des applications tierces.

Pour optimiser les requêtes, il y a trois approches possibles :

  • Supprimer les requêtes inutiles (par exemple, les extensions WordPress non utilisées – évidemment si vous utilisez WordPress)
  • Combiner les requêtes (minifier les fichiers, autrement dit les combiner en un seul). Par exemple, vous pouvez assembler six petits fichiers CSS en un seul fichier CSS plus volumineux. Il se chargera même plus rapidement.
  • Réduire la complexité des scripts (pour réduire le nombre d’appels).

L’optimisation du code en général (HTML, CSS ou Javascript) et des requêtes HTTP en particulier permet une exécution plus rapide et permet de consommer globalement moins de ressources. Un point clé pour un projet numérique responsable !

Optimiser le chargement

Entrer dans le cadre du numérique responsable, c’est également prendre le temps d’optimiser le chargement de votre site. Le temps nécessaire pour charger une page impacte non seulement l’expérience utilisateur mais aussi la consommation d’énergie. Quelques techniques sont clés :

  • le lazy loading : le chargement de la page au fur et à mesure du défilement permet de chercher les ressources que lorsque c’est nécessaire. 
  • La mise en cache permet aussi de limiter les ressources les plus gourmandes en servant immédiatement les fichiers. 
  • Utilisation des CDN : L’utilisation de réseaux de distribution de contenu (CDN) peut réduire la distance de transfert des données, ce qui peut diminuer aussi la consommation d’énergie.

Finalement, les indicateurs clés pour un projet numérique responsable font également partis des éléments affectant le plus l’expérience de vos utilisateurs. Faire de votre projet, un projet numérique responsable vous permet également d’e faire un projet d’acquérir une interface plus efficace pour vos visiteurs.

Pour en savoir plus, lisez également notre article sur les 20 bonnes pratiques de l’éco-conception web !

2. Quels sont les bons outils pour un projet numérique responsable ?

Note : de très (très) nombreux outils pourraient être présentés dans cette section de cet article. L’objectif n’est pas d’être exhaustif mais plutôt de vous présenter les quelques outils que l’on trouve pas mal et qui vous aideront à réaliser un projet numérique responsable. Si vous n’avez pas le même avis, n’hésitez pas à m’écrire sur LinkedIn pour que nous puissions en discuter !

Analyse du code

SonarQube : SonarQube est un outil d’analyse de qualité du code qui collecte et analyse le code source, fournissant des rapports sur la qualité du code de votre projet. Il combine des outils d’analyse statique et dynamique, permettant de mesurer la qualité de manière continue. SonarQube inspecte et évalue chaque aspect de votre code, offrant un historique consultable du code pour analyser les problèmes :  style, défaillances, duplications, manque de couverture de test ou complexité excessive.

Le logiciel analyse le code source sous différents angles, du niveau du module au niveau de la classe, fournissant des valeurs métriques et des statistiques révélant les zones problématiques nécessitant des améliorations. SonarQube garantit également la fiabilité du code, la sécurité de l’application et réduit la dette technique en rendant votre base de code propre et maintenable. Il prend en charge 27 languages différentes, dont le C, le C++, Java, JavaScript, PHP, GO, Python, et bien plus encore. SonarQube propose également une intégration CI/CD et fournit des retours lors de la revue de code avec l’analyse des branches et la décoration des demandes d’extraction.

Evidemment, vous pouvez aussi tester EcoCode ou des outils plus classiques comme Jenkins par exemple.

Analyse des performances techniques (côté client)

Pour mesurer ces indicateurs, des outils comme Google PageSpeed Insights, GTmetrix, ou encore WebPageTest peuvent être utilisés. Ils fournissent des analyses détaillées des pages web et offrent des recommandations pour améliorer leur performance et réduire leur impact écologique. En plus de ces outils, des initiatives spécifiques, comme le Green Web Foundation, peuvent fournir des informations sur l’éco-responsabilité des services d’hébergement web.

Pour estimer la consommation d’électricité et l’émission de GES

Ecoindex.fr : L’écosystème EcoIndex met à disposition plusieurs outils permettant de calculer un score en s’appuyant sur les bonnes pratiques définies par le “Collectif numérique responsable”.

Des extensions pour les navigateurs existent aussi. Par exemple : Green IT. Découvrez notre article dédié à Green IT ici !

Tableau récapitulatif des indicateurs :

Les statistiques doivent idéalement être analysées pour chaque page de votre site. Voici une proposition de tableau synthétique pour un suivi efficace de votre site ou application

URL de la pageUnitésSource de la donnée
Poids de la page
Nombre d’éléments du DOM
Nombre de requête
Temps de chargement (de la page)
Estimation GES
Électricité consommé

Conclusion

Chercher à réduire l’impact écologique de ses assets numériques, est une démarche que nous encourageons vivement ! Mais c’est aussi une démarche qui permet simplement d’optimiser son site web et donc améliorer sa performance commerciale (de nombreuses études démontrent la corrélation entre la vitesse d’un site et l’acte d’achat par exemple). 

Evidemment, cela ne résoudra pas le réchauffement climatique (même si cela nous désole) mais si chacun de nos actes devient à chaque fois un peu plus responsable, peut-être arriverons nous à faire quelque chose ?
Finalement, un projet numérique responsable c’est avant tout un projet plus efficace. Votre temps et votre investissement ne seront que mieux récompensés.

Must-have : documents d’architecture technique !

Posted on by TheCodM

Écrire des documents d’architecture technique peut être un peu casse-pied mais c’est très important pour un projet. C’est au cœur du travail d’un architecte technique parce qu’il détaille tous les choix que vous avez conduits et qu’il précise ce qui est attendu de la part des équipes de développement. Ils sont aussi indispensables pour communiquer efficacement avec les différentes parties prenantes (service IT du client, hébergeur, etc.) et pour garantir une mise en œuvre cohérente. Alors, prenons notre courage à deux mains, voici quelques idées générales pour bien rédiger de tels documents :

  • Évidemment, on va faire une introduction pour présenter le projet et son contexte et quel est l’objectif et la portée du document. 
  • On va ensuite présenter la portée fonctionnelle du projet et les contraintes et les normes auxquelles l’architecture doit se conformer.
  • Notez que la rédaction de ces documents implique également l’hébergeur / infogéreur de la solution. Pensez-donc à les rédiger conjointement, ou à minima à lui soumettre pour relecture et validation.
Illustration Documents d'architecture technique

Petit tour de ces documents d’architecture technique indispensables :

Document 1 – DAT (Documents d’Architecture Technique) – Architecture d’exécution

Une fois cette introduction faite, on y est, on peut alors commencer à rentrer dans le coeur du document qui est l’architecture d’exécution : 

  • 1. Architecture d’exécution globale : vue d’ensemble de l’architecture globale du projet, faire des schémas et des diagrammes pour illustrer les composants clés et leurs interactions est indispensable.
  • 2. Architecture d’exécution détaillée : faire une description détaillée de chaque composant du système, y compris les serveurs, les bases de données, les logiciels, les modules, etc. 
  • 3. Flux de données interne à l’application : Diagrammes (souvent aussi appelé “Matrice”) de flux de données montrant comment les données circulent entre les composants. Détail sur la manière dont les données sont collectées, stockées, traitées et transmises.
    Il est intéressant d’y annexer un ADR (Architecture Decision Records) qui va lister les décisions / changements d’architecture qui ont été faits au cours du temps, c’est assez pratique pour les nouveaux arrivants pour comprendre l’histoire du projet.
  • 4. Intégrations et interfaces : Description des interfaces avec d’autres systèmes, services ou applications externes. Protocoles de communication, formats de données, etc.

Document 2 – Sécurité

Et, puis on détaille d’autres éléments qui concernent l’architecture de la sécurité : 

Décrivez quelle est l’implémentation de la sécurité ?

  • L’identification d’un utilisateur est-elle basée sur un cookie de session, un jeton JWT, etc… ?
  • Y a-t-il des protocoles particuliers implémentés (SAML, OAuth 2.0, OpenId Connect, etc.) ?
  • Si votre application a la responsabilité de gérer l’authentification (ex: login / mot de passe), décrivez les règles et le mécanismes mise en œuvre (complexité et renouvellement des mots de passe, prise en compte des échecs d’identification répétés, logs, …).

Mentionnez également la stratégie de gestion des permissions : comment sont-elles associées à un utilisateur (techniquement et fonctionnellement), et quelles sont les briques techniques utilisées (annotations / attributs, Voters, middlewares) ?

Détail qui a son importance : on oublie souvent de décrire la gestion des accès horizontaux et c’est souvent un cause de faille de sécurité #OWASP_A01.

L’application traite-t-elle de la donnée sensible ?

Si oui, décrire les mesures de durcissement mises en place pour en assurer la protection.. Enfin, comment suivre l’application dans le temps : lister les dépendances et les versions des langages / librairies que vous utilisez, et décrire comment les maintenir à jour.

Document 3 – Architecture de développement et de production

Enfin, on décrit les éléments qui concernent l’architecture de développement et de production voire l’architecture physique : 

  • 1. Développement et déploiement : Processus de déploiement, gestion des mises à jour et des correctifs (Intégration continue, description du choix effectué pour le workflow GIT, règles de soumission et de relecture des pull-requests, etc.).
  • 2. Plan de test : Stratégie de test, y compris les scénarios de test, les plans de test d’acceptation, les tests de performance, etc.
  • 3. Gestion des versions et des modifications : Processus de gestion des versions du logiciel et des modifications apportées à l’architecture.
  • 4. Gestion des erreurs et de la reprise après sinistre : Plans pour la gestion des erreurs, la surveillance, la journalisation des incidents. Stratégies de reprise après sinistre en cas de panne système.
  • 5. Architecture physique : description des serveurs selon les différents environnements. 

Quelques bonnes pratiques en plus

Outils de modélisation

Les outils de modélisation et de visualisation (UML en particulier) peuvent apporter une aide efficace dans la représentation des architectures complexes. Ils permettent de conceptualiser, communiquer et documenter l’architecture de manière claire et compréhensible. L’inconvénient est que ces outils donnent une vision souvent très détaillée de l’architecture technique que l’effort pour maintenir ces représentations est assez important… Il est possible de s’en passer sur des projets de taille moyenne mais si vous êtes sur un projet énorme, je vous le conseille vivement ! 

Les mises à jour 

Mettre à jour ces documents d’architecture technique régulièrement est très important, le suivi (et les explications) des changements que l’on apporte à l’architecture permet d’éviter de tourner en rond autour des choix techniques… Et, il y aura forcément un sujet de dette technique un jour ou l’autre. 

La rédaction 

Assurez-vous que ces documents d’architecture technique sont clairement rédigés, bien organisés et accompagnés de schémas et de graphiques pour faciliter la compréhension. Une fois ces documents d’architecture technique finalisés, ils doivent être partagés avec l’équipe de développement, les parties prenantes et toute personne impliquée dans le projet pour s’assurer que l’architecture est correctement comprise et acceptée.

Conclusion

Pour conclure, écrire de la documentation n’est pas forcément ma passion (je préfère coder) mais ces documents d’architecture technique sont essentiels pour la réussite d’un projet. Lorsque ces documents manquent sur un projet, cela fait perdre beaucoup de temps et ne me rassure pas vraiment sur la qualité du projet ! Allez, hop hop hop, on me fait de beaux docs !

TheCodingMachine vous accompagne dans vos besoins de conception de projet : de la conception fonctionnelle, conception technique ou encore de rédaction de spécifications.

Contactez-nous pour en savoir plus !

Tests fonctionnels, réussissez la recette de votre projet !

Posted on by TheCodM

La phase de tests fonctionnels d’un projet web, aussi appelée recette, est la période la plus délicate d’un projet. En effet, il est difficile de mettre tout le monde d’accord !

Trop d’anomalies (de bugs) ? Le client, donc les futurs utilisateurs, pourrait penser que la qualité de la solution est mauvaise donc rejeter la solution.

Pas assez d’anomalies ? L’équipe de développement, qui sait bien qu’une solution n’est jamais parfaite, va se dire que les utilisateurs ne testent pas et que la mise en production risque d’être catastrophique ! 

… Alors, qui a raison ? Un peu les deux ! En fait, cela dépend :

  • Si l’application répond aux besoins (spécifications) et qu’elle fonctionne correctement en termes de performances, j’ai tendance à penser que c’est très bien de trouver de nombreux bugs ! 
  • Si une application a de très mauvaises performances, si les bugs ne sont pas résolus rapidement, alors cela peut cacher des problèmes structurels… Ce qui peut devenir très embêtant. 

Dans cet article, nous proposons de faire un tour d’horizon des bonnes pratiques pour réussir votre phase de tests fonctionnels.

Blog TCM - Tests fonctionnels, réussissez la recette de votre projet !

Quelle est la différence entre les tests d’intégration et les tests fonctionnels ?

Les tests d’intégration se concentrent sur les interactions entre les composants de l’application, tandis que les tests fonctionnels se concentrent sur le comportement global de l’application du point de vue de l’utilisateur. 

Tests d’intégration :

La première étape est déjà de bien implémenter vos tests unitaires.

Les tests d’intégration examinent ensuite la manière dont les modules, les classes ou les composants interagissent les uns avec les autres. Ils peuvent impliquer plusieurs unités de code, mais ils ne s’étendent pas nécessairement à l’ensemble de l’application.

Imaginons un site web de commerce électronique. Un test d’intégration pourrait vérifier que le panier d’achat, le processus de paiement, et la gestion des produits fonctionnent ensemble correctement. Le test pourrait vérifier que les produits sont ajoutés au panier, que le total est calculé correctement, et que le paiement est effectué sans problème.

Tests fonctionnels :

Les tests fonctionnels vérifient si le logiciel fonctionne conformément à ses spécifications et aux attentes de l’utilisateur. Ils se concentrent sur le comportement fonctionnel de l’application. Ils couvrent l’ensemble de l’application ou d’une fonctionnalité spécifique du début à la fin. Ils examinent les scénarios d’utilisation, les flux de travail et les interactions avec l’utilisateur.

Reprenons l’exemple du site web de commerce électronique. Un test fonctionnel pourrait vérifier l’ensemble du processus d’achat, de la navigation sur le site, en passant par la sélection d’un produit, l’ajout au panier, la création d’un compte client, le paiement, et enfin la confirmation de la commande. Le test s’assurerait que chaque étape se déroule correctement, que les pages s’affichent correctement, que les formulaires fonctionnent, etc.

Comment faire des tests fonctionnels ? 

Il faut d’abord créez une liste de scénarios de test et identifiez les critères de réussite.

Identifiez les scénarios de test qui couvrent toutes les fonctionnalités et les cas d’utilisation critique de votre projet web.

Nous vous recommandons de commencer par le  “happy path”, c’est-à-dire le chemin complet qui permet de faire le tour de l’ensemble des fonctionnalités de l’application sans erreur. 

Par exemple, imaginons un scénario de l’envoi d’un message, le test fonctionnel pourrait prendre la forme suivante (assez simple) : 

1. Connexion à l’Application
L’utilisateur ouvre l’application de messagerie.La page de connexion s’affiche avec les champs « Nom d’utilisateur » et « Mot de passe ».
2. Authentification
L’utilisateur saisit son nom d’utilisateur et son mot de passe.Attente : L’application vérifie les informations d’identification. Si elles sont correctes, l’utilisateur est connecté.
3. Accès à la Messagerie
Une fois connecté, l’utilisateur accède à sa boîte de réception.La boîte de réception s’affiche avec une liste de contacts et des conversations récentes.
4. Nouveau Message
L’utilisateur clique sur le bouton « Nouveau Message » pour commencer une nouvelle conversation.L’interface de création de message s’affiche avec un champ de destinataire, un champ de message, et un bouton « Envoyer ».

Il est intéressant d’identifier les tests prioritaires car cela vous permet de vous concentrer sur les tests les plus critiques en premier.

Est-il possible d’automatiser les tests fonctionnels ? 

Il est possible d’utiliser des outils pour automatiser les tests fonctionnels comme Selenium ou Cypress.

Attention cependant, automatiser de trop nombreux tests pendant le développement est souvent une erreur. Durant cette phase, l’application peut changer et maintenir ces tests peut se révéler très coûteux.

En revanche, construire un set de tests qui permet de vérifier les fonctionnalités clés de l’application (par exemple la création d’un client, etc.) permet d’éviter de nombreuses régressions. En plus, on intègre alors ces scripts dans le pipeline et on vérifie que les tests se sont bien exécutés. 

Dans cet exemple, le script Selenium remplit un champ et clique sur un bouton.  (Vous aurez besoin de l’extension PHP WebDriver, ainsi que d’un pilote (WebDriver) approprié pour le navigateur que vous souhaitez utiliser (par exemple, Chrome WebDriver).

<?php

require_once('vendor/autoload.php');

use Facebook\WebDriver\Remote\RemoteWebDriver;

use Facebook\WebDriver\WebDriverBy;

// URL du serveur Selenium WebDriver

$host = 'http://localhost:4444/wd/hub';

// Configuration du pilote (dans cet exemple, Chrome)

$capabilities = ['platform' => 'LINUX', 'browserName' => 'chrome'];

// Création d'une instance du navigateur

$driver = RemoteWebDriver::create($host, $capabilities);

//Evidemment, il faut mettre l’URL que vous souhaitez tester

$driver->get("https://www.example.com");

// Identifier un champ de saisie par son ID

$inputField = $driver->findElement(WebDriverBy::id("input_id"));

// Saisir du texte dans le champ

$inputField->sendKeys("Texte à saisir");

// Identifier le bouton de validation

$button = $driver->findElement(WebDriverBy::id("button_id")); 

// Effectuer une action de clic sur le bouton

$button->click();

// c’est juste pour voir le résultat que l’on attend 3s. 

sleep(3);

$driver->quit();

A vous de jouer ! 

Mettez en place l’organisation et outillez la gestion des tickets 

L’organisation de la recette est critique pour le succès du projet.

Planifiez au plus tôt les périodes où vous allez mobiliser les utilisateurs et les livraisons des corrections. Ne tentez pas de faire une recette trop courte même si la mise en production est urgente. C’est un temps incompressible !  

Par ailleurs, oubliez la feuille Excel que l’on s’échange par e-mail… Impossible de travailler avec cela. Il vous faudra nécessairement éduquer un peu vos utilisateurs. Un outil de gestion des anomalies va vous permettre de documenter soigneusement tous les problèmes identifiés, y compris les étapes pour les reproduire et les informations de contexte.

Un bon outil (comme par exemple Jira, Asana ou même des outils un peu plus ancien comme Mantis) va vous permettre de gérer des données comme : 

  • Auteur de l’anomalie : le testeur à l’origine du ticket.
  • Description de l’anomalie : une description détaillée du problème ou de l’anomalie, y compris les étapes pour la reproduire, les résultats attendus et les résultats observés.
  • Le statut de l’anomalie : le statut actuel de l’anomalie, qui peut inclure des états tels que Ouvert, Assigné, En cours de résolution, Résolu ou Fermé. 
  • Le niveau de gravité : la gravité de l’anomalie, qui peut être basée sur l’impact sur l’utilisateur ou sur le système. Les niveaux de gravité sont généralement évalués de  Bloquant, Majeur et Mineur.
  • Développeur assigné à l’anomalie.
  • Historique et gestion des dates : la date de création, la date de dernière modification, …
  • Autres fichiers : captures d’écran ou pièces jointes,… 

Un système simple de suivi devra permettre surveiller des indicateurs clés tels que : 

  • Suivre le nombre des anomalies par statut par semaine par exemple, 
  • D’évaluer le nombre d’anomalie fermée ou ouverte sur la même période, 
  • De connaître le nombre de corrections apportées à l’application…

Conclusion : pas de recette miracle pour vos tests fonctionnels

Sans vouloir vous décourager, des études ont montré que, en moyenne, environ 15 à 50 % des bugs sont détectés lors de la phase de tests fonctionels. Cela signifie que même avec des tests fonctionnels rigoureux, de nombreux bugs peuvent passer inaperçus jusqu’à ce que l’application soit utilisée en production.

Est-ce que cela veut dire qu’il faut s’en passer ? Certainement pas ! Les risques potentiels qu’implique une mauvaise gestion de la phase de recette sont nombreux : régressions en production, difficulté de maintenir l’outil à terme. 

Pour finir, j’ai envie de donner quelques conseils aux équipes de développement qui doivent faire tester leur application et livrer leur application : 

  • Accompagnez les utilisateurs dans la rédaction des cahiers de tests, c’est souvent la première fois qu’ils doivent rédiger un tel document ; 
  • Pour ne pas paniquer les utilisateurs, soyez physiquement là lors des premiers tests surtout si l’environnement est installé pour la première fois, cela vous évitera de vous fâcher avec eux si votre application rencontre des problèmes d’environnement. 

Alors, pour conclure sur un mauvais jeu de mot, il n’y a pas de recette miracle pour faire une recette parfaite ! Mais si vous souhaitez en discuter avec nous, n’hésitez pas à me contacter sur LinkedIn.

E-commerce headless, découvrez le futur des plateformes avec Sylius  et Aimeos

Posted on by TheCodM

Vous cherchez la meilleure solution pour votre e-commerce ? Les plateformes e-commerce headless sont faites pour vous ! On a tous galéré sur des projets à intégrer des solutions comme Magento (et je ne parle pas de Magento 2), Drupal commerce ou encore Prestashop… 

Heureusement, il y a actuellement une transformation rapide dans la manière dont les plateformes e-commerce sont conçues et exploitées. L’approche headless, séparant la couche frontale de la couche de back-end, s’impose comme la nouvelle norme, offrant une flexibilité et une efficacité inégalées. Parmi les leaders de cette révolution, Sylius et Aimeos se distinguent comme des solutions open source incontournables pour l’e-commerce headless.

1. L’E-commerce Headless, une révolution en marche dans le commerce en ligne

Pendant de nombreuses années, l’écosystème technologique e-commerce a été dominé par des solutions monolithiques qui visait à offrir le plus de fonctionnalités possibles pour une implémentation rapide. Cette approche a notamment fait le succès de Magento pendant de nombreuses années. Toutefois, de nombreuses raisons font que cette logique est aujourd’hui remise en question.

Comme souvent, la raison à l’origine de toute est le changement de comportement des utilisateurs. Le parcours d’achat digital des utilisateurs est devenu beaucoup plus complexe, omnicanal et personnalisé. Cela entraîne de nombreux enjeux technologiques.

L’omnicanal :

Aujourd’hui en matière d’e-commerce, l’omnicanal est devenu la règle et le même utilisateur va utiliser potentiellement plusieurs canaux tout au long d’un même parcours d’achat : ordinateurs, téléphones mais aussi potentiellement des bornes en magasins, des télévisions ou des assistants vocaux.

Cette nouvelle tendance représente un vrai challenge technologique et économique pour les e-commerçants car il s’agit de pouvoir au mieux suivre l’utilisateur tout au long de son parcours pour par exemple déclencher l’achat en poussant une promotion au bon moment. De plus, les anciennes architectures ne permettent pas une gestion centralisée et simple des boutiques sur les différentes canaux : gestion des stocks, des paiements, des fiches de produit, …. La situation est alors devenue rapidement un casse-tête technique !

L’e-commerce headless sépare la gestion de votre arrière boutique (stock, produit, paiements, …) de celle des différentes vitrines de votre boutique sur les différents canaux de l’utilisateur. L’e-commerce headless permet donc une gestion centralisée et simplifiée de votre business ainsi qu’une meilleure exploitation consolidée de la donnée.

La personnalisation de l’expérience utilisateur

Aujourd’hui, la capacité à personnaliser l’expérience utilisateur est devenu un des facteurs clés d’avantage concurrentiel dans l’e-commerce.

Pour comprendre cela, il suffit de simplement s’arrêter sur l’exemple du paiement. Aujourd’hui, il est devenu crucial pour les plateformes e-commerce de proposer un grand nombre de moyens de paiement (par carte, par virement, Paypal, Apple Pay, …) mais aussi de façon de payer comme en atteste l’essor du paiement en trois fois.

Ces besoins de personnalisation ont entraîné l’émergence de nombreux acteurs et solutions spécifiques à des petites briques du e-commerce. C’est le cas par exemple de la société Klarna pour le paiement en 3 fois.

La personnalisation grandissante a donc augmenté la nécessité d’assembler pleins de petites briques dédiées à des usages spécifiques ce qui est à l’opposée de la philosophie des solutions « tout-en-un » comme par exemple Magento.

Ainsi, l’headless e-commerce facilite grandement ces approches par micro-services grâce à une architecture bien plus flexible.

Le coût et la performance

Les solutions monolithiques ont tendance à avoir des coûts en maintenance qui augmentent fortement au fil du temps à force de devoir modifier petit à petit du code pour des besoins de personnalisation.

De plus, la plupart des solutions monolithiques leader du marché ont des coûts de licence élevés. C’est normal car elles proposent par défaut un grand nombre de fonctionnalités (que vous n’utiliserez pas forcément toute).

Enfin, il y a une véritable pénurie de profil compétent sur certaines technologies du fait d’une courbe d’apprentissage particulièrement longue et pénible pour les développeurs (beaucoup de fonctionnalités à maîtriser !). Cela fait que les spécialistes de ces solutions sont durs à trouver et coûtent chers, c’est notamment le cas des experts Magento.

2. Les avantages de l’E-Commerce Headless

En terme techniques, l’e-commerce headless est une approche de développement web où la couche frontale (Front-End), c’est-à-dire l’interface utilisateur que voient les clients (la vitrine de votre magasin), est séparée de la couche de Back-End (l’arrière-boutique), qui gère la logistique, le traitement des commandes, la gestion des données, etc. Dans un système e-commerce traditionnel, le Front-End et le Back-End sont étroitement liés, limitant souvent la flexibilité et les options de personnalisation. En revanche, dans une architecture headless, ces deux parties sont distinctes et communiquent via des API (Application Programming Interfaces).

Les plateformes Headless présente de nombreux avantages : 

Flexibilité de l’Interface Utilisateur : Les marques peuvent concevoir des expériences libérées des contraintes front-end traditionnelles. Avec une solution headless, une marque de vêtements pourra créer par exemple une expérience utilisateur immersive, intégrant des essais virtuels, des visualisations 3D, ou des personnalisations de produits interactives, sans être limitée par les contraintes front-end de la plateforme e-Commerce.

Optimisation des Performances : Les sites e-commerce headless bénéficient de temps de chargement réduits, améliorant l’expérience utilisateur et éventuellement le taux de conversion, notamment sur mobile.

Intégration Multi-Canal : l’intégration de divers canaux est simple et permet d’offrir une expérience client cohérente sur d’autres plateformes en ligne, les applications mobiles, les médias sociaux, etc.

Flexibilité dans le Développement : Les développeurs peuvent utiliser n’importe quel framework ou technologie qu’ils préfèrent pour le front-end.

Mises à Jour Indépendantes : Les mises à jour peuvent être effectuées sur le front-end ou le back-end indépendamment l’un de l’autre, ce qui réduit les temps d’arrêt et les perturbations pour les utilisateurs.

Intégration d’autres applications : Une entreprise pourra facilement intégrer son site e-commerce avec diverses technologies comme les CRM, les systèmes ERP, ou les plateformes de marketing automatisé, permettant une gestion plus efficace des clients et des données.

3. Les solutions d’e-commerce headless que l’on apprécie le plus : Sylius et Aimeos 

Nous avons intégré deux solutions très puissantes : Sylius et Aimeos, que nous conseillons à nos clients de manière quasi systématique. Évidemment, le choix entre Sylius et Aimeos dépendra de vos préférences en matière de framework PHP, de vos exigences en termes de performance et d’évolutivité, ainsi que de votre besoin d’accès à une communauté de support et de développement mais pour les décrire rapidement : 

Sylius : le choix du « Less Is More » pour une Plateforme Modulaire et Extensible

Construit sur le robuste framework PHP Symfony, Sylius se distingue par sa modularité et sa flexibilité. Cette plateforme permet aux développeurs de personnaliser et d’étendre ses fonctionnalités en fonction de leurs besoins spécifiques, tout en maintenant une architecture headless.

Grâce à une API REST complète, Sylius facilite les intégrations avec d’autres systèmes et applications, renforçant ainsi son rôle en tant que solution e-commerce back-end puissante.

Aimeos : Performance et Scalabilité 

Aimeos, basé sur Laravel, est reconnu pour sa performance exceptionnelle, capable de gérer plus d’un milliard de produits et des milliers de commandes par minute. Sa conception headless permet une personnalisation totale du front-end et offre ainsi aux entreprises la possibilité de créer des expériences utilisateur uniques. Avec une API JSON REST et la possibilité de développer des extensions personnalisées, Aimeos se présente comme une solution e-commerce extrêmement adaptable.

Au final, le e-commerce headless offre une plus grande souplesse dans le développement, de meilleures performances et la possibilité de créer des expériences utilisateur sur mesure et innovantes. Ces plateformes permettent de se différencier en proposant de nouvelles expériences utilisateurs et de s’adapter rapidement aux évolutions du marché.

Si vous avez un projet e-commerce, n’hésitez pas à faire appel à nous ! 

La révolution silencieuse du CI/CD : Continuous Integration et Continuous Delivery

Posted on by TheCodM

Alerte Spoiler : Le développement web n’est plus ce qu’il était. Oubliez les longues nuits à traquer les bugs ou les journées interminables de déploiement. 

CI/CD, une révolution silencieuse - article de blog TheCodingMachine

Le CI/CD change notre façon de créer et de déployer des applications. Rien de spectaculaire ? Pas si sûr, cette automatisation des processus d’intégration ou de déploiement a finalement pas mal d’impact en termes d’organisation pour les équipes, de rigueur dans le développement des projets… et sur la satisfaction des clients. 

Discrètement, une petite révolution est en marche. Explications. 

Qu’est-ce que le CI/CD ?

CI/CD représente « Continuous Integration » (Intégration Continue) et « Continuous Delivery » (Livraison Continue). Ces méthodologies impactent le développement web en automatisant et en améliorant les processus de développement, de test et de déploiement.

Continuous Integration : un pilier de l’efficacité

L’Intégration implique l’intégration régulière du code modifié dans un référentiel commun, permettant une détection et une correction rapides des conflits et des bugs.

L’intégration continue est garante de la cohérence du code. Ce processus consiste à :

  • #1 – La validation continue : les modifications du code sont automatiquement validées par des tests pour s’assurer qu’elles ne causent pas de régressions ou d’erreurs.
  • #2 – L’automatisation des processus de compilation, d’analyses de code est essentielle pour garantir la cohérence de l’intégration et le respect des bonnes pratiques.
  • #3 – La détection de conflits : les problèmes d’intégration sont identifiés dès qu’ils se produisent, ce qui permet de les résoudre rapidement.
  • #4 – Un référentiel partagé : les configurations des tools phpstan ou des normes de code via phpcsfixer) est versionné dans le code, du coup tout le monde y a accès. 

En termes pratiques, chez TheCodingMachine, la CI a permis le partage et le respect des bonnes pratiques. Elle est exécutée sur toutes les Merge-Requests et consiste à :

  • Vérifier la compilation de nos images DOCKER et du code javascript, 
  • Exécution des outils d’analyse statique (eslint, phpstan, phpcs-fixer), 
  • Exécution des tests unitaire / d’intégration (phpunit, cypress), 
  • Assurer le workflow GIT, comme formattage des commits ou la vérification des conflits.

L’intégration continue permet même d’être proactif. Les outils d’analyse statique empêchent l’apparition de bugs. Par exemple, phpstan détecte que le paramètre de la fonction peut être int|null mais la fonction n’autorise que int :

function doSomething(): int|null;

function doAnotherThing(int $something): int;

doAnotherThing(doSomething()): int;

Ce qui passerait en PHP ne passe pas avec l’exécution de phpstan ! (magique).

Continuous Delivery : Vers une Flexibilité Accrue

La CD étend la CI en automatisant également le processus de déploiement du logiciel. L’objectif du CD est de rendre le déploiement d’une application aussi simple et fiable que possible, de manière à ce qu’elle puisse être déployée en production à tout moment et permet : 

#1 – L’automatisation du déploiement : le processus de déploiement en production est automatisé pour réduire les erreurs humaines et les temps d’arrêt.

#2 – Le déploiement dans les environnements de test : avant d’être déployée en production, l’application est testée dans des environnements de test, de pré-production et/ou de staging pour s’assurer de sa fiabilité.

#3 – Le déploiement en production : le CD permet de déployer de nouvelles fonctionnalités ou des correctifs rapidement et fréquemment, en minimisant les délais entre le développement et la mise en production.

#4 – le partage des connaissances de déploiement : le déploiement est maintenant versionné, les secrets ne sont plus accessibles par les développeurs et la responsabilité du déploiement ne repose plus sur la responsabilité d’un membre de l’équipe. Si le workflow le permet, chaque membre de l’équipe peut maintenant déployer.

Le CI/CD, vers le meilleur des deux mondes : 

L’utilisation combinée CI/CD permet de créer un pipeline de développement automatisé. Elle joue le rôle de la courroie de transmission entre les développeurs et les équipes DevOps, permettant une intégration continue du code fraîchement écrit, garantissant que chaque modification, aussi minime soit-elle, est immédiatement testée et préparée pour la livraison. Cette approche réduit les frictions, souvent vécues dans les cycles de développement traditionnels, où les écarts entre l’écriture du code et sa mise en production peuvent être sources de conflits et de retards.

En automatisant les tests et le déploiement, le CI/CD élimine les erreurs manuelles et accélère le cycle de vie du développement, permettant ainsi aux développeurs de se concentrer sur la création plutôt que sur les tâches répétitives. Parallèlement, il offre aux équipes DevOps une visibilité continue et des mises à jour régulières, facilitant une gestion plus proactive et une planification plus précise. En somme, le CI/CD n’est pas seulement un ensemble de pratiques techniques ; c’est l’organe qui unifie le développement et les opérations. Cela améliore la qualité du logiciel, réduit les risques d’erreur humaine et accélère les mises en production.

Des outils comme Jenkins, Travis CI, CircleCI et GitLab CI/CD jouent un rôle clé dans la facilitation et l’implémentation du CI/CD.

Conclusion : le CI/CD, un levier stratégique

En définitive, le CI/CD n’est pas seulement une série de pratiques techniques ; c’est une philosophie de développement qui favorise l’efficacité, la collaboration et la réactivité. Pour les entreprises qui cherchent à optimiser leur développement web, adopter le CI/CD n’est pas seulement une option, c’est une nécessité. 

Bref, on peut passer ses nuits à faire autre chose que de regarder si son code compile… comme par exemple, voir si son pipeline passe (les CIs peuvent prendre malheureusement pas mal de temps)…

Et, si vous souhaitez mettre en place le CI/CD sur votre projet, n’hésitez pas à nous contacter !

Comprendre les méthodologies de projet web à toutes les étapes : du Design Thinking au DevOps, en passant par l’agile ! 

Posted on by TheCodM
Présentation des méthodologies de projet web, du design thinking au DevOps

Il y a beaucoup de méthodologies de projet web différentes et certains pourraient se perdre dans cette forêt de bonnes pratiques ! Surtout que lorsque l’on ne maîtrise pas très bien ces notions, il y a le risque de passer pour quelqu’un qui n’est pas très moderne par les gourous de ces méthodes ! 

Malgré cet écueil, s’interroger sur ses pratiques, sur la manière d’être le plus efficace, sur ce qui permet d’apporter plus de valeur aux projets est nécessaire. Les méthodologies de projet web évoluent constamment pour s’adapter à la fois aux nouvelles technologies, aux besoins changeants des organisations ou même aux différentes envies des collaborateurs ! 

Alors faisons un tour de ces nouvelles méthodologies de projet web. Ces approches ne s’excluent pas les unes des autres, elles sont même assez complémentaires ! Tant pis pour les puristes, mais grossièrement, le design thinking permet de concevoir un produit, les méthodes agiles de le développer et le DevOps de le mettre en production… 

DESIGN THINKING : un voyage créatif centré sur l’utilisateur, c’est l’art de donner vie à des idées par le prototypage et le test.

Icon Design Thinking

Le design thinking est une approche de résolution de problèmes centrée sur l’humain et axée sur la créativité. Elle met l’accent sur la compréhension approfondie des besoins, des motivations et des comportements des utilisateurs finaux pour créer des solutions innovantes et adaptées. Le design thinking est souvent utilisé dans le développement de produits, la conception de services, l’amélioration des processus et la résolution de problèmes complexes. 

Elle comporte trois étapes clés : 

#1 – Idéation : À cette étape, les membres de l’équipe génèrent un grand nombre d’idées de solutions potentielles, souvent par le biais de sessions de brainstorming. L’objectif est de penser de manière créative.

#2 – Prototypage : L’équipe sélectionne ensuite les idées les plus prometteuses et les transforme en prototypes concrets. Les prototypes peuvent être des maquettes, des maquettes numériques, des scénarios d’utilisation, ou d’autres représentations visuelles des solutions potentielles.

#3 – Test et itération : Les prototypes sont ensuite testés auprès des utilisateurs finaux pour recueillir des commentaires et des retours d’information. Ces tests permettent d’identifier ce qui fonctionne et ce qui doit être amélioré. En fonction des résultats, l’équipe itère en modifiant et en améliorant les prototypes.

Cette méthodologie repose sur l’idée que les meilleures solutions émergent lorsque l’on combine une compréhension profonde des besoins des utilisateurs avec un processus itératif de conception et de test. Il encourage la créativité, la collaboration et l’innovation, et peut être appliqué dans de très nombreux domaines, de l’entreprise à l’éducation en passant par le secteur public. Le design thinking permet de résoudre des problèmes de manière holistique et centrée sur l’expérience de l’utilisateur.

MÉTHODOLOGIE AGILE (SCRUM) : adieu la rigidité ! Embrassez l’adaptabilité et la collaboration. Fonctionnez par sprints pour dynamiser votre développement et maximiser la satisfaction client.

Icon Méthodologie Agile SCRUM

SCRUM (qui est la méthodologie agile la plus répandue) est basé sur des principes de travail en équipe, de transparence, d’adaptabilité et d’itérations. Il divise le projet en itérations appelées sprints, généralement de deux à quatre semaines. Chaque sprint se concentre sur la réalisation d’un ensemble de fonctionnalités définies dans un backlog de produit. Les équipes de développement se réunissent régulièrement pour des réunions de planification, de revue et de rétrospective pour s’organiser, inspecter leur travail et s’améliorer continuellement.

SCRUM permet une adaptation continue aux besoins changeants du projet. Les fonctionnalités peuvent être priorisées et ajustées à chaque sprint. Cette méthodologie encourage la collaboration étroite entre les membres de l’équipe et les parties prenantes. Les sprints réguliers permettent des livraisons partielles du produit, ce qui permet de réduire les risques en identifiant rapidement les problèmes et d’améliorer la satisfaction du client grâce à son implication dans le projet. 

Les méthodologies de projet web hybrides combinent des éléments d’approches traditionnelles (comme le modèle en cascade) avec des méthodes agiles pour offrir plus de flexibilité tout en répondant aux exigences de planning ou de budgets.

DEVOPS : l’union sacrée du développement et des opérations, automatisant et fluidifiant le déploiement de vos logiciels pour une performance inégalée.

Icon DevOps

DevOps vise à intégrer étroitement le développement (Dev) et les opérations (Ops) pour accélérer la livraison de logiciels, améliorer la qualité et automatiser les processus de déploiement. Le DevOps est une approche culturelle, organisationnelle et technique du développement logiciel qui vise à améliorer la collaboration, l’efficacité et la qualité du cycle de vie du développement et de la livraison de logiciels. 

Le DevOps repose sur plusieurs principes clés :

#1 – Collaboration étroite : les équipes de développement et d’exploitation travaillent ensemble de manière étroite et collaborative. Il n’y a plus de silos organisationnels, et les équipes partagent la responsabilité du cycle de vie du logiciel.

#2 – Automatisation : l’automatisation est au cœur du DevOps. Les processus, les tâches répétitives et les opérations sont automatisés autant que possible, ce qui réduit les erreurs humaines, accélère la livraison et assure la cohérence. Les tests unitaires font par exemple souvent parti des automatisations mises en place.

#3 – Livraison continue : le DevOps favorise la livraison continue de logiciels, ce qui signifie que les mises à jour et les fonctionnalités peuvent être déployées fréquemment et rapidement.

#4 – Surveillance et gestion des incidents : les équipes DevOps sont responsables de la surveillance en temps réel des performances et de la disponibilité des applications. En cas de problème, elles sont prêtes à réagir rapidement et à résoudre les incidents.

La mise en oeuvre du DevOps passe par des outils et des pratiques tels que l’intégration continue (CI), la livraison continue (CD), les outils d’automatisation, la gestion de configuration, les conteneurs, l’orchestration de conteneurs, la surveillance des performances, la gestion des incidents, etc. 

Les avantages sont principalement l’amélioration de la qualité du logiciel grâce à des tests automatisés et à des déploiements plus fréquents et la réduction des erreurs humaines grâce à l’automatisation. 

Pour conclure

Nous devons faire un avertissement sur un constat que nous faisons régulièrement : trop de méthodologie tue le projet. Lorsque l’attention de l’équipe est plus centrée sur la bonne exécution de la méthodologie que sur l’aboutissement du projet, le projet est en risque. Alors agir de manière méthodique est très important parce que cela fait gagner du temps et réduit les risques mais il ne faut pas perdre de vue ce que l’on doit faire in fine. 

Finalement chacune des méthodologies décrites se spécialise sur une phase d’un projet : le Design Thinking pour la conception, les méthodologies agiles pour le développement et le DevOps pour la phase de production. Elles sont bien souvent complémentaires ! 

Peut-être que nous allons voir émerger dans un futur proche de plus en plus de méthodologies de projet web intégrant de l’intelligence artificielle et de l’apprentissage automatique dans la gestion de projet. Cela aiderait à prévoir des problèmes potentiels ou d’optimiser des ressources… à suivre donc ! 

Si vous avez un projet et que vous vous interrogez sur quelle méthodologie utiliser, n’hésitez pas à nous contacter !

Voyons ce que The Coding Machine
peut faire pour vous... ×