主要參考的學習資源是看The Net Ninja的影片
https://www.youtube.com/watch?v=4d-gIPGzmK4&list=PL4cUxeGkcC9itfjle0ji1xOZ2cjRGY_WB&index=1
那仿照The Net Ninja，我就想說乾脆來做個留言板之類的網頁。
總之，成果是長這樣。
就是個按Add輸入名字和訊息之後可以加便利貼在Message Board上簡單的應用...
首先，先來建立我們的Firebase專案吧！
Google搜尋Firebase，然後登入自己的Google帳號。
https://firebase.google.com/
進入console，建立專案後，應該會看到這樣的畫面。
留言板我們只需用到Database的功能，點選左邊選單上的Database
會看到有兩種Database
- Cloud Frestore
- Realtime Database
Cloud Firestore vs Realtime Database：
Cloud Firestore實為Realtime Database的強化版，擁有更多功能，與更豐富快速的query方法，適合大流量的app
比較要記得的是Data model，Cloud Firestore是structure as documents organized into collection，而Realtime Databae則是simple JSON tree
https://firebase.google.com/docs/database/rtdb-vs-firestore?authuser=0#key_considerations 這裡有給建議選擇哪個比較適合你的app
我們這裡選擇Cloud Firestore
選擇測試模式
設定Cloud Firestore 位置：asia-northeast1
完成的畫面
接著就可以依照我們的網頁留言板需求來增加要的東西。
我們的留言板要存的東西，其實也就只有那個便利貼內容就是了。
先建立名叫"Notes"的集合(collection)吧，並生成第一個文件。
現在我們有一個"Notes"集合，裡面則有一個文件，文件的內容就是便利貼的內容，後端的東西大概就這樣。
那問題是前端要怎麼拿到這個資料呢？
先回到進入console最開始的這個畫面。
看到這「將Firebase新增至應用程式即可開始使用」，就是我們要的啊！因為留言板是網頁應用所以選第三個，就是按下圖上紅色箭頭指的「< / >」這個圖案。
輸入應用的名稱後，就可以得到給網頁用的Firebase SDK。
大概是長成這樣的東西 (因為不知道是不是能給別人看到的值，數值的部分都被我改掉了)
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyDxz2-Lrm1xxxx_xxxxxx",
authDomain: "xxxxxxxx",
databaseURL: "https://xxxxxxx",
projectId: "xxxxxxxx",
storageBucket: "xxxxxx",
messagingSenderId: "58800xxxx",
appId: "1:5880xxxxx:web:07xxxxxxxxx",
measurementId: "G-xxxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
只要將這個Firebase SDK加進我們的js裡，如此我們就可以拿取我們firebase的資料。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-firestore.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyDxz2-Lrm1xxxx_xxxxxx", authDomain: "xxxxxxxx",
databaseURL: "https://xxxxxxx",
projectId: "xxxxxxxx",
storageBucket: "xxxxxx",
messagingSenderId: "58800xxxx",
appId: "1:5880xxxxx:web:07xxxxxxxxx",
measurementId: "G-xxxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
const db = firebase.firestore();
</script>
<script src="app.js"></script>
</body>
</html>
Firebase的SDK有依功能切分，像是我們會需要用到firestore的功能，因此就會引入這個script。
<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-firestore.js"></script>做完以上前置作業，接下來就可以進入coding的部分了。
(下篇待續
沒有留言:
張貼留言