Firebase Cloud Firestore 基礎入門 Part.3 - 將 Firestore 引入網頁專案 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 17

Modern Web

從零開始的個人化記帳程式開發系列第 17 篇

Firebase Cloud Firestore 基礎入門 Part.3 - 將 Firestore 引入網頁專案

11th鐵人賽 firebase firestore

ckchuang

團隊Wow Doge!

2019-10-03 00:06:17

8668 瀏覽

分享至

接續昨天的內容，今天要來將 Firestore 引入網頁專案中！

Step 1. 將相關套件加到 Web 應用中

首先要來進到網頁專案中，引入套件及昨天第三步中的設定。

將 Firebase 及 Firestore 套件添加到網頁專案中，這邊舉一個簡單例子，用一個基本的 index.html 搭配一個 index.js 為例：

將這兩行加到 HTML 中的 <body> 最下面：

<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-firestore.js"></script>

像是這樣：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-firestore.js"></script>
    <script src="index.js"></script>
  </body>
</html>

也可以使用 NPM 安裝，使用下面的指令：

npm install firebase firestore

再來在測試的 index.js 中加上剛剛第三步中得到的 firebaseConfig，並將 Firebase 及 Firestore 初始化：

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: '### FIREBASE API KEY ###',
  authDomain: '### FIREBASE AUTH DOMAIN ###',
  databaseURL: '### DATABASE DOMAIN ###',
  projectId: '### CLOUD FIRESTORE PROJECT ID ###',
  appId: '### APP PROJECT ID ###'
}

// Initialize Firebase
firebase.initializeApp(firebaseConfig)
const db = firebase.firestore()

另外若是剛剛使用 NPM 安裝的讀者，要記得在開頭引入套件：

const firebase = require('firebase')

Step. 2 使用範例程式測試是否成功連上

再來使用以下這一段程式，測試是否能連上 Firestore，這一段程式的用途是創建一個新的集合並添加一個新文件，是一個寫入操作：

db.collection('users')
  .add({
    first: 'Dez',
    last: 'Chuang',
    gender: 'male'
  })
  .then(function(docRef) {
    console.log('Document written with ID: ', docRef.id)
  })
  .catch(function(error) {
    console.error('Error adding document: ', error)
  })

接著打開網頁測試，會看到 console 印出寫入資訊就是成功了，也可以到 Firestore 的網頁上確認：