Firebase(NOSQL)串接

112上網頁設計課報告筆記

Firebase

網址:https://firebase.google.com/

建立專案

新增專案

1

設定專案名稱

2

關閉GA

3

建立即時資料庫

4

5

6

建立檔案資料庫

7

8

9

設定授權登陸

10

選擇google

11

12

安裝Node.js

初始化

在桌面創建資料夾
進入資料夾開啟終端機
輸入下列指令:
1.npm init //初始化(按Enter直到結束)
13
2.npm install -g –save-dev firebase-tools //安裝工具

登陸firebase

firebase login
14

初始firebase環境

firebase init hosting
15
y
16
Use an existing project //使用現有專案
17
選擇之前創的專案名
18
public
y
n
19

note:
出現Firebase initialization complete!即為成功

輸入firebase deploy //部屬託管到firebase
20

設定firebase設定檔案及測試

將firebase_init-master資料夾的所有檔案丟入專案資料夾的public裡
21

由於預設firebase.js URL有誤無法開啟須改網址

將連結改為以下程式碼

1
2
3
4
5
6
7
8
9
10
11
<script defer src="https://www.gstatic.com/firebasejs/8.0.1/firebase-app-compat.js"></script>
    <!-- include only the Firebase features as you need -->
    <script defer src="https://www.gstatic.com/firebasejs/8.0.1/firebase-auth-compat.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.0.1/firebase-database-compat.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.0.1/firebase-firestore-compat.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.0.1/firebase-functions-compat.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.0.1/firebase-messaging-compat.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.0.1/firebase-storage-compat.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.0.1/firebase-analytics-compat.js"></script>
    <script defer src="/https://www.gstatic.com/firebasejs/8.0.1/firebase-remote-config-compat.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.0.1/firebase-performance-compat.js"></script>

設定init-firebase.js

22

將project id改為自己的專屬id
將api更改
23
24

成果

25

Zhi筆記部落格
⬆︎TOP