TaskyVenture 開發實記 Part 2:從 MVP 到完整產品的 AI 協作之路

更新 發佈閱讀 6 分鐘

上一篇文章,我分享了自己如何以 Vibe Coding 的方式,從零開始打造一個免費使用、適合親子共用的 PWA 兒童任務管理平台【TaskyVenture】。這段時間,我持續將家人和其他用戶的使用回饋,轉化為具體功能,平台也逐漸從「可以用」進化到「每天都在用」。

這篇文章要延續分享這段時間的幾個新增功能、背後開發的想法,以及使用的工具與成本,給有興趣以 Vibe Coding 開發個人專案的朋友參考。

✨ 主要功能更新:從任務到成就的遊戲化體驗

1. 單字挑戰:知識×互動的小遊戲

我加入了每日單字挑戰功能,讓孩子在完成任務的同時,也能接觸一些簡單的英文字彙。針對低年級學童設計的初級單字挑戰,選項隨機化避免記憶答案位置,系統允許 2 次重試機會,並且會針對錯題重複出現。

2. 成就抽獎系統:增加每日使用動機

完成每日任務不再只是「打勾」,現在會累積成就值,達到特定門檻後,週日可以進行抽獎(精美轉盤抽獎)。這邊設計了數個虛擬獎項(如水果、小餅乾、星星獎勵等),透過這些簡單的回饋,孩子每天主動打開平台的動力變高了。

3. 睡前檢核表:培養自律習慣

睡前檢核表這個功能像是任務清單的簡化版,讓孩子在睡前回顧自己今天有沒有做好「整理書包」「保持房間/座位整潔」「與家人分享今日收穫」等例行動作,養成自律好習慣,完成檢核後還可以透過系統製作多種不同樣式的今日成就小卡片方便紀錄和分享喔(放在最後)!

4. 免費方案設計:讓更多人能輕鬆試用

為了鼓勵家長與孩子共同努力,幫助孩子培養好習慣,我設計了完全免費,依據使用習慣自動升級方案的特別功能,只要每日完成率維持在標準以上,就能一直享有免費全功能支援。

5. 許願池

新增「許願池」功能蒐集用戶的願望,預計會在我的時間許可和能力範圍內,盡力實現支持度最高的願望。

raw-image
raw-image


🛠 技術堆疊與成本說明

核心技術棧

  • 前端框架:React + TypeScript
  • 應用類型:PWA (Progressive Web App)
  • 移動端:Android TWA App(目前封閉測試中)
  • 後端服務:Google Firebase + Google Cloud
  • 信件服務:Resend (每月3000封免費額度)
  • 網域管理:CloudFlare(年費約 10 美元)
  • 部署成本:Google Firebase,目前仍在 Google 免費額度內

AI 開發工具與成本

  • 主力工具:Augment/Cursor + ChatGPT(約40鎂內,受惠於試用期)
  • 開發成本:因為使用量還不高,目前花費以開發工具為主
  • 開發效率:相較傳統開發方式提升約 N 倍 (沒有 AI 我還做不出來)

💡 Vibe Coding 開發心得

關於 Vibe Coding,網路上的討論多數認為它目前比較適合用來做些 Demo 或簡易小工具,實際案例大多也偏向這類型。我自己本來也抱持類似看法,不過當看到 AI 工具越來越強大時,心想:那就試著做個實用的小工具看看吧。

沒想到這一做下去,孩子居然真的願意每天打開來用,連我這個當爸的都意外。於是就一路做到了現在,平台也慢慢從初始任務表,擴展到有成就系統、睡前檢查與每日互動挑戰的小平台。

雖然這是一個標準的網頁 PWA,但我本身其實是寫桌面應用的工程師,對網頁開發幾乎是 0 經驗。因此,幾乎所有的前端與 Firebase 程式碼,都是靠 AI 工具生成的,我的角色比較像是需求提案/工程審核與架構驗證,而不是「傳統開發者」。

這樣的開發方式,讓我深刻感受到——現階段的 Vibe Coding,對有工程背景的人來說,是極具威力的開發模式。如果你本身就有邏輯思維與程式經驗,只是對某個技術棧不熟,那麼 AI 可以大幅降低跨技術門檻、縮短產品開發週期。

