Maîtriser SAP Spartacus : plongée en profondeur dans la vitrine SAP Composable

SAP Spartacus. Une solution de vitrine headless basée sur le framework Angular, qui exploite l’API REST Commerce. Cela semble technique ? Ça l’est. Mais les chiffres derrière sont tout sauf arides : le commerce headless devrait atteindre une taille de marché de 3,9 milliards USD d’ici 2025. Spartacus est au coeur de cette histoire de croissance.

Lancé pour la première fois en 2019, Spartacus a depuis connu des mises à jour significatives et a été rebaptisé SAP Commerce Cloud, Composable Storefront. Le nom reflète l’architecture modulaire et flexible. Examinons ce que Spartacus peut concrètement faire et où se trouvent ses limites.

Chronologie de SAP Spartacus

SAP Spartacus est régulièrement mis à jour avec de nouvelles fonctionnalités et améliorations depuis 2019. Le développement a été rapide :

2019 : Lancement comme projet open source sur GitHub. Version 1.0 en juillet avec rendu côté serveur, support PWA, internationalisation et accessibilité. Plus une extension de données d’exemple et un modèle de vitrine B2C.

2020 : Plusieurs versions mineures et majeures (1.1 à 3.0). Nouvelles fonctionnalités : lazy loading, schematics, outlets, feature flags, dialogues pilotés par CMS, modèle de vitrine B2B. La bibliothèque de vitrines Spartacus est arrivée, avec davantage de composants et de modules.

2021 : Évolution jusqu’à la version 4.0. Web components, micro frontends, balisage Schema.org, isolation des données, gestion des organisations B2B. Et le rebranding en SAP Commerce Cloud, Composable Storefront.

2022 : Versions 4 à 5.1. Personnalisation, promotions, programmes de fidélité, gestion des centres de coûts B2B. Officiellement connu sous le nom de SAP Commerce Cloud, Composable Storefront depuis la version 5.03. Intégration avec SAP Customer Data Platform, SAP Marketing Cloud et SAP Upscale Commerce.

2023 : Nouvelles versions jusqu’à la 6.0. Assistant vocal, reconnaissance des émotions, analytique prédictive, workflow d’approbation B2B. Adoption des dernières technologies Angular comme Angular Ivy, Angular Elements et Angular Material.

Quels sont les avantages de SAP Spartacus ?

SAP Spartacus offre des avantages concrets pour les développeurs et les utilisateurs métier :

Extensibilité : Ajouter, retirer ou remplacer des fonctionnalités ou composants sans toucher à la fonctionnalité de base. Exploiter les bibliothèques Angular existantes. Des micro frontends pour des modules indépendants qui peuvent être développés et déployés séparément. C’est de la vraie modularité.

Progressive Web App (PWA) : Expérience utilisateur rapide, fiable et engageante sur différents appareils et plateformes. Accès hors ligne, notifications push, installation sur l’écran d’accueil. La frontière entre web et application s’estompe, et c’est tant mieux.

Rendu côté serveur (SSR) : La page initiale est rendue côté serveur avant d’être envoyée au navigateur. Cela améliore les performances, le SEO et l’accessibilité d’un seul coup.

Internationalisation (i18n) : Contenu dans différentes langues et formats, basé sur les préférences et la localisation de l’utilisateur. Outils Angular i18n pour les traductions, devises, dates, nombres, unités. Pour une entreprise suisse comme Spadoom qui opère en plusieurs langues, ce n’est pas un luxe, c’est une obligation.

Développement open source : Hébergé sur GitHub SAP. Les développeurs peuvent contribuer, signaler des problèmes, demander des fonctionnalités. Semantic Versioning (SemVer) pour la compatibilité et la stabilité.

Optimisation SEO : Angular Universal génère des pages HTML statiques pour chaque route. Les moteurs de recherche peuvent crawler et indexer. Le balisage Schema.org fournit des données structurées. Le résultat : meilleure visibilité et meilleur classement.

Accessibilité : Conforme WCAG 2.1. Attributs ARIA pour les lecteurs d’écran et les technologies d’assistance. L’inclusion n’est pas un bonus, c’est une exigence. Point.

Polyvalence : Personnalisable pour différents secteurs : automobile, biens de consommation, médical, chimie, équipement industriel, retail. De facto une plateforme pour de nombreux univers.

Si vous utilisez une vitrine basée sur Accelerator sur SAP Commerce Cloud, la migration vers le Composable Storefront est recommandée pour rester au rythme des tendances e-commerce.

Prérequis et exigences

Pour utiliser SAP Spartacus, vous avez besoin de :

SAP Commerce Cloud 2105 ou plus récent : La dernière version est recommandée. Les versions antérieures ne prennent pas en charge toutes les API et fonctionnalités requises à partir de Spartacus 4.3.8.

CORS : Le Cross-Origin Resource Sharing doit être activé sur le serveur backend pour que la vitrine et l’API puissent communiquer.

Angular CLI, Node.js et npm : Installés et à jour dans votre environnement de développement. Angular Schematics pour Spartacus afin de générer un nouveau projet avec les bonnes dépendances.

Un éditeur de code : Développement TypeScript, HTML, CSS et Angular. Visual Studio Code, WebStorm ou Sublime Text sont des options courantes.

Un navigateur web : Standards web modernes et support PWA. Chrome, Firefox ou Edge.

Installation et configuration

Le processus d’implémentation étape par étape :

