iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 20
1
Modern Web

到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站系列 第 20

【D20 - 用Vue實作網頁】Vue+Firebase 火力無法擋

相信很多人都知道火力基地到底有多火了XD,火力基地就是我們熟悉的Firebase~ 今天要帶各位看一下firebase基本功能還有要如何應用到我們的project!

前言

Firebase 是一個後端的服務,他同時可以支援Web, Android, IOS 的一個雲端開發平台~ 讓我們在做簡單的project時候不需要花時間去寫database,也不用擔心後端的部分XD

Firebase有非常多的功能~ 我們這次會著重在他的Cloud Firestore功能! 在我們開始介紹之前我要先提到基本的開發流程 (如果沒有Firebase的話)

  1. 我們要先用nodejs搞一個server
  2. 利用mongoose (這邊可以選non-SQL or SQL) 創立一個model
  3. 我們要定義database schema
  4. 然後要記得使用controller 來去handle CRUD
  5. 之後定義一下routes
  6. 之後我們要先測試一下每一隻API是否都可以把資料儲存至datbase或是從裡面拿取資料
  7. 再來做前端
  8. 利用axios這個插件去拿取後端送來的API或是送API給後端


這其實是很有趣的~ 但是
.
.
.
我懶XDXDX
我們既然有一個這麼好用的backend server,也有一個麼好用的firestore 拿來儲存 NoSQL的數據,何必要在小專案上自討苦吃?


在firebase創建你的專案

接下來我們就要在firebase裡面創建一個專案~

進到firebase console

傳送~ https://console.firebase.google.com/
如果你還沒有登入,就請先用google帳號登入啦

創建專案

接下來請點選新增專案
https://ithelp.ithome.com.tw/upload/images/20200920/20129730hhfu92NlQc.jpg

然後輸入專案名稱~ 之後就可以點繼續繼續 (如果你有google analytics也可以在第三個繼續十選擇使用)
https://ithelp.ithome.com.tw/upload/images/20200920/201297302ukqabiofa.jpg

然後就恭喜你創建成功啦~ 你應該會看到類似這樣的畫面:
https://ithelp.ithome.com.tw/upload/images/20200920/20129730doODnoz5ZI.jpg

註冊應用程式

在剛剛的那個專案主頁裡面,你應該會看到三個icon,點選第三個web icon然後就可以新增一個網頁應用程式
https://ithelp.ithome.com.tw/upload/images/20200920/20129730xrsZ7SurOn.jpg

接下來你可以先輸入一個應用程式的暱稱,再來就點選註冊應用程式吧!
https://ithelp.ithome.com.tw/upload/images/20200920/20129730PZrVKgF4Cj.jpg

接下來你會看到一大串code, 這個東西是叫做SDK,你要先把這些東西放到你的專案裡面,我們才可以把你的code 跟這個forebase做一個連結~

但這邊請注意一點 !! 裡面包含你的金鑰~ 請不要隨意傳給別人,或著是上傳到github上面 !!

這邊先把 <script> 裡面的東西給他複製起來~

var firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxx",
    projectId: "days-challenge-6adc3",
    storageBucket: "xxxxxxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxx",
    appId: "1:xxxxxxxxxxxxxxx:web:xxxxxxxxxxxxxxxx",
    measurementId: "G-xxxxxxxxxxxxxxxxxxxxxx"
  };
  
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();

回到project

這邊所謂的project就是跟之前一樣的那個project,如果還沒看過我之前的文章~ 也可以先到我的 github 裡面看一下source code

這邊我通常都會習慣開一個 configuration file 給一些需要做config 的東西~ 例如firbase
https://ithelp.ithome.com.tw/upload/images/20200920/201297302HBaJcchtv.jpg

在這之前~ 先來下載firebase

  1. open terminal
  2. npm install firebase

這個我應就不用多講了XD

把剛剛複製的code貼上來

import * as firebase from "firebase";
import "firebase/firestore";

var firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxx",
    projectId: "days-challenge-6adc3",
    storageBucket: "xxxxxxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxx",
    appId: "1:xxxxxxxxxxxxxxx:web:xxxxxxxxxxxxxxxx",
    measurementId: "G-xxxxxxxxxxxxxxxxxxxxxx"
  };

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();

export const db = firebase.firestore();

創建Cloud Firestore

建立資料庫

回到剛剛的firebase主控台,你會看到右邊的nav bar裡面有一個選項叫做cloud firestore,點選之後會看到
https://ithelp.ithome.com.tw/upload/images/20200920/20129730ME0GudeBHh.jpg

安全規則

可以先用測試版~ 但是要注意這代表參照你資料庫的使用者都有權利查看與編輯!
https://ithelp.ithome.com.tw/upload/images/20200920/20129730P76UWUXRL1.jpg

設定位置

這個其實沒差啦~ 只是就是選一下serve的位置要放在哪裡,離你越近就越快
https://ithelp.ithome.com.tw/upload/images/20200920/20129730YkpIPKWzFB.jpg

恭喜你創建成功

https://ithelp.ithome.com.tw/upload/images/20200920/20129730caMg39zKSQ.jpg


後記

原本我想在稍微提到一下collection 集合,還有一些firebase的model要怎麼定義~ 但今天應該已經夠多了XD我們明天再學~

大家周末愉快! 明天見


上一篇
【D19 - 用Vue實作網頁】請GET我然後POST我出去吧!
下一篇
【D21 - 用Vue實作網頁】Firebase 幫我存一下資料啦!
系列文
到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站30

尚未有邦友留言

立即登入留言