也因此,我認為 Vibe Coding 不是「簡化寫程式」,而是擴張工程師能力邊界的工具。身為工程師的你,不妨也試試把腦中想做的點子,透過這種方式實作出來 —— 工程師,一起來 Vibe 吧!

👨‍👩‍👧 使用情況:從家庭實驗到實際運作

TaskyVenture 從一個育兒痛點出發,透過 AI 協作開發,現在已經成為我們家庭生活的重要工具。目前我家孩子每天都在使用這個平台,完成學習與生活任務,晚上也會主動開啟睡前檢查表。雖然外部使用者仍不多,但已經觀察到有少量穩定使用者每日登入使用(只要有家庭持續使用,對小孩有幫助,就是我不斷開發改善的動力)。

📌 小結:邊做邊用,最好的 MVP 是自己家人

這個平台從最初的任務表,逐漸加入了每日成就、週末抽獎、睡前檢查與單字挑戰等功能,都是根據家中實際使用時遇到的需求一點一滴調整出來的。沒有特別宏大的規劃,但每次的修改都來自真實情境的反饋,也讓這個工具在日常中慢慢變得更完整。

raw-image


🚀 現在就體驗 TaskyVenture!

想試試讓孩子主動完成生活任務?來試試 TaskyVenture,現在完全免費開放! 期望能獲得更多家長回饋。

我們的使用情境很單純,就是在客廳放一台平板,預先設定好每日任務,讓小孩自己去操作。

📲 體驗 TaskyVenture

🌐 官方網站

👍 Facebook 專頁

Google Play 商店版

✅ 適合 4~12 歲孩子

✅ 電腦/手機/平板都可用,兒童建議使用電腦或平板,畫面更清楚,孩子操作更方便

✅ 手機可安裝成 APP 使用,像原生應用一樣流暢


留言
avatar-img
平凡工程師的 ✨夢想宸蓁✨ 育兒實驗室
4會員
8內容數
我是一位平凡的軟體工程師,在 AI 的幫助下,我試著打造了一個兒童任務管理平台(TaskyVenture) ,這套工具究竟能為我們的親子日常帶來哪些意想不到的火花?敬請鎖定我的真實開發經驗與使用心得分享!
你可能也想看
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
打開 jupyter notebook 寫一段 python 程式,可以完成五花八門的工作,這是玩程式最簡便的方式,其中可以獲得很多快樂,在現今這種資訊發達的時代,幾乎沒有門檻,只要願意,人人可享用。 下一步,希望程式可以隨時待命聽我吩咐,不想每次都要開電腦,啟動開發環境,只為完成一個重複性高
Thumbnail
打開 jupyter notebook 寫一段 python 程式,可以完成五花八門的工作,這是玩程式最簡便的方式,其中可以獲得很多快樂,在現今這種資訊發達的時代,幾乎沒有門檻,只要願意,人人可享用。 下一步,希望程式可以隨時待命聽我吩咐,不想每次都要開電腦,啟動開發環境,只為完成一個重複性高
Thumbnail
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Thumbnail
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
這篇文章描述了作者從兼職開發轉為全職開發的過程,並分享了從混進學界指日可待的積極態度。作者也提及自己在專案製作與個人生活上的矛盾與感想,最後分享了專案管理和敏捷開發相關的文章與影片。
Thumbnail
這篇文章描述了作者從兼職開發轉為全職開發的過程,並分享了從混進學界指日可待的積極態度。作者也提及自己在專案製作與個人生活上的矛盾與感想,最後分享了專案管理和敏捷開發相關的文章與影片。
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
本文介紹如何使用Vite建立前端開發初始檔案,並加入Tailwindcss的教學。透過指令和配置檔,讓你能快速建立個人專案的開發環境,並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等,幫助你進一步學習。
Thumbnail
本文介紹如何使用Vite建立前端開發初始檔案,並加入Tailwindcss的教學。透過指令和配置檔,讓你能快速建立個人專案的開發環境,並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等,幫助你進一步學習。
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
這是為了搭建自己想要的工作流而開始的研究工作。
Thumbnail
這是為了搭建自己想要的工作流而開始的研究工作。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News