---
title: Voorraad bijwerken in Shopify via een mobiele app
date: 2025-04-01
categories:
  - data-integration
  - etl
tags:
  - "#mapforce"
description: Bekijk dit praktische voorbeeld van het ontwikkelen van een mobiele app voor het bijwerken van de voorraad in een Shopify-winkel, mogelijk gemaakt door de GraphQL-ondersteuning in MapForce.
---
Status: #blog

Tags:  #mapforce #shopify

Categories: [data-integration](/blog/nl/category/data-integration.md) | [etl](/blog/nl/category/etl.md) 
# Voorraad bijwerken in Shopify via een mobiele app

Een van de voordelen van het gebruik van Shopify als e-commerceplatform is dat het uitgebreide functies biedt voor voorraadbeheer. Het bijhouden van accurate voorraadgegevens in real-time kan echter een uitdaging zijn, vooral voor verkopers die vertrouwen op handmatige invoer van gegevens tijdens voorraadcontroles of bij het aanvullen van de voorraad.

Draagbare barcodescanners zijn een uitstekende oplossing om de snelheid en nauwkeurigheid te verhogen tijdens voorraadcontroles, maar winkelhouders beschikken vaak niet over een eenvoudige manier om de gegevens van de scanner direct met het Shopify-systeem te verbinden. Zonder de juiste integratie moeten medewerkers de gescande gegevens mogelijk nog steeds handmatig in Shopify invoeren, waardoor een deel van de efficiëntiewinst die barcodescanners zouden moeten opleveren, verloren gaat.

Laten we eens kijken naar een praktijkvoorbeeld van het ontwikkelen van een mobiele app met barcode-scanfunctionaliteit die direct integreert met Shopify voor realtime voorraadbeheer.
![Mobiele app voor Shopify](/blog/images/Shopify-updating_inventory.jpg)


<!--more-->
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.

Een effectieve manier om de nauwkeurigheid van uw voorraad te waarborgen, is door regelmatig voorraadcontroles of zogenaamde "cycle counts" uit te voeren. Een mobiele app waarmee u snel de actuele voorraadhoeveelheid voor elke productvariant direct in uw Shopify-winkel kunt bijwerken, kan dit proces versnellen en helpen om de snelheid te verhogen en de kosten van handmatige voorraadcontroles te verlagen.

