網頁結合 firebase 雲端資料庫教學－firestore 新手入門

對於剛踏入網頁前端的初學者，網頁資料的存取是一個很大的問題，不熟悉資料庫，而不知從何下手，幸好 Google 提供了讓人免費使用的 firebase 雲端資料庫，讓網頁設計師能夠用很簡單的方式存取資料，省去建立資料庫的麻煩，而且支援網頁、應用程式等，用途廣泛，這篇文章將會以網頁的形式教大家使用firebase 的 firestore 及時資料庫。事不宜遲，我們趕緊進入以下的教學吧。

懶得看文字教學的人，文末也貼心地附上影片教學喔~~

建立 firebase 專案

Step 1. 進到 firebase 註冊帳號並新增一個專案。

專案名稱可以任取，不過只能用英文數字或 -!'” 等字元符號，記得勾選同意服務條款。

Step 2. 左邊菜單欄選擇 Database 資料庫，並選擇 Cloud Firestore，雖然 Firestore 目前仍處於 beta 測試階段，不過我認為這是趨勢，應該會漸漸取代舊版的 firebase ，因此本次教學採用新版的 firestore 來做示範。

Step 3. 選擇”以測試模式啟動”，方便我們做後續開發的讀取、寫入權限。

專案前置設定作業

Step 4. 回到左邊菜單欄，選擇上方的小齒輪，點擊”專案設定”。

Step 5. 進去之後滾輪滑到最下面，我們選擇最後一個選項”網路應用程式”已取得相對應的授權程式碼片段。

Step 6. 將產生的程式碼複製下來作為待會使用。

有鑑於示範的方便度，以下使用 codepen 來做開發。

Step 7. 新增一個 pen ，將剛剛複製的程式碼，分別填入 HTML 及 JS 中，(要填入自己專屬的授權碼，別傻傻地複製教學上的喔😂

<!-- 引入 firebase 函式庫 -->
<script src="https://www.gstatic.com/firebasejs/5.5.6/firebase.js"></script>

//初始化 firebase
  var config = {
    apiKey: "你的api key",
    authDomain: "專案 firebaseapp 網址",
    databaseURL: "專案資料庫網址",
    projectId: "專案 ID",
    storageBucket: "storageBucket",
    messagingSenderId: "messagingSenderId"
  };
  firebase.initializeApp(config);

var db = firebase.firestore();

Step 8. 接著因為是使用 firebase 的 firestore 即使資料庫，必須再引入一條 firestore 的函式庫。

<!-- 引入 firestore 函式庫 -->
<script src="https://www.gstatic.com/firebasejs/5.5.5/firebase-firestore.js"></script>

寫入資料

在寫入資料到 firebase 之前，我們要先了解兩個名詞，分別為 “collection” 以及 “document” 以及釐清firestore 的資料結構。

collection 稱之為 “集合”，document 稱之為 “文件”，集合中有文件，文件中可以有集合的形式，因此資料的結構必定為集合>文件>集合>文件…… 而不能為 ~~集合>文件>文件……~~ 並且”文件”可以放入多個資料比如字串、數字、陣列、布林值等多種資料型別。

以下圖為例，我們可以先”手動”新增資料玩玩看，了解一下它的結構，之後再利用程式的方式，將資料推上來。

Step 1. 以下以電影資訊為例，先在 HTML 新增一個按鈕 “store” 來觸發儲存的動作==> storedata()

<button onclick="storedata()"> store</button>

Step 2. 設定一個變數 db 來放 firebase.firestore()，並建立一個 storedata 的函式來連結按鈕，使用 set 來將資料上傳 firebase ，方法形如: db.collection(“集合名”).doc(“文件名”).set({字典檔資料}) ，資料可以為字串、數字、陣列、布林值……

var db = firebase.firestore();

function storedata() {
  db.collection("movies").doc("新世紀福爾摩斯").set({
    name: "新世紀福爾摩斯",
    date: "2010",
    desctiption: "本劇改編自阿瑟·柯南·道爾爵士家喻戶曉的推理小說，一位脾氣古怪的大偵探在現代倫敦的街頭悄悄巡行，四處搜尋線索。",
    actors: ["班尼迪克·康柏拜區", "馬丁·費曼"]
  });
}

Step 3. 完成之後點擊一下網頁的 “store” 按鈕，來做寫入的動作。

Step 4. 回到 firebase 重新整理一下，可以發現資料已經成功寫入進去了~

讀取 firebase 資料

Step 1. 讀取資料也十分簡單，一樣先新增一個按鈕 “get” 來觸發讀取的動作==> getdata()

<button onclick="getdata()"> get</button>

Step 2. 選擇想要查詢的集合中的文件，使用 get()來取得資料，如果無誤就將資料輸出在後台，使用方法如下所示。

function getdata() {
  var docRef = db.collection("movies").doc("新世紀福爾摩斯");
  docRef.get().then(function(doc) {
      if (doc.exists) {
        console.log(doc.data());
      } else {
        console.log("找不到文件");
      }
    })
    .catch(function(error) {
      console.log("提取文件時出錯:", error);
    });
}

Step 3. 完成之後，試著按下”get” 按鈕，可以發現已經可以成功從firebase 上抓取資料囉。

完整程式碼

HTML 部分

<!-- 引入 firebase 函式庫 -->
<script src="https://www.gstatic.com/firebasejs/5.5.6/firebase.js"></script>
<!-- 引入 firestore 函式庫 -->
<script src="https://www.gstatic.com/firebasejs/5.5.5/firebase-firestore.js"></script>
<button onclick="storedata()"> store</button>
<button onclick="getdata()"> get</button>

JavaScript 部分

//初始化 firebase
  var config = {
    apiKey: "AIzaSyANaUngT7PET85z8UTJKsaE8s1GV8vU_Wk",
    authDomain: "test-6b15c.firebaseapp.com",
    databaseURL: "https://test-6b15c.firebaseio.com",
    projectId: "test-6b15c",
    storageBucket: "test-6b15c.appspot.com",
    messagingSenderId: "274290169188"
  };
  firebase.initializeApp(config);

var db = firebase.firestore();

function storedata() {
  db.collection("movies").doc("新世紀福爾摩斯").set({
    name: "新世紀福爾摩斯",
    date: "2010",
    desctiption: "本劇改編自阿瑟·柯南·道爾爵士家喻戶曉的推理小說，一位脾氣古怪的大偵探在現代倫敦的街頭悄悄巡行，四處搜尋線索。",
    actors: ["班尼迪克·康柏拜區", "馬丁·費曼"]
  });
}

function getdata() {
  var docRef = db.collection("movies").doc("新世紀福爾摩斯");
  docRef.get().then(function(doc) {
      if (doc.exists) {
        console.log(doc.data());
      } else {
        console.log("找不到文件");
      }
    })
    .catch(function(error) {
      console.log("提取文件時出錯:", error);
    });
}

後記

以上教學是對於 firebase firestore 的入門淺談，在於基本的寫入以及讀出，這只是一個基礎，然而至於如何活用，就要靠著你們的智慧囉，希望這個簡易的教學能夠成為使用 firebase 的敲門磚。