小狐狸事務所

2026年6月10日星期三

Vibe coding 時代的全端開發技術堆疊

今天在與 Gemini 討論目前最夯的網頁應用程式開發的技術堆疊, 它認為 Next.js (App Router) + Tailwind + shadcn/ui 技術堆疊是開發者的黃金三角, 其中 Next.js 是以 React 為基礎的全端框架, Tailwind 負責網頁的視覺與化妝 (樣式); shadcn/ui 是 UI 元件庫, 負責處理前端最麻煩的無障礙互動與複雜動畫邏輯, 而 Next.js 則是整個專案的總架構師, 在 App Router 模式下它同時管理了前端與後端 (內建 Node.js 伺服器).

這麼說來, 後端不是用不到 Python 了嗎? Gemini 的回答是 : 在很多中小型專案或 SaaS 產品中確實不再需要 Python 了, Next.js 自己就能搞定全端, 以下類型的專案完全可以拋棄 Python, 只用 Next.js 一條龍開發即可 :

全端 SaaS 應用, 工具型網站
電商網站, 品牌官網, 部落格
企業內部管理系統, Dashboard 儀表板
需要處理會員登入, 權限控管, CRUD 的標準 Web 應用

Next.js 內建的 Route Handlers (API 路由) 和 Server Actions (伺服器函數) 本質上就是運行在 Node.js 環境下的後端, 它可以直接連接 PostgreSQL 或 MongoDB 等資料庫, 處理金流 (Stripe, 綠界), 與發送 Email 等.

但在特定的企業級或大數據, AI 等場景下, Python 依然無可替代, 如果專案涉及下列應用, 則後端絕對還是 Python 的天下 :

