Ionic Tutorial

export interface Place {
    id: string;         // id
    title: string;      // 景點名稱
    address?: string;   // 地址
    location: {
        lat: number;    // 緯度
        lng: number;    // 經度
    };
    intro?: string;     // 景點介紹
｝

import { Observable } from 'rxjs';
import { Place, PlaceID } from './place';

export interface PlaceDAO {
    // methods: 必須提供的功能
    createPlace(p: Place): Promise<any>;
    removePlace(id: string): Promise<any>;
    updatePlace(id: string, data: any): Promise<any>;
    queryPlaceById(id: string): Observable<Place> ; // 回傳Place型別的資料
    getAllPlaces(): Observable<PlaceID[]>;    // 回傳所有景點
}

import { Injectable } from '@angular/core';
// ...[省略]...
export class PlaceService implements PlaceDAO {
  // 第一部分：表單與欄位設定
  form: any; // 景點表單：暫存表單資料用

  constructor(private fs: AngularFirestore, private builder: FormBuilder) {
      this.form = this.builder.group({/*設定「新增/修改」表單所需欄位*/});
  }
  // 第一部分結束 ---------------------
  // 第二部分：  提供的API ------
  createPlace(p: Place): Promise<any> {
    /* 新增功能 */
  }
  removePlace(id: string): Promise<any> {
    /* 移除功能 */
  }
  updatePlace(id: string, data: any): Promise<any> {
    /* 修改功能 */
  }
  queryPlaceById(id: string): Observable<Place> {
    /* 查詢一筆資料 */
  }
  getAllPlaces(): Observable<PlaceID[]> {
    /* 查詢全部資料 */
  }
}

ionic g service services/place

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { FormBuilder } from '@angular/forms';
import { Observable } from 'rxjs';
import { Place, PlaceID } from '../models/place';
import { PlaceDAO } from '../models/placeDAO';

@Injectable({
  providedIn: 'root'
})
export class PlaceService implements PlaceDAO {
  form: any; // 景點表單:4個欄位

  constructor(private fs: AngularFirestore, private builder: FormBuilder) {
    this.form = this.builder.group({
      pid: ['', []], title: ['', []], address: ['', []], intro: ['', []]
    });
  }

  createPlace(p: Place): Promise<any> {
    return this.fs.collection('place').add(p);
  }
  removePlace(id: string): Promise<any> {
    return this.fs.collection('place').doc(id).delete();
  }
  updatePlace(id: string, data: any): Promise<any> {
    return this.fs.collection('place').doc(id)
      .set(data, { merge: true });
  }
  queryPlaceById(id: string): Observable<Place> {
    return this.fs.doc<Place>(`place/${id}`).valueChanges();
  }
  getAllPlaces(): Observable<PlaceID[]> {
    const dref = this.fs.collection<PlaceID>('place', ref => ref.orderBy('title'));
    return dref.valueChanges({ idField: 'id' });
  }
}

...
import { PlaceService } from '../_service/place.service';
...
export class DetailPage implements OnInit {
  places: Place[];

  constructor(private ps: PlaceService) {
    this.places = this.ps.getAllPlaces();
  }
  ...
  goToPlace(id: stirng) {
    const place = this.ps.queryPlaceById(id);
    // ... 
  }
}

signInWithEmailAndPassword(e, p).then(/*回呼函式*/).catch(/*錯誤處理函式*/);

signInWithEmailAndPassword(e, p)
.then(
    (/*參數*/) => { /* 函式主體 */}
)
.catch(
    (/*參數*/) => { /* 函式主體 */}
);

signIn(user) {
    return this.afAuth.auth.signInWithEmailAndPassword(user.email, user.password)
    .then( 
      (credential) => {
          console.log('登入成功');        
          this.updateUserData(credential.user, credential.user.displayName);
      }
    )
    .catch(
      (error) => {
      console.log('登入失敗', error);
    });
}