如果你問過去的我：「要不要用網頁技術做一個完整的應用？」 我大概會搖頭，因為我本身是一名長期專注於 桌面應用程式開發 的上班族工程師。 對於 React、Fir...
關於平台的開發經驗，分享到此暫告一段落。接下來，我將主要分享平台未來的發展思考，以及這段時間與 AI 協作的開發心得與總結。 這個平台的目標，是希望能幫助孩子把...
這段時間因為投入 iThome 鐵人賽文章的撰寫，平台的更新暫時停了下來。 為了避免思路斷掉，我決定在網站上增加一個「開發日誌」頁面，專門記錄平台的開發過程與背...
在這段收集使用者回饋的時間裡，除了平台使用上的一些小問題之外，孩子的媽也提出了一個新的需求： 能不能在平台裡加入單字學習的功能？ 確實，既然孩子每天都會透過任務...
在上一篇文章裡，我分享了透過 AI 來改善使用者對任務管理功能的回饋意見，進而推動平台功能與 UI 細節持續優化的過程。這篇文章，則要延續這個主題，分享更多實際...
在產品開發的世界裡，上線並不是結束，而是新的起點。 一個系統能否長久被使用，不僅取決於功能是否完整，還取決於它的 維護性、彈性，以及回應使用者需求的速度。這些因...
把腦中想像的育兒工具慢慢做成能用的平台，這一路上 AI 幫了我很多忙。 到目前為止，平台已經有 任務管理、每週報告、成就系統 以及其他更多核心功能，小孩能自己操...
在上一篇文章中，我透過 AI 的協助，把一個原本只是網頁型態的 PWA（Progressive Web App） 包裝成 Android App，並利用 TWA...
當網站正式上線的那一刻，我還蠻開心的，因為整個平台終於有了完整的樣子。但冷靜下來之後我又想，現在的網站其實有點空洞，整個網站看起來也要有「內容感」才行。畢竟使用...
到目前為止，平台的功能其實已經算是完整，我自己的孩子也都能獨立操作使用；也有邀請過幾位家長試用，得到了一些正面的回饋。對我來說，這已經算是一個重要的里程碑。 但...
因為這個平台希望能透過輕度遊戲化的方式幫助引導孩子完成每天的任務，例如收拾書包、刷牙、整理房間，讓「例行公事」變得更有趣、更具成就感。同時，因為家長是陪伴孩子的...
在完成兒童任務管理平台的核心功能後，我又在 AI 的協作下，快速打造了「每週報告」：彙整任務完成率、活動紀錄與獎勵兌換等等；接著，我又想到的一個適合的常見功能&...
在前幾天的紀錄中，我分享了目前開發的兒童任務管理平台，已經具備了 基本任務管理、獎勵系統，還有 冒險地圖 與 成就抽獎 等趣味功能。這些設計的初衷，是希望孩子能...
引言 React 的核心設計，是建立在一個重要假設之上：「資料與元件狀態的變化無法事先預測」。基於這個假設，React 必須持續透過 Virtual DOM（虛...
Day 2: 1131229一、目標:設定好VS code環境，做好開發前準備二、預計使用工具:(一)Spring Initializr(二)VS code 三...
每天強迫自己產出內容是一個很大的挑戰，但這種輸入與輸出的循環，對我幫助真的很多！在這次鐵人賽寫作挑戰中，發現了不少自己在知識點上的盲區，以為已經了解某些Reac...
鯨魚
‧
2024-10-15
今天是挑戰的最後一天，我們聊了許多關於React和比較常見的套件，以及最後實作了Gym Pro的專案，為什麼要做這個挑戰主要是我七年的開發經驗都圍繞在後端，這幾...
Redux 是一個狀態管理庫，主要用來管理應用中的全局狀態，特別是當應用變得複雜時。Redux Toolkit（RTK）是官方推薦的開發 Redux 應用的工具...
鯨魚
‧
2024-10-14
今天是我們實作的最後一天，我們要為系統做最後的收尾工作，確保它穩定、高效、安全，並且易於使用。 1. 全面測試 首先，我們要進行全面的系統測試，確保所有功能都能...
昨日說明了Redux的介紹，今天就要再來準備實作的操作，這次實作也是要把 Day18 的TodoList小作品做個重構，讓原先用 useState 改用成 R...
鯨魚
‧
2024-10-13
今天，我們要來為系統加入一些功能。這些功能可能不會直接被使用者看到，但它們對於系統的長期健康發展有關。 1. 實現插件系統 首先，我們來實現一個簡單的插件系統，...
useContext useContext 是 react 提供的一個 hook，可以讓我們透過讀取和訂閱元件中 context 共享元件之間的資料，主要是用來...
雖然我們功能已經差不多了但也僅此與前端的功能，若要變成更完整的一個專案可以再加入PWA、後端登入、將景點儲存在資料庫等等，又或是將地圖套件做得更完整，礙於時間限...
今天，我們要來為系統增加一些功能，並且優化整體的用戶體驗。 1. 即時通知系統 首先，我們來實現一個即時通知系統，讓用戶可以及時收到重要的消息。我們將使用 So...
DOM DOM (Document Object Model) 是一個網頁樹狀資料結構的物件，用來呈現瀏覽器中的畫面結構。當頁面產生變化時，便是透過操作 DOM...
useReducer 是 React 提供的 Hook，用於處理更複雜的狀態管理。與 useState 相比，它引入了 reducer 函數來決定狀態更新的方式...
鯨魚
‧
2024-10-11
在現代網頁開發中，將網站快速且高效地部署到互聯網上是每位開發者的目標之一。Vercel 作為一個強大的部署平台，提供了簡單易用的工具，幫助開發者輕鬆地將應用程式...
useRef 是什麼？ useRef 是 React 提供的 hook，用來創建一個 可變（mutable）的引用對象，可以用來存取 DOM 元素或保存跨越多次...
今天，我們來為系統進行一些優化和安全性增強，對於打造一個穩定、高效、安全的系統是一定要做的。 1. 資料庫查詢優化 首先，我們來優化一些常用的資料庫查詢，以提高...
在現代的前端開發中，React 和 Redux 已經成為構建複雜應用的主流技術。然而，隨著應用的增大和複雜度的提升，調試和維護代碼變得愈加重要。為此，開發者需要...
平凡工程師
LucianoLee
Moscle.dev
Ashley
ntuedtd113
iThome鐵人賽
看影片追技術