Consulter le PDF

Concevoir une solution SAP à l’aide du No-Code

Application mobile Order Tracker construite dans une logique SAP Build / No-Code.

Ce projet de formation présente la conception d’une application mobile Order Tracker permettant de rechercher un client, consulter ses commandes, vérifier un statut logistique et ouvrir un itinéraire de livraison.

ContexteExercice No-Code autour d’une application mobile connectée à une source de commandes.

ObjectifDémontrer la construction d’un parcours applicatif simple, interactif et exploitable.

ApprocheInterface mobile, variables, logique de navigation, filtrage, données OData, statut et tests.

LivrableApplication de démonstration, support PowerPoint, logique de données et vidéo de démonstration.

Introduction

Dans ce projet de formation, j’ai conçu une application mobile Order Tracker avec SAP Build Apps. L’objectif était de montrer comment une solution No-Code peut répondre à un besoin opérationnel simple : retrouver une commande, consulter ses informations principales et suivre son statut logistique.

Mon travail a consisté à structurer l’interface, connecter une source de données OData, définir les variables, construire la navigation, paramétrer les formules et tester les principaux scénarios d’usage avant la démonstration.

Sommaire de la présentation

1Objectif du projet
2Présentation de l’interface et de l’expérience utilisateur
3Fonctionnalités complémentaires
4Schéma du flux de données
5Fonctionnalités interactives de l’application
6Outils externes retenus
7Vidéo de démonstration
8Tests et vérifications avant déploiement

Objectif du projet

Le projet consiste à répondre à un besoin métier simple : accéder rapidement aux informations de commande et de livraison sans passer par plusieurs écrans ou sources de données.

Besoin identifiéRetrouver une commande client, consulter les informations clés et visualiser son statut.

Solution proposéeUne application mobile claire, construite avec SAP Build Apps, centrée sur l’usage terrain.

Valeur apportéeRecherche plus rapide, lecture plus simple des commandes et démonstration concrète d’un usage No-Code.

Présentation de l’interface et de l’expérience utilisateur

Page d’accueil

Toggle light mode
Active ou désactive le mode clair pour adapter l’affichage.

Nom de l’application et tagline
Identifie clairement l’usage : Order Tracker, suivi des commandes.

Barre de recherche client
Permet de saisir un Customer ID ou une partie du nom client.

Nombre de commandes trouvées
Affiche un message dynamique selon le résultat de la recherche.

Liste des commandes
Présente les commandes associées au client avec Customer ID et Order ID.

Page détail de la commande

Interface Order Tracker - page détail avec statut Late

Interface Order Tracker - page détail avec statut On time

Order ID et statut logistique
Affiche la commande sélectionnée et son statut Late ou On time.

Dates de suivi
Montre la date de commande, la date d’expédition et la date attendue.

Adresse de livraison
Regroupe les informations de destination utiles à la livraison.

Open Map
Ouvre Google Maps avec l’itinéraire vers la ville de destination.

Back
Permet de revenir simplement à la liste des commandes.

Fonctionnalités complémentaires

Ces fonctionnalités complètent l’usage principal sans alourdir l’application. Elles rendent l’interface plus pratique, plus lisible et plus exploitable en démonstration.

Google MapsOuverture d’un itinéraire entre le point d’expédition et la ville de destination de la commande.

Light modeAdaptation automatique des couleurs de fond et de texte selon le mode activé.

Statut Late / On timeComparaison entre ShippedDate et RequiredDate pour afficher le statut et sa couleur.

Vue Google Maps ouverte depuis Order Tracker — Google Maps : itinéraire ouvert depuis la commande.

Page d’accueil Order Tracker en light mode — Page d’accueil en light mode.

Page détail Order Tracker en light mode — Page détail en light mode.

Recherche Order Tracker en light mode — Recherche et liste en light mode.

Schéma du flux de données

Le flux part de la source OData, charge les commandes, filtre selon la saisie utilisateur, puis transmet les données utiles à la page détail.

