Skip to main content

ProGlove documentation

Building a Lightweight Inventory Check App with ProGlove, MQTT, and n8n (Part 2)

In our previous article, we explored how ProGlove devices can communicate via MQTT and how to route that data inton8nworkflows.

Now, we’re taking the next step: turning that integration into a small, fully functionalinventory check app- complete with user feedback on the MAI and data persistence via Google Sheets.

mqtt-mai-flow.png
User Flow and MAI Interaction

Before diving into the technical setup, let’s look at theuser flow and MAI interactionwe’re building toward:

The MAI screens are chosen to mirror the simplicity and legibility emphasized inProGlove’s UX guidelines. The Work3 layout provides structured data entry with two action buttons, while the T1 notification keeps follow-up messages short and unambiguous. Together, they create a natural, glanceable workflow that requires minimal cognitive effort.

This creates a closed feedback loop between worker, device, and system - every scan, input, and response travels through MQTT, while n8n orchestrates the logic and updates the shared Google Sheet.

  1. The worker scans an article barcode with their ProGlove MAI.

  2. The MAI displays aWork3 T3 screen, showing key information: product code, expected quantity, and storage location - this is ourChoose Item Flow.

    mqtt-Mai-Screen1.jpeg
  3. The worker can use thenum wheel inputto edit the quantity or use on-screen buttons to confirm or mark as unavailable.

    mqtt-mai-screen2.jpeg
  4. Once an action is taken, the devices sends an MQTT update that triggers the Confirm Quantity Flow in n8n.

  5. The MAI then provides immediatevisual and haptic feedbackand transitions to aNotification T1 screen, guiding the worker to the next item.

Google Sheets as a Lightweight Backend

To keep things simple, this demo uses aGoogle Sheetas a mock backend. It acts as a basic database that stores product IDs, locations, expected and confirmed quantities, and timestamps.

In a production environment, this would typically be replaced by anAPI endpointor a connection to a warehouse management system (WMS). For prototyping, though, the Sheet offers transparency, easy sharing, and instant visual feedback when rows are updated.

Product

Sequence

Storage Location

Quantity_expect

Quantity_Present

Date

4018877699

1

P-1001

2

2

2025-10-16T10:45:50

4003530160

2

P-0001

1

3

2025-10-16T10:46:16

4001686519

3

P-2004

5

15

2025-10-16T10:46:38

This backend connects directly to the n8n workflow, where each update from the MAI triggers changes to the sheet in real time.

Choose Item Flow

This flow starts when a worker scans a barcode.

  1. TheMQTT Triggerreceives an event withevent_type = scan.

  2. Theswitch noderoutes it to theChoose Itemlogic.

  3. n8n queries the Google Sheet for a matching product ID.

  4. Based on the result, we send one of several responses back to the MAI (via MQTT):

    • Product found:display aWork3 T3template - a structured layout optimized for short on-wrist reading. It contains fields forProduct,Location, andQuantity, with input enabled on the quantity field.

    • Already picked:issue anErrorFeedback(sound, LED, vibration) followed by aNOTIFICATION_ALREADY_DONEmessage using the T1 Notification template.

    • Not found:show a warningNOTIFICATION_NOT_FOUNDmessage with theWARNINGicon, also via the T1 Notification template.

This ensures the user always gets clear, immediate feedback aligned withProGlove’s UX guidelines: short, positive messages for success, and visual icons for status clarity.

Example of a display command in the workflow:

"event_type": "display_v2!",
"active_screen_view": "INVENTORY_ROW_{{ $json.row_number }}",
"screen_views": [{
  "pg_work3_t3": {
    "field_top": { "text_header": "Product", "text_content": "{{ $json.Product }}" },
    "field_bottom_right": { "text_header": "Location", "text_content": "{{ $json['Storage Location'] }}" },
    "field_bottom_left": {
      "text_header": "Quantity",
      "text_content": "{{ $json.Quantity_expected }}",
      "input_method": { "num_wheel": { "title": "Enter QTY" } }
    }
  }
}]

We usepg_work3_t3because it provides three clear data points (product, location, quantity) with space for numeric input - ideal for the confirmation task. To identify which process we are in, we set the reference id (ref id) to the row id of the selected product.

Confirm Quantity Flow

When the user enters or confirms a quantity on the MAI, a newMQTT eventis sent - either ascreen_event(for field input) orbutton_pressed(for user confirmation). The workflow uses this event to update the corresponding row in the Google Sheet.

  1. TheMQTT Triggerreceives the event, which includes ascreen_context.ref_ididentifying which screen (and therefore which inventory row) the user interacted with. We use thisref_idto determine which product entry in the sheet to update:

    const screen_ref_id = $('MQTT Trigger').first().json.message.screen_context.ref_id
    const row_number = screen_ref_id.replace("INVENTORY_ROW_", "")
    return_values['row_number'] = row_number

    This mapping makes the flow stateful - no external session storage is needed. Theref_iddirectly encodes which inventory line the user is confirming.

  2. TheCode nodeextracts the confirmed quantity from the message payload:

    varconfirmed_qty=$input.first().json.message.screen_context.screen_views_contexts[0].workflow.fields_contexts[1].text.content

    var confirmed_qty = $input.first().json.message.screen_context.screen_views_contexts[0].workflow.fields_contexts[1].text.content

    If the “Unavailable” button is pressed, quantity is set to0.

  3. TheGoogle Sheetsnode then updates the corresponding row using therow_numberas a key:

    "columns": {  "row_number": "={{ $json.row_number }}",  "Quantity_Present": "={{ $json.confirmed_quantity }}",  "Date": "={{ $json.date }}" }, "matchingColumns": ["row_number"]

    "columns": {
      "row_number": "={{ $json.row_number }}",
      "Quantity_Present": "={{ $json.confirmed_quantity }}",
      "Date": "={{ $json.date }}"
    },
    "matchingColumns": ["row_number"]
  4. Once the update is complete, the workflow providespositive feedbackvia MQTT:

    "feedback_action_id": "FEEDBACK_POSITIVE"

    "feedback_action_id": "FEEDBACK_POSITIVE"

    followed by aNOTIFICATION_NEXTmessage to guide the user to the next location:

    "pg_ntf_t1": {  "message": "Proceed to {{ $json['Storage Location'] }}",  "tagline": "Article Updated",  "icon": "SUCCESS" }

    "pg_ntf_t1": {
      "message": "Proceed to {{ $json['Storage Location'] }}",
      "tagline": "Article Updated",
      "icon": "SUCCESS"
    }

We use thepg_ntf_t1template here to show a concise, single-action screen - consistent withProGlove’s UX guidelinesfor transient, success-oriented states.

This approach ensures the right row is always updated, even in multi-device or concurrent use scenarios - the MAI’sref_idacts as a precise, lightweight state reference.

Wrapping Up

With this workflow, we’ve built a simple yet powerful prototype:

  • Full two-way interaction between MAI and backend logic via MQTT.

  • Real-time updates in a shared Google Sheet.

  • A guided user flow that adheres to ProGlove’s UX standards.

You can also download then8n flowto get started.