最近因為參加六角學院的比賽,主題是將每一次的設計稿進行切版。
但是對於一個前端工程師來說,僅僅只練習切版肯定是不夠的。
因此,除了切版以外,若能加上資料庫來實作,感覺有趣不少。
而 Google的 FireBase,簡單易學好操作,在沒有那麼多時間開發的情況下,使用 FireBase是最好的選擇。
因此這系列的文章,會教大家如何利用 Angular與 FireBase做一個簡單 Todo App。
首先,我們由於我們的資料來源是FireBase。因此我們需要到官網上進行註冊。
當註冊完成後,我們會跳轉到 Consoles 控制台的頁面:
接下來點選新增專案,建置專案的名稱以及地區。這裡我選的是亞洲地區
建置完成後,我們會跳到專案內。點選畫面的「將Firebase加入您的網路應用程式」
這時候會跳出你的專案設定檔:
可以先將這些資料複製起來。待會我們導入Angular專案的時候會用到
之後點選左手邊DataBase ,我們建立一個 RealTime Datebase
進入後會發現他其實就是一個json格式的資料。我們可以逐筆新增。
先新增個幾筆資料吧!!
新增完畢後,我們就可以來創建我們的 Angular 專案。
專案的建置以及安裝,可以參考之前撰寫過的文章,這裡就不再攢述。
專案建立完成後,我們需要安裝套件。利用套件可以快速幫我們建置Firebase專案。
因此打開你的終端機輸入:
npm install firebase@4.6.1 angularfire2@5.0.0-rc.3 --save
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 專案。
這篇只是先讓我們快速建置環境方便後續開發。
以上文章敘述如有錯誤及觀念不正確,請不吝嗇指教:)
有任何家教、案子 或技術相關問題 請都歡迎聯繫我