Ray 貓

Ray 貓

實戰分享我是怎麼指揮 Claude Code 用少量時間征服大型複雜任務

實戰分享我是怎麼指揮 Claude Code 用少量時間征服大型複雜任務

這篇文章,我會向大家教學我是如何指揮 Claude Code 優雅的處理大型複雜任務 如何用一個提示詞快速搭建出一個上線的電商網站,當然這是我本人的實戰經驗,它並非完美,歡迎大家討論。 這並不是一堂教你用 10 分鐘做出一個工具的課程; 相反地,這是一篇硬核實戰文,專門寫給已經具備 AI 實戰經驗、且不滿足於寫玩具程式的開發者。 開發一個產品前要先做什麼?先寫文件,將你大腦裡抽象的想法沉澱為文字。 這裡的文件有很多種寫法,其中比較著名的就是 SDD(規格驅動開發)。 如果可以的話,我們要將需求寫得盡可能完整。不只是簡單地寫一句「要有註冊功能」就好,而是以寫成類似使用者故事(User Story)的格式,附上具體的驗收標準,並儘可能覆蓋各種情境 當然,由於 SDD 的教學網路上已相當豐富,因此本文不再贅述細節。但我必須強調:文件是專案的靈魂,它是接下來所有 Agent 開發時唯一依循的真理、整個專案的燈塔、一切的指標,接下來的開發都會基於這份文件為基石而做搭建。 有了這份基石,
13 min read
簡單理解怎麼造一個千萬人流量的網站

簡單理解怎麼造一個千萬人流量的網站

📅 發布時間: 2025-11-06 🏷️ 標籤: 高併發系統、負載平衡、Redis快取、資料庫分片、訊息佇列 簡單理解,面對超大流量,該如何避免網站掛掉的方式! 本文以普發現金網站為例,深入淺出解析高併發系統設計:身分證分流策略、負載平衡、Redis快取系統、資料庫分片技術、訊息佇列等核心概念。 從解決瞬間流量峰值、資料庫瓶頸到資料一致性問題,用生活化比喻帶你理解大型網站架構,適合後端工程師與系統設計初學者。 恭喜你成爲了政府網站的後端工程師,你的第一份工作很簡單 明天有 2300 萬人要同時進去普發 1 萬網站,不要讓網站掛掉 先不要急得辭職,我們可以先分析一些簡單的方法 分析問題 寫任何程式的第一步就是分析你要解決什麼問題,在你眼前擺著三座大山 1. 瞬間流量峰值 當所有人在同一時間點湧入,伺服器的 CPU、記憶體、網路頻寬都會瞬間達到極限。 2. 資料庫瓶頸 無論你有多少台應用伺服器,最終所有請求都要訪問同一個資料庫。資料庫的讀寫速度成為整個系統的致命瓶頸。 3. 資料一致性問題 2300
7 min read
MCP 開發,ChatGPT 報錯 Connector is not safe 解法

MCP 開發,ChatGPT 報錯 Connector is not safe 解法

📅 發布時間: 2025-11-01 🏷️ 標籤: MCP開發, ChatGPT, OpenAI錯誤, 連接器安全 開發 MCP 伺服器整合 ChatGPT 遇到「Connector is not safe」錯誤?立即了解此常見 OpenAI 錯誤的核心成因(與隱私描述有關)與最新實用解法!快速解決連接器安全問題,讓您的應用程式順利上線。 問題:ChatGPT 報錯 Connector is not safe? 最近很常遇到開發 MCP 伺服器時,想綁到 ChatGPT 的應用程式與連接器 結果報錯 "Connector is not safe" 明明我的程式碼都符合最佳實踐,版本也在最新 到底是哪裡不安全?! 我來告訴你怎麼解決 👇 「工具描述」 只要你的某個工具描述中包含「
2 min read
打造你的第一個 MCP Server:從概念到實作

打造你的第一個 MCP Server:從概念到實作

📅 發布時間: 2025-10-23 🏷️ 標籤: MCP, AI Agent, Node.js, Express, ngrok, ChatGPT, Claude 想讓 AI 助手存取你的本地筆記、檔案或資料庫?本文從實際痛點出發,完整解析 MCP(Model Context Protocol)如何成為 AI 與工具溝通的標準協定。透過手把手的程式碼教學,帶你打造第一個 MCP Server,讓 ChatGPT 或 Claude 能自動讀取你的個人知識庫。包含完整實作、ngrok 部署步驟與實際對話測試,讓你快速掌握 AI Agent 開發的核心技術。 開場:為什麼需要 MCP?從真實痛點出發 你是一位熱愛學習的工程師,這些年累積了超過 1000 篇個人筆記,散落在本地資料夾裡。
30 min read
智能合約 Solidity 教學 (下) - Web3.js 實際開發一個 DApp 去中心化應用前端

智能合約 Solidity 教學 (下) - Web3.js 實際開發一個 DApp 去中心化應用前端

