iT邦幫忙

2025 iThome 鐵人賽

DAY 22
0
Vue.js

從零開始的Vue之旅系列 第 22

vue小專案-資料持久化 part2- firebase_part1

  • 分享至 

  • xImage
  •  

好的前兩天在使用LocalStorage來存資料,今天來看看如何建立後端資料庫,我是使用firebase,其一是之前有稍微接觸過(是很淺的接觸,時間還很久遠,順便當複習),當然還包含其他優勢考量,但今天想先完成整合後端資料庫的部分,採用firebase的考量因素後面會再談。

首先先來安裝firebase
先在終端機開啟我們的vue專案,或是想建一個新專案也可以,然後輸入下列指令
npm install firebase
接著輸入code . 打開vscode,並在該專案的src下建立一個firebase.js
https://ithelp.ithome.com.tw/upload/images/20251004/20178690KuPGkVZgZJ.png

然後到firebase的網站登入或註冊帳號,建立一個專案
這裡提供網址https://console.firebase.google.com/
https://ithelp.ithome.com.tw/upload/images/20251004/20178690PdyHONNOcd.png
在命名時要注意他有一些規定

接著你會看到這個畫面,問你要不要啟用 Google Analytics(流量分析工具)
https://ithelp.ithome.com.tw/upload/images/20251004/201786908OErwgWwCK.png
啟用 Analytics 能讓你之後可以收集使用者行為數據(例如:有多少人新增專案、平均停留多久)
如果像是我們做個小練習,只是要做專案進度追蹤, 可以略過,不用設定 Analytics
不過如果是想要分析使用者數據(例如每天幾個人登入、哪個功能被點最多)這類需要使用者行為數據的整理, 可以考慮整合 Analytics
總之這裡我先不啟用 Google Analytics

建立好專案後點擊該專案進入專案儀表板
點擊左上方的齒輪選擇專案設定
https://ithelp.ithome.com.tw/upload/images/20251004/20178690CbMRSCsS4R.png

然後在一般設定中的「你的應用程式」新增Web App
https://ithelp.ithome.com.tw/upload/images/20251004/20178690zGcu0fHfeB.png
接著輸入 應用程式暱稱 (App nickname),這個名字只是方便你在 Firebase 後台辨識,不會顯示給使用者。
https://ithelp.ithome.com.tw/upload/images/20251004/20178690DwdoeLncpE.png
然後順著操作下去,註冊完後,它會出現一段 JavaScript 設定碼,類似以下
https://ithelp.ithome.com.tw/upload/images/20251004/201786909YKUo0st0Y.png
將該設定碼複製貼到scr/firebase.js檔中
然後,先跟大家道個歉,我還沒處理完剩下的步驟/images/emoticon/emoticon16.gif

還沒結束所有步驟,我需要先處理一些錯誤資訊跟理解剩下的步驟
所以明天繼續,各位明天見~


上一篇
小閒聊-談談LocalStorage
下一篇
vue小專案-資料持久化 part3- firebase_2
系列文
從零開始的Vue之旅25
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言