基于条码扫描结果的Firebase动态查询（Ionic 3 & Angularfire2）

Alright, let's walk through how to build this workflow—scanning an ISBN with a barcode scanner and pulling the matching book data from Firebase. I'll break this down into actionable steps with code examples that fit typical use cases:

The process boils down to three key steps:

• Capture the ISBN input from your barcode scanner
• Query Firebase using the scanned ISBN to fetch book data
• Display or process the retrieved book information

1. Capture ISBN Input from Barcode Scanner #

Most barcode scanners simulate keyboard input—they'll type the ISBN number and usually append an Enter key press when scanning is complete. Here's how to handle this in a web app (the logic translates easily to mobile too):

First, add a hidden input to catch the scan (so users don't interact with it directly):

<input type="text" id="isbn-scanner" style="position: absolute; opacity: 0;" />
<div id="book-display"></div>

Then listen for the scan completion (either via Enter key or by checking ISBN length):

const isbnInput = document.getElementById('isbn-scanner');
const bookDisplay = document.getElementById('book-display');

// Listen for Enter key (most scanners send this after scanning)
isbnInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    const rawIsbn = isbnInput.value.trim();
    const cleanedIsbn = rawIsbn.replace(/[^0-9X]/g, ''); // Remove spaces/hyphens, keep X for ISBN-10
    if (cleanedIsbn.length === 10 || cleanedIsbn.length === 13) {
      fetchBookData(cleanedIsbn);
      isbnInput.value = ''; // Reset for next scan
    }
  }
});

// Fallback: Listen for input length (for scanners that don't send Enter)
isbnInput.addEventListener('input', () => {
  const rawIsbn = isbnInput.value.trim();
  const cleanedIsbn = rawIsbn.replace(/[^0-9X]/g, '');
  if (cleanedIsbn.length === 10 || cleanedIsbn.length === 13) {
    fetchBookData(cleanedIsbn);
    isbnInput.value = '';
  }
});

2. Query Firebase for Book Data #

First, let's assume your Firebase Realtime Database is structured for efficient ISBN lookups—using the ISBN as the key for each book node (this is way faster than querying by a child field):

{
  "books": {
    "9781451648546": {
      "title": "Steve Jobs",
      "author": "Walter Isaacson",
      "publisher": "Simon & Schuster",
      "publicationYear": 2011
    },
    "9780743273565": {
      "title": "The Great Gatsby",
      "author": "F. Scott Fitzgerald",
      "publisher": "Scribner",
      "publicationYear": 1925
    }
  }
}

Here's how to fetch the book data using the cleaned ISBN:

// Initialize Firebase (replace with your project's config)
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DATABASE_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

firebase.initializeApp(firebaseConfig);
const db = firebase.database();

function fetchBookData(isbn) {
  // Directly access the book node using ISBN as the key
  db.ref(`books/${isbn}`).once('value')
    .then(snapshot => {
      const book = snapshot.val();
      if (book) {
        displayBook(book);
      } else {
        bookDisplay.innerHTML = `<p>No book found for ISBN: <strong>${isbn}</strong></p>`;
      }
    })
    .catch(error => {
      console.error('Error fetching book:', error);
      bookDisplay.innerHTML = `<p>Failed to load book data. Please try again.</p>`;
    });
}

3. Display the Book Data #

Once you have the book data, render it to your UI:

function displayBook(book) {
  bookDisplay.innerHTML = `
    <h2>${book.title}</h2>
    <p><strong>Author:</strong> ${book.author}</p>
    <p><strong>Publisher:</strong> ${book.publisher}</p>
    <p><strong>Published:</strong> ${book.publicationYear}</p>
  `;
}

Key Notes for Production #

• Database Security: Make sure your Firebase rules restrict access appropriately. For example, to allow public read access to books (adjust based on your needs):

  {
    "rules": {
      "books": {
        ".read": true,
        ".write": "auth != null" // Only authenticated users can add/edit books
      }
    }
  }
  

• ISBN Validation: Add extra checks (like verifying the ISBN checksum) to handle invalid scans.
• Mobile Adaptation: For iOS/Android, use a barcode scanning library (like ZXing for Android, or AVFoundation for iOS) to capture the ISBN, then use the Firebase SDK for your platform to fetch the data—the core logic (ISBN → Firebase lookup) stays the same.

内容的提问来源于stack exchange，提问作者Sam