Capacitor Ionic Food Barcode Scanner API Backend Guide

Ionic teams ship one codebase to iOS and Android with Capacitor. This guide covers Capacitor Ionic food barcode scanner API backend integration: scan a UPC, hit your proxy, return macros from Calorie API, and log the meal.

Stack Overview

Ionic UI → Capacitor Barcode Scanner → your API backend → Calorie API

Never embed the Calorie API key in environment.ts for production builds.

Step 1: Install Scanner Plugin

npm install @capacitor-mlkit/barcode-scanning
npx cap sync

Configure iOS camera usage description and Android camera permission.

Step 2: Angular Nutrition Service

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class NutritionService {
  private base = environment.apiBaseUrl;

  constructor(private http: HttpClient) {}

  searchFoods(q: string, limit = 15) {
    const params = new HttpParams().set('q', q).set('limit', limit);
    return this.http.get<{ results: FoodResult[] }>(`${this.base}/api/foods/search`, { params });
  }

  lookupBarcode(upc: string) {
    return this.http.get<FoodDetail>(`${this.base}/api/foods/barcode/${encodeURIComponent(upc)}`);
  }
}

environment.apiBaseUrl points to Next.js or Firebase.

Step 3: Barcode Scan Flow

import { BarcodeScanner } from '@capacitor-mlkit/barcode-scanning';

async function scanAndLookup(nutrition: NutritionService) {
  const { barcodes } = await BarcodeScanner.scan();
  const upc = barcodes[0]?.rawValue;
  if (!upc || !/^\d{8,14}$/.test(upc)) throw new Error('Invalid barcode');
  return nutrition.lookupBarcode(upc);
}

Step 4: Search Page With Debounce

Use RxJS debounceTime(300) on a FormControl for text search. Bind results to ion-list.

Step 5: Log Sheet UI

After scan or search:

1. Show food name and per-100g macros
2. ion-input for grams
3. Calculate scaled values client-side
4. Save to SQLite via @capacitor-community/sqlite or your backend

Backend Options for Ionic

All patterns documented in our backend proxy guide.

Production Checklist

• Proxy API key server-side
• Handle camera permission denials gracefully
• Fallback to manual search when barcode missing
• Test on real devices (simulators lack reliable scanning)

Related Guides

• Kotlin Android barcode example
• Flutter food database tutorial
• Integrate nutrition API Expo

Free API key | Docs