NUK JavaScript Lesson 10:Cloud Firestore

本篇筆記為 Firebase 底下的其中一個服務 Firestore 的介紹。

Get Started

STEP 1:建立資料庫

  1. 前往官網,並用 Google 帳號登入(Firebase 是 Google 底下的服務唷)
  2. 點選右上角「前往主控台」新增專案後,點選新增一個專案,接著依照步驟完成
  3. 選擇要新增哪一種應用程式,這邊我們選擇「Web」,也就是網頁。

STEP 2:新增 JS SDK

新增應用程式後,網頁會跳出 JS SDK 讓你貼到自己的程式碼裡面。
載入內容由上到下分別是:

  1. Firebase 的核心 JS 檔案
  2. 你要載入的功能(像是我們要使用的 Firestore 就是載入 firebase-firestore.js 這個檔案)
  3. Authentication (firebase-auth.js)

都載入後就使用 firebase.initializeApp(firebaseConfig) 來進行專案初始化。

這裡有個 API Key 要保管好喔,因為如果別人有這個 Key,別人就能用你的專案了。

STEP 3:測試一下有沒有載入成功

輸入以下程式碼:

1
2
var db = firebase.firestore();
console.log(db);

如果有載入成功,console 應該會顯示 Firestore 的各個功能。

STEP 4:開始使用 Firestore 資料庫

到這邊就能透過程式碼,去對 Firestore 做各種操作,來幫助呈現網頁內容囉!

幾個簡單的 Firestore 使用技巧

新增資料

  • 集合(文件夾):Collection
  • 文件:Document
  • 文件欄位:Data

一個資料庫就像是一個班級,我們新增一個集合叫做 students
假如這個班級裡面有兩位學生,代表這個集合有兩個文件,
而每位學生又有兩個欄位,分別是學號與姓名。

根據上方描述,我們可以建立出以下結構:

Imgur

而新增一筆資料的程式碼就是:

1
2
3
4
5
6
7
8
9
10
11
db.collection('students')
.add({
no: 1,
name: 'Sean',
})
.then(function (docRef) {
console.log('新增成功,id 是' + docRef.id);
})
.catch(function (error) {
console.error('新增失敗原因: ', error);
});

每位學生的資料,就是一份文件,這份文件的名稱預設是 “亂數”。
如果想要給它一個文件名稱,可以在 db.collection("students") 後方加上 .doc(文件名稱) 來新增文件名稱。
不過,接著要改用 .set 來寫入資料,而不是用 .add

1
2
3
4
5
6
7
8
9
10
var db = firebase.firestore();
db.collection('students')
.doc('two')
.set({
no: 2,
name: 'Sunny',
})
.then(function () {
console.log('新增成功');
});

附上官方說明文件:向 Cloud Firestore 增加數據

取得資料

新增資料進去後,要怎麼取出來使用呢?

我們可以使用 .getquerySnapshot 來完成。
querySnapshot 可以將資料庫裡的資料 “快照” 下來,並傳入讓我們做使用。

傳入之後,我們可以使用 forEach 將快照裡的資料內容 “依序” 顯示出來。

範例一:取得所有學生

1
2
3
4
5
6
7
var db = firebase.firestore();
var docRef = db.collection('students');
docRef.get().then(function (querySnapshot) {
querySnapshot.forEach(function (doc) {
console.log(doc.data());
});
});

範例二:用空陣列搜集 Firestore 上的資訊

我們也可以使用空陣列,將 Firestore 上的資訊撈取下來後再做操作。
像是這裡想要顯示 data.lengthdata[1] 的內容。

1
2
3
4
5
6
7
8
9
10
var db = firebase.firestore();
var docRef = db.collection('students');
var data = [];
docRef.get().then(function (querySnapshot) {
querySnapshot.forEach(function (doc) {
data.push(doc.data());
});
console.log(data.length);
console.log(data[1]);
});

進階搜尋

如果想直接搜尋、取得特定條件的資料,可以用 where()

這個 where() 方法總共有三個參數,第一個參數是欄位名稱,第二個是條件,第三個是參數。

因此,如果我們想搜尋學號是 15 號的學生,就是寫成 .where("no", "==", 15)
白話來說就是,我想要找 “每個” 文件裡面,no 的欄位名稱是 15 的文件資料。

範例:

1
2
3
4
5
6
7
8
9
10
var db = firebase.firestore();
var docRef = db.collection('students');
docRef
.where('no', '==', 15)
.get()
.then(function (querySnapshot) {
querySnapshot.forEach(function (doc) {
console.log(doc.data());
});
});

附上官方說明文件:讀取獲取 Cloud Firestore 的數據

排序資料

我們可以使用 orderBy() 來指定排序的順序。

CodePen 範例程式碼

官方說明文件:通過 Cloud Firestore 對數據進行排序和限制其數量
此外,Firestore 還可以做到 “複合查詢“ 與 “設計分頁“ 的功能

練習:製作留言板功能

新增留言:

  1. 使用 querySelector 綁定標籤,並使用 addEventListener 監聽送出按鈕
  2. inputvalue 放入 nameStr
  3. 使用 .add() 新增資料,欄位的值以 “點存取” 來取得

取得留言:

  1. 用空陣列搜集 Firestore 上的資料
  2. 透過 for 迴圈累加字串至 str 後,使用 innerHTML 將內容呈現於畫面上
  3. 載入畫面就先渲染 (init)

CodePen 範例程式碼

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。