打造解決自己生活問題的 App

為什麼做這個專案

在「把點子變成能用的 App」單元裡，你跟著課程做出了「小習慣」。那是一個很好的練習，但它是我們選的題目。

這個專案要你換一個角色：題目由你決定。挑一個你自己、家人或朋友每週都會遇到的小困擾，把它變成一個真的有人在用的 App。

為什麼一定要是「自己的」困擾？因為你會是第一個使用者。哪個按鈕放錯位置、哪個功能根本用不到，你每天用的時候都會感覺到。這種「自己用、自己改」的循環，是學做產品最快的方式。而且做完之後，你手上會有一個真正解決問題的作品，不只是一份作業。

六個里程碑大約 20 小時，可以分散在三到四週完成。中間有一週是等朋友試用的時間。

開始前的準備

• 完成「架設你的 Claude 開發環境」，電腦上有能正常使用的 Claude Code 和 Git
• 完成「和 AI 一起寫程式」，知道怎麼描述需求、怎麼檢查 AI 的產出
• 完成「把點子變成能用的 App」單元，或至少讀過每一堂；這個專案的每一步都對應其中一堂課
• 一支手機，以及一個 GitHub 帳號（部署用）
• 一本筆記本或幾張白紙，用來畫草圖

最重要的準備，是一個你真心想解決的問題。如果還沒有，下面的點子種子可以幫你開始想。

實作指南

點子種子：六個生活困擾

下面六個點子都是很多人生活裡常見的困擾，難度從簡單到需要後端都有。你可以直接挑一個，更好的是用它們當靈感，找出你自己的版本。

標著「本機就夠」的點子，可以完全沿用「小習慣」的架構；標著「之後需要後端」的，第一版先做單人版本。

點子	困擾	第一版可以做	之後可能需要
分帳小幫手	出去玩回來，算不清誰該給誰多少錢	一次旅行的支出紀錄，自動算出誰該轉給誰	多人一起記帳，需要後端
家庭冰箱庫存	東西買重複，或放到過期才發現	品項加上到期日，快過期的排最前面	全家共用同一份清單，需要後端
植物澆水提醒	每盆植物澆水間隔不同，總是忘記	每盆設定間隔，打開就看到「今天該澆的」	定時通知（iPhone 上有限制）
爸媽的吃藥紀錄	長輩常忘記今天吃過藥沒	大字、大按鈕的每日打勾清單	家人遠端查看，需要後端
孩子的家事集點卡	口頭約定的獎勵總是算不清	做家事集點、兌換獎勵、點數紀錄	多台裝置同步
寵物照護紀錄	驅蟲、預防針、看醫生的日期記不住	照護項目加上「上次日期」和「下次該做」	匯出給獸醫看的紀錄

選題時，用這三個問題檢查：

1. 你（或身邊的人）每週至少會遇到一次嗎？ 一年才遇到一次的問題，很難驗證 App 有沒有用。
2. 能找到三個有同樣困擾的人嗎？ 里程碑 5 需要他們。
3. 第一版能不能不用後端？ 可以的話，你能更快做出來。需要多人共用的點子也沒關係，第一版先做「一個人用」的版本。

里程碑 1：找到困擾，寫出規格

對應課程：「從點子到規格」。

花一點時間觀察：你現在是怎麼處理這個問題的？用 LINE 記事本、Excel、便利貼，還是根本沒處理？把這個「現在的做法」寫下來，你的 App 至少要比它更方便。

接著寫 spec.md。結構可以沿用「小習慣」的版本：一句話、使用者、使用者故事、之後再說、畫面、技術限制、完成的定義。寫完之後，請 Claude 扮演產品經理挑毛病：

這個里程碑完成時，你會有 spec.md 和一張草圖照片，而且「第一版必備」不超過 7 項。

里程碑 2：決定技術與資料放哪裡

對應課程：「選擇技術」和「資料存在哪裡」。

回答兩個問題，寫進 spec.md 的「技術決定」段落：

