Как записать отсканированные данные qr-кода в базу данных Firebase Realtime в Ionic? - PullRequest
Новая
       19

Как записать отсканированные данные qr-кода в базу данных Firebase Realtime в Ionic?

0 голосов
/ 30 марта 2019

Я пытаюсь создать сканер штрих-кода с Ionic и Firebase.Сканер штрих-кода уже получает свои данные из базы данных в реальном времени в Firebase.Теперь я хотел бы сохранить отсканированные данные вкл.отметка времени в новой базе данных Firebase.

Это файл, в котором я получаю данные для каждого кода из firebase: data-service.service.ts 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';



@Injectable({
  providedIn: 'root' 
})
export class DataServiceService {

  constructor(private http: HttpClient) {  
     console.log('Hello DataServiceService Provider');

   }

       getProducts(){
      return this.http.get('https://mydbname.firebaseio.com/.json');
  }

 }

И это home.page.ts: 

import { Component } from '@angular/core';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
import { Toast } from '@ionic-native/toast/ngx';
import { DataServiceService } from '../../app/data-service.service';
import { NavController } from '@ionic/angular';
import * as firebase from 'Firebase';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  products: any[] = [];
  selectedProduct: any;
  productFound:boolean = false;
  router: any;

  constructor(public navCtrl: NavController,
    private barcodeScanner: BarcodeScanner,
    private toast: Toast,
    public dataService: DataServiceService) {

      this.dataService.getProducts()
      .subscribe((response)=> {
          this.products = <any[]><unknown>response;
          console.log(this.products);
      });
    }
    scan() {
      this.selectedProduct = {};
      this.barcodeScanner.scan().then((barcodeData) => {
        this.selectedProduct = this.products.find(product => product.plu === barcodeData.text);
        if(this.selectedProduct !== undefined) {
          this.selectedProduct.scannedAt = new Date(); // Added timestamp
          this.productFound = true;
        } else {
          this.productFound = false;
          this.toast.show(`Product not found`, '5000', 'center').subscribe(
            toast => {
              console.log(toast);
            }
          );
        }
      }, (err) => {
        this.toast.show(err, '5000', 'center').subscribe(
          toast => {
            console.log(toast);
          }
        );
      });
    }
}

home.page.html: 

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      TASK CHECKOUT
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>

                <ion-button color="success" shape="round" (click)="scan()">
                    <ion-icon name="ios-qr-scanner"></ion-icon>
                </ion-button>

    <ion-card *ngIf="productFound">
      <ion-card-header>
        <h2 color="success" >{{selectedProduct.name}}</h2>
      </ion-card-header>
      <ion-card-content>
        <ul>
          <li>{{selectedProduct.plu}}</li>
          <li>{{selectedProduct.price}}</li>
                <li>{{selectedProduct.desc}}</li>
                <li>{{selectedProduct.scannedAt | date: 'short'}}</li>
        </ul>
      </ion-card-content>
    </ion-card>
</ion-content>

У кого-нибудь есть идеи, как это реализовать?Заранее спасибо.:)

PS: я использовал это руководство для реализации сканера штрих-кода: https://www.djamware.com/post/59bb219f80aca768e4d2b13e/example-of-ionic-3-angular-4-cordova-barcode-and-qr-code-scanner

1 Ответ

1 голос
/ 30 марта 2019

Я рекомендую вам использовать AngularFire для получения данных из firebase и загрузки данных в firebase: Следуйте этому официальному учебнику от angularFire.

...