Ionic3+ firebase

FireBase推出最新的雲端資料庫的版本(cloud Firestore), 有別之前的RealTime的資料庫，更引進rxjs的oberserable和subscription的模式，讓程式更具有高彈性，我們就簡單的實作範例。

一、建立Colud Firestore

選擇下拉式選單è Cloud Firestore

二、引用firestore

安裝angularfire2  

npm install angularfire2 –save 

import { AngularFireModule } from 'angularfire2';

import {AngularFirestoreModule} from 'angularfire2/firestore';

新版的colud firestore的設定檔需要加上projectId

// AF2 Settings

export const firebaseConfig = {

  apiKey: "xxxxxxxxxxx",

  authDomain: "fiyy4.firebaseapp.com",

  databaseURL: "https://firstapp-xxxx.firebaseio.com",

  projectId: "fyyyy4",

  storageBucket: "firstyy.appspot.com",

  messagingSenderId: "1233456789"

};

注入AngularFireModule和AngularFirestoreModule

imports: [

    BrowserModule,

    IonicModule.forRoot(MyApp),

    AngularFireModule.initializeApp(firebaseConfig),

    AngularFirestoreModule

  ],

三、ProvideràMoney_service.ts建立CRUD的函式

AngularFirestoreCollection 用來取得資料列表(查詢)

AngularFirestoreDocument 用來允許編輯/刪除資料

Observable 用來取得資料陣列有更新的值

import { Observable } from 'rxjs/Observable';

import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';

宣告

valueChange: 傳回Json的物件，不具有metadata的屬性

export class MoneyServiceProvider {

  itemCollections: AngularFirestoreCollection<any>; //資料庫傳回值型態

  items: Observable<any[]>;

  constructor(public afs: AngularFirestore) {

    this.itemCollections = this.afs.collection('moneyCost', ref => ref.orderBy('costDate')); //取回資料庫moneyCost，並依日期排序

    this.items = this.itemCollections.valueChanges();//取回值

  }

新增

snapshotChanges:可以用來異動資料庫，本身具有metadata的屬性

  public add(item) {

    this.itemCollections.add(item);

    const listObservable = this.itemCollections.snapshotChanges()

  }

刪除

AngularFirestoreDocument:取回Firestore Collection 的物件

public remove(itemID) {

    const itemDoc: AngularFirestoreDocument<any> = this.afs.doc<any>('moneyCost/' + itemID);

    itemDoc.delete();

  }

List:取得id

  public list() {

    return this.itemCollections.snapshotChanges().map(actions => {

      return actions.map(a => {

        const data = a.payload.doc.data() as any;

        data.id = a.payload.doc.id;

        return data;

      });

    });

  }

整理陣列的資料 data[key]=[{},{}]

  public groupList(items:any[]){

    let total=0;

    const groupItem=[];

    items.forEach(eachObj => {

      if(groupItem[eachObj.costDate] == undefined){

        groupItem[eachObj.costDate]=[];

      }

total=+eachObj.cost;

groupItem[eachObj.costDate].push({key:eachObj.costDate,

value:eachObj,sum:total});

    });

    return groupItem;

  }

Reduce:累加器，會自動依序陣陣值取出作運算後，傳回最終結果

public getCostSum(items):Observable<number> {

    // return 1000;

    return items.map((items: any[]) => {

      return items.reduce((prev, curr: any) => {            

              return prev + Number(curr.cost);               

      }, 0);

  })}

四、建立Componentàmoney-list.ts

import { MoneyServiceProvider } from '../../providers/money-service/money-service';

import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';

宣告物件

interface money {

  productId: string;

  costDate: string;

  cost: number;

}

export class MoneyListComponent implements OnDestroy {

  private subscription: ISubscription;

  itemCollections: AngularFirestoreCollection<money>;

  items:any[];

  obserItem:Observable<any[]>;

  groupList: any[];

  sumCost: Number;

  constructor(public afs: AngularFirestore, public moneyService: MoneyServiceProvider) {

    this.obserItem= moneyService.list(); //取回資料

    this.obserItem.subscribe(x=>{

//將取回來的值放回到變數中，透過item 在畫面上呈現

      this.items=x;

      this.groupList =moneyService.groupList(this.items);

      this.doSum (this.items); //計算總合

    });

  }

}

//累加器，會自動傳回最後值的運算結果

doSum(items) {

    this.items.reduce((prev, curr: any) =>{

         return this.sumCost = prev + Number(curr.cost);

    } ,0);

  }

  doDelete(itemId: any) {

    this.moneyService.remove(itemId); //刪除document

  }

  ngOnDestroy() {

//解除訂閱

    this.obserItem.subscribe().unsubscribe();

  }

}

Component: money-list.html

建立group pipe 呈現複雜資料結構 data[key]=[{},{}]，轉換資料結構 [{key:1,value=data},{key:2,value=data}]

@Pipe({

  name: 'group',

})

export class GroupByPipe implements PipeTransform {

  transform(value: any, args: any[] = null): any {

    let keys = [];

    for (let key in value) {

      keys.push({ key: key, value: value[key] });

    }

    return keys;

  }

}

加上關鍵字group 就會將資料置換{key,value}

<ion-list>

        <ion-item-group *ngFor="let item of groupList|group">

                <ion-item-divider color="light">

                        <h3>

                                <font color=black>{{item.key|date}}</font>

                        </h3>

                </ion-item-divider>

                <ion-item *ngFor="let subItem of item.value">

                        <ion-row>

                                <ion-col col-lg-4>

                                   <font color=blue>{{subItem.value.productId}}</font>

                                </ion-col>

                                <ion-col col-lg-4>

                                <font>{{subItem.value.cost|currency}} </font>

                                </ion-col>

                                <ion-col col-lg-4>

                                        <button ion-button color="danger" small  round (click)="doDelete(subItem.value.id)">刪除</button>

                                </ion-col>

                        </ion-row>

                </ion-item>

        </ion-item-group>

       <h1><font color=red>總額<input type="hidden" [(ngModel)]="sumCost"> {{sumCost}}</font></h1>

     </ion-list>

範例如下

新增

 

列表

以上總結 Colud Firestore 可以讓資料傳回時，可先轉換資料型態/結構/運算值…等等，更具有彈性。