從零開始的Angular與 Firebase實作 TodoApp (一) 環境建置

最近因為參加六角學院的比賽,主題是將每一次的設計稿進行切版。

但是對於一個前端工程師來說,僅僅只練習切版肯定是不夠的。

因此,除了切版以外,若能加上資料庫來實作,感覺有趣不少。

而 Google的 FireBase,簡單易學好操作,在沒有那麼多時間開發的情況下,使用 FireBase是最好的選擇。

因此這系列的文章,會教大家如何利用 Angular與 FireBase做一個簡單 Todo App。

首先,我們由於我們的資料來源是FireBase。因此我們需要到官網上進行註冊。

當註冊完成後,我們會跳轉到 Consoles 控制台的頁面:

接下來點選新增專案,建置專案的名稱以及地區。這裡我選的是亞洲地區

建置完成後,我們會跳到專案內。點選畫面的「將Firebase加入您的網路應用程式」​

這時候會跳出你的專案設定檔:

可以先將這些資料複製起來。待會我們導入Angular專案的時候會用到

之後點選左手邊DataBase ,我們建立一個  RealTime Datebase

進入後會發現他其實就是一個json格式的資料。我們可以逐筆新增。

先新增個幾筆資料吧!!

新增完畢後,我們就可以來創建我們的 Angular 專案。

專案的建置以及安裝,可以參考之前撰寫過的文章,這裡就不再攢述。

Angular 環境建置

專案建立完成後,我們需要安裝套件。利用套件可以快速幫我們建置Firebase專案。

因此打開你的終端機輸入:

npm install firebase@4.6.1 angularfire2@5.0.0-rc.3 --save

注意:如果你的 Angular版本是6.0以上的話,需要再額外安裝 rxjs-compat 套件,否則專案會無法編譯成功。
npm install --save rxjs-compat

接著打開我們的 environment.ts

並且將剛剛從官網上複製的 Firebase設定檔貼入:

接著我們在AppModule中引入這兩個FirebaseModule

AngularFireModule.initializeApp(environment.firebase),

AngularFireDatabaseModule,

然後我們建立一支 Service 來為我們做 TodoList的資料撈取

ng g s todo

接著在 Service中,我們來寫個簡單的資料讀取。

export class TodoService {
  todoList: AngularFireList<any>; // 建立一個list。在 Firebase當中,都是透過list在存取、異動資料
  constructor(private firebaseDB: AngularFireDatabase) { }

  GetTodoList() {
    // 當我們用 DI注入 AngularFireDatabase 我們就可以很簡單的使用list這個function去取得我們要的資料
    // 然後這邊我們要取得的是 data底下的每一筆物件資料。
    this.todoList = this.firebaseDB.list('data');
    return this.todoList;
  }
}

之後我們在 AppComponent當中,注入 TodoService,呼叫GetTodoList() 試試

 ngOnInit() {
    // 由於我們採用的是 Realtime Datebase,因此在呼叫 snapshotChanges()的時候 會回傳一個 observable型別
    // 接著我們就可以透過 subscribe 進行監聽。如此一來只要資料有任何異動,前端都會立即收到通知。
    // 反之,前端異動,Firebase也會收到變更。
    this.todoService.GetTodoList().snapshotChanges()
      .subscribe(item => 

        item.forEach(x => {
          const data = x.payload.toJSON();
          console.log(data);
        });

      });
  }

最後將專案運行後,我們可以在主控台中看到我們的資料已經出現在畫面上,而每一筆的data正是一個物件,之後就可以將資料呈現在畫面上了。

從這篇教學當中,我們可以發現,Firebase將資料透過Obserable,將資料倒入List,並且

監聽著這個List。因此我們只需要subscribe ,就可以持續監聽資料異動狀況,非常簡單易懂。

接下來下一篇會正式帶各位完成Angualr串 FireBase的 TodoApp 專案。

這篇只是先讓我們快速建置環境方便後續開發。 

以上文章敘述如有錯誤及觀念不正確,請不吝嗇指教:)

有任何家教、案子 或技術相關問題 請都歡迎聯繫我

http://www.zhenghui.idv.tw/