Firebase + Node.js 購物車網站開發實戰

小明的煩腦

在這堂課程介紹開始前，我想先跟大家分享一個簡短的故事…

王小明，今年28歲，剛踏入了前端工程這個領域，學會了切版，非常熟練的用 css 排出響應式網頁，也正在使用 vue 開發前端專案，對 javascript 也有了一點的認識。

一個安逸的週未午後，在電話那頭傳來了熟悉的聲音，是王小明的一個同窗好友，問他能否幫他製作一個旅遊網站報名系統，需要在後台上傳圖片、也要簡單的記錄報名人數，聽說你在資訊界擔任工程師，那這個案子應該難不倒你吧？在電話的這頭，小明開始幾秒鐘的沉默，他很想回他說，我對資料庫不熟，不知道怎麼規劃系統，而且還要上傳圖片，這是後端工程師的工作，我的專長只是切版和串接資料，所以這…可能無法執行。

Firebase 解決方案

上面這些需求，其實並不是一個虛構的故事，而是常常發生在我身上，在我前端職涯的早期，許多朋友會向我尋問是否能打造 xxx 購物網站、xxx 報名系統，但我總是因為後端技術的不熟，而無法接下某些案子。

而直到 2016 年 google Firebase 大放異彩的出現後，看到他提供的實時資料庫 (Realtime database)，我就在想能否用 firebase 來解決網站開發上的一些中小型應用？於是我開始研究了 firebase，並開發了我第一個 firebase 專案：infometro 資訊地鐵站，僅撰寫少量的 後端程式 就完成了一款記事服務，後來我將 firebase 應用在工作上，例如：接案媒合平台、購物車系統、 wayne1894教學網 都是用 fireabse 來完成的。

這堂課就是分享我使用 firebase 開發網站的心得

Firebase 是什麼？

那 Firebase 是什麼？我們就用下面這張圖來說明，如果你得 獨自一個人 打大魔王 (完成複雜的專案 )，那麼 Firebase 就好像一把寶劍，能快速幫你達到目標。

圖片出處：什麼是 firebase？ 

本課程的 firebase 是基於 web 應用，非 app 開發

firebase 是一款 no-sql 資料庫，但這麼說也不完全正確，firebase 是即後端服務於一身的雲端平台，他使我們能用呼叫 api 的方式就完成一些應用，例如：身份驗證、資料庫、檔案儲存、架站、甚至是機器學習等。

Firebase 對網站開發人員提供一系列的 SDK ，讓我們能快速呼叫使用

所以學習 firebase，能讓我們用一種更簡單的方式，來達成網站後端的開發

學習 Node.js

所以使用 firebase 我們就無敵了嗎？當然不是 (請參考下面 firebase 適合的專案)，其實只靠 firebase 並不能解決網站開發會遇到的問題 (例如：串接金流)，我們還是必需了解後端語言，這樣才能更靈活的運用 firebase 所提供的功能，所以這堂課的另一個重點就是學習使用 node.js，前端常會使用他來做打包工具，但我們用他來開發網站，並與 firebase 作搭配。

所以這堂課程就是使用 node.js + firebase 作為網站開發的解決方案

 firebase + node.js 必需相輔相成，就好像太極一樣，缺一不可，本課程就是用這種方式來解決王小明的問題。

Firebase 適合的專案

不過 firebase 並不適合所有的專案

假使你的網站是大型系統 (像是 104人力銀行)、erp 系統、資料關聯度複雜，那 firebase 反而會造成許多的麻煩，因為他是 no-sql 資料庫，資料和資料之間不好做關聯，這也是學習者必需先要有的認知。

不過 firebase 其實也可能適合大型系統，主要看我們怎麼靈活的去運用他

那什麼專案適合 firebase ？

1. 中小型應用：如果你的專案是屬於中小型官網、簡單的報名系統，那本課程的 firebase 解決方案就非常適合，因為資料的查詢較為單純。
2. 瞬間高流量的網站、聊天室：這類專案可以有效利用 no-sql 資料庫的優勢，也能在瞬間承載非常大的流量。
3. 多人連線互動系統：firebase javascript SDK 已內鍵了 web socket 連線機制，能即時達到多裝置同步。
4. 購物車：如果產品的分類層級單純，只要你會規劃資料庫，那 firebase 也能很出色應用在這類型專案。

