Как да добавиш сканиране на баркодове в приложението си

Защо сканиране на баркодове?

Сканирането на баркодове е убийствената функция на приложенията за хранене. Потребителят насочва телефона към продукт и веднага вижда калории, макроси и съставки. С 6,1 милиона продукта в базата ни — от които 4,1 милиона с баркодове от Open Food Facts — приложението ти ще разпознава повечето продукти по рафтовете на магазините по света.

Как работят баркодовете

Повечето хранителни продукти използват един от два формата на баркод:

• EAN-13 (13 цифри) — използва се по целия свят, особено в Европа, Азия и Австралия
• UPC-A (12 цифри) — използва се главно в Северна Америка

Нашият API приема и двата формата. Просто подай числовия код на баркод ендпойнта:

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

Избор на библиотека за сканиране

Уеб приложения (с камера)

За уеб приложения ZXing или QuaggaJS могат да четат баркодове от видео поток:

// 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 / мобилни

За React Native използвай react-native-camera или 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} />;
}

Нативни iOS/Android

• iOS: използвай AVCaptureMetadataOutput от AVFoundation за вграденото разпознаване на баркодове
• Android: използвай Barcode Scanning API от ML Kit на Google

Функцията за търсене

Ето интеграцията с API-то, която работи с всеки скенер:

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();
}

Какво получаваш обратно

Успешното търсене по баркод връща пълния продукт с обобщение на хранителните стойности:

{
  "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..."}
  ]
}

Когато продуктът не е намерен

Някои сканирания няма да намерят съвпадение — най-често при местни или регионални марки. Добри практики:

1. Покажи ясно съобщение — „Продуктът не е намерен в нашата база данни“
2. Позволи търсене по име като резервен вариант
3. Кеширай намерените продукти локално, за да са мигновени повторните сканирания
4. Позволи ръчно въвеждане за продукти, които ги няма в никоя база данни

Няма баркод? Използвай снимка

Две допълнителни възможности, когато пътят през баркода стигне до задънена улица — и двете работят с AI кредити (всеки план включва лимит):

• POST /v1/vision/barcode декодира баркода от снимка — изобщо без библиотека за сканиране. Това е чисто компютърно зрение (0 кредита, отчита се в дневната ти квота) и директно връща съвпадащия продукт.
• POST /v1/vision/product разпознава продукт по снимка на предната страна на опаковката и връща оценени съвпадения от каталога — спасителният вариант при повредени или липсващи баркодове.

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
}

И двете можеш да пробваш в браузъра във фото playground-а.

Съвети за производителност

• Кеширай търсенията локално — данните за продуктите се променят рядко, така че намерените продукти могат да се кешират дълго от страна на клиента
• Добави debounce на callback-ите на скенера — някои библиотеки се задействат по няколко пъти за един и същ баркод
• Зареди предварително често срещаните продукти — ако познаваш навиците на потребителите си при пазаруване, използвай bulk ендпойнта, за да ги заредиш предварително

Бележки за покритието

Покритието на баркодовете следва данните под тях: най-силно е за продукти, продавани в Европа и Северна Америка, по-слабо за регионални марки другаде — и постоянно се подобрява с добавянето на нови продукти. Вместо да се доверяваш на статична таблица с покритие, тествай с продуктите, които твоите потребители реално сканират: постави баркод в Product Explorer и веднага ще видиш дали се намира.

Започни със сканирането на баркодове — търсенето по баркод е включено в безплатния план.