1Source de données ODataLa source externe Orders centralise les données de commandes exploitées par l’application : CustomerID, OrderID, ShipCity, OrderDate, ShippedDate, RequiredDate.

2Chargement des commandesLes données récupérées depuis OData sont stockées dans la data variable OrdersData. C’est la base utilisée pour les traitements et l’affichage.

3Saisie utilisateurLa Search Bar est liée à la page variable searchText. Elle enregistre le texte saisi par l’utilisateur pour lancer la recherche.

4Filtrage des commandesUne formule utilise searchText pour filtrer OrdersData. Seules les commandes correspondant à la recherche sont conservées pour l’affichage.

5Affichage des résultatsLe composant List item construit la liste à partir des données filtrées. Chaque ligne affiche CustomerID en libellé principal et OrderID en libellé secondaire.

6Sélection d’une commandeDans le Logic Canvas, le clic sur une ligne déclenche deux actions Set app variable : selectedOrderID = current.OrderID et selectedShipCity = current.ShipCity.

7Ouverture de la page détailL’action Open Page ouvre l’écran de consultation de la commande avec les données déjà mémorisées.

8Identification de la commandeLa variable selectedOrderID contient l’identifiant de la commande choisie. Elle permet de retrouver la bonne commande dans les données chargées.

9Affichage de la donnéeLa data variable selectedOrderData contient les informations de la commande sélectionnée. Les champs de la page détail sont alimentés à partir de cette variable.

Variables clés : OrdersData contient toutes les commandes récupérées depuis OData, searchText contient la saisie de recherche, selectedOrderID identifie la commande sélectionnée, selectedShipCity sert à construire l’itinéraire Google Maps et current désigne la ligne sur laquelle l’utilisateur vient de cliquer.

Fonctionnalités interactives de l’application

Affichage du nombre de commandes trouvéesUne formule analyse searchText, filtre OrdersData, compte les commandes correspondantes puis adapte le message affiché : aucune commande, une commande ou plusieurs commandes trouvées.COUNT(SELECT(data.OrdersData, CONTAINS(UPPERCASE(item.CustomerID), UPPERCASE(pageVars.searchText))))

Bouton BackDans le Logic Canvas, le bouton déclenche l’action Navigate Back. L’utilisateur revient à la liste sans perdre la logique de navigation.

Bouton Open MapLe bouton déclenche l’action App Open URL. L’URL est construite dynamiquement avec la ville de livraison mémorisée dans selectedShipCity."https://www.google.com/maps/dir/Nantes/" + appVars.selectedShipCity

Toggle Light ModeUne app variable true / false pilote le mode d’affichage. Deux formules adaptent automatiquement les couleurs du fond et du texte selon le mode choisi.IF(appVars.appVarsisLightMode, "#FFFFFF", "#000000")

Statut logistiqueLa formule compare ShippedDate et RequiredDate. Si la date d’expédition est après la date requise, le statut est Late. Sinon, il est On time.IF(data.selectedOrderData.ShippedDate > data.selectedOrderData.RequiredDate, "Late", "On time")

Couleur du statutUne seconde formule applique la couleur du statut : rouge si la commande est Late, vert si elle est On time.IF(data.selectedOrderData.ShippedDate > data.selectedOrderData.RequiredDate, "#D32F2F", "#53B253")

Outils externes retenus

Peu d’outils externes ont été nécessaires. Ils servent principalement à alimenter l’application en données et à enrichir l’expérience utilisateur.

Source OData OrdersRécupération des données de commandes utilisées dans la liste et dans la page détail.

Google MapsOuverture d’un itinéraire depuis Nantes vers la ville de destination sélectionnée.

Ressources visuellesAjout d’éléments graphiques pour rendre l’application plus claire et identifiable.

Vidéo de démonstration

Vidéo de démonstration de l’application : recherche client, liste des commandes, détail de commande, statut logistique, Google Maps et light mode.

Tests et vérifications avant déploiement

Les principaux scénarios d’usage ont été vérifiés avant déploiement. Les tests critiques sont validés.

