線上實聯制管理表格(2022)

Programing language: PHP, typescript

Framework: Laravel, ReactJS/Redux

Package: Kendo React, React Final Form, Material UI

關於此系統 (Chinese)

系統分為兩個部分，一個是使用者進來填寫表單，另一個部分是管理者可以登入系統後端觀看填寫的內容

在建置系統的部分個人習慣先建立後端，再寫前端頁面。

後端的部分會先擬好資料庫架構，製作migration腳本來建立資料表。

接下來就是建立Model和Controller，有必要的話可能會用到Service (不過此範例是用Laravel框架建立的小程式，所以資料檢查、新增、修改、刪除的處理都直接寫在Controller上)。

登入登出的部分則是使用Laravel內建的Authentication去製作。

前端的部分則使用React框架，採用Function Component + Hooks方式來寫，透過Laravel內建的Laravel Mix來Build。

在開始前端的部分會和設定開發環境，然後導入最底層的套件。設定開發環境的部分：原本Laravel預設的前端框架是Vue需要轉換成React，接下來在導入TypeScript。

導入最底層的套件的部分則是先裝Redux和React Router，React Router的部分個人比較偏好用BrowserRouter當底，有的工程師為了方便不想設定後端相關的路由可能會用HashRouter，但是HashRouter會占用URL中#的部分，導致#無法做為原本頁面段落轉跳的功能，不過作法還是取決於開發怎麼樣的系統而定。底層架構打好了會開始拆元件和製作頁面。

對於抓資料的部分，個人習慣寫一個客製化hooks來處理CURD的事情。至於會做客製化hooks的原因是因為可以把在做CURD的時候，可能會用到Redux的一些hook (載入中元件管理的部分我是透過Redux來處理的)，或者是Toast套件，另外出錯的時候也可以統一處理。

系統製作時間大概2~3天左右