# Firebase

[官網](https://console.firebase.google.com/u/0/)
[GitHub](https://github.com/firebase/quickstart-js)

### 服務內容

1. Authentication: 用戶認證管理
2. Firestore Database: NoSql資料庫服務
3. Realtime Database: 實時儲存並同步資料庫
4. Storage: 文件儲存服務(文件、圖片等)
5. Hosting: 網站託管
6. Function: 服務區程式碼託管

### 看看先

基本上免費版的運用空間已經很多了，需要再開收費方案，好難懂。
我這邊先開啟使用的服務是 firestore database

### 目前的操作步驟

### 發現新大陸

1. get() 回來的資料事個物件，沒有順序可言，所以當我轉成陣列時每次順序都不對....



* 目前大概只能再自己進行資料排序了

2. firestore 的資料結構會是
<code>collection</code>/<code>document</code>/<code>collection</code>/<code>document</code>／...... 這個樣子來往下延伸

### 關於實作時的問題

上述有提到取回來的資料是一個物件，並且是無序的，那我須要如何處理成可以 render 出正確畫面的資料 ?

以下為詳細的紀錄以供自己以後看不懂也想不起，但也可能有更好的處理方式吧

> 關於讀取資料
* doc 代表單一 document
* docs 代表一個 document 的陣列集合
* doc.data() 代表 doc 的物件內容，要這樣才可以拿到內容
* doc.id 代表該 doc 的名稱

1. 因為要製作每日的出貨庫存記錄表，所以 today 是用來判斷要取得哪個日期的 doc，因為在寫入時也有一樣的變數來記錄日期，所以在每一天寫入跟讀取時都只會共用同一個 doc ，而隔天自動會換另一個 doc
2. cateRef 代表路徑，後續按照結構規則來設定要取得的資料
3. get() 類似發個 request 吧 ? 不太確定，返回一個 Promise 物件後 .then() 執行後續動作
4. 取得一個 querySnapshot ， querySnapshot.docs 代表裡面有的 doc ，會是一個陣列
5. 以我的例子來說，會先取得一個有所有物件的陣列
6. 不能只接跑迴圈來 render 畫面，因為每次資料都是打亂的，所以必須要進行處裡
7. dataAry 將每筆物件資料先轉成陣列，這邊會產出一個二維陣列
8. dataSort 取陣列中的第一筆資料 (透過 input id 產生的)，比對末兩位數字來重新排序，形成所思的資料形式
9. 用個空字串去接要渲染的 HTML 內容然後添加到目標上

// 以上還有固定的資料庫初始化設定
let db = firebase.firestore();
const getData = () => {
    const today = moment().format("YYYY-MM-DD")
    let cateRef = db.collection("table").doc(today).collection('出貨') // 目標路徑
    cateRef
        .get() // 取資料
        .then((querySnapshot) => {
            let data = querySnapshot.docs; // 內容陣列
            let renderHTML = '' // 接內容用

            data.forEach((doc, index) => {
                let dataAry = Object.entries(doc.data()) // 物件轉為陣列
                let dataSort = dataAry.sort((a,b) => { // 陣列重新排序
                    return a[0].slice(-2) > b[0].slice(-2) ? 1 : -1 // 比對 key 的末兩位數字
                 })
                renderHTML += `<tr>`
                renderHTML += `<td>${doc.id}</td>`;
                dataSort.forEach((ary) => {
                    renderHTML += `<td>${ary[1]}</td>`
                })
                renderHTML += `</tr>`
            });
            const tbody = getElement("tbody"); // DOM
            tbody.innerHTML = renderHTML // render
        });
};