前一篇介紹利用 Docker 來安裝 Home Assistant，可以看到有了 docker 之後，要架設服務是有多簡單的事情，今天要來介紹，在 Synology 群暉 Nas 上利用 Docker 安裝 Gitea。
也是相當簡單，本來我也想跑一下 gitlab ，不過群輝上的套件中心 gitlab server 裝起來卻沒有找到相關用法，找著找著就看到一篇 使用 Docker 五分鐘安裝好 Gitea (自架 Git Hosting 最佳選擇) 看來又是個 docker 的工具，而且網路上介紹 gitlab 都採用 docker 架設居多，秉持著冒險精神，就先在 Nas上建立看看 Gitea 吧。
進入 nas 打開 docker，搜尋 gitea
在第一個 image 裡面，按下下載，直接預設選擇 latest
現在應該有不少人想把家裡的家電利用一些智能家電的功能連線到所謂的網關裡面，但是常常又看到一些玩家說可以利用場景模式套出更多功能來，但是又不知道要怎麼實現這種作法，通常找到一些資訊都會說安裝 HA
HA 全名為 Home Assistant，主要就是一個開放式原始碼的網關軟體，他強大的社群開發，讓不少 IoT 智能家居設備都可以透過它來連接，不過大多數人會跟你說你需要一台 樹莓派來安裝這個系統
但是現在樹莓派一台已經溢價一個誇張的程度，用樹莓派還划算嗎，之前我曾經利用 Linux 的系統安裝 docker 來執行，不過光是要把一些檔案拖曳到系統中就夠折騰我了，還有什麼更方便的方法嗎？
有的！買一台 Synology 群暉 ，就能搞定，新的 DSM 版本支援 Docker 安裝，只要你的機型符合，就可以安裝 Docker 套件來跑，Docker 是什麼呢？最簡單的來說，它就是台虛擬機的功能。
利用 Synology 群暉 的套件中心，直接安裝 Docker ！
在套件中心安裝好 Docker 之後，直接執行該應用程式
進入之後可以看到首頁，可以看到目前執行中的容器它的硬體占用概況，這時候點選 倉庫伺服器 (Hub)
這些 倉庫都是 Docker 官方可以讓使用者上傳的映像檔倉庫 ，未來也可以自建或是抓別人建好的來玩玩
前陣子在爬 Laravel 的路由，發現在呼叫 Controller 的時候，並不是直接執行，而是採用 callback function 去呼叫的模式，在路由裡面有一段路徑：
Illuminate\Routing\ControllerDispatcher
public function dispatch(Route $route, $controller, $method)
{
$parameters = $this->resolveClassMethodDependencies(
$route->parametersWithoutNulls(), $controller, $method
);
if (method_exists($controller, 'callAction')) {
return $controller->callAction($method, $parameters);
}
return $controller->{$method}(...array_values($parameters));
}
可以看到 Controller 在執行之前會先去檢查你的 Controller 有沒有一個叫做 callAtion 的 function 沒有就回傳並呼叫路由指定的 Controller method。
前端開發中的時候，很容易把 API 事件寫在同一個 component 裡面，大部分人會進行封裝，讓傳送 API 的方法變得更簡單
先前碰到同事裡用前端框架系統 Vue 的時候，則是把 API 放到 Vuex 裡面，之前看過 React 裡面，如果上下層傳遞有點過於遙遠或是複雜，通常會用 State 來管控， Vue 使用 Vuex ，React 則是用 redux 來表達貫穿這個元件的參數。
不過正如上面說的 Vuex 跟 redux 都是用來放狀態的，如果拿來放其他東西，並不是說不可以，只是如果在物件導向的裡面中，這樣就違反了 單一功能原則的項目，狀態管理就不再是狀態管理。
自從看了一點 Clean Code的書之後，開始針對 Clean Architecture 很感興趣，原本我主要寫後端跟一點點的前端，開始把後端架構邏輯設計延伸到了前端，開始修正前端同事的程式碼。
Clean Architecture：
回到正題 要實現乾淨的架設設計，首先先把專案中的 Vuex 裡面，包了一堆 API 的模式給抽離開來，去年我重新理解一次 新的 JavaScript 的時候，發現 ES6 有個相當好用的東西叫做 Classes 如果你懂一點物件導向就可以知道這個東西是用來做什麼的。
實際操作了一下真的讓我感動到哭，很久很久以前操作 JavaScript 的時候要實現到類似的事情必須要 function 一層包了一層才有可能實現這件事情，現在原生 JS 支援把這個東西當成特別的 function 讓你使用更簡潔的方式建立物件，以及處理繼承，真的相當方便
這邊先設計一個範例，採用 https://reqres.in 來顯示 REST API 的方式，這個資源是隨意 Google到的，要套用現有的 資源應該也不是問題。
JS 自從有了打包工具之後，很多工具造福不少開發者，以往要送個 AJAX 到後端，大多都是一個頁面處理一個 method
框架化後，每個程式碼開始有了 物件化、封裝方式來做，現在大多都用 axios 來送 AJAX
但是遇到一個問題就是送檔案的時候，需要使用到 FormData 的物類別物件。
但是整個像後端送的程式碼都封裝起來了，要針對一個檔案上傳的方法，做出額外處理，當檔案上傳處理頁面多了之後
維護除錯方法就有點麻煩。
所以比較好的方式還是修改 API 送出前，先把物件轉換好判定是否有 File 類型，然後轉換成 FormData 就可以一勞永逸
許久沒開箱了，這次要開的是 iRocks K89M ，這款鍵盤說來慚愧，我滿早就入手了，不過因為搬家加上工作的關係，最近才從倉庫把它挖出來，好再手感依舊，這次還是做個紀錄，把鍵盤給開起來。
iRocks 從薄膜鍵盤，到機械自鍵盤，再到自有軸，這次來到了人體工學分離式機械鍵盤，每一次的鍵盤設計都令人驚艷，價位也是相當的親民，機械式鍵盤從好入手的軸體，到堅持德國櫻桃軸體的選擇都有各種類型的選擇可以挑選。
這次要開箱的 K89M 也是，最早在嘖嘖募資，為人體工學鍵盤再闢一條道路，募資現況已成功，不過相隔已經兩年了，要買也很難入手。不過好在近期它們又開了新的鍵盤設計 iRocks-K59M
不過究竟 K89M 到底好不好用，現在開箱也可以讓想預購 K59M 的朋友們做個參考。
K89M 採用人體工學鍵盤左右分離的設計，整體包裝來說是採用上下疊的方式包裝
Vue3 HOC( higher order components )，原本我還不知道 HOC 的意思，主要是用了 Quasar 元件庫之後，針對原有的組件有些事件、方法想要異動，當然想操作到最少異動達到我的效果，所以搜尋了類似的關鍵字，最後才知道利用 HOC ( higher order components ) 可以達到我要的目的，HOC 在 React 已經是相當成熟的概念了，但是在 Vue 裡面實際上看到的案例相當少。
首先可以理解一下 Vuc 的 HOC 的來由，可以參考這篇：探索Vue高阶组件
我能夠快速理解的模式就是，撰寫一個 function 幫你與目標元件溝通，並且取代成原本的 component
下列這個專案：@hoc-element/table 就是一個針對 element plus 修改的例子
開始寫專案之前，團隊都是使用 Vue 2 寫畫面，Vue 2 要升級到 Vue 3 對我來說，最大的轉變就是 extends 了
Vue 2 用的是 Options API， Vue 3 寫的是 Composition API，寫法什麼的對還沒開始完成專案的我來說，好像沒太大差異。
但是當我實際開始寫之後，才知道我在專案上之前應用了很多 extends 用法，在 Vue 3 裡面通通失效了…
原本寫成 extends 的作法是讓每個 Component 都可以不必撰寫就有此方法，data 也可以逐一傳遞，現在通通要改成 Vue 3 的寫法。