昨天建置好 Firestore 並確認開發的網頁專案能正確連上後，今天就要來實際使用它的語法學習各種寫入資料庫的做法了！

寫入語法

寫入語法共有四種操作：

• 設定：set()
• 更新：update()
• 添加：add()
• 刪除：delete()

其實就是增加、刪除、修改的用法，用起來蠻像 SQL 語法的，以下透過前幾天的支出紀錄範例來練習。

前置作業

確認昨天的設定能成功連上，並在 JavaScript 檔引入資料庫：

const db = firebase.firestore()

實例練習

設定：set()

set() 的用途是創建或覆蓋文件（document），直接參考下面例子：

db.collection('expense')
  .doc('breakfast001')
  .set({
    type: 'breakfast',
    account: 'cash',
    title: '鮪魚蛋吐司',
    dollar: '35'
  })
  .then(() => console.log('Document successfully written!'))
  .catch(error => console.error('Error writing document: ', error))

這邊以前幾天的支出記帳為例，上面這段語法一層一層分析指的是，在 expense 集合中，設置一個名稱為 breakfast001 的文件，並且寫入相關資料。

另外可以注意到這邊 set() 後面接了 then()，說明了 set() 的方法支援 Promise 的寫法，後面幾個語法也是。

執行這段程式碼後，會看到以下結果：

使用 set() 注意事項

set() 在文件不存在時，系統會創建一個新的文件。但若文件存在，則內容會整個被新的資料覆蓋，例如下面這個例子：

db.collection('expense')
  .doc('breakfast001')
  .set({
    test: '我蓋掉拉！'
  })

若想避免文件被整個蓋掉的狀況，可以加上 {merge: true} 的寫法：

db.collection('expense')
  .doc('breakfast001')
  .set(
    {
      test: '用 merge 的話不會蓋掉哦'
    },
    { merge: true }
  )

另外若不指定文件名寫成 doc()，則執行後系統會自動產生一個亂碼做為文件名：

db.collection('expense')
  .doc()
  .set({
    type: 'lunch',
    account: 'card',
    title: '菲力牛排',
    dollar: '1680'
  })

更新：update()

update() 顧名思義就是對指定文件中的某些屬性更新，跟上述用 set() 搭配 merge 的用法有點像。

db.collection('expense')
  .doc('breakfast001')
  .update({
    title: '黑胡椒鐵板麵加蛋',
    dollar: '50'
  })
  .then(() => console.log('Document successfully updated!'))

可以看到只有 dollar 與 title 這兩個欄位被更新了。

添加：add()

add() 這個方法是針對集合去「自動」添加文件，跟上述的 set() 不設定文件名是一樣意思。

db.collection('expense')
  .add({
    type: 'dinner',
    account: 'pay',
    title: '牛肉炒飯',
    dollar: '100'
  })
  .then(docRef => console.log('Document written with ID: ', docRef.id))

刪除：delete()

delete() 可以用來刪除整個文件，例如下方例子，執行後可以刪除剛剛上面創建的文件 breakfast001：

db.collection('expense')
  .doc('breakfast001')
  .delete()
  .then(() => console.log('Document successfully deleted!'))

另外這個方法也可以拿來刪除文件中的某個屬性，但要搭配 update() 服用，以下舉例刪除 breakfast001 文件中的 title 屬性：

db.collection('expense')
  .doc('breakfast001')
  .update({
    title: firebase.firestore.FieldValue.delete()
  })
  .then(() => console.log('Document property successfully deleted!'))

要注意的是，我嘗試用這個方法刪除集合但不能用，查看官方刪除集合的文件也沒有寫出語法範例。

而且其中提到，刪除集合會有一些地雷，像是刪除文件並不會刪除其底下的子集合，所以官方建議使用他們的另一款產品 Cloud Functions。（怎麼搞的這麼複雜 XD）

小結

今天透過一些簡單的練習實際操作了 Firestore 的寫入語法。這個 Firebase 的初步基本入門系列差不多就先寫到這了，其他沒有提到的部分可以參考官方文件或是以下的參考資料，像是在 oxxostudio 的地方可以找到一整個系列更完整的教學。

明天就正式來回到記帳程式，試著將 Firebase 引入 Vue 專案中，並試著完善整個支出紀錄的功能吧！

參考資料

• 官方文件 - 向 Cloud Firestore 添加数据
• 官方文件 - 删除 Cloud Firestore 中的数据
• Firebase 教學 - Firestore 安裝、寫入和讀取