{"id":541,"date":"2024-02-28T11:41:21","date_gmt":"2024-02-28T10:41:21","guid":{"rendered":"https:\/\/niwadev.com\/?page_id=541"},"modified":"2025-01-13T14:48:56","modified_gmt":"2025-01-13T13:48:56","slug":"migration-du-portail-client-d-un-fournisseur-regional-d-energie","status":"publish","type":"page","link":"https:\/\/niwadev.com\/fr\/projects-and-professional-experience\/migration-of-the-customer-portal-of-a-regional-energy-supplier\/","title":{"rendered":"Migration du portail client d'un fournisseur d'\u00e9nergie r\u00e9gional"},"content":{"rendered":"<div class=\"gb-container gb-container-4342a994\">\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/niwadev.com\/wp-content\/uploads\/2024\/02\/lew-customer-portal-mac-anonymized.svg\" alt=\"MacBook affichant le menu du portail client LEW montrant les diff\u00e9rentes fonctions.\" class=\"wp-image-546\"\/><\/figure>\n\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Faits cl\u00e9s<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Entreprise <a href=\"https:\/\/www.lew-sc.de\/lew-sc\" target=\"_blank\" rel=\"noopener\" title=\"LEW Service &amp; Consulting GmbH\">LEW Service &amp; Consulting GmbH<\/a> pour <a href=\"https:\/\/www.lew.de\/fuer-zuhause\" target=\"_blank\" rel=\"noopener\" title=\"Lechwerke AG\">Lechwerke AG<\/a><\/li>\n\n\n\n<li>R\u00f4le : d\u00e9veloppeur de logiciels backend (CDI)<\/li>\n\n\n\n<li>P\u00e9riode : de juin 2020 \u00e0 d\u00e9cembre 2020<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Contexte<\/h2>\n\n\n\n<p>Dans le cadre d'une collaboration interfonctionnelle entre le service commercial, le service client\u00e8le, le d\u00e9veloppement SAP et le d\u00e9veloppement web, les processus des clients finaux doivent \u00eatre optimis\u00e9s et num\u00e9ris\u00e9s dans le cadre d'un projet. Pour cela, il fallait d'abord cr\u00e9er une base technique. Ce n'est qu'ensuite qu'il sera possible de mettre en \u0153uvre facilement les futures mesures.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Situation avant<\/h2>\n\n\n\n<p>Les clients peuvent d\u00e9j\u00e0 acc\u00e9der num\u00e9riquement \u00e0 leurs contrats et factures via une application web s\u00e9par\u00e9e. En outre, ils ont la possibilit\u00e9 d'effectuer certaines fonctions, comme la modification des donn\u00e9es bancaires. Malheureusement, le lien direct avec le syst\u00e8me SAP a pour cons\u00e9quence que le portail client n'est plus accessible en cas de travaux de maintenance en arri\u00e8re-plan. De plus, le fournisseur d'identit\u00e9 actuel est peu flexible et n'est plus \u00e0 la pointe de la technologie. C'est pourquoi il doit \u00eatre remplac\u00e9. L'application s\u00e9par\u00e9e fonctionne en outre sur un autre serveur et doit \u00eatre g\u00e9r\u00e9e s\u00e9par\u00e9ment, ce qui augmente les co\u00fbts de maintenance. Un point central qui posait de gros probl\u00e8mes avec la solution pr\u00e9c\u00e9dente est le relev\u00e9 des compteurs de tous les clients entre No\u00ebl et le Nouvel An. Cela entra\u00eene une charge de travail consid\u00e9rable pour l'application web et les syst\u00e8mes impliqu\u00e9s.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Objectif<\/h2>\n\n\n\n<p>Les objectifs suivants ont \u00e9t\u00e9 identifi\u00e9s :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Planification d'une architecture logicielle qui prend en compte les exigences non fonctionnelles telles qu'une plus grande r\u00e9silience, une tol\u00e9rance aux pannes et une \u00e9volutivit\u00e9<\/li>\n\n\n\n<li>D\u00e9veloppement d'une base technique permettant une extensibilit\u00e9 flexible<\/li>\n\n\n\n<li>R\u00e9duction du volume des appels t\u00e9l\u00e9phoniques au service client\u00e8le<\/li>\n\n\n\n<li>Augmentation du taux d'utilisation en ligne<\/li>\n\n\n\n<li>Migration progressive, de sorte qu'il n'y ait pas d'interruption des op\u00e9rations en cours<\/li>\n\n\n\n<li>R\u00e9duction des frais d'entretien<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Mise en \u0153uvre<\/h2>\n\n\n\n<p>Les objectifs fix\u00e9s ont entra\u00een\u00e9 une s\u00e9rie de d\u00e9fis et de questions. Afin de pouvoir garantir une migration en douceur, il fallait tout d'abord clarifier la mani\u00e8re de proc\u00e9der avec les clients. La reprise des comptes de l'ancien fournisseur d'identit\u00e9 n'a pas pu \u00eatre effectu\u00e9e facilement, car les mots de passe ne peuvent pas \u00eatre transf\u00e9r\u00e9s. Ce probl\u00e8me a pu \u00eatre r\u00e9solu gr\u00e2ce \u00e0 un processus de migration et au transfert des \u00e9l\u00e9ments transf\u00e9rables des comptes utilisateurs.<\/p>\n\n\n\n<p>Tr\u00e8s t\u00f4t dans le projet, il \u00e9tait clair que le portail client devait \u00eatre int\u00e9gr\u00e9 dans l'environnement logiciel du site web afin de r\u00e9duire drastiquement les frais de maintenance. Pour ce faire, il fallait r\u00e9impl\u00e9menter les composants correspondants dans cet environnement - aussi bien dans le frontend que dans le backend. De plus, le code source doit \u00eatre propre et test\u00e9. Cela permet de r\u00e9duire l'apparition de bugs et de garantir la maintenabilit\u00e9 future.<\/p>\n\n\n\n<p>Un autre aspect important \u00e9tait la gestion des pics de charge. Pour mieux les g\u00e9rer, des processus de communication asynchrone ont \u00e9t\u00e9 mis en place, avec l'utilisation d'un bus de services. Un avantage suppl\u00e9mentaire est la dissolution de la d\u00e9pendance directe entre le syst\u00e8me web et le syst\u00e8me SAP. En cas de travaux de maintenance, l'application web peut continuer \u00e0 travailler avec les donn\u00e9es d\u00e9j\u00e0 r\u00e9cup\u00e9r\u00e9es et stock\u00e9es temporairement dans le syst\u00e8me SAP, tout en offrant \u00e0 l'utilisateur la fonctionnalit\u00e9 souhait\u00e9e. Les messages qui n'ont pas pu \u00eatre d\u00e9livr\u00e9s en raison d'une interruption de la communication entre les deux environnements sont conserv\u00e9s et d\u00e9livr\u00e9s d\u00e8s que la communication est \u00e0 nouveau possible. Afin de g\u00e9rer au mieux l'utilisation de l'environnement web, une approche de microservices a \u00e9t\u00e9 mise en place dans le backend, ce qui permet une mise \u00e0 l'\u00e9chelle individuelle des diff\u00e9rents services. Les ressources disponibles sont ainsi exploit\u00e9es de mani\u00e8re optimale.<\/p>\n\n\n\n<p>Afin de pouvoir mettre rapidement la nouvelle solution \u00e0 la disposition des clients, il a \u00e9t\u00e9 d\u00e9cid\u00e9 de proc\u00e9der de mani\u00e8re it\u00e9rative et agile lors de la mise en \u0153uvre. Dans un premier temps, les clients doivent pouvoir acc\u00e9der au nouveau site via le nouveau log-in, mais pour les fonctions qui n'ont pas encore \u00e9t\u00e9 transf\u00e9r\u00e9es, ils sont redirig\u00e9s vers l'emplacement correspondant dans l'ancien syst\u00e8me avec un lien correspondant. Cela a eu l'avantage de pouvoir constater tr\u00e8s t\u00f4t dans le d\u00e9veloppement \u00e0 quel point les processus d'authentification et de migration vers le fournisseur d'identit\u00e9 se d\u00e9roulaient bien. Il en a r\u00e9sult\u00e9 un Minimum Viable Product (MVP) qui a \u00e9t\u00e9 mis \u00e0 la disposition du cercle des clients finaux en tant que tel, afin d'impliquer les clients tr\u00e8s t\u00f4t dans le d\u00e9veloppement.<\/p>\n\n\n\n<p>Dans le cadre de la migration, le syst\u00e8me de mailing \"Mailjet\" a \u00e9galement \u00e9t\u00e9 connect\u00e9 afin d'assurer la tra\u00e7abilit\u00e9 de l'envoi des e-mails et de r\u00e9duire la cat\u00e9gorisation erron\u00e9e des spams. Effet secondaire formidable : les d\u00e9partements sp\u00e9cialis\u00e9s peuvent cr\u00e9er et \u00e9diter des mod\u00e8les d'e-mails rapidement, de mani\u00e8re flexible et sans l'aide de d\u00e9veloppeurs.<\/p>\n\n\n\n<p>L'introduction d'un nouveau programme et d'un nouveau fournisseur d'identit\u00e9 peut entra\u00eener des risques de s\u00e9curit\u00e9. Pour v\u00e9rifier le logiciel, un test d'intrusion a \u00e9t\u00e9 effectu\u00e9 avant le d\u00e9ploiement et les constatations \u00e9num\u00e9r\u00e9es ont \u00e9t\u00e9 corrig\u00e9es.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ma contribution<\/h2>\n\n\n\n<p>En tant que d\u00e9veloppeur de logiciels dans le d\u00e9partement du d\u00e9veloppement web, j'ai particip\u00e9 activement \u00e0 la conception et au d\u00e9veloppement. Cela comprend la planification et la d\u00e9finition de l'architecture du logiciel, l'impl\u00e9mentation de la logique commerciale dans le backend et, en raison de mes origines SAP, la connexion des fonctionnalit\u00e9s SAP. Pour moi, il \u00e9tait surtout important que les donn\u00e9es et les fonctions puissent \u00eatre appel\u00e9es ind\u00e9pendamment de la disponibilit\u00e9 du syst\u00e8me ERP. J'y suis parvenu en utilisant, entre autres, la mise en cache et un syst\u00e8me de messagerie.<\/p>\n\n\n\n<p>Avec un tel syst\u00e8me, il est important de garantir l'exactitude des donn\u00e9es. C'est pourquoi j'ai d\u00e9fini des r\u00e8gles de validation pr\u00e9cises en concertation avec mes coll\u00e8gues SAP. Celles-ci sont forc\u00e9es par le Domain-Driven-Design utilis\u00e9 de telle sorte qu'il ne peut pas y avoir d'objet qui se trouve dans un \u00e9tat non valable.<\/p>\n\n\n\n<p>Pour qu'au final l'interaction se passe bien, j'ai eu des \u00e9changes \u00e9troits et pluridisciplinaires avec mes coll\u00e8gues du d\u00e9veloppement SAP, du service client\u00e8le et du service commercial. Cela m'a permis, entre autres, de veiller \u00e0 une connexion rapide et sans probl\u00e8me des fonctions SAP et de r\u00e9agir rapidement et avec flexibilit\u00e9 en cas d'erreur. Pour am\u00e9liorer la communication avec les autres services, j'ai visualis\u00e9 les processus techniques \u00e0 l'aide de diagrammes.<\/p>\n\n\n\n<p>S'il y avait des goulots d'\u00e9tranglement dans le frontend, j'ai aid\u00e9 \u00e0 d\u00e9velopper les composants React et la logique.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Technologies utilis\u00e9es<\/h2>\n\n\n\n<p>Une multitude de technologies ont \u00e9t\u00e9 utilis\u00e9es pour la mise en \u0153uvre de l'application. Le d\u00e9veloppement du backend a \u00e9t\u00e9 r\u00e9alis\u00e9 en C# et .NET Core, tandis que le front-end a \u00e9t\u00e9 principalement d\u00e9velopp\u00e9 en React avec TypeScript. Pour le d\u00e9veloppement des interfaces REST et gRPC, j'ai utilis\u00e9 le framework ASP.NET (Web API). Pour la repr\u00e9sentation des processus asynchrones, j'ai utilis\u00e9 NServiceBus, qui garantit la livraison des messages m\u00eame en cas d'erreur. Pour le stockage des donn\u00e9es, j'ai utilis\u00e9 le cluster Microsoft SQL Server d\u00e9j\u00e0 existant. Pour le d\u00e9veloppement, j'ai eu recours \u00e0 Entity Framework.<\/p>\n\n\n\n<p>La gestion des utilisateurs a \u00e9t\u00e9 r\u00e9solue par Azure AD B2C en combinaison avec OAuth, ce qui a permis d'utiliser pour la premi\u00e8re fois une solution g\u00e9r\u00e9e et facilement configurable. D'autres m\u00e9triques et logs logiciels ont \u00e9t\u00e9 collect\u00e9s avec Application Insights. Les mises \u00e0 jour en temps r\u00e9el pour informer l'utilisateur ou actualiser le front-end ont \u00e9t\u00e9 r\u00e9alis\u00e9es via SignalR et Azure Functions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Avantages pour le client<\/h2>\n\n\n\n<p>Gr\u00e2ce \u00e0 la mise en \u0153uvre de la migration, de nouvelles fonctions peuvent d\u00e9sormais \u00eatre facilement ajout\u00e9es. La meilleure \u00e9volutivit\u00e9 permet au service commercial d'attirer davantage de clients sur le portail sans avoir \u00e0 se soucier des pertes de performance. Les relev\u00e9s de compteurs s'effectuent en ligne de mani\u00e8re fiable et r\u00e9duisent le volume des appels t\u00e9l\u00e9phoniques au service client\u00e8le. L'utilisation des services en ligne a pu \u00eatre augment\u00e9e de 55 % gr\u00e2ce \u00e0 la migration et la disponibilit\u00e9 a m\u00eame d\u00e9pass\u00e9 95 %. L'\u00e9volution des utilisateurs du portail client a m\u00eame d\u00e9pass\u00e9 les pr\u00e9visions du client.<\/p>\n\n\n<div class=\"gb-container gb-container-09dc38ee\">\n\n<p>Vous avez un probl\u00e8me similaire, que vous souhaitez faire r\u00e9soudre par un ing\u00e9nieur exp\u00e9riment\u00e9 ? N'h\u00e9sitez pas \u00e0 me contacter.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/niwadev.com\/fr\/contact\/\" target=\"_blank\" rel=\"noreferrer noopener\">Contactez-moi d\u00e8s aujourd'hui !<\/a><\/div>\n<\/div>\n\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Dans le cadre d'une \u00e9quipe interfonctionnelle entre les ventes, le service client\u00e8le, SAP et le d\u00e9veloppement web, une plateforme pour les processus num\u00e9riques B2C devrait \u00eatre d\u00e9velopp\u00e9e.<\/p>","protected":false},"author":1,"featured_media":585,"parent":537,"menu_order":34,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-541","page","type-page","status-publish","has-post-thumbnail"],"aioseo_notices":[],"uagb_featured_image_src":{"full":["https:\/\/niwadev.com\/wp-content\/uploads\/2024\/02\/lew-customer-portal-mac-anonymized-featured.webp",1200,675,false],"thumbnail":["https:\/\/niwadev.com\/wp-content\/uploads\/2024\/02\/lew-customer-portal-mac-anonymized-featured-150x150.webp",150,150,true],"medium":["https:\/\/niwadev.com\/wp-content\/uploads\/2024\/02\/lew-customer-portal-mac-anonymized-featured-300x169.webp",300,169,true],"medium_large":["https:\/\/niwadev.com\/wp-content\/uploads\/2024\/02\/lew-customer-portal-mac-anonymized-featured-768x432.webp",768,432,true],"large":["https:\/\/niwadev.com\/wp-content\/uploads\/2024\/02\/lew-customer-portal-mac-anonymized-featured-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/niwadev.com\/wp-content\/uploads\/2024\/02\/lew-customer-portal-mac-anonymized-featured.webp",1200,675,false],"2048x2048":["https:\/\/niwadev.com\/wp-content\/uploads\/2024\/02\/lew-customer-portal-mac-anonymized-featured.webp",1200,675,false],"trp-custom-language-flag":["https:\/\/niwadev.com\/wp-content\/uploads\/2024\/02\/lew-customer-portal-mac-anonymized-featured-18x10.webp",18,10,true]},"uagb_author_info":{"display_name":"niwadev.com","author_link":"https:\/\/niwadev.com\/fr\/blog\/author\/niwadev-com\/"},"uagb_comment_info":0,"uagb_excerpt":"As part of a cross-functional team between sales, customer service, SAP and web development, a platform for digital customer processes should be developed.","_links":{"self":[{"href":"https:\/\/niwadev.com\/fr\/wp-json\/wp\/v2\/pages\/541","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/niwadev.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/niwadev.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/niwadev.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/niwadev.com\/fr\/wp-json\/wp\/v2\/comments?post=541"}],"version-history":[{"count":1,"href":"https:\/\/niwadev.com\/fr\/wp-json\/wp\/v2\/pages\/541\/revisions"}],"predecessor-version":[{"id":860,"href":"https:\/\/niwadev.com\/fr\/wp-json\/wp\/v2\/pages\/541\/revisions\/860"}],"up":[{"embeddable":true,"href":"https:\/\/niwadev.com\/fr\/wp-json\/wp\/v2\/pages\/537"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/niwadev.com\/fr\/wp-json\/wp\/v2\/media\/585"}],"wp:attachment":[{"href":"https:\/\/niwadev.com\/fr\/wp-json\/wp\/v2\/media?parent=541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}