三周內構建 JavaScript 全棧 web 應用

應用 Align 中，用戶主頁的控制面板

從構思到部署應用程序的簡單分步指南

我在 Grace Hopper Program 為期三個月的編碼訓練營即將結束，實際上這篇文章的標題有些紕漏 —— 現在我已經構建了三個全棧應用：從零開始的電子商店、我個人的私人黑客馬拉松項目，還有這個「三周的結業項目」。這個項目是迄今為止強度最大的 —— 我和另外兩名隊友共同花費三周的時光 —— 而它也是我在訓練營中最引以為豪的成就。這是我目前所構建和涉及的第一款穩定且複雜的應用。

如大多數開發者所知，即使你「知道怎麼編寫代碼」，但真正要製作第一款全棧的應用卻是非常困難的。JavaScript 生態系統出奇的大：有包管理器、模塊、構建工具、轉譯器、資料庫、庫文件，還要對上述所有東西進行選擇，難怪如此多的編程新手除了 Codecademy 的教程外，做不了任何東西。這就是為什麼我想讓你體驗這個決策的分布教程，跟著我們隊伍的腳印，構建可用的應用。

首先，簡單的說兩句。Align 是一個 web 應用，它使用直觀的時間線界面幫助用戶管理時間、設定長期目標。我們的技術棧有：用於後端服務的 Firebase 和用於前端的 React。我和我的隊友在這個短視頻中解釋的更詳細。

從第 1 天（我們組建團隊的那天）開始，直到最終應用的完成，我們是如何做的？這裡是我們採取的步驟綱要：

第 1 步：構思

第一步是弄清楚我們到底要構建什麼東西。過去我在 IBM 中當諮詢師的時候，我和合作組長一同帶領著構思工作組。從那之後，我一直建議小組使用經典的頭腦風暴策略，在會議中我們能夠提出儘可能多的想法 —— 即使是「愚蠢的想法」 —— 這樣每個人的大腦都在思考，沒有人因顧慮而不敢發表意見。

在產生了好幾個關於應用的想法時，我們把這些想法分類記錄下來，以便更好的理解我們大家都感興趣的主題。在我們這個小組中，我們看到實現想法的清晰趨勢，需要自我改進、設定目標、情懷，還有個人發展。我們最後從中決定了具體的想法：做一個用於設置和管理長期目標的控制面板，有保存記憶的元素，可以根據時間將數據可視化。

從此，我們創作出了一系列用戶故事（從一個終端用戶的視角，對我們想要擁有的功能進行描述），闡明我們到底想要應用實現什麼功能。

第 2 步：UX/UI 示意圖

接下來，在一塊白板上，我們畫出了想像中應用的基本視圖。結合了用戶故事，以便理解在應用基本框架中這些視圖將會如何工作。

這些骨架確保我們意見統一，提供了可預見的藍圖，讓我們向著計劃的方向努力。

第 3 步：選好數據結構和資料庫類型

到了設計數據結構的時候。基於我們的示意圖和用戶故事，我們在 Google doc 中製作了一個清單，它包含我們將會需要的模型和每個模型應該包含的屬性。我們知道需要「目標（goal）」模型、「用戶（user）」模型、「里程碑（milestone）」模型、「記錄（checkin）」模型還有最後的「資源（resource）」模型和「上傳（upload）」模型，

最初的數據模型結構

在正式確定好這些模型後，我們需要選擇某種類型的資料庫：「關係型的」還是「非關係型的」（也就是「SQL」還是「NoSQL」）。由於基於表的 SQL 資料庫需要預定義的格式，而基於文檔的 NoSQL 資料庫卻可以用動態格式描述非結構化數據。

對於我們這個情況，用 SQL 型還是 No-SQL 型的資料庫沒多大影響，由於下列原因，我們最終選擇了 Google 的 NoSQL 雲資料庫 Firebase：

它能夠把用戶上傳的圖片保存在雲端並存儲起來
它包含 WebSocket 功能，能夠實時更新
它能夠處理用戶驗證，並且提供簡單的 OAuth 功能。

我們確定了資料庫後，就要理解數據模型之間的關係了。由於 Firebase 是 NoSQL 類型，我們無法創建聯合表或者設置像「記錄（Checkins）屬於目標（Goals）」的從屬關係。因此我們需要弄清楚 JSON 樹是什麼樣的，對象是怎樣嵌套的（或者不是嵌套的關係）。最終，我們構建了像這樣的模型：