↓Skip to main content

MindMeister 心智圖下載專案

·1 min
Tech Thoughts Project Ai Agent Zh

專案背景 #

早先訂閱了 MindMeister 作為心智圖的筆記工具，陸續累積了數十張心智圖。最近比較少使用，考慮將檔案匯出備份後取消訂閱，才發現個人訂閱方案（Personal）只支援逐一點擊匯出，必須升級至商用方案（Business）才能使用批次匯出功能。為了一點方便而額外支付更高的訂閱費似乎不划算。

正好最近重新訂閱 GitHub Copilot（之前專注於學習基礎用不上所以退訂了），發現多了 Agent 模式可以使用，正好有機會嘗試直接用 AI 開發，看能否快速解決這個問題。需求很單純：

身為擁有 MindMeister 個人訂閱的使用者，想要能一次下載自己擁有的心智圖。

成果 #

大概花了兩三天時間，完成了這個 💻 MindMeister Downloader 小專案。

達成目標 #

  • ✅ 成功達成批次下載：不需要逐張開圖再點擊匯出

不足之處 #

  • ❌ 自動化程度不如預期
    1. 需要使用者到 MindMeister 網站建立 Personal Access Token。
    2. 需要使用者自行登入網頁後在瀏覽器 console 執行一段 js 程式以截取出心智圖 ID 清單，再交由主程式執行下載。

第一點尚可接受，但第二點對一般使用者來說相當不便，特別是多數人可能不熟悉、也不願意在瀏覽器 console 執行程式。

開發心得 #

AI 協作體驗 #

這是我第一次完全用 Agent 的方式進行開發。過程中由我說明需求及下指示，由 Agent 進行所有程式碼的編寫。我有手動編輯過的檔案大概只剩 README、.env、.gitignore 這樣的設定檔和文件檔，和過去的經驗大相徑庭。不過過程並非一帆風順，除了確認執行結果外，還需要不少人為介入和導航。

交給 Agent #

程式碼完全由模型產生，檔案的新增刪除完全由 Agent 控制。一開始我還想著要去看他寫了什麼，但很快就只專注在下達指令及確認結果，不再關心實作細節，因為這樣比較快。寫程式彷彿不再是我的責任，這種感覺值得深思。

嘗試的成本大幅降低 #

批次下載心智圖這件事的重要性不高，但技術門檻並不低，特別是在事前不確定可行性的情況下，投入大量時間並不合理。但當 Agent 這樣工具存在，「花點時間試試看」就變成很實際的選項。

知識能讓你走得更遠 #

我缺乏爬蟲或登入防護機制的專業知識，所以當 Agent 遇到瓶頸時，我也無法提供協助。只能在看到 Cloudflare 後判斷應該無法簡單突破，決定放棄這個方向。

另一方面，由於我對 HTML 和 CSS 有基本認識，才想到從頁面原始碼截取心智圖 ID 的可能性，否則可能就此卡住。

品質把關的必要性 #

Agent 會專注於每步指示的任務，但整體品質仍需使用者掌控和要求。例如，當專案不再使用爬蟲方法時，若未主動要求 Agent 整理，許多嘗試過程中的遺留檔案和程式碼就會殘留在專案中。

程式基礎還重要嗎？ #

LLM 已大幅改變軟體開發的學習曲線和工作方式，但我不認為這改變了「具有相關知識、能力和經驗的人能做得更好」的原則。學習依然重要，問題在於學習的方向。

以這次經驗來看，我認為有些東西可能不再需要多數工程師反覆練習、熟悉於心，但一個毫無基礎的人也只能很有限地發揮 AI Agent 的能力。

使用 AI 工具的軟體工程師可能會更快需要類似 Tech Lead 的判斷能力，但經驗往往是判斷力的基礎。有別於原本在建構中逐步學習的方式，新的模式可能會變成從「基礎程式語言知識」快速銜接到「產出」，接著在遭遇困難時停下腳步「補充更多基礎知識」。

開發歷程 #

專案的演進過程：

爬蟲 #

  1. 自動化點擊匯出：由於心智圖可以手動匯出，首先嘗試以爬蟲方式自動化這個流程。要求 Agent 使用 Go 語言開發（因為最近在學習）。

  2. 登入問題：Agent 完成的程式碼一直無法完成登入 MindMeister，應該是被 Cloudflare 判定為 bot 而卡在人機驗證頁面。讓 Agent 依照自己的建議多次改善，但都無法成功登入。

API #

  1. 發現官方 API：研究後發現 MindMeister 提供官方 API，要求 Agent 改用 API 方案。

  2. API 測試：設定 Personal Access Token 後，Agent 表示找不到取得個人心智圖清單的 API。我手動提供一個 Map ID 讓他測試單張下載，確認 API 可用。

  3. API 限制：確認官方文件後發現真的沒有提供取得個人心智圖清單的功能（Why?!）。Agent 建議使用書籤外掛程式方式截取，但我看不懂操作方式，決定先忽略。

網頁解析 #

  1. 從網頁原始碼擷取：我想到可能可以從網頁原始碼擷取 ID。使用 View Page Source 看不到資料，但透過 Chrome Developer Tool（F12）可以看到 ID 資訊。

  2. 部分解析成功：將 HTML element 複製給 Agent 解析，成功解析出 30 個 ID。但網頁顯示數量超過 30，表示清單不完整。嘗試點擊「全選」後再解析，仍未解決問題。

  3. Virtual Scrolling 問題：Agent 認為是分頁設計導致，建議點擊下一頁再截取。但 MindMeister 網頁沒有「下一頁」選項。研究後發現是 virtual scrolling 機制，網頁會動態載入需要顯示的資料。

解決方案 #

  1. 縮小字體的靈感：詢問 Agent 瀏覽器決定載入筆數的邏輯，Agent 提到網頁大小與單行高度的關係。這啟發了我：將網頁字體縮到極小，強迫網頁容納更多筆資料，縮得夠小就能一次顯示全部心智圖。測試後確認可行。

  2. JavaScript 化：讓 Agent 將解析邏輯改寫成 JavaScript，讓使用者可以直接在瀏覽器執行，只需複製解析出的 ID 清單即可。

收尾 #

  1. 專案整理：流程邏輯確認後，要求 Agent 重新梳理整個專案，清理不需要的程式和檔案。我手動新增操作截圖並編輯 README，希望能幫助到有需要的人。

  2. 未來可能的改進：

    • 將下載檔案轉換成更開放的格式
    • 用 Agent 開發簡單的心智圖編輯和呈現應用程式