Barcode Scanner

API Route: /barcode/{uid?}

Summary

This route handles GET requests to retrieve object data based on a unique barcode ID. If a valid uid parameter is provided, it queries an Elasticsearch index for matching objects. If found, it returns the object data formatted for display.

Endpoint

• URL: /barcode/{uid?}

Details

• Method: GET
• Path Parameter: uid (optional)
  • Description: The unique identifier of the barcode.
  • Validation: Must consist of alphanumeric characters only (A-Z, a-z, 0-9).

Request Handling

1. Input Validation: Checks if the uid contains only alphanumeric characters.

2. Query Execution:
   If uid is provided and valid:

   • Executes an Elasticsearch query on the ciim index.
   • Searches for matches in the barcode.value field.

3. Response Construction:
   If a matching record is found, the response includes:

   • Path: /objects/{id}/{slug-title}
   • Title: Item summary title
   • Image URL: Path to the item image
   • UID: Object's unique identifier
   • Description: Item description
   • Barcode ID: Retrieved barcode value

   Returns the above details in a JSON format for use in the frontend.

4. Fallback:
   If no uid is provided, the route serves a basic layout for a barcode scanner page, where users can enter or scan barcodes.

Example Response

{
  "path": "/objects/{id}/{slug-title}",
  "title": "Example Title",
  "image": "/media/path/to/image.jpg",
  "uid": "{id}",
  "description": "Detailed description of the item.",
  "barcodeId": "{barcode value}"
}

React Frontend Application

The frontend is a barcode scanner web app, utilizing React for UI management, the html5-qrcode library for barcode scanning, and React Context for state management. It provides UI elements to scan barcodes, display scan results, and manage scan history.

Key Components

• BarcodeProvider: Manages state across the app, such as scanned data.
• Home Component: Displays a button to initiate a scan and handles scan results.
• Scanner Component: Utilizes html5-qrcode for capturing barcode data.

Scanning Process

• The user initiates a scan by clicking a button.
• The html5-qrcode library scans for a barcode, retrieves the data, and triggers a search via the /barcode/{uid} API.
• The scan result is displayed, with options to view the object’s record, copy its link, or share it.