ID	Fonctionnalité testée	Étapes de test	Ce que l’on contrôle	Résultat attendu	Résultat obtenu	Statut
TC01	Toggle / Light Mode	Activer / désactiver le toggle Light Mode. Parcourir les écrans visibles de l’application.	Basculement du thème, cohérence des couleurs et lisibilité des textes.	Le thème change correctement, les couleurs restent cohérentes et aucune information n’est illisible.	Le thème bascule correctement. Le texte reste lisible sur toutes les zones vérifiées.	Validé
TC02	Toast de bienvenue et GIF dynamique	Lancer l’application et observer l’écran d’accueil.	Affichage du toast de bienvenue, présence et animation du GIF.	Le toast de bienvenue apparaît au lancement. Le GIF est bien dynamique.	Le toast s’affiche correctement. Le GIF fonctionne comme attendu.	Validé
TC03	Recherche client	Saisir un Customer ID ou une lettre dans la Search Bar. Lancer / observer la recherche.	Affichage des résultats, présence des colonnes CustomerID et OrderID, cohérence avec la saisie.	La liste affiche les bons résultats correspondant à la recherche. Les colonnes sont correctement alimentées.	Les résultats affichés sont cohérents avec la recherche saisie.	Validé
TC04	Compteur de commandes trouvées	Rechercher un client, vérifier le message de nombre de commandes trouvées, comparer avec la liste affichée.	Correspondance entre le compteur affiché et le nombre de lignes visibles. Cohérence OrderID / résultats.	Le compteur indique le bon nombre de commandes trouvées et correspond à la liste.	Le compteur est cohérent avec la liste des commandes affichées.	Validé
TC05	Sélection d’une commande et navigation	Cliquer sur une ligne de la liste. Vérifier l’ouverture de la page Order Details.	Redirection vers la page détail et enchaînement correct après sélection.	L’utilisateur est redirigé vers la page Order Details.	La redirection fonctionne correctement.	Validé
TC06	Affichage des données détail	Arriver sur la page Order Details après sélection. Vérifier client, Order ID, dates et Shipment Information.	Cohérence des données avec la commande sélectionnée, format des dates et bloc Shipment Information.	Les informations affichées correspondent à la commande choisie. Les dates sont au bon format.	Les informations affichées sont cohérentes et bien formatées.	Validé
TC07	Statut logistique Late / On time	Ouvrir une commande, comparer ShippedDate et RequiredDate, vérifier le statut affiché.	Calcul du statut en fonction des dates et couleur associée au statut.	Si ShippedDate > RequiredDate : Late en rouge. Sinon : On time en vert.	Le statut et la couleur s’actualisent correctement selon les dates.	Validé
TC08	Open Map	Cliquer sur le bouton Open Map. Vérifier l’ouverture de Google Maps.	Ouverture du lien Google Maps et itinéraire Nantes vers ville de la commande sélectionnée.	Google Maps s’ouvre avec l’itinéraire entre Nantes et la ville de destination sélectionnée.	Google Maps s’ouvre avec le bon itinéraire.	Validé
TC09	Bouton Back	Cliquer sur le bouton Back depuis la page détail. Vérifier le retour à la page précédente.	Navigation retour et retour cohérent vers la liste.	L’utilisateur est renvoyé à la page précédente.	Le retour fonctionne correctement.	Validé

Environnement de test : SAP Build Apps en mode Preview. Source de données : OData.

Conclusion

Ce projet montre comment une application No-Code peut transformer un besoin terrain en parcours utilisable : recherche client, consultation de commande, statut logistique, itinéraire et retour à la liste. Le travail ne porte pas uniquement sur l’écran visible, mais aussi sur les données, les variables, les formules et les tests qui rendent l’application cohérente.

J’ai construit une démonstration complète en partant du besoin, puis en reliant l’interface, la logique applicative et la validation fonctionnelle. Le livrable illustre ma capacité à utiliser SAP Build Apps pour prototyper une solution simple, testable et compréhensible par des utilisateurs métier.

Compétences mobilisées

SAP Build No-Code Application mobile OData UX Variables Tests Démonstration

Retour à la page précédente