--- title: Mise à jour des stocks Shopify à partir d'une application mobile date: 2025-04-01 categories: - data-integration - etl tags: - "#mapforce" description: Découvrez cet exemple concret de création d'une application mobile pour mettre à jour les stocks dans une boutique Shopify, rendu possible grâce au support de GraphQL dans MapForce. --- Status: #blog Tags: #mapforce #shopify Categories: [data-integration](/blog/fr/category/data-integration.md) | [etl](/blog/fr/category/etl.md) # Mise à jour des stocks Shopify à partir d'une application mobile L'un des avantages de l'utilisation de Shopify comme plateforme de commerce électronique est qu'elle offre des fonctionnalités robustes de gestion des stocks. Cependant, maintenir des informations précises sur les stocks en temps réel peut être difficile, en particulier pour les commerçants qui dépendent de la saisie manuelle des données lors des inventaires ou des réapprovisionnements. Les lecteurs de codes-barres portables sont une excellente solution pour augmenter la rapidité et la précision lors des inventaires, mais les propriétaires de magasins ont souvent du mal à connecter directement les données du lecteur au système Shopify. Sans une intégration adéquate, le personnel peut encore devoir saisir manuellement les données scannées dans Shopify, ce qui annule une partie des gains d'efficacité que les lecteurs de codes-barres sont censés apporter. Examinons un exemple concret pour la création d'une application mobile intégrant la lecture de codes-barres et qui se connecte directement à Shopify pour une gestion des stocks en temps réel. ![Application mobile pour Shopify](/blog/images/Shopify-updating_inventory.jpg) Shopify tracks key inventory metrics, including the quantity on hand at each location, the number of items committed to existing orders, and the availability for new orders. Keeping these numbers accurate is important to prevent overselling or accumulating inactive, non-moving stock. Une méthode efficace pour garantir la précision de l'inventaire consiste à effectuer régulièrement des audits d'inventaire ou des comptages cycliques. Une application mobile qui vous permet de mettre à jour rapidement la quantité disponible pour chaque variante de produit directement dans votre boutique Shopify peut simplifier ce processus, contribuant ainsi à accélérer les opérations et à réduire les coûts liés aux vérifications manuelles de l'inventaire. En utilisant les produits de la plateforme [Altova Data Platform](https://www.altova.com/fr/data-platform), nous pouvons créer un processus automatisé pour collecter les données des codes-barres à l'aide d'un scanner portable et les intégrer en temps réel à Shopify. ## Shopify et GraphQL Shopify a adopté l'API GraphQL comme norme pour interagir avec des données externes, que ce soit pour extraire des données à des fins d'analyse ou, dans notre cas, pour importer des données pour la gestion des stocks. Pour plus d'informations sur le fonctionnement des API GraphQL de Shopify et sur la manière de s'y connecter, veuillez consulter notre article précédent sur [l'exportation de données depuis Shopify](/blog/fr/2025/03/exporting-products-from-shopify-as-csv.md). ## Exigences et conception d'une application de gestion des stocks pour Shopify Notre processus de travail utilisera plusieurs produits Altova qui fonctionneront en collaboration : - MobileTogether Designer – pour créer une application de lecture de codes-barres - MobileTogether Server : serveur pour héberger l'application destinée aux appareils mobiles - MapForce – pour [synchronisation des données de l'application avec Shopify](https://www.altova.com/fr/mapforce/convert-shopify-graphql) - MapForce Server : pour exécuter les transformations de données sur un serveur - FlowForce Server : pour l'orchestration des flux de travail et la mise à disposition des correspondances sous forme de services web Le processus de conception débute dans MobileTogether, la plateforme de développement d'applications low-code d'Altova, conçue pour créer des applications axées sur les données. Cette plateforme offre un support complet pour la création d'applications qui [stockent et traitent les données provenant de scanners de codes-barres portables](https://www.altova.com/fr/mobiletogether/mobile-scanner-apps). Dans Shopify, il peut y avoir de nombreux [produits](https://help.shopify.com/en/manual/products), et chaque produit peut avoir une ou plusieurs [variantes](https://help.shopify.com/en/manual/products/variants). En interne, chaque variante de produit est associée à exactement un [article de stock](https://shopify.dev/docs/api/admin-graphql/latest/objects/InventoryItem). Un article de stock peut avoir plusieurs [niveaux de stock](https://shopify.dev/docs/api/admin-graphql/latest/objects/InventoryLevel) : un niveau de stock pour chaque [emplacement](https://shopify.dev/docs/api/admin-graphql/latest/objects/Location). Les emplacements représentent une zone géographique où un commerçant exerce son activité, comme un magasin de détail ou un entrepôt. Vous trouverez plus d'informations sur la relation entre ces éléments [ici](https://shopify.dev/docs/apps/build/orders-fulfillment/inventory-management-apps/manage-quantities-states#inventory-object-relationships). Ainsi, pour mettre à jour les quantités d'une variante de produit, nous devons modifier (terme utilisé en GraphQL pour désigner la mise à jour) les niveaux de stock pour un article spécifique dans un emplacement particulier. En gardant cela à l'esprit, nous pouvons commencer le flux de travail de notre application dans MobileTogether Designer en demandant d'abord à l'utilisateur de choisir l'emplacement où nous comptons les articles en stock : ![Début de l'application de gestion des stocks de Shopify](/blog/images/shopify-location.png) Pour remplir le tableau des emplacements pour une boutique Shopify, nous utiliserons une transformation MapForce pour interroger tous les emplacements. ![Sélectionner les emplacements Shopify](/blog/images/shopify-locations.png) Voici la requête GraphQL que nous utiliserons dans le composant de requête web Shopify/GraphQL situé à gauche : `{`     `locations(first: 100) {`         `nodes {`             `id`             `name`         `}`     `}` `}` Ensuite, nous allons déployer cette configuration sur le serveur MapForce et utiliser [FlowForce Server](https://www.altova.com/fr/flowforceserver) pour la rendre accessible en tant que service web : ![Paramètres de configuration de FlowForce](/blog/images/flowforce-job.png) N'oubliez pas de rendre cette fonctionnalité accessible en tant que service web via http(s) : ![FlowForce en tant que service web](/blog/images/flowforce-service-locations.png) Ensuite, ajoutez une nouvelle tâche FlowForce en tant que source de page pour la première page de l'application dans l'outil MobileTogether Designer. ![FlowForce dans MobileTogether](/blog/images/flowforce-mobiletogether.png) Veuillez noter que l'URL doit pointer vers le nom d'hôte du serveur FlowForce, sauf si le serveur FlowForce et le serveur MobileTogether sont exécutés sur la même machine, auquel cas vous pouvez utiliser "localhost". De plus, bien que nous utilisions simplement "http:" pour notre exemple exécuté sur une machine locale, vous devriez absolument utiliser "https:" dans tout environnement de production pour des raisons de sécurité. Maintenant, si nous testons notre application dans le simulateur d'applications MobileTogether [App Simulator](https://www.altova.com/fr/mobiletogether/app-simulator), nous verrons quelque chose de similaire à ceci : ![Application de gestion des stocks dans un environnement de simulation](/blog/images/simulated-app.png) Une fois l'emplacement défini, nous configurerons la page suivante de l'application pour demander un code-barres et une quantité, que nous transmettrons ensuite à la transformation MapForce. Cela permet de mettre à jour la quantité disponible de l'article correspondant au code-barres. ![Correspondance des données Shopify](/blog/images/shopify-mapping.png) Ici, le premier appel à un service web Shopify, utilisant GraphQL, est utilisé pour rechercher l'identifiant de l'article correspondant au code-barres donné `query ($query: String = null) {`     `productVariants(first: 1, query: $query) {`         `nodes {`             `id`             `barcode`             `inventoryItem {`                 `id`             `}`         `}`     `}` `}` Et l'appel à l'API web Shopify suivant envoie alors la requête de modification pour mettre à jour la quantité disponible : mutation InventorySet($input: InventorySetQuantitiesInput!) {     `inventorySetQuantities(input: $input) {`         `inventoryAdjustmentGroup {`             `createdAt`             `reason`             `referenceDocumentUri`             `changes {`                 `name`                 `delta`             `}`         `}`         `userErrors {`             `field`             `message`         `}`     `}` `}` La configuration de mappage ainsi créée peut ensuite être utilisée dans une autre tâche FlowForce : ![Paramètres de FlowForce pour les applications mobiles](/blog/images/FlowForce-job-parameters.png) Cela peut ensuite être exposé en tant que service web via HTTP ![Deuxième service FlowForce](/blog/images/flowforce-service2.png) Utilisons cette configuration, qui est maintenant déployée en tant que service HTTP, sur la deuxième page de l'application mobile dans l'outil MobileTogether Designer : ![Deuxième page de l'application mobile d'inventaire](/blog/images/app-page2.png) Ici, nous affichons l'emplacement sélectionné précédemment et demandons à l'utilisateur de saisir le code-barres et la quantité. L'événement déclenché lors du clic sur le bouton "Mettre à jour la quantité" appellera le service HTTP du serveur FlowForce : ![Appeler une tâche FlowForce via HTTP](/blog/images/flowforce-http-service.png) Veuillez noter à nouveau que l'URL doit pointer vers le nom d'hôte du serveur FlowForce, sauf si le serveur FlowForce et le serveur MobileTogether sont exécutés sur la même machine. Le résultat de cette mutation sera présenté sur la troisième page de l'application mobile.. ![Étape de mise à jour de l'inventaire](/blog/images/updating-inventory.png) ...où le bouton "Continuer" nous ramènerait à la deuxième page pour saisir un nouveau code-barres et la quantité correspondant au prochain article à vérifier lors de l'inventaire. Le flux de travail complet pourrait se présenter comme suit. Choisissez le lieu : ![Application de gestion des stocks, étape 1](/blog/images/step1.png) Entrez le code-barres et la quantité (en utilisant un scanner) : ![Étape 2 de l'application de gestion des stocks](/blog/images/step2.png) Mettre à jour et obtenir une confirmation : ![Étape 3 de l'application de gestion des stocks](/blog/images/step3.png) ## Et ensuite ? Maintenant que notre application de lecture de codes-barres est prête, elle sera [déployée sur le serveur MobileTogether](https://www.altova.com/fr/data-platform) afin de pouvoir être exécutée sur les appareils mobiles. L'application fonctionnera sur les appareils mobiles qui disposent d'un lecteur de codes-barres intégré, capable de scanner et d'entrer les codes-barres en appuyant sur un seul bouton. MobileTogether prend également en charge les [lecteurs de codes-barres sans fil externes](https://www.altova.com/fr/mobiletogether/mobile-scanner-apps#config) (comme ceux de Zebra ou Datalogic) qui peuvent être intégrés au flux de travail de l'application mobile. La fonctionnalité de mappage MapForce vers Shopify est disponible dans le projet d'exemples MapForce fourni avec le logiciel (Shopify_UpdateInventory.mfd). Vous pouvez saisir le nom de votre propre boutique Shopify et votre jeton d'accès pour l'essayer. Tous les produits Altova utilisés dans cet exemple sont disponibles pour une.. [essai gratuit](https://www.altova.com/fr/download), Et MobileTogether Designer est un produit gratuit.