Firebase小學堂｜基礎介紹與設定

身為前端工程師要怎麼應用Firebase來幫助專案的開發是這次系列主題的文章，本篇將介紹Firebase對網頁前端開發的基本應用及功能！

Firebase可以幫助一個簡易專案的開發，快速的建立簡單的後台存取，或是製作一個互動是小遊戲，透過Firebase的即時更新，讓多個裝置間互相配合，例如使用行動裝置與桌機可以製作一個互動的小遊戲…等等

那麼Firebase是甚麼呢?

圖片來源：https://firebase.google.com/

Firebase是一款雲端資料庫，它提供了身分驗證（Authentication）、即時資料庫（Cloud Firestore）、儲存（Storage）、主機（Hosting）、儲存（Storage）、函數編寫代碼（Function）及機器學習功能（ML Kit）等後端服務。

同時Firebase也提供了品質管理、數據分析、擴展功能…等等豐富的支援服務

圖片來源：https://firebase.google.com/

Step1.首先來介紹建立Firebase專案步驟

Firebase：https://firebase.google.com/
1.註冊Firebase：只需要透過Google帳戶的連結即可，登入後點選Get Start進入Firebase的系統即有部分的中文支援，建立專案以及專案設定都是提供中文語系的設定的。

2.建立專案：只需要輸入專案名稱、調整位置，也可依照你的專案需求，選擇是否勾選使用Google的資料分享設定或是其他服務

專案建置完成後，就可以進入該專案的後台管理系統囉！在這裡Firebase的主視覺區塊中提供了4種應用程式，分別為ios、andorid、web以及unity

左手邊的list為專案的主要功能，有開發、品質、數據分析以及拓展，而這次的介紹我們著重在開發也是前端開發主要的功能區域

開發有下列6項功能，詳細的功能介紹將在後續的篇章中：

1. 身分驗證（Authentication）
2. 即時資料庫（Cloud Firestore）
3. 儲存（Storage）
4. 主機（Hosting）
5. 函數編寫代碼（Function）
6. 機器學習功能（ML Kit）

Step2.串接Firebase的基本步驟

1. 嵌入Firebase的JS

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

2. 在Firebase專案的主視覺按鈕中選取圖形為”</>”的button就會產生代碼，將代碼貼入你的程式中就完成了Firebase的基本串接了

<script>
  // 初始化Firebase
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    projectId: "<PROJECT_ID>",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);
</script>

後續的Firebase教學系列會著重於Web技術使用到的功能介紹~
那我們下回再見囉~