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.
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, 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.
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
- 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.
W Shopify może być wiele Produkty, i każdy produkt może mieć jeden lub wiele wariantów Warianty. Wewnątrz systemu, każda wariant produktu ma dokładnie jeden Pozycja magazynowa. Pozycja w magazynie może mieć wiele Poziomy zapasów: po jednym poziomie zapasów dla każdego Lokalizacja. 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.
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:
Aby wypełnić tabelę lokalizacji dla sklepu Shopify, wykorzystamy mapowanie w programie MapForce, które pozwoli na pobranie danych o wszystkich lokalizacjach.
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, aby udostępnić ją jako usługę internetową:
Pamiętaj, aby udostępnić tę funkcjonalność jako usługę internetową za pomocą protokołu http(s):
Następnie, w programie MobileTogether Designer, dodaj nowe zadanie FlowForce, które będzie stanowić źródło danych dla pierwszej strony aplikacji.
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, zobaczymy coś takiego:
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.
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:
To, co uzyskamy, możemy następnie udostępnić jako usługę internetową poprzez protokół HTTP
Wykorzystajmy tę mapę, która jest obecnie dostępna jako usługa HTTP na drugiej stronie aplikacji mobilnej w programie MobileTogether Designer:
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:
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…
...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ę:
Wprowadź kod kreskowy i ilość (za pomocą skanera):
Aktualizacja i potwierdzenie:
Co dalej?
Teraz, gdy nasza aplikacja do skanowania kodów kreskowych jest gotowa, będzie ona wdrożony do serwera MobileTogether 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 (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, Aplikacja MobileTogether Designer jest dostępna bezpłatnie.