Webapp 網路應用程式開發流程 Vue.js 與 Laravel API 的完美結合

2022-02-07 腳印網頁資訊設計

Webapp 網路應用程式的實務開發流程，它風行的原因主要是因為它能夠跨平台，只要裝置有 Web browser (瀏覽器) 均可執行。

開發一套程式前的系統需求與專案時程規劃將影響系統 UI (使用者介面) 的開發，及近幾年越加重視的 UX (使用者體驗)，UX 設計好的話，使用者可完全不需系統手冊就會使用一套系統。

撰寫系統為前、後端分離的架構，依顧客需求選用合適的資料庫。後端使用 Laravel RESTfulAPI，前端則是近幾年使用人數持續上升的 Vue.js 來串接後台 RESTful API。在來則是最終的系統 Demo 及上線。

什麼是 Webapp 網路應用程式？

Webapp (網路應用程式) 可分為兩種架構：

客戶端結合後端伺服器和資料庫。
僅客戶端。

而 Webapp 的客戶端就是 Web browser (網頁瀏覽器)，像是 Chrome、Firefox、Safari、Opera、Edge 和 Internet Explorer 等。

Webapp 風行的原因主要是因為它能夠跨平台，只要裝置有 Web browser 均可執行 (電腦、平版、智慧型手機 )，且不需事先安裝或定期升級程式。

系統需求規劃

現有表單

紙本。
Excel。
其它電子檔

使用者訪談

這要加入【現有表單】，並同時與使用者、網頁程式開發人員共同討論系統需要的頁面，以及功能和邏輯等。

這是最重要的一個環節，網頁程式開發人員一定要完全了解，並與【使用者】再三確認需求 (很重要 * N)，因為這會大大影響後續開發，程式的修改次數和時程，與後續維護的成本。

專案時程規劃

規劃專案每個頁面及功能完成的時間，當有一個頁面 UI 完成 (不含功能邏輯) 就先請【使用者】確認，無誤後在撰寫功能邏輯，完成後再次確認，直到沒問題在進行下一個頁面。

後端

資料庫 Table 規劃

彙整上述需求確認【表單】+【訪談】+【UI】後，非常關鍵的就是資料庫 Table (資料表) Schema 規劃，也就是 Table 欄位及資料格式的制定，以關聯式資料庫 Table 和 Table 的關聯性，和最終的資料庫正規化。

資料庫規劃好壞與否，將影響整體系統的開發時程及後續的維護性，通常會花較多的時間與心絲在一開始的資料庫規劃。

RESTful API

RestfulAPI 簡單來說就是使用後端程式 PHP (或框架 Laravel)、Node.js (或框架 Express.js)、Python 等程式串接資料庫對應的 Tables，且提供一個唯一的網址作為資源，並由前端向後端進行 CRUD (新增、查詢、更新或刪除) 請求的操作，來進行對應資源的 Data。

《延伸閱讀：RESTful Web API 設計指南》