# Firebase - Cloud Firestore專案建置及CRUD
文件 : [以網頁使用Firebase](https://firebase.google.com/docs/web/setup?authuser=0)

### 1.建立Firebase專案:
先到Firebase平台建立一個專案輸入專案名稱，


下一步會讓你選擇是否要建立GA，但如果要安裝的話還需要其他步驟，這邊就先省略。


建立完後畫面就會跳回主控台，讓你選擇要用哪個應用程式來添加firebase，目前這個專案先選擇網頁的


### 2.建立對應的應用程式

註冊的應用程式的名稱，可以取的跟專案一樣沒關係


建立完成就會取得 SDK 這也是日後初始化 firebase的程式碼

### 3.取得SDK
在初始化的時候需要使用這段設定檔


### 4.利用cdn的方式來初始化firebase並添加SDK
在文件中會有許多初始化firebase的方法，先使用 Web v8的版本。

將上面步驟的SDK複製起來並且放入網站中當作初始化的元素，在設定一個變數來啟用firestore
`db = firebase.firestore();`

## 在fireStore上佈建資料
首先可以先建立集合，也就是最外層array的名稱


在第二步新增文檔的時候，可以想像是一個一個的obj，裡面會有項是標題、內文、標籤...的，ID的部分通常可以讓他自動產生，會是一組亂碼。


類型的部分有很多可以選，如果需要在建立子層，只要選擇array就可以編寫下一層的array，選擇map則會出現下一層物件


編寫完畢之後，就會像這樣


## CURD
四個方法都會返回 Promise 物件，我們才因此得以使用 then() 和 catch() 去處理成功和失敗的狀況

### 讀取 Read
cloud collection(Json檔案，扮演array的角色)，裡面會有無數個document(也就是一筆一筆物件資料)， 當一調用collection的時候需要建立Reference。 在collection的的部分就必須打上 cloud Firestore的集合名稱

 
    // 取得檔案
    var docRef = db.collection("集合的名稱")   

    docRef.get().then((doc) => {
		//這邊的forEach是 firebase的方法
        doc.forEach(item =>{
            if (item.exists) {
                console.log(item.data())
            } else {
                console.log("No such document!");
            }
        })
        
    }).catch((error) => {
        console.log("Error getting document:", error);
    });

取得完之後要整理資料，新增一個物件，將id與內容整併成一層，.data()裡面的資料就是title、content、label這一層的資料，會是一個obj的形式

格式大概會像這樣:

{
	id:"Kr0gxseqZE0uboGmsxin",
	title:"...",
	cover:".....",
	content:"......."

}

### 新增 Create

[參考文件](https://firebase.google.com/docs/firestore/manage-data/add-data)

新增firebase的資料有兩種方法`set()`、`add()`以下範例為使用add()方法。
送出後會再回傳一個id值，在把這個id值寫回管理資料的地方。
比較推薦直接使用`add()`會直接生成id文章，並且在新增成功之後會回傳該篇文章的id給你。
`set()`的話不會自己產生id，需要自己設定，如果你的資料庫有id自己的規則的話就比較適合用這個。

// Add a new document with a generated id.
const res = await db.collection('cities').add({
<!-- 裡面放入要新增的資料 -->
  name: 'Tokyo',
  country: 'Japan'
});

console.log('Added document with ID: ', res.id);

### 更改 Update
`.doc()`裡面放的是要更新的文件id名稱，除了用update以外也可以使用`set()`，不同的地方在於update會比對所有欄位的資料，有差異的資料才會去赴寫，`set()`的話是把原本的資料刪除並且把新的資料直接覆蓋上去，如果網站比較龐大或複雜，這兩種操作方式效能的部分才會需要特別考量。

docRef
.doc("c3l8MaHBvfqYE0QWkfYy")
.update({
	content:'在 iOS 10 之後可以透過實踐 Notification Service Extension 在推播橫幅出現時的時機點偷偷 Call API 回傳做統計；好處是非常精準，只有在使用者推播橫幅有出現才會 Call；如果 APP 刪除、關閉通知、通知沒開橫幅，都不會有動作，橫幅等於有出現推播訊息，用此當推播基數然後再算上點擊數就能得到「精確的點擊率」。'
})
.then(function() {
	console.log("Frank food updated");
});

### 刪除 Delete
`.doc()`裡面放的是要更新的文件id名稱，接下來只要用`.delete()`方法就可以了

docRef
.collection("cities")
.doc("icPSYj6xU3clwhBQrve2").delete().then(() => {
	console.log("Document successfully deleted!");
    })
.catch((error) => {
	console.error("Error removing document: ", error);
});

圖片出處:Firebase
參考資料:
- [開始使用Cloud Firestore](https://firebase.google.com/docs/firestore/quickstart)
-

###### tags: `Firebase`