changed 5 years ago  
Linked with GitHub

如何在網頁中引入 Firebase 當中的資料

首先，你必須有一個準備要引入 database 的網頁：

在桌面上新增一個資料夾叫做 test
在 test 資料夾中新增這個檔案叫做 ClassA.html。




















<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <h1>ClassA</h1>
    <body>
        <div class="content">
            <form id="add-students-form"></form>
            <table id="stu-table" cellpadding="10" border="1" width="100%">
                 <tr>
                   <td>姓名</td>
                   <td>年齡</td>
                    <td>性別</td>
                 </tr>
            </table>
        </div> 
    </body>
</html>

有了網頁後，以下是引入資料的步驟

  • 點選 Project Overview

  • 點選紅筆圈起來的東西，這個是新增一個 web app 的意思

  • 幫你的 web app 取一個名字！

紅色圈圈裡面的東西不要勾喔！ 那是我們暫時用不到的功能

  • 取好名字以後就按 "Register app"

接下來這一步是關鍵！

把裡面的程式碼複製下來，然後放進 ClassA.html 裡面的 </body> 標籤下面。

記得，中間 Config 裡面的東西是密碼！不可以輕易給別人取得，所以我這邊給你們看是錯誤的示範！因為別人只要有這一段程式碼就可以入侵你的 database。

  • 放完之後就像這樣
  • 然後就回到網頁上，按 Continue to console
  • 網頁的部分就到這邊。

接下來，請在 ClassA.html 裡面的這行下面

<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-analytics.js"></script>

加入底下這行 script

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

基本上，到這邊就可以使用官方提供的 API, function來操作你的 database 摟！

例如：
在 html 最底下(</html>上面)輸入










<script>
    const db = firebase.firestore();
    db.collection('ClassA').get().then((snapshot) => {
            snapshot.docs.forEach(doc => {
            console.log(doc.data());
        }) 
    });
</script>

然後點開你的 ClassA.html，就可以在 chrome developer tool 中看到你 database 裡的東西摟！

Select a repo