1. Installer et configurer l’extension Spartacus Sample Data sur votre instance SAP Commerce Cloud. Via des scripts ImpEx ou le portail Commerce Cloud.
2. Activer CORS sur le serveur SAP Commerce Cloud. La vitrine doit pouvoir communiquer avec l’API REST Commerce depuis une autre origine.
3. Configurer l’URL de base, avec Angular Schematics ou le fichier environment.ts. Cette URL pointe vers votre serveur SAP Commerce Cloud.
4. Créer un nouveau projet Angular : ng new my-storefront --style=scss
5. Ajouter Angular Schematics pour Spartacus : ng add @spartacus/schematics
6. Choisir les options : URL de base, fonctionnalités, style, langues.
7. Lancer la vitrine : ng serve
8. Ouvrir le navigateur, accéder à http://localhost:4200.
9. Vérifier que la vitrine fonctionne correctement. Utiliser les outils de développement ou SmartEdit.
10. Intégrer la vitrine avec tous les systèmes et configurer l’authentification.
11. Personnaliser l’apparence et les fonctionnalités. La bibliothèque de vitrines Spartacus offre des fonctionnalités et composants supplémentaires.

Personnalisation et extension

Différentes techniques sont disponibles :

Composants Angular : Créer vos propres composants ou remplacer les composants Spartacus existants avec des templates, styles et logique. Utiliser des directives, pipes et services.

Composants CMS : Créer vos propres composants CMS ou remplacer les existants, via SmartEdit ou ImpEx. Exploiter les attributs CMS, slots, pages et templates pour la configuration.

Outlets Spartacus : Injecter votre propre contenu ou logique à des emplacements spécifiques sans modifier les composants originaux. Contextes d’outlet pour le transfert de données entre composants.

Configurations Spartacus : Personnaliser le routage, l’authentification, la localisation, la personnalisation, l’optimisation. Modules de fonctionnalités pour activer ou désactiver des fonctions spécifiques.

Styles Spartacus : Personnaliser l’apparence via les variables SCSS, mixins et fonctions. Utilitaires et thèmes Bootstrap pour les styles courants.

Limitations et défis

Soyons francs : Spartacus est encore en développement, et tout ne fonctionne pas sans accroc. Quelques points à connaître :

Lacunes fonctionnelles : Certaines fonctionnalités de l’Accelerator SAP Commerce Cloud traditionnel ne sont pas encore prises en charge. Personnalisation, promotions, programmes de fidélité, certaines fonctionnalités B2B. Des adaptations peuvent être nécessaires.

Courbe d’apprentissage : Spartacus nécessite des connaissances en Angular et une familiarité avec les API SAP Commerce Cloud. Ce n’est pas un projet de week-end.

Problèmes de compatibilité : Toutes les intégrations tierces ou extensions conçues pour l’Accelerator ne fonctionnent pas avec Spartacus. Des mises à jour ou des remplacements peuvent être nécessaires.

Problèmes de performance : L’architecture headless repose sur de multiples appels API. Cela peut conduire à des goulots d’étranglement de performance. Optimiser la configuration réseau, le caching et la modélisation des données.

Meilleures pratiques et conseils

Rester à jour : Suivre les mises à jour sur GitHub, la documentation officielle et les articles de blog. Les forums communautaires et webinaires offrent des connaissances supplémentaires.

Suivre les directives : Standards de codage, conventions de nommage, principes de design. Outils d’analyse de code comme ESLint, Prettier ou SonarQube pour la qualité et la cohérence.

Utiliser les feature flags : Activer ou désactiver des fonctionnalités sans affecter les autres. Idéal pour tester avant le déploiement en production.

Utiliser les micro frontends : Décomposer la vitrine en modules plus petits et indépendants. Meilleur pour l’évolutivité, la maintenabilité et la réutilisabilité.

Utiliser les web components : Éléments UI réutilisables pour différents frameworks et plateformes. Moins de dépendances, plus d’interopérabilité.

Utiliser le SAP Repositories Management Portal : Outil web pour la gestion de vos dépôts SAP Commerce Cloud : code, données et médias.

Conclusion

Ce guide a couvert tous les aspects essentiels de SAP Spartacus. Pour plus de détails sur l’implémentation, vous pouvez consulter la documentation officielle Spartacus de SAP.

Si vous souhaitez implémenter SAP Spartacus, Spadoom peut être votre guide. En tant que partenaire SAP Gold avec plus de 6 ans d’expérience, nous sommes vos experts SAP Customer Experience. Contactez-nous pour implémenter SAP Spartacus ou migrer depuis l’Accelerator.

Questions fréquemment posées

SAP Spartacus est-il un CMS ?

Non. SAP Spartacus est une application web JavaScript avec laquelle vous créez votre propre vitrine pour SAP Commerce Cloud. Spartacus utilise le CMS SAP Commerce Cloud pour rendre du contenu et des composants dynamiques, mais n’offre pas de fonctionnalité CMS en soi.

Quel est le nouveau nom de SAP Spartacus ?

Depuis la version 5.03 : SAP Commerce Cloud, Composable Storefront. Le nom souligne que Spartacus est devenu un produit SAP officiel et la vitrine principale pour SAP Commerce Cloud.

Qui utilise SAP Spartacus ?

Les entreprises qui veulent bénéficier d’une vitrine moderne, headless et pilotée par API. Tous secteurs confondus. Exemples : T-Mobile, Samsung, Sonae MC5.

Comment puis-je personnaliser et étendre SAP Spartacus ?

Via Angular Schematics pour les composants et CSS pour l’apparence. Les fonctionnalités d’extensibilité comme les outlets, les composants CMS et les interceptors modifient le comportement standard.

Comment puis-je connecter SAP Spartacus à d’autres systèmes ?

Bien que principalement intégré avec SAP Commerce Cloud, d’autres systèmes peuvent être connectés via des connecteurs personnalisés. Implémenter vos propres connecteurs ou utiliser ceux de SAP et de tiers.