📅 發布時間: 2025-01-29 🏷️ 標籤: Solidity, Web3.js, DApp, MetaMask, 前端開發, Sepolia 這篇文章繼承了上一篇智能合約 Solidity 教學 (中),我們開發一個 DApp 的前端,理解如何透過 Web3.js 連接區塊鏈上我們所部署的合約。 目錄 * 智能合約 Solidity 教學 (上) - Solidity 基礎語法教學 * 智能合約 Solidity 教學 (中) - MetaMask 與以太坊測試網 * 智能合約 Solidity 教學 (下) - Web3.js 實際開發一個 DApp 去中心化應用前端 開發 Web3 應用的前端 零、
13 min read
智能合約 Solidity 教學 (中) - MetaMask 與以太坊測試網

智能合約 Solidity 教學 (中) - MetaMask 與以太坊測試網

📅 發布時間: 2025-01-29 🏷️ 標籤: Solidity, MetaMask, 以太坊測試網, 智能合約部署, Remix IDE 這篇文章繼承了上一篇智能合約 Solidity 教學 (上),將嘗試使用 MetaMask 連接測試網,如何領取測試幣,並且在前端整合:透過 Web3.js 連接你的 DApp 與合約。 目錄 * 智能合約 Solidity 教學 (上) - Solidity 基礎語法教學 * 智能合約 Solidity 教學 (中) - MetaMask 與以太坊測試網 * 智能合約 Solidity 教學 (下) - Web3.js 實際開發一個 DApp 去中心化應用前端 MetaMask
6 min read
智能合約 Solidity 教學 (上) - Solidity 基礎語法教學

智能合約 Solidity 教學 (上) - Solidity 基礎語法教學

📅 發布時間: 2025-01-29 🏷️ 標籤: Solidity, 智能合約, 基礎語法, 以太坊, Remix IDE 在這篇文章中,我們會從 0 基礎開始,逐步介紹智能合約的概念、Solidity 語法,以及如何部署你的第一個智能合約。適合對區塊鏈開發有興趣但還沒有 Solidity 經驗的開發者! 目錄 * 智能合約 Solidity 教學 (上) - Solidity 基礎語法教學 * 智能合約 Solidity 教學 (中) - MetaMask 與以太坊測試網 * 智能合約 Solidity 教學 (下) - Web3.js 實際開發一個 DApp 去中心化應用前端 一、Solidity 0 到 1:
19 min read
COSCUP - 一起來開發一個 notion 吧,多人即時共編筆記分享

COSCUP - 一起來開發一個 notion 吧,多人即時共編筆記分享

📅 發布時間: 2024-08-02 🏷️ 標籤: CRDT, OT, Yjs, Notion, 多人即時共編 如何開發一個共編筆記的開發技術,淺談 CRDT、OT 的概念,分享當前生態系與資源。著重在多人即時共編時如何做到不衝突資料變更,最終開發一個可以部署的超簡單版本 notion 筆記。 💻 多人即時共編筆記開發 🎯 學習目標:理解版本控制(如 Git)的衝突問題,以及多人即時協作的挑戰掌握 OT(Operational Transformation)和 CRDT(Conflict-free Replicated Data Type)的核心概念使用 Yjs 與 y-websocket 快速建置 Node.js 後端與 React 前端,实现簡單的多人即時文字共編 步驟 1: 講者介紹 圖: 講者介紹
13 min read
技術共學|來開發一個即時的多人聊天網頁與繪圖白板吧!

技術共學|來開發一個即時的多人聊天網頁與繪圖白板吧!

📅 發布時間: 2024-07-29 🏷️ 標籤: SocketIO, Vite, JavaScript, Canvas, ExpressJS, 即時通訊 不知道你有沒有開發多人線上遊戲的夢呢?然後即時同步的問題卻卡住了你。如何將所有人的資料同步給所有人的電腦上,又該如何實現呢?如果你有上述問題,這堂課正是為你而準備!我們將帶你深入淺出有關 SocketIO 的基礎知識,從 0 到 100 搭出一個簡單的即時多人聊天網頁,為你的 sideproject 添上一筆。 簡介 不知道你有沒有開發多人線上遊戲的夢呢?然後即時同步的問題卻卡住了你 如何將所有人的資料同步給所有人的電腦上,在該如何實現呢? 又或你已經略知一二,卻不知如何下手。 如果你有上述問題,那這堂課正是為你而準備! 我們將帶你深入淺出有關於 SocketIO 的基礎知識 從 0 到 100 搭出一個簡單的即時多人聊天網頁,為你的 sideproject 添上一筆。 課程影片 本課程以剪輯成全字幕教學 建議透過該影片學習 https:
4 min read
VRoid 的模型添增動畫並導入 ThreeJs 網頁

VRoid 的模型添增動畫並導入 ThreeJs 網頁

📅 發布時間: 2024-07-29 🏷️ 標籤: VRoid Studio, Mixamo, Blender, Three.js, GLTF, VRM, 3D 動畫 這篇教學介紹如何將 VRoid Studio 製作的 VRM 模型,透過 Blender 轉檔並使用 Mixamo 添加動畫,最終導入 Three.js 網頁中使用,讓你的自訂 Avatar 動起來! 文章大綱 這是一篇技術教學文章,你可以理解如何使用如何替 VRoid Studio 做出來的人物模型透過 mixamo 加上動畫,並且導入進 threejs 的網頁中。 背景故事 因為朋友最近在玩 VRoid Studio,順手丟給了我 VRoid Studio 的人物模型檔案
7 min read
第五部分:後端 Node.js 與 Socket.IO

