---
title: Aktualizacja stanów magazynowych w Shopify za pomocą aplikacji mobilnej
date: 2025-04-01
categories:
  - data-integration
  - etl
tags:
  - "#mapforce"
description: Zapoznaj się z tym przykładem z życia wziętym, pokazującym, jak stworzyć aplikację mobilną do aktualizacji stanów magazynowych w sklepie Shopify, co jest możliwe dzięki wsparciu GraphQL w programie MapForce.
---
Status: #blog

Tags:  #mapforce #shopify

Categories: [data-integration](/blog/pl/category/data-integration.md) | [etl](/blog/pl/category/etl.md) 
# Aktualizacja stanów magazynowych w Shopify za pomocą aplikacji mobilnej

Jedną z zalet korzystania z platformy Shopify jako narzędzia do e-commerce jest to, że oferuje ona zaawansowane funkcje zarządzania zapasami. Jednak utrzymanie dokładnych danych o stanie zapasów w czasie rzeczywistym może być trudne, zwłaszcza dla sprzedawców, którzy polegają na ręcznym wprowadzaniu danych podczas kontroli zapasów lub uzupełnianiu towarów.

Przenośne skanery kodów kreskowych to doskonałe rozwiązanie, które pozwala zwiększyć szybkość i dokładność podczas kontroli zapasów, jednak właściciele sklepów często nie mają prostego sposobu na bezpośrednie połączenie danych ze skanera z systemem Shopify. Bez odpowiedniej integracji, pracownicy nadal mogą być zmuszeni do ręcznego wprowadzania zeskanowanych danych do Shopify, co niweluje część korzyści, jakie skanery kodów kreskowych mają zapewnić.

