COSCUP x Wikidata 2025

<div style="background: rgb(255 255 255 / 80%); color: black !important;"> COSCUP 2025 國立台灣科技大學 ## 氛圍式程式開發：<br />從 0 到 1 打造<br />直覺式資料專案 <span style="color:black;">Powered by [[Planetoid]] feat. 🤖</span> </div> --- ## Agenda * 什麼是氛圍式程式開發 * 案例1: 🐙 簡單爬蟲專案 * 案例2: 🥤 新聞手搖飲分析器 * 案例3: 🔍 財經新聞事實查核 --- ## 氛圍式程式開發  > 依賴人工智慧（AI）的程式設計方式，使用者可以透過「自然語言」向大型語言模型（LLM）描述問題（例如用幾句話表達需求）。語言模型會生成程式碼，將程式設計師的角色從手動撰寫程式碼轉變為指導、測試和精煉 AI 生成的程式碼。（資料來源：維基百科） > 圖源 (C) [Ready Player One (2018)](https://www.simbasible.com/ready-player-one-movie-review/) --- Vibe Coding N年前就有了 (偷臭) 老闆叫你寫扣，遇到 bug 也是叫你改。老闆不需要搞懂程式是怎麼運作的、不用學資料結構、不用學演算法，用嘴巴就可以 (叫你) 寫扣！ --- ## 案例1: 🐙 簡單爬蟲專案 * 需求說明：從「[民國近代史料](https://digroc.pccu.edu.tw/CNH/index.aspx)」網站收集人物與事件條目名稱 * 預期成果：網頁標題、連結 --- ### Day1 1. 使用不熟悉的程式語言 2. 不手工寫任何一行扣 3. 一次產生全部程式碼 ![bebe](https://hackmd.io/_uploads/ryfsQshPee.gif =20%x) > 圖源 (c) [Baby Boss](https://tenor.com/zh-TW/view/design-gif-20230434) (2017) ---  使用 Cursor 企圖一次產生全部程式碼，但很快用完免費額度，只好放棄生成到一半不完整的程式碼。 > 圖源 (C) [Dune: Part Two](https://www.simbasible.com/dune-part-two-movie-review/) (2024) --- ### Day2 流程 1. 將需求轉成需求文件 (`PRD.md`, Product Requirement Document)，定義了： - 輸入資料 - 處理流程 (檢查 `robots.txt`、連結規則、延遲機制) - 輸出成果 (資料庫引擎、資料欄位) 3. 根據需求完成程式、單元測試 ⬅️ 自動切模組、避開250行地雷 💣 ---  * 相依套件環境錯誤 `ModuleNotFoundError: No module named 'file_manager', 'requests' ...` * 需要抓太多網頁 5k+ > 圖源 (C) [Zootopia](https://tenor.com/zh-TW/view/flash-slothmore-zootopia-smiling-gif-12390417) (2016) --- ### Day3 流程 1. 將需求轉成需求文件 (`PRD.md`, Product Requirement Document) - 輸入資料 - 處理流程 (檢查 `robots.txt`、連結規則、延遲機制) ⬅️ 修改流程、更新測試 & PRD - 輸出成果 3. 根據需求完成程式、單元測試 ⬅️ 問關鍵流程的測試在哪裡 4. 檢查結果資料 ---  * 發現需求漏掉處理多頁爬取 * 重新跑一次流程「文件->功能->測試」，順利完成 > [圖源](https://www.pinterest.com/pin/844776842639481886/) (C) --- ### 如果是更複雜的資料爬取 1. 資料結構化問題 * 頻繁出現欄位錯誤或空白 ➡️ 監控並簡化 AI 方案的複雜度 2. 流程設計問題 * 一次性執行完整流程，錯誤時找到問題出在哪裡 ➡️ 採用分階段處理，可逐一階段檢查 3. 效能調整挑戰 [Vibe Code：用 AI 輔助開發爬蟲專案的經驗分享](https://blog.planetoid.info/2025/03/vibe-code-my-experience-with-ai.html) --- ## 快速回顧 --- ### Day 1 想要一次到位 * 👩 提出需求 * 🤖 完成程式 💥 --- ### Day 2 需求文件化 * 👩 提出需求 -> 🤖 改成需求文件 * 👩 確認需求文件 -> 🤖 完成程式、測試 * 👩 要求修改測試 -> 🤖 修改測試程式、修改程式 * 👩 根據修改更新文件 -> 🤖 更新需求文件 --- ### Day 3 需求變動 * 👩 提出需求變動 * 刪除 `range_size` * 抓取詳情頁，改成 feature flag * 增加多頁抓取 * 初始化設定檔 * 🤖 修改測試程式、修改程式 * 👩 要 AI 根據需求變動更新文件 * 🤖 更新需求文件 ---  ### Quick takeaway <div style="background: rgb(255 255 255 / 80%); color: black !important;"> 1. 以「文件」為基礎的開發流程 * 👩 提出需求、變動需求 * 🤖 修改程式、修改測試程式 * 🤖 維護與更新需求文件 * 👩 驗收成果 2. 原本軟體工程的訓練還是用得到 * 250行地雷 💣 </div> > 圖源 (C) [Superman](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExZHlqMThvOGN4em50NWxuMm0xaGRoMWt4cG1pa3YwOXZocHoybHlwdSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Bw1YltfJZ0cVOg388j/giphy.gif) (2025) --- ## 案例2: 🥤 新聞手搖飲 <br /> 分析器 * 需求來源：個人 * 需求說明：貼上新聞內容，分析是哪一類的手搖飲料 * 預期成果：新聞內容的分類、相關的資料集、WikiData 條目 --- ### Day 1 1. 先用 AI 畫布做出快速原型網頁 (ChatGPT Canvas 或 Claude Artifacts) 2. 叫 AI 改成網頁應用 (原生 JavaScript) 3. 部署到 Cloudflare Page --- ### 快速原型網頁 ![截圖 2025-08-05 凌晨1.10.46](https://hackmd.io/_uploads/r1W9JyS_gl.png) [Demo](https://planetoid-news-analyzer-app-abxd7a.streamlit.app/) | [Source code](https://github.com/planetoid/news-analyzer) --- ![🥤 新聞手搖飲分析器 · Streamlit 截圖 2025-08-09 23.19.43 - planetoid-news-analyzer-app-abxd7a.streamlit.app](https://hackmd.io/_uploads/Hk-zu1Bdgg.png) --- ### 問題：分類結果不穩定 🟡 金桔檸檬: 優質真實新聞 🟢 蜂蜜綠茶: 真實但不重要 ⚪ 無糖白開水: 平淡普通內容 🔴 過期奶茶: 危險假新聞 --- ### Day2 * 新增四種類型的測試文本 ---  ### 問題：機器人偷懶 <div style="background: rgb(255 255 255 / 80%); color: black !important;"> 「相關地點」 * 顯示關鍵字連結 e.g. https://www.openstreetmap.org/search?query=<台灣> * 而不是條目連結 e.g. https://www.openstreetmap.org/relation/7219605 </div> > 圖源 (C) [WALL·E](https://aminoapps.com/c/disney/page/blog/did-you-know-wall-e-2008/vd2R_j2qSnu6YZnoDr3mMdonNWkVNXQ0R6m) (2008) ---  ### Quick takeaway <div style="background: rgb(255 255 255 / 80%); color: black !important;"> 1. 以前開發資源很稀少，所以用清晰地文字表達 PRD 文件很重要 2. 「文件優先」(writing‑first) 改成「實作優先」(building‑first) </div> > 圖源 (C) [Superman](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExZHlqMThvOGN4em50NWxuMm0xaGRoMWt4cG1pa3YwOXZocHoybHlwdSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Bw1YltfJZ0cVOg388j/giphy.gif) (2025) --- ## 案例3: 🔍 財經新聞 <br /> 事實查核 * 需求說明：AI 搜尋結果取得「過去一週的重要財經或產業事件」、需要驗證是否可靠 * 評估對象：OpenAI、Claude、Perplexity、Google AI 搜尋 [AI 搜尋工具比較：財經新聞收集能力評測](https://errerrors.blogspot.com/2025/07/ai-search-tools-comparison.html) --- ### 評估標準 * 時效性：任務是「過去一週的重要財經或產業事件」，所以期待 AI 提供過去一週的網頁資料 * 輸出格式：符合 Prompt 定義，結果必須包含 (1) 標題、(2) 連結、(3) 新聞發佈時間、(4) 解釋重要性的原因 * 事實查核：使用網頁版 Claude Sonnet 4 交叉驗證 AI 提供的結果，必要時人工介入 * 主觀評分： 🟢 佳、🟡 普通、🔴 欠佳 --- ### 結果 * OpenAI O3 模型表現最佳 * 其次是 Claude * 而其他 AI 搜尋在時效性、事實準確性等方面都有改進空間。 --- 1. 時效性挑戰：Claude 和 Perplexity 都出現時間範圍錯誤，可能因為模型錯誤理解「過去一週」 2. 事實準確性：所有 AI 搜尋工具，從輕微的數字差異到嚴重的日期錯誤，甚至是過度推論 3. 連結可靠性 --- ### AI 幻覺依舊存在 ![1310289](https://hackmd.io/_uploads/rJSghLbIgl.jpg =65%x) ---  ### Quick takeaway <div style="background: rgb(255 255 255 / 80%); color: black !important;"> 1. 使用 AI 搜尋嘗試解決 AI 幻覺，仍需要查證 2. 查證用的 AI 可能造成新的問題 </div> > 圖源 (C) [Superman](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExZHlqMThvOGN4em50NWxuMm0xaGRoMWt4cG1pa3YwOXZocHoybHlwdSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Bw1YltfJZ0cVOg388j/giphy.gif) (2025) --- ## 🎯 開發者的轉變 1. 角色轉換 * 從「程式撰寫者」→「需求架構師」 2. 開發流程轉變 * 文件驅動 → 實作優先 * 瀑布式開發 → 快速迭代 --- ## 🎯 資料分析師的轉變 1. 角色轉換 * 從「SQL + Python 專家」→「資料產品經理」 * 程式語法熟練度 → AI 提示工程能力 2. 資料 pipline 流程轉變 * 手工清理資料 → AI 資料自動化清理 * 工具操作 → 業務邏輯 --- ## 結論 1. 練功之前講求不傷身體 * 模組化：程式專案的最佳實踐 (250行地雷) * 版本控制與區分不同產品階段：避免AI刪正式產品DB * 資訊安全：API key 2. 監控與交叉驗證：使用多個 AI 工具相互驗證結果 3. 經常問自己：快速交付產品還是交付價值？有加強自己的核心技能嗎？ --- ### 開始自己的氛圍式程式開發專案 ![Chat - Google AI Studio 截圖 2025-08-10 09.10.01 - aistudio.google.com](https://hackmd.io/_uploads/rkQ9b_Bdgl.png) --- ## 參考資料 1. [Vibe coding \- Wikipedia](https://en.wikipedia.org/wiki/Vibe_coding) 2. 遠見 (2025). [OpenAI研究員：工程師想不被AI取代，請學「規格」](https://www.gvm.com.tw/article/123160) 3. [從『寫作優先』文化，轉向『實作優先』文化。 ](https://www.linkedin.com/posts/bobchao_vibecoding-prototype-prd-activity-7357938488928849920-jBO6/) 4. [iKala - Vibe Coding 完整介紹](https://ikala.ai/zh-tw/blog/ikala-ai-insight/vibe-coding-intro/)