第五部分:後端 Node.js 與 Socket.IO

📅 發布時間: 2024-06-23 🏷️ 標籤: Node.js, Express, MongoDB, Socket.IO, RESTful API 介紹 Node.js 後端開發基礎,包括環境設置、模組系統、Express 框架建構 RESTful API、MongoDB 資料庫整合,以及 Socket.IO 實現即時通訊。 Node.js 基本介紹 什麼是 Node.js? JavaScript 一直以來都只能在瀏覽器上運行 在過去他並不像 C、C++、Python 能獨立在你電腦上運行 這導致他無法讀取、修改你電腦上的檔案 進行更複雜的操作 而 Node.js 就是為了打破這個窘境,他允許你在你的電腦直接執行 JavaScript 這使得
17 min read
第四部分:進階 JavaScript 與網頁視覺動畫教學大綱

第四部分:進階 JavaScript 與網頁視覺動畫教學大綱

📅 發布時間: 2024-06-24 🏷️ 標籤: JavaScript, DOM 操作, 事件監聽, Canvas 動畫 在這個章節中,我們將介紹如何讓 JS 操作網頁的資料,比如說取得使用者讀取的資料、送出文件、修改文字之類的。 💻 網頁 DOM 操作 🎯 學習目標:理解 DOM 樹狀結構,並用 getElementById 取得元素修改元素樣式(如顏色)和內容(如 innerText)處理使用者事件(如按鈕點擊 addEventListener)讀取和清空輸入框值(value) 步驟 1: DOM 結構與樹狀結構 <!DOCTYPE html> <html> <head> <
8 min read
第三部分 邏輯操作者 JavaScript

第三部分 邏輯操作者 JavaScript

📅 發布時間: 2024-06-23 🏷️ 標籤: JavaScript, 變數, 資料型別, 運算符, 條件語句, 邏輯運算, 迴圈, 函數 JavaScript 是一種程式語言,主要用於網頁開發,讓網頁變得互動和動態。本文介紹變數、資料型別、運算符、條件判斷、邏輯運算、迴圈與函數等基礎邏輯操作。 JavaScript 基本介紹 什麼是 JavaScript? JavaScript 是一種程式語言,主要用於網頁開發 它可以讓網頁動態更新內容,處理使用者輸入並執行複雜的邏輯操作。 在網頁中,JavaScript 與 HTML、CSS 一起工作,使網頁變得更加互動和動態。 JavaScript 的特點包括: * 跨平台:JavaScript 可以在多種操作系統和瀏覽器上執行。 * 動態類型:變數在執行時可以改變類型。 * 事件驅動:JavaScript 可以處理各種使用者事件,如點擊、移動滑鼠、鍵盤輸入等。
16 min read
第二部分:視覺前端設計師 CSS

第二部分:視覺前端設計師 CSS

📅 發布時間: 2024-06-12 🏷️ 標籤: CSS, HTML, 前端設計 歡迎再次回到我們的網頁開發課程,今天我們將進一步學習網頁設計中的另一個重要部分 - CSS。CSS,即層疊樣式表 (Cascading Style Sheets),是用來控制網頁的外觀和排版的語言。透過 CSS,我們可以讓網頁變得更加美觀和易於使用。 今天的目標 * 什麼是 CSS? * 如何在 HTML 中使用 CSS? * CSS 基本語法 * 常見的 CSS 屬性與範例 基礎介紹 💻 什麼是 CSS? 🎯 學習目標:了解 CSS 控制 HTML 呈現方式的作用透過內聯 style 修改文字顏色使用 RGB 值精確指定顏色 步驟 1: 什麼是 CSS? <h1&
15 min read
第一部分:傳統前端大解密 HTML

第一部分:傳統前端大解密 HTML

📅 發布時間: 2024-06-10 🏷️ 標籤: HTML、前端開發、網頁基礎、VSCode 從零開始,一步一步解密網頁開發的三大基石:HTML、CSS、JavaScript。無論是初學者還是有基礎的開發者,都能從中受益。這是本系列的第一篇,專注 HTML。 今天的目標 * 網頁概念 * 什麼是網頁?前端後端?語言與技術? * HTML * 喝杯咖啡,這東西真的很容易,就是寫寫文字! 💻 網頁基礎概念 🎯 學習目標:理解網頁的產生過程:從網域到 IP、請求與回應認識網頁資料來源:按 F12 查看 HTML、CSS、JavaScript 步驟 1: 網頁基本概念 圖:瀏覽器如何產生漂亮畫面 我們先從最基本的概念開始。先來理解一下什麼是網頁,為啥我打開瀏覽器,就可以跑出那麼漂亮的畫面。 步驟 2: 網頁定義
17 min read