--- title: Actualización del inventario de Shopify desde una aplicación móvil date: 2025-04-01 categories: - data-integration - etl tags: - "#mapforce" description: Aquí tiene un ejemplo práctico de cómo crear una aplicación móvil para actualizar el inventario en una tienda Shopify, hecho posible gracias al soporte de GraphQL en MapForce. --- Status: #blog Tags: #mapforce #shopify Categories: [data-integration](/blog/es/category/data-integration.md) | [etl](/blog/es/category/etl.md) # Actualización del inventario de Shopify desde una aplicación móvil Una de las ventajas de utilizar Shopify como plataforma de comercio electrónico es que ofrece funciones robustas de gestión de inventario. Sin embargo, mantener registros de inventario precisos en tiempo real puede ser un desafío, especialmente para los comerciantes que dependen de la introducción manual de datos durante las auditorías de inventario o al reponer existencias. Los lectores de códigos de barras portátiles son una excelente solución para aumentar la velocidad y la precisión durante las revisiones de inventario, pero a menudo, los propietarios de tiendas carecen de una forma sencilla de conectar directamente los datos del escáner al sistema de Shopify. Sin una integración adecuada, el personal aún puede necesitar transferir manualmente los datos escaneados a Shopify, lo que anula parte de las mejoras de eficiencia que se supone que ofrecen los lectores de códigos de barras. Analicemos un caso práctico para desarrollar una aplicación móvil con funcionalidad de escaneo de códigos de barras que se integra directamente con Shopify para la gestión de inventario en tiempo real. ![Aplicación móvil para 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. Una forma eficaz de mantener la precisión del inventario es mediante auditorías periódicas o conteos cíclicos. Una aplicación móvil que le permita actualizar rápidamente la cantidad disponible de cada variante de producto directamente en su tienda de Shopify puede agilizar este proceso, ayudando a aumentar la velocidad y reducir el costo de las verificaciones manuales del inventario. Utilizando los productos de la plataforma [Altova Data Platform](https://www.altova.com/es/data-platform), podemos crear un flujo de trabajo para recopilar datos de códigos de barras con un escáner portátil y mapearlos a Shopify en tiempo real. ## Shopify y GraphQL Shopify ha adoptado la API de GraphQL como estándar para interactuar con datos externos, ya sea para extraer datos para análisis o, en nuestro caso, para importar datos para la gestión de inventario. Para obtener más información sobre cómo funcionan las API de GraphQL de Shopify y cómo conectarse a ellas, consulte nuestro artículo anterior sobre [la exportación de datos desde Shopify](/blog/es/2025/03/exporting-products-from-shopify-as-csv.md). ## Requisitos y diseño de una aplicación para la gestión de inventario en Shopify Nuestro flujo de trabajo utilizará varios productos de Altova que trabajarán en conjunto: - MobileTogether Designer: para crear una aplicación de escáner de códigos de barras - MobileTogether Server: para alojar la aplicación en dispositivos móviles - MapForce: para [mapear los datos de la aplicación con Shopify](https://www.altova.com/es/mapforce/convert-shopify-graphql) - MapForce Server: para ejecutar la transformación de datos en un servidor - FlowForce Server: para la orquestación de flujos de trabajo y para poner a disposición las configuraciones como servicios web El proceso de diseño comienza en MobileTogether, el entorno de desarrollo de aplicaciones de bajo código de Altova, diseñado para crear aplicaciones centradas en datos. Este entorno incluye un amplio soporte para la creación de aplicaciones que [almacenan y procesan datos provenientes de escáneres de códigos de barras portátiles](https://www.altova.com/es/mobiletogether/mobile-scanner-apps). En Shopify, puede haber muchos [productos](https://help.shopify.com/en/manual/products), y cada producto puede tener una o varias [variantes](https://help.shopify.com/en/manual/products/variants). Internamente, cada variante de producto tiene exactamente un [elemento de inventario](https://shopify.dev/docs/api/admin-graphql/latest/objects/InventoryItem). Un elemento de inventario puede tener múltiples [niveles de inventario](https://shopify.dev/docs/api/admin-graphql/latest/objects/InventoryLevel): un nivel de inventario por cada [ubicación](https://shopify.dev/docs/api/admin-graphql/latest/objects/Location). Y las ubicaciones representan una localización geográfica donde un comerciante realiza sus actividades, como una tienda minorista o un almacén. Puede encontrar más información sobre la relación entre estos elementos [aquí](https://shopify.dev/docs/apps/build/orders-fulfillment/inventory-management-apps/manage-quantities-states#inventory-object-relationships). Para actualizar las cantidades de una variante de producto, necesitamos modificar (término utilizado en GraphQL para referirse a la actualización) los niveles de inventario de un artículo específico en una ubicación determinada. Teniendo esto en cuenta, podemos comenzar el flujo de trabajo de nuestra aplicación en MobileTogether Designer pidiendo primero al usuario que seleccione la ubicación donde se están contando los artículos del inventario ![Inicio de la aplicación de gestión de inventario de Shopify](/blog/images/shopify-location.png) Para completar la tabla de ubicaciones de una tienda de Shopify, utilizaremos una herramienta de mapeo llamada MapForce para consultar todas las ubicaciones. ![Seleccionar ubicaciones para Shopify](/blog/images/shopify-locations.png) Aquí está la consulta GraphQL que utilizaremos en el componente de solicitud web de Shopify/GraphQL que se muestra a la izquierda: `{`     `locations(first: 100) {`         `nodes {`             `id`             `name`         `}`     `}` `}` A continuación, implementaremos esta configuración en el servidor MapForce y utilizaremos [FlowForce Server](https://www.altova.com/es/flowforceserver) para ponerla a disposición como un servicio web: ![Configuración de trabajos de FlowForce](/blog/images/flowforce-job.png) No olvide exponer esta funcionalidad como un servicio web a través de http(s): ![FlowForce como servicio web](/blog/images/flowforce-service-locations.png) A continuación, agregue un nuevo trabajo de FlowForce como una nueva fuente de página para la primera página de la aplicación en MobileTogether Designer. ![FlowForce en MobileTogether](/blog/images/flowforce-mobiletogether.png) Tenga en cuenta que la URL debe apuntar al nombre de host del servidor FlowForce, a menos que el servidor FlowForce y el servidor MobileTogether se ejecuten en la misma máquina, en cuyo caso "localhost" funcionará. Además, aunque para nuestro ejemplo, que se ejecuta en una máquina local, utilizaremos "http:", definitivamente debe utilizar "https:" en cualquier entorno de producción por motivos de seguridad. Ahora, si probamos nuestra aplicación en el simulador de aplicaciones MobileTogether [App Simulator](https://www.altova.com/es/mobiletogether/app-simulator), veremos algo similar a esto: ![Aplicación de gestión de inventario en un simulador](/blog/images/simulated-app.png) Una vez que se define la ubicación, configuraremos la siguiente página de la aplicación para solicitar un código de barras y una cantidad, que se enviarán a la siguiente etapa de mapeo en MapForce. Esto actualizará la cantidad disponible del artículo correspondiente al código de barras. ![Mapeo de datos de Shopify](/blog/images/shopify-mapping.png) Aquí, se utiliza la primera llamada a un servicio web de Shopify a través de GraphQL para buscar el ID del artículo correspondiente al código de barras proporcionado `query ($query: String = null) {`     `productVariants(first: 1, query: $query) {`         `nodes {`             `id`             `barcode`             `inventoryItem {`                 `id`             `}`         `}`     `}` `}` Y la segunda llamada al servicio web de Shopify envía entonces la modificación para actualizar la cantidad disponible mutación InventorySet(input: InventorySetQuantitiesInput!) {     `inventorySetQuantities(input: $input) {`         `inventoryAdjustmentGroup {`             `createdAt`             `reason`             `referenceDocumentUri`             `changes {`                 `name`                 `delta`             `}`         `}`         `userErrors {`             `field`             `message`         `}`     `}` `}` El esquema de mapeo implementado puede luego utilizarse en un segundo trabajo de FlowForce: ![Parámetros de configuración de FlowForce para aplicaciones móviles](/blog/images/FlowForce-job-parameters.png) Esto, a su vez, puede ser expuesto como un servicio web a través de HTTP ![Segundo servicio de FlowForce](/blog/images/flowforce-service2.png) Utilicemos esta configuración, que ahora se ofrece como un servicio HTTP, en la segunda página de la aplicación móvil dentro de MobileTogether Designer: ![Segunda página de la aplicación de inventario móvil](/blog/images/app-page2.png) Aquí se muestra la ubicación previamente seleccionada y se solicita ingresar el código de barras y la cantidad. Al hacer clic en el botón "Actualizar cantidad", se llamará al servicio HTTP de FlowForce Server: ![Llamar a un trabajo de FlowForce a través de HTTP](/blog/images/flowforce-http-service.png) Por favor, tenga en cuenta que la URL debe apuntar al nombre de host del servidor FlowForce, a menos que el servidor FlowForce y el servidor MobileTogether se ejecuten en la misma máquina. El resultado de la mutación lo mostraremos en la tercera página de la aplicación móvil.. ![Paso de actualización del inventario](/blog/images/updating-inventory.png) ...donde el botón "Continuar" nos devolvería a la segunda página para ingresar un nuevo código de barras y la cantidad correspondiente al siguiente artículo que se va a verificar en el inventario. El flujo de trabajo completo podría ser el siguiente. Seleccione la ubicación: ![Aplicación de inventario, paso 1](/blog/images/step1.png) Introduzca el código de barras y la cantidad (mediante el escáner): ![Aplicación de inventario, paso 2](/blog/images/step2.png) Actualizar y confirmar: ![Aplicación de inventario, paso 3](/blog/images/step3.png) ## ¿Y ahora? Ahora que nuestra aplicación de escaneo de códigos de barras está lista, se [implementará en el servidor MobileTogether](https://www.altova.com/es/data-platform) para que pueda ejecutarse en dispositivos móviles. La aplicación funcionará en dispositivos móviles que tengan un lector de códigos de barras integrado que pueda escanear e introducir códigos de barras con solo pulsar un botón. MobileTogether también es compatible con [lectores de códigos de barras inalámbricos externos](https://www.altova.com/es/mobiletogether/mobile-scanner-apps#config) (como los de Zebra o Datalogic) que pueden integrarse en el flujo de trabajo de la aplicación móvil. La función de mapeo de MapForce para Shopify está disponible en el proyecto de ejemplos de MapForce que se incluye con el software (Shopify_UpdateInventory.mfd), y puede ingresar el nombre de su propia tienda de Shopify y el token de acceso para probarla. Todos los productos de Altova utilizados en este ejemplo están disponibles para una.. [prueba gratuita](https://www.altova.com/es/download), Y MobileTogether Designer es un producto gratuito.