如何在Ionic中将扫描的二维码数据写入Firebase实时数据库？

我来帮你搞定这个需求！你已经完成了扫码匹配产品的核心功能，现在只需要把带时间戳的扫描记录存入Firebase就可以了，步骤很清晰，咱们一步步来：

1. 确认Firebase初始化配置 #

首先确保你的Ionic项目已经正确初始化了Firebase（既然你已经能读取数据，这一步应该已经完成了，但还是提个醒）—— 一般会在app.module.ts或者单独的firebase.config.ts文件里有类似这样的初始化代码：

import * as firebase from 'firebase';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DATABASE_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

firebase.initializeApp(firebaseConfig);

2. 添加扫描记录写入逻辑 #

你已经在扫码成功时给selectedProduct加上了scannedAt时间戳，现在只需要把这条记录写入Firebase的新节点（比如叫scannedProducts）即可，有两种方式实现：

方式一：直接在HomePage中写入 #

修改home.page.ts里的scan()方法，在this.productFound = true;后面添加写入代码：

// 写入到Firebase的scannedProducts节点，push会自动生成唯一ID
firebase.database().ref('scannedProducts').push({
  name: this.selectedProduct.name,
  plu: this.selectedProduct.plu,
  price: this.selectedProduct.price,
  desc: this.selectedProduct.desc,
  scannedAt: this.selectedProduct.scannedAt.toISOString() // 转成ISO格式时间，Firebase更易处理
})
.then(() => {
  // 提示用户保存成功
  this.toast.show('扫描记录已保存', '3000', 'center').subscribe(toast => {
    console.log(toast);
  });
})
.catch(err => {
  // 提示保存失败
  this.toast.show(`保存失败: ${err.message}`, '5000', 'center').subscribe(toast => {
    console.log(toast);
  });
});

方式二：封装到DataService中（更模块化） #

如果想让代码更整洁，推荐把数据库写入逻辑放到DataService里：
修改data-service.service.ts，添加一个保存扫描记录的方法：

import * as firebase from 'firebase';

// ... 其他代码 ...

saveScannedProduct(product: any) {
  return firebase.database().ref('scannedProducts').push({
    name: product.name,
    plu: product.plu,
    price: product.price,
    desc: product.desc,
    scannedAt: product.scannedAt.toISOString()
  });
}

然后在home.page.ts的scan()方法里调用这个服务：

// ... 找到产品后 ...
this.productFound = true;

// 调用DataService保存记录
this.dataService.saveScannedProduct(this.selectedProduct)
.then(() => {
  this.toast.show('扫描记录已保存', '3000', 'center').subscribe(toast => {
    console.log(toast);
  });
})
.catch(err => {
  this.toast.show(`保存失败: ${err.message}`, '5000', 'center').subscribe(toast => {
    console.log(toast);
  });
});

3. 配置Firebase数据库规则 #

为了能正常写入数据，需要确保Firebase实时数据库的规则允许写入（测试阶段可以先放开，生产环境一定要改安全规则）：
登录Firebase控制台，找到你的项目 → 数据库 → 规则，修改为：

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

生产环境建议改成仅允许认证用户读写，比如：

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

4. 测试功能 #

现在运行你的Ionic项目，扫码一个已存在的产品，之后去Firebase控制台的实时数据库里查看scannedProducts节点，就能看到带时间戳的扫描记录啦！

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