--- title: Aggiornare l'inventario di Shopify da un'app mobile date: 2025-04-01 categories: - data-integration - etl tags: - "#mapforce" description: Ecco un esempio pratico di come creare un'applicazione mobile per aggiornare l'inventario in un negozio Shopify, reso possibile grazie al supporto di GraphQL in MapForce. --- Status: #blog Tags: #mapforce #shopify Categories: [data-integration](/blog/it/category/data-integration.md) | [etl](/blog/it/category/etl.md) # Aggiornare l'inventario di Shopify da un'app mobile Uno dei vantaggi dell'utilizzo di Shopify come piattaforma di e-commerce è che offre funzionalità avanzate per la gestione dell'inventario. Tuttavia, mantenere registri accurati dell'inventario in tempo reale può essere difficile, soprattutto per i commercianti che si affidano all'inserimento manuale dei dati durante le verifiche dell'inventario o al rifornimento delle scorte. I lettori di codici a barre portatili sono un'ottima soluzione per aumentare la velocità e la precisione durante i controlli di inventario, ma spesso i proprietari di negozi non dispongono di un modo semplice per collegare direttamente i dati del lettore al sistema Shopify. Senza una corretta integrazione, il personale potrebbe ancora dover trasferire manualmente i dati scansionati in Shopify, vanificando parte dei vantaggi in termini di efficienza che i lettori di codici a barre dovrebbero offrire. Esaminiamo un caso pratico per la creazione di un'applicazione mobile con funzionalità di scansione di codici a barre, che si integra direttamente con Shopify per la gestione dell'inventario in tempo reale. ![Applicazione mobile per 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. Un modo efficace per mantenere l'accuratezza dell'inventario è attraverso controlli periodici o conteggi ciclici. Un'applicazione mobile che consente di aggiornare rapidamente la quantità disponibile per ogni variante di prodotto direttamente nel vostro negozio Shopify può semplificare questo processo, contribuendo ad aumentare la velocità e a ridurre i costi dei controlli manuali dell'inventario. Utilizzando i prodotti della piattaforma [Altova Data Platform](https://www.altova.com/it/data-platform), possiamo creare un processo automatizzato per raccogliere i dati dei codici a barre con uno scanner portatile e trasferirli in tempo reale a Shopify. ## Shopify e GraphQL Shopify ha adottato l'API GraphQL come standard per l'interazione con i dati esterni, sia per l'estrazione di dati per l'analisi, sia, nel nostro caso, per l'importazione di dati per la gestione dell'inventario. Per maggiori informazioni su come funzionano le API GraphQL di Shopify e su come connettersi ad esse, si prega di consultare il nostro articolo precedente [esportare dati da Shopify](/blog/it/2025/03/exporting-products-from-shopify-as-csv.md). ## Requisiti e progettazione di un'applicazione per la gestione dell'inventario per Shopify Il nostro flusso di lavoro utilizzerà diversi prodotti Altova che lavoreranno in sinergia: - MobileTogether Designer: per creare un'applicazione per la lettura di codici a barre - MobileTogether Server: per ospitare l'applicazione su dispositivi mobili - MapForce – per [collegare i dati dell'app a Shopify](https://www.altova.com/it/mapforce/convert-shopify-graphql) - MapForce Server: per eseguire le trasformazioni di dati su un server - FlowForce Server: per l'organizzazione dei flussi di lavoro e per rendere disponibili le mappature come servizi web Il processo di progettazione inizia in MobileTogether, il framework di sviluppo di applicazioni low-code di Altova, progettato per creare applicazioni incentrate sui dati. Il framework offre un supporto completo per la creazione di applicazioni che [memorizzano ed elaborano dati provenienti da scanner di codici a barre portatili](https://www.altova.com/it/mobiletogether/mobile-scanner-apps). Su Shopify, possono esserci molte [Prodotti](https://help.shopify.com/en/manual/products), e ogni prodotto potrebbe avere uno o più codici prodotto [Varianti](https://help.shopify.com/en/manual/products/variants). Internamente, ogni variante di prodotto ha esattamente una [Articolo di magazzino](https://shopify.dev/docs/api/admin-graphql/latest/objects/InventoryItem). Un articolo di magazzino può avere diverse [Livelli di inventario](https://shopify.dev/docs/api/admin-graphql/latest/objects/InventoryLevel): un livello di inventario per ciascuno [Posizione](https://shopify.dev/docs/api/admin-graphql/latest/objects/Location). E le "località" rappresentano una posizione geografica in cui un commerciante svolge la propria attività, come un negozio al dettaglio o un magazzino. Potete trovare maggiori informazioni sulla relazione tra questi elementi [qui](https://shopify.dev/docs/apps/build/orders-fulfillment/inventory-management-apps/manage-quantities-states#inventory-object-relationships). Pertanto, per aggiornare le quantità di una variante di prodotto, è necessario modificare (termine usato in GraphQL per indicare l'aggiornamento) i livelli di inventario per un determinato articolo di magazzino in una specifica località. Tenendo conto di questo, possiamo iniziare il flusso di lavoro della nostra applicazione in MobileTogether Designer chiedendo innanzitutto all'utente di selezionare la località in cui stiamo conteggiando gli articoli di magazzino: ![Avvio dell'applicazione di gestione dell'inventario di Shopify](/blog/images/shopify-location.png) Per popolare la tabella delle località per un negozio Shopify, utilizzeremo una mappatura MapForce per interrogare tutte le località. ![Scegliere le sedi di Shopify](/blog/images/shopify-locations.png) Ecco la query GraphQL che utilizzeremo nel componente di richiesta web Shopify/GraphQL che si trova a sinistra: `{`     `locations(first: 100) {`         `nodes {`             `id`             `name`         `}`     `}` `}` Successivamente, implementeremo questa mappatura su MapForce Server e utilizzeremo [FlowForce Server](https://www.altova.com/it/flowforceserver) per renderla disponibile come servizio web: ![Impostazioni del lavoro in FlowForce](/blog/images/flowforce-job.png) Non dimenticate di rendere disponibile questa funzionalità come servizio web tramite http(s): ![FlowForce come servizio web](/blog/images/flowforce-service-locations.png) Successivamente, aggiungete un nuovo processo FlowForce come nuova sorgente di dati per la prima pagina dell'applicazione in MobileTogether Designer. ![FlowForce in MobileTogether](/blog/images/flowforce-mobiletogether.png) Si prega di notare che l'URL dovrebbe puntare al nome host del server FlowForce, a meno che il server FlowForce e il server MobileTogether non siano eseguiti sulla stessa macchina, nel qual caso si può utilizzare "localhost". Inoltre, sebbene per il nostro esempio, che verrà eseguito su una macchina locale, utilizzeremo semplicemente "http:", è fondamentale utilizzare "https:" in qualsiasi ambiente di produzione per motivi di sicurezza. Ora, se testiamo la nostra applicazione nel simulatore di applicazioni MobileTogether [App Simulator](https://www.altova.com/it/mobiletogether/app-simulator), vedremo qualcosa di simile a questo: ![Applicazione per la gestione dell'inventario, in versione simulata](/blog/images/simulated-app.png) Una volta definita la posizione, configureremo la pagina successiva dell'applicazione per richiedere un codice a barre e una quantità, che verranno poi trasmessi alla successiva mappatura in MapForce. Questo aggiornerà la quantità disponibile dell'articolo corrispondente al codice a barre. ![Mappatura dei dati di Shopify](/blog/images/shopify-mapping.png) Qui, la prima chiamata al servizio web di Shopify, effettuata tramite GraphQL, viene utilizzata per recuperare l'ID dell'articolo corrispondente al codice a barre fornito `query ($query: String = null) {`     `productVariants(first: 1, query: $query) {`         `nodes {`             `id`             `barcode`             `inventoryItem {`                 `id`             `}`         `}`     `}` `}` E la seconda chiamata al servizio web di Shopify invia quindi la richiesta di modifica per aggiornare la quantità disponibile mutation InventorySet($input: InventorySetQuantitiesInput!) {     `inventorySetQuantities(input: $input) {`         `inventoryAdjustmentGroup {`             `createdAt`             `reason`             `referenceDocumentUri`             `changes {`                 `name`                 `delta`             `}`         `}`         `userErrors {`             `field`             `message`         `}`     `}` `}` La mappatura definita può quindi essere utilizzata in un secondo processo FlowForce: ![Parametri di lavoro di FlowForce per applicazioni mobili](/blog/images/FlowForce-job-parameters.png) Che possiamo poi rendere disponibile come servizio web tramite HTTP ![Secondo servizio FlowForce](/blog/images/flowforce-service2.png) Utilizziamo questa mappatura, che ora è disponibile come servizio HTTP, nella seconda pagina dell'applicazione mobile all'interno di MobileTogether Designer: ![Seconda pagina dell'applicazione mobile per la gestione dell'inventario](/blog/images/app-page2.png) Qui viene visualizzata la posizione precedentemente selezionata e viene richiesto di inserire il codice a barre e la quantità. L'evento "click" del pulsante "Aggiorna quantità" richiamerà il servizio HTTP del server FlowForce: ![Avviare un processo FlowForce tramite HTTP](/blog/images/flowforce-http-service.png) Si prega di notare nuovamente che l'URL deve puntare al nome host del server FlowForce, a meno che il server FlowForce e il server MobileTogether non siano eseguiti sulla stessa macchina. Il risultato della mutazione lo mostreremo nella terza pagina dell'applicazione mobile ![Passaggio di aggiornamento dell'inventario](/blog/images/updating-inventory.png) ...dove il pulsante "Continua" ci avrebbe riportati alla seconda pagina per inserire un nuovo codice a barre e la quantità relativa al successivo articolo da controllare nell'inventario. Il flusso di lavoro completo potrebbe essere il seguente. Scegliere la località: ![App per la gestione dell'inventario, passaggio 1](/blog/images/step1.png) Inserire il codice a barre e la quantità (tramite scanner): ![App per la gestione dell'inventario, passaggio 2](/blog/images/step2.png) Aggiorna e ricevi la conferma: ![App per la gestione dell'inventario, passaggio 3](/blog/images/step3.png) ## Cosa succederà ora? Ora che la nostra app per la scansione di codici a barre è pronta, essa sarà [distribuito sul server MobileTogether](https://www.altova.com/it/data-platform) in modo da poter essere utilizzata su dispositivi mobili. L'applicazione funzionerà su dispositivi mobili dotati di un lettore di codici a barre integrato, che consente di scansionare e inserire i codici a barre con la semplice pressione di un pulsante. MobileTogether supporta inoltre [Lettori di codici a barre wireless esterni](https://www.altova.com/it/mobiletogether/mobile-scanner-apps#config) (come Zebra o Datalogic) che possono essere integrati nel flusso di lavoro dell'applicazione mobile. La funzionalità di mappatura di MapForce per Shopify è disponibile nel progetto "MapForce Examples" incluso nel software (Shopify_UpdateInventory.mfd), e potete inserire il nome del vostro negozio Shopify e il token di accesso per provarla. Tutti i prodotti Altova utilizzati in questo esempio sono disponibili per una [prova gratuita](https://www.altova.com/it/download), e MobileTogether Designer è un prodotto gratuito.