{"id":1516,"date":"2016-03-14T17:03:52","date_gmt":"2016-03-14T16:03:52","guid":{"rendered":"http:\/\/blog.devportfolio.net\/?p=1516"},"modified":"2020-08-16T23:14:33","modified_gmt":"2020-08-16T21:14:33","slug":"sap-presentation-sap-fiori-ux-et-mobilite","status":"publish","type":"post","link":"https:\/\/devportfolio.net\/wp-dev-blog\/sap-presentation-sap-fiori-ux-et-mobilite\/","title":{"rendered":"SAP : Pr\u00e9sentation SAP Fiori &#8211; UX et Mobilit\u00e9"},"content":{"rendered":"<p>De nombreuses initiatives ont \u00e9t\u00e9 engag\u00e9es par SAP pour porter les \u00e9crans de l\u2019ERP sur le Web, sur les terminaux mobiles et ainsi simplifier l\u2019exp\u00e9rience utilisateur : Web Dynpro, SAP GUI for HTML, SAP Retail Store, ITS, Netweaver Business Cockpit en sont quelques exemples.<\/p>\n<p>SAP Fiori est une plateforme logicielle chez SAP sortie\u00a0en 2013 pour <strong><span style=\"text-decoration: underline;\">consommer et concevoir<\/span><\/strong> les applications SAP. Elle concr\u00e9tise la volont\u00e9 de SAP de s&rsquo;orienter vers la mobilit\u00e9 et de proposer une exp\u00e9rience utilisateur simplifi\u00e9e, unifi\u00e9e et multi plateformes.<\/p>\n<p>Rendez-vous \u00e0 l&rsquo;adresse <a href=\"https:\/\/www.sapfioritrial.com\/\">https:\/\/www.sapfioritrial.com\/<\/a> pour visualiser un environnement Fiori une fois install\u00e9. Cliquer sur le bouton <strong>See it in action<\/strong>\u00a0pour vous connecter au portail d&rsquo;applications appel\u00e9 le <strong><span style=\"text-decoration: underline;\">Launchpad<\/span><\/strong>, point d&rsquo;entr\u00e9e unique de l&rsquo;utilisateur pour lancer ses applications et visualiser en un coup d\u2019\u0153il les indicateurs importants pour son business tel le chiffre d&rsquo;affaire, le nombre de commandes en cours, les t\u00e2ches ouvertes etc&#8230;<\/p>\n<p>Il existe aujourd&rsquo;hui plus de <strong>700 applications standard<\/strong> SAP. L&rsquo;installation et la configuration de ces applications sont consultables \u00e0 l&rsquo;adresse <a href=\"http:\/\/fioriappslibrary.hana.ondemand.com\/sap\/fix\/externalViewer\">http:\/\/fioriappslibrary.hana.ondemand.com\/sap\/fix\/externalViewer<\/a>.<\/p>\n<p>Les applications standard sont organis\u00e9es par m\u00e9tier et class\u00e9es selon 3 cat\u00e9gories :<\/p>\n<ul>\n<li><strong>Transactionnel<\/strong> : acc\u00e8s \u00e0 des processus transactionnels de cr\u00e9ation, modification ou visualisation (ex : Cr\u00e9ation d\u2019une commande de vente, approbation d\u2019une commande d\u2019achat)<\/li>\n<li><strong>Analytique<\/strong> : Cockpits de visualisation orient\u00e9s processus metier (ex : cockpit de gestion de la performance des ventes, gestion de la cl\u00f4ture financi\u00e8re)<\/li>\n<li><strong>Factsheet<\/strong> : Recherche d\u2019informations et navigation contextuelle sur les objets li\u00e9s (ex : Factsheet article pour acc\u00e9der \u00e0 toutes les informations ERP li\u00e9es \u00e0 un article (fournisseurs, factures, stocks, etc.)<\/li>\n<\/ul>\n<p>Les cat\u00e9gories Analytique et Factsheet requi\u00e8rent SAP HANA.\u00a0Il est possible d&rsquo;\u00e9tendre ses applications ou de concevoir une application \u00e0 partir de z\u00e9ro.<\/p>\n<h2>Les pr\u00e9requis<\/h2>\n<p>SAP recommande la plateforme HANA pour utiliser au maximum les fonctionnalit\u00e9s offertes par les applications analytiques mais SAP NetWeaver System 7.31 ou 7.40 ainsi que l&rsquo;installation de UI Add-On permet de concevoir et d&rsquo;utiliser des applications transactionnels.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1518\" src=\"https:\/\/devportfolio.net\/wp-dev-blog\/wp-content\/uploads\/2016\/03\/sap-fiori-ux-mobilite.jpg\" alt=\"sap-fiori-ux-mobilite\" width=\"585\" height=\"745\" \/><\/p>\n<h2>Les technologies<\/h2>\n<p>L&rsquo;impl\u00e9mentation d&rsquo;une application Fiori repose sur une partie front-end d\u00e9velopp\u00e9e \u00e0 l&rsquo;aide du Framework JavaScript <strong>SAPUI5<\/strong> et d&rsquo;un back-end d\u00e9velopp\u00e9 en ABAP pour exposer les donn\u00e9es \u00e0 l&rsquo;aide du protocole<strong> OData<\/strong>.<\/p>\n<p><strong>Le protocole OData<\/strong><\/p>\n<p>J&rsquo;aime l&rsquo;analogie faite sur le blog de <a href=\"http:\/\/gouigoux.com\/blog-fr\/?p=962\">Blog de JP Gouigoux<\/a>:<\/p>\n<blockquote><p>OData est un protocole qui est l\u2019\u00e9quivalent pour le web de la norme SQL pour les bases de donn\u00e9es\u00a0\u00bb. De la m\u00eame mani\u00e8re que SQL est un langage qui permet de requ\u00eater de la donn\u00e9e filtr\u00e9e, tri\u00e9e, projet\u00e9e, depuis un SGBD, OData est une syntaxe qui permet les m\u00eames op\u00e9rations, mais sur des sources de donn\u00e9es rendus disponibles par le biais du protocole HTTP.<\/p><\/blockquote>\n<p>Pour se rendre compte de la simplicit\u00e9 de ce protocole rendez-vous \u00e0 cette adresse : <a href=\"http:\/\/www.odata.org\/getting-started\/basic-tutorial\/\">http:\/\/www.odata.org\/getting-started\/basic-tutorial\/<\/a>.\u00a0A l&rsquo;aide de la transaction <strong>SEGW<\/strong> le d\u00e9veloppeur ABAP expose facilement la richesse des donn\u00e9es et des fonctionnalit\u00e9s offertes par le syst\u00e8me ECC sous forme d&rsquo;un Web service.<\/p>\n<p><strong>SAPUI5<\/strong><\/p>\n<p>Pour la partie front-end, le d\u00e9veloppeur Web peut utiliser le Framework JavaScript de son choix mais pour rester dans l&rsquo;\u00e9cosyst\u00e8me Fiori SAP recommande SAPUI5.<\/p>\n<p>SAPUI5 regroupe tous les concepts d&rsquo;un Framework JavaScript moderne (Data Binding, MVC, Routing) et propose en natif une s\u00e9mantique de navigation et des patterns UI permettant une coh\u00e9rence dans la pr\u00e9sentation, dans l&rsquo;utilisation des applications permettant de garder une exp\u00e9rience utilisateur efficace. Sa grande force est l&rsquo;ensemble des composants graphiques propos\u00e9s nativement et responsive design. La simplicit\u00e9, la coh\u00e9rence dans applicatifs produits permet une adh\u00e9sion des utilisateurs et r\u00e9duit les besoins en formation. Ce Framework s&rsquo;inscrit compl\u00e8tement dans les principes Fiori.<\/p>\n<p>SAP Fiori est une technologie encore jeune, elle repose sur un ensemble de concepts difficile \u00e0 appr\u00e9hender au d\u00e9but. Mais heureusement la communaut\u00e9 est assez pr\u00e9sente sur le web. Une bonne compr\u00e9hension de la couche Netweaver, des services SICF, du d\u00e9veloppement ABAP et des technologies web seront une aide pr\u00e9cieuse pour la mise en place des briques SAP Fiori.<\/p>\n<p>Liens utiles :<\/p>\n<ul>\n<li><a href=\"http:\/\/pdvsap.blogspot.fr\/2014\/06\/fiori-quest-ce-que-cest.html\">Fiori, Qu&rsquo;est-ce que c&rsquo;est ?<\/a><\/li>\n<li><a href=\"http:\/\/www.bluefinsolutions.com\/blogs\/john-murray\/april-2014\/getting-started-with-sap-fiori,-netweaver-gateway?feed=RSS-Feed\">Getting started with SAP Fiori<\/a><\/li>\n<li><a href=\"http:\/\/scn.sap.com\/community\/fiori\">SAP Fiori Community<\/a><\/li>\n<li><a href=\"http:\/\/scn.sap.com\/community\/developer-center\/front-end\">SAPUI5 Developer Center<\/a><\/li>\n<li><a href=\"https:\/\/sapui5.netweaver.ondemand.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Framework SAPUI5<\/a><\/li>\n<li><a href=\"http:\/\/scn.sap.com\/community\/mobile\/blog\/2014\/05\/04\/how-to-setup-the-sap-fiori-launchpad\">How To Setup the SAP Fiori Launchpad<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>De nombreuses initiatives ont \u00e9t\u00e9 engag\u00e9es par SAP pour porter les \u00e9crans de l\u2019ERP sur le Web, sur les terminaux mobiles et ainsi simplifier l\u2019exp\u00e9rience utilisateur : Web Dynpro, SAP GUI for HTML, SAP Retail Store, ITS, Netweaver Business Cockpit en sont quelques exemples. SAP Fiori est une plateforme logicielle chez SAP sortie\u00a0en 2013 pour [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,55],"tags":[],"class_list":["post-1516","post","type-post","status-publish","format-standard","hentry","category-sap","category-ui5"],"_links":{"self":[{"href":"https:\/\/devportfolio.net\/wp-dev-blog\/wp-json\/wp\/v2\/posts\/1516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devportfolio.net\/wp-dev-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devportfolio.net\/wp-dev-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devportfolio.net\/wp-dev-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devportfolio.net\/wp-dev-blog\/wp-json\/wp\/v2\/comments?post=1516"}],"version-history":[{"count":1,"href":"https:\/\/devportfolio.net\/wp-dev-blog\/wp-json\/wp\/v2\/posts\/1516\/revisions"}],"predecessor-version":[{"id":2453,"href":"https:\/\/devportfolio.net\/wp-dev-blog\/wp-json\/wp\/v2\/posts\/1516\/revisions\/2453"}],"wp:attachment":[{"href":"https:\/\/devportfolio.net\/wp-dev-blog\/wp-json\/wp\/v2\/media?parent=1516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devportfolio.net\/wp-dev-blog\/wp-json\/wp\/v2\/categories?post=1516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devportfolio.net\/wp-dev-blog\/wp-json\/wp\/v2\/tags?post=1516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}