React

前言 前陣子我的藥師朋友經常需要手動計數藥丸，以便進行包藥作業．這個過程既耗時又容易出錯。為了解決這一問題，我幫他設計了一個簡單的應用程式，使用 YOLOv8 模型來自動識別並計算照片中藥丸的數量，從而快速提供準確的結果 專案說明 專案的詳細介紹我把他整理到 Notion 上，裏面有更詳細的說明 Ref: GitHub Repo 系統架構 這個專案需求非常簡單，其實單純一個 Monolithic 的架構就可以應付，但為了練習看看微服務(Micro service)的切分，就嘗試將不同的功能切分成不同的服務，彼此用 Restful API 溝通 Tech Stack 簡單列一下使用到的技術 Backend Python(FastAPI) Node.js(Express) written in TypeScript Auth JWT Google Auth Redis AI Model YOLOv8 Label-Studio (Labeling Tool) Frontend React written in TypeScript PWA Storage PostgreSQL (database) Minio (Image storage) 心得 這是第一次嘗試 React 的 PWA，用 service worker 滿直覺也滿簡單的，配置一下部署到 Netlify 上，就可以把網站下載到手機桌面上充當一個 APP 使用 這是第一次嘗試 Yolov8 的模型，並使用 Label-Studio 工具作為標註，使用起來相當直覺，當有多人需要同時標註時，簡單在電腦啟動 server，然後用 ngrok 臨時建個 tunnel，開放給別人一起標註...

前言 前陣子在公司開發一個搜尋網站，參考第三方開源專案 searchkit 的設計架構，嘗試使用 GraphQL 搭配 Elasticsearch 來透過一次 request 獲取大量 resource 的搜尋資料，前端則使用 React 搭建 SPA 網頁，但在使用頁籤跳頁時卻出現 React 的警告: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 大概知道是 useEffect 要 cleanup 的問題，但卻不知道 callback funtion 該怎麼做，debug 了好一陣子也未果，後來因緣際會下看到幾篇技術文章才恍然大悟，原來 fetch 就有 abort 可以處理，因此簡單以 pagination 的情境來重現上述問題，順手作個紀錄 重現問題 為了重現當初遇到的問題，找了 jsonplaceholder 上的 open data，來做一個文章(posts) pagination 的 demo...

前言 前幾天研究了一下 Client Pull 和 Server Push 的幾種方式，其中屬於 Server Push 的 SSE(Server Send Event)已經在之前的文章 資料實時更新的方式 - Client Pull vs Server Push 中實作過，這次來研究另一種 Server Push 的方式，同時也是較常聽到的 WebSocket，來研究看看如何實作一個簡單的多人聊天室 簡介 Socket.io 因為待會 demo 的前後端會使用 Socket.io 套件來實作，所以開始前先來介紹一下 Socket.io 這個套件 （以下內容整理自官網介紹） Socket.IO is a library that enables low-latency, bidirectional and event-based communication between a client and a server. Socket.io 也是為了解決網路即時通訊而誕生，但是他並不像 WebSocket 一樣屬於通用協定，而是將底層 WebSocket 抽象化的 JavaScript Library(包含前端與後端的 npm 套件)，所以 Socket.io 是建於 WebSocket 之上，有自己定義的溝通格式。 Socket.IO is NOT a WebSocket implementation....