iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 17
1
Modern Web

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

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

接續昨天的內容,今天要來將 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 的網頁上確認:

從畫面上可以看到剛使用「寫入」語法新增的文件,就能確認成功連線!

小結

這兩天 step by step 的紀錄如何從零開始建置 Firestore 專案,並將套件引入網頁專案中,也簡單利用一小段範例的寫入語法測試是否連上資料庫。

明天會來筆記並實際操作 Firestore 的語法,我們明天見!

另外其實 Cloud Firestore 的官方文件寫得還蠻詳細的,從簡介、快速入門、進階使用與設定都手把手詳細的解說。若本文有講的不夠詳細的地方,建議可以到官方文件中尋找資訊。

參考資料


上一篇
Firebase Cloud Firestore 基礎入門 Part.2 - 建置 Firebase 專案及資料庫
下一篇
Firebase Cloud Firestore 基礎入門 Part.4 - 寫入語法:set、update、add、delete
系列文
從零開始的個人化記帳程式開發30

尚未有邦友留言

立即登入留言