Barcode-Scanning in deine App einbauen

Warum Barcode-Scanning?

Barcode-Scanning ist das Killer-Feature von Ernährungs-Apps. Nutzer halten ihr Handy auf ein Produkt und sehen sofort Kalorien, Makros und Zutaten. Mit 6,1 Millionen Produkten in unserer Datenbank — darunter 4,1 Millionen mit Barcodes aus Open Food Facts — erkennt deine App die meisten Produkte in Supermarktregalen weltweit.

So funktionieren Barcodes

Die meisten Lebensmittel nutzen eines von zwei Barcode-Formaten:

• EAN-13 (13 Ziffern) — weltweit verbreitet, besonders in Europa, Asien und Australien
• UPC-A (12 Ziffern) — vor allem in Nordamerika

Unsere API akzeptiert beide Formate. Übergib einfach den numerischen Code an den Barcode-Endpunkt:

curl "https://foodbase.dev/v1/foods/barcode/5449000000996" \
  -H "X-API-Key: food_your_key_here"

Die richtige Scanner-Bibliothek

Web-Apps (kamerabasiert)

Für Web-Apps können ZXing oder QuaggaJS Barcodes aus einem Videostream lesen:

// Using html5-qrcode (lightweight, well-maintained)
import { Html5QrcodeScanner } from "html5-qrcode";

const scanner = new Html5QrcodeScanner("reader", {
  fps: 10,
  qrbox: { width: 250, height: 250 },
});

scanner.render(async (barcode) => {
  scanner.clear();
  const product = await lookupBarcode(barcode);
  if (product) {
    displayProduct(product);
  } else {
    showNotFound(barcode);
  }
});

React Native / Mobile

Für React Native nimmst du react-native-camera oder expo-barcode-scanner:

import { BarCodeScanner } from "expo-barcode-scanner";

function Scanner() {
  const handleScan = async ({ data }) => {
    const product = await lookupBarcode(data);
    // Navigate to product detail screen
  };

  return <BarCodeScanner onBarCodeScanned={handleScan} />;
}

Natives iOS/Android

• iOS: AVCaptureMetadataOutput aus AVFoundation für die eingebaute Barcode-Erkennung
• Android: die Barcode Scanning API aus Googles ML Kit

Die Lookup-Funktion

Hier ist die API-Integration, die mit jedem Scanner funktioniert:

const API_KEY = "food_your_key_here";

async function lookupBarcode(barcode) {
  const res = await fetch(
    `https://foodbase.dev/v1/foods/barcode/${barcode}`,
    { headers: { "X-API-Key": API_KEY } }
  );

  if (res.status === 404) return null; // Product not found
  if (!res.ok) throw new Error(`API error: ${res.status}`);

  return res.json();
}

Was zurückkommt

Ein erfolgreicher Barcode-Lookup liefert das vollständige Produkt mit Nährwertübersicht:

{
  "name_default": "Original Taste",
  "brand": "Coca-Cola",
  "barcode": "5449000000996",
  "nutriscore": "e",
  "nova_group": 4,
  "image_url": "https://images.openfoodfacts.org/...",
  "nutrition_summary": {
    "energy_kcal": 42,
    "proteins_g": 0,
    "carbs_g": 10.6,
    "fat_g": 0,
    "sugars_g": 10.6,
    "fiber_g": null
  },
  "allergens": null,
  "ingredients": [
    {"lang": "en", "text": "carbonated water, sugar, colour..."}
  ]
}

Wenn ein Produkt nicht gefunden wird

Manche Scans finden keinen Treffer — meistens bei lokalen oder regionalen Marken. Bewährte Vorgehensweisen:

1. Zeig eine klare Meldung — „Produkt nicht in unserer Datenbank gefunden“
2. Biete die Suche nach Namen als Alternative an
3. Cache gefundene Produkte lokal, damit wiederholte Scans sofort ein Ergebnis liefern
4. Erlaube die manuelle Eingabe für Produkte, die in keiner Datenbank stehen

Kein Barcode? Nimm ein Foto

Zwei zusätzliche Optionen, wenn der Barcode-Weg in einer Sackgasse endet — beide laufen über KI-Credits (jeder Plan enthält ein Kontingent):

• POST /v1/vision/barcode dekodiert den Barcode aus einem Foto — ganz ohne Scanner-Bibliothek. Das ist reines Computer Vision (0 Credits, wird über dein Tageskontingent abgerechnet) und liefert direkt das passende Produkt.
• POST /v1/vision/product erkennt ein Produkt anhand eines Fotos der Packungsvorderseite und liefert bewertete Katalogtreffer — der Rettungsweg bei beschädigten oder fehlenden Barcodes.

async function lookupByPhoto(file) {
  const form = new FormData();
  form.append("image", file);
  const res = await fetch("https://foodbase.dev/v1/vision/product", {
    method: "POST",
    headers: { "X-API-Key": API_KEY },
    body: form,
  });
  if (!res.ok) return null;
  const { matches } = await res.json();
  return matches[0]?.product ?? null; // matches are score-ranked
}

Beide kannst du im Browser im Foto-Playground ausprobieren.

Tipps für die Performance

• Cache Lookups lokal — Produktdaten ändern sich selten, gefundene Produkte kannst du also lange clientseitig zwischenspeichern
• Debounce die Scanner-Callbacks — manche Bibliotheken feuern für denselben Barcode mehrmals
• Lade häufige Produkte vorab — wenn du das Einkaufsverhalten deiner Nutzer kennst, lädst du sie mit dem Bulk-Endpunkt vor

Hinweise zur Abdeckung

Die Barcode-Abdeckung folgt den zugrunde liegenden Daten: am stärksten bei Produkten, die in Europa und Nordamerika verkauft werden, dünner bei regionalen Marken anderswo — und sie wird laufend besser, weil neue Produkte hinzukommen. Statt einer statischen Abdeckungstabelle zu vertrauen, teste mit den Produkten, die deine Nutzer tatsächlich scannen: Füg einen Barcode in den Produkt-Explorer ein und sieh sofort, ob er gefunden wird.

Leg los mit Barcode-Scanning — Barcode-Lookups sind im Free-Plan enthalten.