本課程主要聚焦在上述第 4 點 ：購物車

課程架構

本課程的目標就是帶領學員實作一個 購物車 和 金流系統，從實作的過程了解 firebase 與 node.js 的開發原理。

一、 學習 node.js 

第一部份就是學習 node.js ，我們會使用 express 做為網站開發的框架，學習 後端運作 的原理，並學會 佈署網站上線 (使用 nginx 、gcp linux vm)、申請網域等一系列建置中小型網站服務會需要的流程，你也可以把他當做是 node.js 的入門課程，因為我們實作的購物車網站與金流系統，這都需要有 node.js 知識才能達成。

二、 學習 firebase 關鍵技法 

第二部份我們學習 firebase 網站開發的關鍵技法，也是本課程核心部份， firebase 其實有很多不同 SDK 的解決方案 (如下圖)，而本課程主要使用  firebase admin 搭配 node.js 來做開發。

並將 firebase 常用的功能分成八大類來講解 (如下圖)，分別是 Firestore、Hosting、Storage、Firebase rule、Firestore (複雜查詢)、Functions 、Authentication、Extensions ，完整呈現 firebase 用於 web 開發的部份(參考課程章節)，而其中最重要的就是 Firestore 資料庫的規畫與設計，同學學會規劃資料庫後，就能應付不同的專案需求，並可以搭配不同的 SDK 或前端框架 (例如：nuxt.js) 來使用。

三、實作購物車機制

第三部份我們會直接實作一個中小型購物車網站：課程實作範例，實際帶你規劃 firestore 產品型的資料庫，開發會員登入註冊、產品頁套版、購物車下訂單機制 等功能 (會挑選重要功能來實作，請參考課程章節)，這些機制都是購物車網站常用的功能，同學學會實作這些機制後，將能夠自行接案，解決中小型網站專案的需求。

而要實作的這個 購物車模版 也非常實用，我甚至直接拿這個模版改良來接案。

實作的購物車官網

購物車產品頁

購物車結帳頁

購物車下訂單頁

會員登入註冊與編輯

四、藍新與綠界金流串接

第四部份我們會研究如何串接 藍新 與 綠界科技金流，並實作會員信用卡、ATM付款等功能，並講解串接的流程 (不是直接付上程式碼而以)，同學了解後就能將金流串接於其他架構上(例如：nuxt.js)，並能開發自己的購物車網站並販售自己的產品。

串接藍新金流

串接綠界科技金流

綠界後台接收訂單資料

五、CMS 後台管理系統

第五部份我們會研究如何用 node.js 與 firebase 架構來開發一個後台管理系統，這個系統為講師多年來接案使用的系統，我們會學到如何開發 管理者登入登出、權限機制、最新消息、產品管理、訂單管理等，最後我也會將整個系統送給大家，使同學能直接使用在接案上。

完整的後台管理系統

總結

總結這堂課程，是我這兩三年接案常使用的架構，發現前端要學習後端最困難的關卡就是 購物車與金流系統，如果我們不會串接金流，那我們接的案子就無法拓展到電子商務這一塊，所以希望能將知識分享出來，如果你跟我一樣有王小明的困擾，那就歡迎來報名這堂課程，讓我們來點滿 firebase 開發的技能。

什麼人適合上這堂課程？

1. 前端工程師：想用本課程架構開發後端應用者(無需後端經驗)
2. SOHO 接案者：想用本課程架構打造中小型網站者 (含購物車系統)
3. Startup：初創事業想嘗試使用 firebase 當架構者

需要具備的背景知識

這堂課程適合有編程經驗的前端工程師，不需學過後端語言，課程會直接帶你了解 node.js。

1. 了解基本的 html、 css
2. 了解 javascript (懂 json、ajax 等基本前端串接 api 知識)