• 第一版一定要上架商店、或需要特殊手機功能嗎？ 大多數生活工具的答案是「不用」，那就用 PWA。
• 資料需要跨裝置同步或多人共用嗎？ 不需要，就用 localStorage 加上匯出匯入備份。需要的話，先想想能不能讓第一版只給一個人用；真的不行，再請 Claude 帶你評估 Supabase 或 Firebase，並且一定要設定好資料存取規則。

接著設計資料結構。請 Claude 根據你的規格，提出一個 JSON 範例，記得留一個 version 欄位。你要能看懂每個欄位的意思，看不懂就問到懂為止。

里程碑 3：和 Claude 做出核心功能

對應課程：「和 Claude 做出小習慣打卡 App」。

這是花最多時間的里程碑。照著第三堂課的節奏：

1. 建立專案資料夾、git init，寫好 CLAUDE.md（技術限制、介面語言、不要自己 commit）。
2. 請 Claude 讀規格、提出檔案結構和 4 到 5 個實作步驟，確認後才開始。
3. 先做靜態畫面，再一次加一個功能。
4. 每一步都在瀏覽器測試：正常操作、空白輸入、重新整理後資料還在嗎？
5. 通過就 commit，失敗就把 Console 的錯誤貼給 Claude，越改越糟就 git restore . 退回。

這個里程碑完成時，第一版必備的功能都能在電腦瀏覽器正常使用，Git 紀錄裡至少有五個 commit。

里程碑 4：備份、PWA 與手機測試

對應課程：「資料存在哪裡」和「變成可安裝的 App」。

• 加上匯出、匯入備份，匯入前檢查格式並請使用者確認。
• 做好 192 與 512 像素的圖示、manifest.json、service worker，並在 app.js 註冊。
• 在電腦開發者工具確認 Manifest 沒有錯誤、service worker 已啟用、離線時能打開。
• 跑一次 Lighthouse，至少修正一項無障礙建議。
• 用區網連線在手機上檢查版面和操作，把不順手的地方改掉。

如果你的使用者是長輩或小孩，這時候特別要注意字級和按鈕大小。請他們拿手機試按看看，比任何檢查工具都準。

里程碑 5：上線並邀請三位使用者

對應課程：「上線、收集回饋、持續改版」。

1. 部署到 GitHub Pages、Cloudflare Pages 或 Netlify，拿到 HTTPS 網址。先決定好正式網址，之後不要再換。
2. 在自己手機上加到主畫面、做飛航模式測試，通過後打上 v1.0.0 標籤。
3. 邀請三位真正有這個困擾的人試用一週。邀請訊息寫清楚：這是什麼、怎麼安裝、資料存在哪裡、一週後會請他們填一份短問卷。
4. 至少一位在你面前第一次使用。你只看、不解釋，把他停頓和點錯的地方記下來。

里程碑 6：根據回饋發布第二版

1. 一週後發出五題問卷（打開了幾天、哪裡卡住、最順手的、最想改的、最想加的）。
2. 把回饋貼給 Claude 整理分類，你自己用「影響 × 成本」排出順序。bug 永遠先修。
3. 挑 2 到 3 項做成 v1.1.0，照固定流程發布：改快取版本號、寫 CHANGELOG、commit、打標籤、push、在手機上確認。
4. 告訴三位朋友有新版，謝謝他們，並在 CHANGELOG 寫下他們的名字（先問過他們同不同意）。

最後，寫一段簡短的回顧放在 README.md：你解決了什麼問題、學到最多的是哪一步、如果重來會怎麼做、下一版想做什麼。這段回顧對未來的你，以及想認識你的人，都很有價值。

延伸挑戰

• 加上「發現新版本，點這裡更新」的提示，讓使用者不用關掉 App 再打開
• 在 App 裡顯示「上次備份是幾天前」，超過一週就溫柔地提醒使用者備份
• 如果你的點子需要多人共用，用 Supabase 或 Firebase 做出第二版：加上登入，設定好「每個人只能讀寫自己的資料」的規則，並親自測試用 A 的帳號讀不到 B 的資料
• 畫面超過五個、JavaScript 越來越亂時，請 Claude 帶你把它改寫成 React，比較改寫前後的差別
• 研究 Expo 或 Flutter，評估如果要上架 App Store 和 Google Play，需要改哪些地方、多花哪些成本