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.
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, 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.
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
- 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.
Dans Shopify, il peut y avoir de nombreux produits, et chaque produit peut avoir une ou plusieurs variantes. En interne, chaque variante de produit est associée à exactement un article de stock. Un article de stock peut avoir plusieurs niveaux de stock : un niveau de stock pour chaque emplacement. 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.
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 :
Pour remplir le tableau des emplacements pour une boutique Shopify, nous utiliserons une transformation MapForce pour interroger tous les emplacements.
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 pour la rendre accessible en tant que service web :
N'oubliez pas de rendre cette fonctionnalité accessible en tant que service web via http(s) :
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.
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, nous verrons quelque chose de similaire à ceci :
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.
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 :
Cela peut ensuite être exposé en tant que service web via HTTP
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 :
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 :
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..
...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 :
Entrez le code-barres et la quantité (en utilisant un scanner) :
Mettre à jour et obtenir une confirmation :
Et ensuite ?
Maintenant que notre application de lecture de codes-barres est prête, elle sera déployée sur le serveur MobileTogether 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 (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, Et MobileTogether Designer est un produit gratuit.