Przyjrzyjmy się realnemu przykładowi tworzenia aplikacji mobilnej z funkcją skanowania kodów kreskowych, która bezpośrednio integruje się z platformą Shopify, umożliwiając zarządzanie zapasami w czasie rzeczywistym.
![Aplikacja mobilna dla 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.

Skutecznym sposobem na utrzymanie dokładności stanów magazynowych jest przeprowadzanie regularnych kontroli zapasów lub liczenia cyklicznego. Aplikacja mobilna, która umożliwia szybką aktualizację ilości dostępnych dla każdego wariantu produktu bezpośrednio w sklepie Shopify, może usprawnić ten proces, pomagając zwiększyć szybkość i zmniejszyć koszty ręcznych kontroli zapasów.

Korzystając z produktów platformy [Altova Data Platform](https://www.altova.com/pl/data-platform), możemy stworzyć proces automatyzacji (workflow) do zbierania danych z kodów kreskowych za pomocą skanera przenośnego i przesyłania ich do systemu Shopify w czasie rzeczywistym.
## Shopify i GraphQL 

Shopify wprowadziło standardową interakcję z zewnętrznymi danymi za pomocą API GraphQL, niezależnie od tego, czy chodzi o pobieranie danych do analizy, czy, w naszym przypadku, import danych do zarządzania zapasami. Aby dowiedzieć się więcej o tym, jak działają API GraphQL firmy Shopify i jak się do nich podłączyć, prosimy zapoznać się z naszym poprzednim artykułem na temat [eksportu danych z Shopify](/blog/pl/2025/03/exporting-products-from-shopify-as-csv.md).
## Wymagania i projekt aplikacji do zarządzania zapasami w Shopify

Nasz proces pracy będzie wykorzystywał szereg produktów firmy Altova, które będą ze sobą współpracować:

- MobileTogether Designer – narzędzie do tworzenia aplikacji do skanowania kodów kreskowych
- Serwer MobileTogether – służy do hostowania aplikacji dla urządzeń mobilnych
- MapForce – dla [mapowanie danych z aplikacji na platformę Shopify](https://www.altova.com/pl/mapforce/convert-shopify-graphql)
- MapForce Server – do wykonywania transformacji danych na serwerze
- FlowForce Server – do zarządzania przepływami pracy i udostępniania mapowań jako usług internetowych

Proces projektowania rozpoczyna się w MobileTogether, platformie niskokodowej do tworzenia aplikacji firmy Altova, przeznaczonej do budowania aplikacji opartych na danych. Platforma oferuje kompleksowe wsparcie w tworzeniu aplikacji, które [przechowują i przetwarzają dane z przenośnych skanerów kodów kreskowych](https://www.altova.com/pl/mobiletogether/mobile-scanner-apps).

W Shopify może być wiele [Produkty](https://help.shopify.com/en/manual/products), i każdy produkt może mieć jeden lub wiele wariantów [Warianty](https://help.shopify.com/en/manual/products/variants). Wewnątrz systemu, każda wariant produktu ma dokładnie jeden [Pozycja magazynowa](https://shopify.dev/docs/api/admin-graphql/latest/objects/InventoryItem). Pozycja w magazynie może mieć wiele [Poziomy zapasów](https://shopify.dev/docs/api/admin-graphql/latest/objects/InventoryLevel): po jednym poziomie zapasów dla każdego [Lokalizacja](https://shopify.dev/docs/api/admin-graphql/latest/objects/Location). Lokalizacje reprezentują geograficzne miejsce, w którym przedsiębiorca prowadzi działalność, takie jak sklep detaliczny lub magazyn. Więcej informacji na temat relacji między tymi obiektami można znaleźć [tutaj/w dokumentacji] [tutaj](https://shopify.dev/docs/apps/build/orders-fulfillment/inventory-management-apps/manage-quantities-states#inventory-object-relationships).

Aby zaktualizować ilość konkretnej wariacji produktu, musimy zmodyfikować (używając terminologii GraphQL, oznacza to aktualizację) poziom zapasów dla konkretnego produktu w określonej lokalizacji. Mając to na uwadze, możemy rozpocząć przepływ pracy naszej aplikacji w programie MobileTogether Designer, najpierw prosząc użytkownika o wybranie lokalizacji, w której liczymy zapasy:

![Rozpoczęcie korzystania z aplikacji do zarządzania zapasami w Shopify](/blog/images/shopify-location.png)


Aby wypełnić tabelę lokalizacji dla sklepu Shopify, wykorzystamy mapowanie w programie MapForce, które pozwoli na pobranie danych o wszystkich lokalizacjach.

![Wybór lokalizacji dla sklepu Shopify](/blog/images/shopify-locations.png)

Oto zapytanie GraphQL, które będziemy używać w komponencie żądań HTTP GraphQL w Shopify, znajdującym się po lewej stronie:

`{`

    `locations(first: 100) {`

        `nodes {`

            `id`

            `name`

        `}`

    `}`

`}`

Następnie, wdrożymy tę mapę na serwerze MapForce i wykorzystamy serwer [FlowForce](https://www.altova.com/pl/flowforceserver), aby udostępnić ją jako usługę internetową:

![Ustawienia pracy FlowForce](/blog/images/flowforce-job.png)

Pamiętaj, aby udostępnić tę funkcjonalność jako usługę internetową za pomocą protokołu http(s):

![FlowForce jako usługa internetowa](/blog/images/flowforce-service-locations.png)

Następnie, w programie MobileTogether Designer, dodaj nowe zadanie FlowForce, które będzie stanowić źródło danych dla pierwszej strony aplikacji. 

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

Proszę zwrócić uwagę, że adres URL powinien wskazywać na nazwę hosta serwera FlowForce, chyba że serwer FlowForce i serwer MobileTogether działają na tym samym komputerze, w takim przypadku można użyć adresu "localhost". Ponadto, chociaż w naszym przykładzie, działającym na lokalnym komputerze, używamy protokołu http, w każdym środowisku produkcyjnym zdecydowanie należy używać protokołu https ze względów bezpieczeństwa.

Teraz, jeśli przetestujemy naszą aplikację w symulatorze aplikacji MobileTogether [App Simulator](https://www.altova.com/pl/mobiletogether/app-simulator), zobaczymy coś takiego:

![Aplikacja do zarządzania zapasami w środowisku symulacyjnym](/blog/images/simulated-app.png)

Po zdefiniowaniu lokalizacji, następny ekran w aplikacji poprosi o podanie kodu kreskowego oraz ilości, które zostaną przekazane do kolejnego etapu mapowania w MapForce. Dzięki temu zostanie zaktualizowana dostępna ilość danego produktu, odpowiadająca podanemu kodowi kreskowemu.


![Mapowanie danych w Shopify](/blog/images/shopify-mapping.png)

W tym miejscu, pierwsze wywołanie usługi webowej Shopify za pomocą GraphQL służy do wyszukania identyfikatora produktu na podstawie podanego kodu kreskowego

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

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

        `nodes {`

            `id`

            `barcode`

            `inventoryItem {`

                `id`

            `}`

        `}`

    `}`

`}`

Następnie, drugie wywołanie usługi webowej Shopify wysyła zapytanie modyfikujące, które aktualizuje dostępną ilość produktu

mutacja InventorySet($input: InventorySetQuantitiesInput!) {

    `inventorySetQuantities(input: $input) {`

        `inventoryAdjustmentGroup {`

            `createdAt`

            `reason`

            `referenceDocumentUri`

            `changes {`

                `name`

                `delta`

            `}`

        `}`

        `userErrors {`

            `field`

            `message`

        `}`

    `}`

`}`

Następnie, utworzoną mapę można wykorzystać w kolejnym zadaniu FlowForce:

![Parametry pracy FlowForce dla aplikacji mobilnych](/blog/images/FlowForce-job-parameters.png)

To, co uzyskamy, możemy następnie udostępnić jako usługę internetową poprzez protokół HTTP

![Druga usługa FlowForce](/blog/images/flowforce-service2.png)

Wykorzystajmy tę mapę, która jest obecnie dostępna jako usługa HTTP na drugiej stronie aplikacji mobilnej w programie MobileTogether Designer:

![Druga strona aplikacji do zarządzania zapasami mobilnymi](/blog/images/app-page2.png)

W tym miejscu wyświetlana jest wcześniej wybrana lokalizacja, a użytkownik jest proszony o wprowadzenie kodu kreskowego oraz ilości. Kliknięcie przycisku "Aktualizuj ilość" spowoduje wywołanie usługi HTTP serwera FlowForce:

![Wywoływanie zadania FlowForce za pomocą protokołu HTTP](/blog/images/flowforce-http-service.png)

Proszę pamiętać, że adres URL powinien wskazywać na nazwę hosta serwera FlowForce, chyba że serwer FlowForce i serwer MobileTogether działają na tym samym komputerze.

Wynik mutacji pokażemy na trzeciej stronie aplikacji mobilnej…

![Krok aktualizacji zapasów](/blog/images/updating-inventory.png)

...gdzie przycisk "Dalej" przenosiłby nas z powrotem do drugiej strony, abyśmy mogli wprowadzić nowy kod kreskowy i ilość dla kolejnego produktu, który ma być sprawdzony podczas inwentaryzacji.

Pełny proces może wyglądać następująco.

Wybierz lokalizację:

![Aplikacja do zarządzania zapasami, krok 1](/blog/images/step1.png)

Wprowadź kod kreskowy i ilość (za pomocą skanera): 

![Aplikacja do zarządzania zapasami, krok 2](/blog/images/step2.png)

Aktualizacja i potwierdzenie: 

![Krok 3 aplikacji do zarządzania zapasami](/blog/images/step3.png)

## Co dalej?

Teraz, gdy nasza aplikacja do skanowania kodów kreskowych jest gotowa, będzie ona [wdrożony do serwera MobileTogether](https://www.altova.com/pl/data-platform) umożliwia to jego działanie na urządzeniach mobilnych. Aplikacja będzie działać na urządzeniach mobilnych wyposażonych w wbudowany czytnik kodów kreskowych, który umożliwia skanowanie i wprowadzanie kodów kreskowych za pomocą jednego przycisku. MobileTogether obsługuje również [zewnętrzne, bezprzewodowe czytniki kodów kreskowych](https://www.altova.com/pl/mobiletogether/mobile-scanner-apps#config) (takie jak Zebra lub Datalogic), które można zintegrować z procesem działania aplikacji mobilnej.

Mapowanie danych do platformy Shopify jest dostępne w projekcie MapForce Examples, który jest dołączony do oprogramowania (plik Shopify_UpdateInventory.mfd). Można w nim wprowadzić nazwę własnego sklepu Shopify oraz token dostępu, aby przetestować jego działanie.


Wszystkie produkty firmy Altova użyte w tym przykładzie są dostępne na licencji [Bezpłatny okres próbny](https://www.altova.com/pl/download), Aplikacja MobileTogether Designer jest dostępna bezpłatnie.