Met behulp van de producten in het [Altova Data Platform](https://www.altova.com/nl/data-platform) kunnen we een workflow creëren voor het verzamelen van barcodegegevens met een draadloze scanner en deze in real-time koppelen aan Shopify.
## Shopify en GraphQL 

Shopify heeft de GraphQL API als standaard gekozen voor de interactie met externe data, of dat nu gaat om het extraheren van data voor analyse, of, in ons geval, het importeren van data voor voorraadbeheer. Voor meer informatie over hoe de Shopify GraphQL API's werken en hoe u er verbinding mee kunt maken, verwijzen wij u naar ons eerdere artikel over dit onderwerp [Het exporteren van data vanuit Shopify](/blog/nl/2025/03/exporting-products-from-shopify-as-csv.md).
## Vereisten en ontwerp van een Shopify-voorraadbeheer-app

Ons werkproces maakt gebruik van een aantal Altova-producten die samenwerken:

- MobileTogether Designer – voor het ontwikkelen van een app voor het scannen van barcodes
- MobileTogether Server – voor het hosten van de applicatie voor mobiele apparaten
- MapForce – voor [Het koppelen van gegevens van de app aan Shopify](https://www.altova.com/nl/mapforce/convert-shopify-graphql)
- MapForce Server – voor het uitvoeren van de dataomzetting op een server
- FlowForce Server – voor het automatiseren van workflows en het beschikbaar stellen van koppelingen als webdiensten

Het ontwerpproces begint in MobileTogether, het low-code applicatieontwikkelingsplatform van Altova, dat is ontworpen voor het bouwen van applicaties die data centraal stellen. Het platform biedt uitgebreide ondersteuning voor het ontwikkelen van applicaties die [gegevens opslaan en verwerken van draagbare barcodescanners](https://www.altova.com/nl/mobiletogether/mobile-scanner-apps).

In Shopify kunnen er veel [producten](https://help.shopify.com/en/manual/products) zijn, en elk product kan één of meerdere product[varianten](https://help.shopify.com/en/manual/products/variants) hebben. Intern heeft elke productvariant precies één [voorraadartikel](https://shopify.dev/docs/api/admin-graphql/latest/objects/InventoryItem). Een voorraadartikel kan meerdere [voorraadniveaus](https://shopify.dev/docs/api/admin-graphql/latest/objects/InventoryLevel) hebben: één voorraadniveau per [locatie](https://shopify.dev/docs/api/admin-graphql/latest/objects/Location). En locaties vertegenwoordigen een geografische plaats waar een verkoper zaken doet, zoals een winkel of een magazijn. U kunt meer informatie over de relatie tussen deze objecten [hier](https://shopify.dev/docs/apps/build/orders-fulfillment/inventory-management-apps/manage-quantities-states#inventory-object-relationships) vinden.

Om de hoeveelheid van een productvariant bij te werken, moeten we de voorraadniveaus voor een specifiek voorraadartikel op een bepaalde locatie wijzigen (in GraphQL-terminologie: bijwerken). Met dat in gedachten, kunnen we onze applicatieworkflow in MobileTogether Designer starten door de gebruiker eerst te vragen om de locatie te selecteren waar we de voorraad bijhouden:

![Start van de Shopify voorraad-app](/blog/images/shopify-location.png)


Om de tabel met locaties voor een Shopify-winkel in te vullen, zullen we een MapForce-mapping gebruiken om alle locaties op te vragen.

![Het selecteren van Shopify-locaties](/blog/images/shopify-locations.png)

Hier is de GraphQL-query die we zullen gebruiken in het Shopify/GraphQL webverzoekcomponent aan de linkerkant:

`{`

    `locations(first: 100) {`

        `nodes {`

            `id`

            `name`

        `}`

    `}`

`}`

Vervolgens zullen we deze mapping implementeren op de MapForce Server en gebruik maken van [FlowForce Server](https://www.altova.com/nl/flowforceserver) om deze beschikbaar te stellen als een webservice:

![FlowForce-instellingen voor taken](/blog/images/flowforce-job.png)

Vergeet niet om deze functie als een webservice aan te bieden via http(s):

![FlowForce als webdienst](/blog/images/flowforce-service-locations.png)

Vervolgens, voeg een nieuwe FlowForce-taak toe als een nieuwe bron voor de eerste applicatiepagina in MobileTogether Designer. 

![FlowForce in MobileTogether](/blog/images/flowforce-mobiletogether.png)

Let op: de URL moet verwijzen naar de hostnaam van de FlowForce Server, tenzij de FlowForce Server en de MobileTogether Server op dezelfde machine draaien. In dat geval werkt "localhost". Hoewel we voor ons voorbeeld, dat op een lokale machine draait, gewoon "http:" gebruiken, is het absoluut noodzakelijk om in elke productieomgeving "https:" te gebruiken om veiligheidsredenen.

Als we onze app testen in de MobileTogether [App-simulator](https://www.altova.com/nl/mobiletogether/app-simulator), dan zien we iets dat er ongeveer zo uitziet:

![Voorraadbeheer-app in de simulator](/blog/images/simulated-app.png)

Nadat de locatie is ingesteld, configureren we de volgende pagina in de app om een barcode en een hoeveelheid te vragen. Deze informatie wordt vervolgens doorgegeven aan de volgende MapForce-mapping. Hierdoor wordt de actuele voorraad van het artikel dat overeenkomt met de barcode bijgewerkt.


![Shopify data-mapping](/blog/images/shopify-mapping.png)

Hier wordt de eerste Shopify web service aanroep, via GraphQL, gebruikt om het artikelnummer op te zoeken dat overeenkomt met de opgegeven barcode:

`query ($query: String = null) {`

    `productVariants(first: 1, query: $query) {`

        `nodes {`

            `id`

            `barcode`

            `inventoryItem {`

                `id`

            `}`

        `}`

    `}`

`}`

En de tweede API-aanroep naar Shopify stuurt vervolgens de update-instructie om de beschikbare hoeveelheid bij te werken:

mutation InventorySet($input: InventorySetQuantitiesInput!) {

    `inventorySetQuantities(input: $input) {`

        `inventoryAdjustmentGroup {`

            `createdAt`

            `reason`

            `referenceDocumentUri`

            `changes {`

                `name`

                `delta`

            `}`

        `}`

        `userErrors {`

            `field`

            `message`

        `}`

    `}`

`}`

De gedefinieerde mapping kan vervolgens worden gebruikt in een tweede FlowForce-taak:

![FlowForce-instellingen voor mobiele apps](/blog/images/FlowForce-job-parameters.png)

Dit kunnen we vervolgens als een webservice via HTTP aanbieden

![Tweede FlowForce-service](/blog/images/flowforce-service2.png)

Laten we deze mapping gebruiken, die nu als een HTTP-service is geïmplementeerd, op de tweede pagina van de mobiele applicatie in MobileTogether Designer:

![Tweede pagina van de mobiele voorraad-app](/blog/images/app-page2.png)

Hier tonen we de eerder gekozen locatie en vragen we om de barcode en de hoeveelheid in te voeren. Wanneer op de knop "Hoeveelheid bijwerken" wordt geklikt, wordt de HTTP-service van de FlowForce Server aangeroepen:

![Een FlowForce-taak aanroepen via HTTP](/blog/images/flowforce-http-service.png)

Let op: de URL moet verwijzen naar de hostnaam van de FlowForce Server, tenzij de FlowForce Server en de MobileTogether Server op dezelfde machine draaien.

Het resultaat van de mutatie zullen we laten zien op de derde pagina van de mobiele applicatie

![Stap voor het bijwerken van de voorraad](/blog/images/updating-inventory.png)

...waarbij de knop "Doorgaan" ons terug zou brengen naar de tweede pagina, zodat we een nieuwe barcode en de hoeveelheid voor het volgende artikel in de voorraad kunnen invoeren.

Het volledige proces kan er als volgt uitzien.

Kies een locatie:

![Inventaris-app, stap 1](/blog/images/step1.png)

Voer de barcode en de hoeveelheid in (met behulp van een scanner): 

![Inventaris-app, stap 2](/blog/images/step2.png)

Bijwerken en bevestigen: 

![Inventaris-app, stap 3](/blog/images/step3.png)

## Wat volgt er?

Nu onze app voor het scannen van barcodes klaar is, zal deze [geïnstalleerd op de MobileTogether Server](https://www.altova.com/nl/data-platform) zodat het op mobiele apparaten kan worden gebruikt. De app werkt op mobiele apparaten die een ingebouwde hardware-barcodelezer hebben, waarmee barcodes kunnen worden gescand en ingevoerd met slechts één druk op de knop. MobileTogether ondersteunt ook [Draadloze barcodelezers voor extern gebruik](https://www.altova.com/nl/mobiletogether/mobile-scanner-apps#config) (zoals Zebra of Datalogic) die geïntegreerd kunnen worden in de workflow van de mobiele app.

De koppeling van MapForce met Shopify is beschikbaar in het MapForce Examples-project dat bij de software wordt geleverd (Shopify_UpdateInventory.mfd). U kunt uw eigen Shopify-winkelnaam en toegangstoken invoeren om het uit te proberen.


Alle Altova-producten die in dit voorbeeld worden gebruikt, zijn beschikbaar voor een [proefperiode](https://www.altova.com/nl/download), en MobileTogether Designer is een gratis product.