人工智慧/大語言模型 (AI/LLM/Agent) :
雖然可以用 JavaScript 呼叫 OpenAI 的 API, 但如果要自己做 RAG (檢索增強生成), 處理向量資料庫 (Vector Database), 微調模型 (Fine-tuning), 或是使用 LangChain/CrewAI 搭建複雜的 AI Agent 工作流, Python 的生態系 (PyTorch, Hugging Face) 是壓倒性的強大.
資料科學/大數據分析/網絡爬蟲 :
如果網站需要處理巨量數據分析, 自動化圖表生成, 或需要用 Scrapy/Selenium 去網絡上抓取大量資料, Python 的 Pandas 與 NumPy 依然是行業標準, Node.js 在這方面的效能和工具庫完整度遠遠落後.
影音處理與圖形計算 :
需要做大規模的圖片去背, 影片剪輯, 音訊轉文字 (本地端執行 Whisper 模型安等重度消耗 CPU/GPU 的任務時, Python 呼叫底層 C++ 庫的效率與生態更為成熟.

所以現代全端開發的終極架構可以做如下分工 :

Next.js + Tailwind + shadcn/ui :
扮演對外的門面與大腦, 負責處理所有的前端 UI (Tailwind + shadcn), 路由跳轉, 使用者登入, 購物車邏輯, 並提供極致的 SEO.
Python :
扮演秘密研究室, 不直接面對使用者, 它靜靜地躲在 Next.js 後面, 被包成一個個高速的 FastAPI 介面, 當 Next.js 需要進行 AI 分析或大數據計算時再從後台發請求給 Python, 算完把結果丟回給 Next.js 呈現.

結論是 : 我的 Django 書可以收起來了, 但 FastAPI 可以涉獵一下.

雖然在 Vibe Coding 時代不懂程式技術的小白也可以靠 AI 完成一個專案, 但小白與熟練工程師的差別是過程 : 百轉千迴 vs 一步到位. 未來的軟工要培養像王語嫣那樣的能力, 對武林各門各派武功聊如指掌, 能指點如何運氣使力發功, 即使本身一點武功都沒有也無妨.

2026年6月9日星期二

momo 購買小米除蟎機 2 Pro

之前在小米裕誠店購買的小米除蟎機 Pro 放在鄉下使用, 想說高雄家也放一個免得帶來帶去不方便, 為了攢 momo 幣, 這回不去小米店買了 (反正價錢都一樣) :

momo 幣剩 1 元也要用掉, 避免過期浪費了, 實付 1998 元.

2026年6月8日星期一

取消 booking.com 岡山格蘭比亞預定

7 月下旬要帶阿中去岡山採水蜜桃, 最早是在 booking.com 上預定岡山車站旁的格蘭比亞酒店, 後來水某同事推薦 JR 經營的 VIA INN, 不僅價格更便宜, 地點就在車站樓上超方便, 預定時都選 7/20 才扣款, 今天上 booking.com 把格蘭比亞取消掉 :

延後扣款雖然價格會高些, 但好處是扣款日前隨時可 0 元取消. 但嚴格來說不是前一日取消都可以, 我查 VIA INN 的取消政策是必須至少兩天前取消才是零元, 例如 7/24 入住, 必須在 7/21 結束前取消才免費 :

好站 : 輕鬆製作可開機的 USB 磁碟機

這個周末把水某十二年前的 ASUS 舊筆電 (X550CC) 成功地利用 ISO 檔從 Win8 升級為 Win10, 在這過程中找到一個介紹 Rufus 工具軟體的網站 :

# 輕鬆製作可開機的 USB 磁碟機

它除了可用來製作開機 USB 外, 若將來要將 X550CC 的系統硬碟換成 SSD, 也可以用它來燒錄 ISO 檔灌 Win10.

補記 : 5/21 Google雲端實驗室線上課程

今天整理筆電瀏覽器頁籤, 發現 5/21 參加 Google 線上課程的網頁, 當日語內訓課程衝堂, 所以也沒仔細聽, 雖有錄影但尚未有時間回看, 先把連結記錄下來再說 :

# 使用 Gemini CLI 建立動態網站

# Welcome to Google Cloud Labs: OnAir

# Use Model Context Protocol (MCP) Tools with ADK Agents

# Build a Dynamic Website with Gemini CLI

# 將模型上下文協定 (MCP) 工具與 ADK 代理一起使用

2026年6月7日星期日

2026 年第 22 周記事

上週都在測試 Ollama, 本來都跑得順順的, 哪知周一 MSI 電競桌機突然當機, 螢幕先是出現 MSI 便停住, 問 Gemini 可能原因, 我照其建議排查, 發現主機板上四個 debug 燈的 VGA 亮燈, 表弟小安則懷疑可能是主機板有問題, 說週六他會回鄉下, 叫我把主機帶回鄉下讓他瞧瞧, 要拆顯卡來確定是否這 VGA 是指顯卡還是內顯. 週六下午他來我家測試, 發現拆顯卡 VGA 燈還是亮, 覺得可能是主板有問題, 我下周拿去微星請工程師檢測看看.

由於 Ollama 測試暫停, 本周主要是閱讀阿亮老師的 OpenClaw 書, 發現 GitHub CodeSpaces 也可以養龍蝦, 甚至樹莓派 Pi 4 也可以.這樣以後可以用龍蝦來管理物聯網控制器 (Node), 我以前用爬蟲來蒐集資料進行監控的做法以後都能用龍蝦取代, AI 真是大大改變了整個系統運作方式啊!

爸現在只有周二是上午下午去社區, 最近他時間感開始混亂, 不是週二的下午也在午睡起來後著裝準備等社區車子來接, 我在想那乾脆每天都上下午都去好了, 但與江小姐聯繫後, 她建議先 2,4, 慢慢改為 2,3,4, 最後再 1,2,3,4,5, 漸進式調整較好. 下

今天傍晚拿了長竿去後院與路邊採芒果, 採了一大桶. 今年芒果雖然只套了 200 顆, 但高處套不到的很多, 估計超過 200 顆, 這些果子成熟後從高處墜落都會摔傷半邊, 本來計畫在樹下張網接芒果, 今早經過小漢進去問, 一捲網子要 400 元, 至少要買 3~4 捲才夠, 為此需投資千元並不划算, 最後想想還是算了.

ASUS X550C 筆電升版為 Win10

這台 ASUS X550C 艷紅色筆電是以前水某做臨床研究時我陪她去燦坤買的 (2014/5/30), 至今超過 12 年仍正常運作且非常耐用, 除了電池外其餘功能均正常, 連燒錄機都還能用 (今天還拿來將 MSI 電競桌機的 Win11 安裝光碟備份為 ISO 檔). 但那時搭載的作業系統是 Win8, 後來忘記在更新截止期限前升級為 Win10.

今天備份完光碟, 想說把之前安裝的 Thonny 4.0.1 升版為 5.0.0, 結果刪除舊版後安裝新版才知道 Win8 太舊了, 無法安裝 Thonny 5, 所以只好先問 AI 這種情況下還有辦法將 Win8 提升為 Win10 嗎? 它建議到微軟官網去下載 MediaCreationTool 軟體來升版, 但我執行後出現如下錯誤 :

看來已無法從微軟官網更新, 問 Gemini 只有從網路社區下載 ISO 檔這方法了.

1. 下載 Windows 10 光碟映像檔 (ISO) :

試過 Gemini 建議的幾個下載 Win10 ISO 檔的方法都失敗後, Gemini 拿出壓箱寶, 叫我試試從下列網站下載, 如果這台 Win8 無法出現下載頁就用其他台電腦下載後再複製過來 :

# massgrave.dev

按上方 Download Windows/Office :

按 Windows10 :

按 Windows 10 Custermer 22H2, 拉到頁面最底下, 按倒數第二個的 X64 版 Traditional Chinese 的連結 :

這會開啟 BUZZHEAVIER 的下載頁面, 按其中的 Server1 或 Server2 即可下載 ISO 檔 :

但重點來了, 不要以為放著等他下載完畢, 這個網站通常會在下載幾分鐘後降速, 接著出現網路連線錯誤, 好在此網站有續傳功能, 這時按下繼續鈕就會恢復下載, 整個過程要盯著看下載狀態, 一出現網路連線錯誤就要按繼續 :

2. 安裝 Windows 10 :

完成 ISO 檔下載後用 Bandizip 等軟體將 ISO 檔解壓縮, 將滑鼠移到 setup.exe 檔按右鍵點選 "以系館管理員身分執行" :

按 "變更 Windows 安裝程式下載更新的方式" :

勾選 "現在不要" :

按 "接受" :

確認 "安裝 Windows 10 家用版" 與 "保留個人檔案與應用程式" 都有勾選後按 "安裝" :

安裝完成後檢視系統資訊, 確認已升版到 Win 10 無誤 :

這樣就可以順利安裝 Thonny 5 了 :

3. 備份系統映像 :

為了避免萬一 C 碟掛掉又要從 ISO 重灌系統, 接下來先清理 C 碟, 將資料移往 D 碟儲存,下載與文件, 圖片, 影片, 以及桌面的垃圾都清乾淨, 讓 C 碟盡量瘦身後, 進行系統映像備份作業.

首先按左下角 "系統/設定", 搜尋 "控制台" 中開啟控制台, 將右上角的檢視方式改為大圖示 :

點選 "備份與還原 (Windows 7)" :

按左上角的 "系統備份" :

系統會先掃描, 找到可放置備份映像的 D 碟, 按下一步 :

按開始備份即可 :

這裡有提示備份 C 碟映像會佔去 D 碟 110GB 容量, 我在備份前有檢查 D 碟還有 211GB :

大約 40 分鐘後備份完成, 再次檢查 D 碟容量, 剩下 110GB :

備份完成會詢問是否要製作 Win10 修護光碟, 我去找了一張空白 DVD 讓它燒錄 :

這樣就順利完成 Win10 升版後的維護了.

這台舊筆電在母親於 2014 年最後一次化療住院時被我借用拿去病房陪病時寫程式, 所以有一種特殊的感情. 升版完成後整理硬碟, 看到當時留下的舊資料令我感到物是人非.

2026-06-07 補充 :

其實這台筆電真正型號是 X550CC, 是 X550C 款式較晚期的子型號 (沒有 SD 卡槽, 改成 2 個左側 USB 槽), 配備清單可按 Win + R 後輸入 msinfo32 按 Enter 即可看到 :

CPU 是帶有 U 字尾的省電版處理器 i5-3337U, 它只支援低電壓記憶體, 此筆電主機板有一個 DRAM 擴充槽, 可買一條 8GB 或 4GB DDR3L 1600 或 PC3L-12800 (筆記型電腦專用) DRAM 補上去, 開多網頁時會比較順暢.

但卡頓的關鍵其實是硬碟, AI 建議買一個 2.5吋 SATA3 SSD (厚度為 7mm 規格) 來替換硬碟, 例如美光 (Crucial) MX500 系列或金士頓 (Kingston) KC600 系列, 這兩款都帶有快取記憶體, 當作 Windows 10 的系統碟速度最快, 壽命也最穩定. 換 SSD 的話 Win10 要重灌, 序號因為是綁主機板所以可以延續.

目前維持現狀即可, 此筆電目前就是擔任救援角色與光碟相關操作而已.

2026年6月5日星期五

樹莓派學習筆記 : 在 Bulleye 上安裝 google-genai 套件

今天把當機已一個月的高雄 Pi 3B 主機重灌 Bulleye, 安裝爬蟲與資料科學相關套件後馬上製作映像檔, 以免下次 TF 卡異常又要重來. 完成後想說來安裝 Gemini 新版 API 套件 google-genai 看看(舊版是 google-generativeai 谷歌已不再維護), 雖然安裝成功, 但出現相依性問題 :

pi@kaopi3:~ $ pip install google-genai

Looking in indexes: https://pypi.org/simple, https://www.piwheels.org/simple

Collecting google-genai

Downloading https://www.piwheels.org/simple/google-genai/google_genai-1.47.0-py3-none-any.whl (241 kB)

... (略) ...

Installing collected packages: websockets, tenacity, google-genai

Attempting uninstall: websockets

Found existing installation: websockets 12.0

Uninstalling websockets-12.0:

Successfully uninstalled websockets-12.0

ERROR: pip's dependency resolver does not currently take into account all the packages that are installed. This behaviour is the source of the following dependency conflicts.

gradio-client 1.3.0 requires websockets<13.0,>=10.0, but you have websockets 15.0.1 which is incompatible.

Successfully installed google-genai-1.47.0 tenacity-9.1.2 websockets-15.0.1

我把錯誤提交給 Gemini 分析, 原來 google-genai 需要最新版的環境所以把 websockets 從 12.0 版升級到了 15.0.1 版, 原本安裝的 gradio-client (1.3.0) 是一個比較挑剔的套件, 它要求 websockets 的版本必須在 10.0 到 13.0 之間 (不含 13), 現在提升 15.0.1 版了, 可能會讓 gradio 無法運作. 如果在樹莓派 Pi 3 上不會用到 gradio, 那這個錯誤訊息可以無視 (安裝 gradio 是因為它有一拖拉庫的相依套件例如 matplotlib, 並不是真的會用到 gradio).

實測一下看看能否正常使用 :

pi@kaopi3:~ $ python

Python 3.9.2 (default, May 18 2026, 18:09:43)

[GCC 10.2.1 20210110] on linux

Type "help", "copyright", "credits" or "license" for more information.

>>> from google import genai

/home/pi/.local/lib/python3.9/site-packages/google/auth/__init__.py:54: FutureWarning: You are using a Python version 3.9 past its end of life. Google will update google-auth with critical bug fixes on a best-effort basis, but not with any other fixes or features. Please upgrade your Python version, and then update google-auth.

warnings.warn(eol_message.format("3.9"), FutureWarning)

/home/pi/.local/lib/python3.9/site-packages/google/oauth2/__init__.py:40: FutureWarning: You are using a Python version 3.9 past its end of life. Google will update google-auth with critical bug fixes on a best-effort basis, but not with any other fixes or features. Please upgrade your Python version, and then update google-auth.

warnings.warn(eol_message.format("3.9"), FutureWarning)

此警告只是說 Python 3.9 實在太舊了而已.

>>> from dotenv import dotenv_values

>>> config=dotenv_values('.env')

>>> gemini_api_key=config.get('GEMINI_API_KEY')

>>> client=genai.Client(api_key=gemini_api_key)

>>> response=client.models.generate_content(

... model='gemini-2.5-flash',

... contents='你是誰?'

... )

>>> print(response.text)

我是一个大型语言模型，由 Google 训练。

可見此新版 Gemini API 在 Pi 3 上使用沒問題.

2026年6月4日星期四

Claude Code 學習筆記 : 儲值與建立 API 金鑰

最近幾天因為 MSI 電競主機故障待修, 於是轉而閱讀阿亮老師的大作 "養成你的 AI 龍蝦管家", 書中介紹三大 AI 自主代理平台 (三王工具) :

Goolge Antigravity
Claude Code
OpenClaw

Google Antigravity 是一個多 Agent, 可預覽測試網頁的可視化 AI 程式開發工具; Claude Code 是終端機特助, 可用來管理專案資料夾, 進行 Git 版本控制與微調設定檔等. OpenClaw 則是一個能透過多通道 (LINE, Telegram) 自主完成任務的 AI 管家 (秘書), 有了 Antigravity 與 Claude Code 幫助, 才能充分發揮 OpenClaw 功能.

本來打算先學完 Gemini CLI 後再來付月費學 Claude Code, 但看了阿亮老師的書發現其實可以先用 Pay As You Go 方式儲值購買 API 使用額度 (credits) 來用, 反正只是測試學習又不是做大專案, 吃 token 不會太兇, 不夠再除值即可.

本系列前一篇文章參考 :

# 在 Windows 上安裝原生版 Claude Code

我在 2023 年就已註冊 Claude AI 帳號, 所以只要到 Anthropic Console 網站登入即可 :

# https://platform.claude.com/

我使用 Hinet 信箱登入, Claude 帳號不使用密碼, 而是每次登入都將認證碼寄到信箱 :

到信箱收取認證碼, 填入後按 Verify Email address 鈕 :

登入成功後會轉至 Dashboard 頁面, 按 Add Fund 即可儲值 :

既定金額有 20, 100, 500 美元, 想儲其它金額例如 10 美元可按右邊的 Others :

輸入 10 美元, 填寫 Billling Address 的欄位 (例如全名, 國家, 郵遞區號等) 與信用卡資訊 (JCB 卡較不容易通過綁定, 建議用 VISA 或 MASTER) :

雖然資料都有填好 (Business tax ID 統編欄位不要填), 但底下 tax 與 total due 無資料, "Buy USD 10 of credits" 鈕是灰色無法按 :

我問 Gemini 原因, 它認為是 Anthropic 的前端對台灣這個國家的地址/稅率判定卡住了, 建議改選美國, 例如免消費稅的奧勒岡州 (Oregon), 城市填 Portlan (郵遞區號 97201), 街道地址可填 1234 SW Morrison St., 這樣就能通過檢查, 底下的購買鈕變成黑色可按 :