Oct 15, 2022 ~ Nov 23, 2022
前言&簡介
這個專案主要是繼承我高一上做的簡易刷卡機去進行開發的，有點像是二代目的概念，但是不管是使用的技術或者整個專案的完整度，功能都改善或者說前進了很多。
這次總共的開發歷程大概是一個多月左右的時間，很巧的是第一代也同樣是在年末的時候花了接近一個月的時間完成的，所以看到這兩個
project就可以直觀的看到自己這一年以來的進步，我覺得還是蠻欣慰的。使用的技術
- 後端
- restful
- OAuth2
- 物件導向
- 前端
- ajax(fetch)
- 前後端分離
架構與設計
前端
動態載入
動態載入，相較於以往的靜態載入，主要是指在這個專案當中傳送的資料基本上都不是以單次且完整的
html網頁互通，而是通過體積較小的多次的溝通在瀏覽器端渲染完整的網頁。這次因為依舊沒有使用前端框架（像是
React等），所以在動態載入的部分我只要是使用XMLHttpRequest和fetch去實現，但由於XMLHttpRequest複雜且相較難維護，所以後來的api的交互都是通過fetch去實現的。後端
在之前的開發中我發現
flask和django常見的架構，MTCMVC等這兩種都是由後端伺服器回傳和處理html等前端檔案，本地渲染完後，再發送給瀏覽器。但是隨著檔案變大，這樣做也會一定程度上影響到伺服器的性能，拖累伺服器的負載（尤其是處理像是用戶管理的頁面的時候，如果在伺服器渲染完整的html再進行傳送，那傳送過的耗時以及對伺服器資源的消耗都會隨著資料的增加二迅速上升，從而影響到使用者的體驗）。所以在這次開發的過程中，是採用
restful進行設計，讓flask和esp之間的通訊成本降低，以最簡單的json資訊互通。原本是打算完全採用前後端分離的模式進行開發，但是因為還沒碰react前端伺服器的部分，所以這次有點算是過渡的版本。路由設計
這次的路由主要分成三個部分，
Front-end Routes（前端路由）, Login Routes（登入路由）, Restful Api（功能路由）。前端路由主要是後端
flask伺服器將空的html（底板）傳送至瀏覽器，但是實際的資訊和功能等都沒有直接通過Jinja2引擎在前端路由進行實現，而是當前端路由在瀏覽器載入完成之後，重新發起js的ajax請求到Restful Api路由進行所有的功能（增刪改查等）。路由的流程如下：
所以基本上在前端進行的針對所有功能的使用等全部都是用
javascript再根伺服器請求完成的。（相比起之前的寫法，每一次的互動可以不用重新根伺服器要完整的html，從而讓伺服器的資源可以更快的釋放以處理其他的請求）身分驗證（OAuth2）
這次為了安全性和方便性，就直接將登入的部分使用
google的登入服務（先在google登入成功，再經由google返回給伺服器的使用者資料篩選允許的用戶）在使用
OAuth2的時候，google對於URL的控管非常的嚴格，分為兩個環境，本地測試環境和部署環境。在本地測試的時候路徑訪問要直接用localhost（並且在本地測試要設定環境變數export OAUTHLIB_INSECURE_TRANSPORT=1），而在部署環境的時候則一定要具備https才能發起oauth的認證 已授權的 JavaScript 來源
已授權的重新導向 URI
Api設計
客戶端（打卡機）
esp8266
oled
腳位
https請求
ntp時間
成果
心得
在這次開發的過程中，接觸了很多的新的技術也做了很多新的嘗試