【Firebase】一個能即時更新的網頁 - Hosting

Nov 30, 2019 · 2 min read · firebase html database ·

相信大家都有聽過firebase的大名，它是一個資料庫，但是其實它其它也有包含網頁的部分，就叫做Hosting，跟它的Database做結合，可以更簡單的做一個有資料庫的動態網頁。安裝firebase-tools跟登入的部分就不多說了，詳情可以參考之前的網頁。我們就開始吧。

Firebase Hosting

Hosting

首先呢，這裡還是使用博客來的書籍資料來當DB使用，然後看看Hosting到底長的是什麼樣子？

{
  "eBook": {
    "9789861365404": {
      "name": "勇氣圖鑑：受挫、失敗都是成長的養分",
      "url": "https://www.books.com.tw/products/0010831766",
      "prices": [320, 253, 202],
      "order": 1
    },
    "9789578640856": {
      "name": "不插電 小學生基礎程式邏輯訓練繪本全套四冊",
      "url": "https://www.books.com.tw/products/0010818767",
      "prices": [1440, 1080],
      "order": 3
    },
    "9789869744560": {
      "name": "關於工作的9大謊言",
      "url": "https://www.books.com.tw/products/0010832091",
      "prices": [420, 332],
      "order": 2
    },
    "9789570853551": {
      "name": "全圖解！AI知識一本通：用故事讓你三小時輕鬆搞懂人工智慧",
      "url": "https://www.books.com.tw/products/0010830584",
      "prices": [280, 221],
      "order": 4
    },
    "9789863774938": {
      "name": "星座決定我愛你：用占星和塔羅幫你找到真命天子or女",
      "url": "https://www.books.com.tw/products/0010825318",
      "prices": [320, 253, 177],
      "order": 5
    }
  }
}

建立hosting

登入firebase-cli之後，接著使用指令建立一個hosting的資料夾，選擇剛剛建立好的專案名稱。

firebase init hosting

建立Web應用程式

在建立的過程式會看到一段js文字，裡面有一個「firebaseConfig」的變數，這個內容相當的重要，有了這段文字，才可以從外部的html連到firebase。

var firebaseConfig = {
  apiKey: "AIzaSyCXLgMifVyVgnooooo--YCYEE5pYooooo",
  authDomain: "ebook-ooooo.firebaseapp.com",
  databaseURL: "https://ebook-ooooo.firebaseio.com",
  projectId: "ebook-ooooo",
  storageBucket: "ebook-ooooo.appspot.com",
  messagingSenderId: "824229ooooo",
  appId: "1:824229ooooo:web:0fa84260b5ed04b8ooooo"
}

firebase.initializeApp(firebaseConfig)

連接firebase

這裡就來先試試看連線是否是正常的。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Firebase Hosting 測試</title>
  <link rel="stylesheet" type="text/css" href="css/table.css" />
  <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-database.js"></script>

  <!--  使用firebase的設定 (類似帳密)  -->
  <script src="js/config.js"></script>

  <script>
  const path = '/'
  const type = 'value'
  firebase.database().ref(path).on(type, snapshot => {
      console.log(snapshot.val())
  })
  </script>
</head>

<body>
</body>

</html>

撰寫主要部分

這裡主要是寫api.js的部分，將database的資料放到網頁上面，也能及時的更新。

const tableID = 'books'
const path = '/eBook'
const type = 'value'

firebase.database().ref(path).on(type, snapshot => {

    const bookInfos = snapshot.val()

    let tableInfo = '<tr><th>ISBN</th><th>書名</th></tr>'

    Object.keys(bookInfos).map((isbn) => {
        const info = bookInfos[isbn]
        tableInfo += `<tr><td>${isbn}</td><td>${info.name}</td></tr>`
    })

    document.getElementById(tableID).innerHTML = tableInfo
})

上傳到hosting

利用firebase-cli把網頁上傳，就可以有一個真實的網頁了。上傳之後其實並不需要config.js的驗證部分，因為能上傳就表示帳號密碼是正確的。

firebase deploy

範例程式碼下載

後記

其實Firebase整合的相當好，不管是資料庫、網頁、推播…等，只要是Web相關的，通通一次到位，簡單易學。