為了讓自己更加了解 AI 開發的極限在哪裡，我先選定了一個主題，然後還是用我熟悉的app開發框架 flutter 來開發新產品。開發前已經試過了許多的所謂的vibe coding工具，gemini cli, cursor, claude, chatgpt，當時Claude 4剛推出，試了也真的不錯，所以就選定claude來著手開發新產品。
在繼續介紹前，先來安插一張，實作到八成時，我請claude去分析整體的專案架構，他的評語如下：
<Gallery images={[ { src: "https://firebasestorage.googleapis.com/v0/b/blog-98831.firebasestorage.app/o/posts%2F2005-10-09%2Fzh-tw%2F1759989001972-e9d7591e-78ce-497c-af31-faa6f8ed7e00.png?alt=media&token=91ea1405-5a01-4278-acea-bf6d60cf75b0", alt: "2005-10-09-zh-TW-gallery-1" }, { src: "https://firebasestorage.googleapis.com/v0/b/blog-98831.firebasestorage.app/o/posts%2F2005-10-09%2Fzh-tw%2F1759989002836-a127094b-c1c6-4d7c-8ba2-003c26122a23.png?alt=media&token=f6e1497a-6596-4631-9dfb-7b0c2f4d3efc", alt: "2005-10-09-zh-TW-gallery-2" } ]} />
當初動工前，我就知道為了讓claude每次啟動前都能快速掌握現狀，事前的詳細規劃跟準備工作是少不了的。所謂的vibe coding，只是能夠讓人可以憑著感覺完成一個服務或產品，但是那種說到底純粹「自爽」用，若要推向市場就要考慮到很多面向：後續維護，UI/UX，多國語言，方不方便測試，上線成本。。等。
hisohiso採用flutter外加Firebase全家桶服務，所以前端的設計要考慮之外，還要考慮 firestore / firestorage 存取權限跟成本的問題。像是 firestore，雖然使用方便，但是存取一筆文件就算一次存取，
為了解決這個問題跟AI討教學習，得出的結論就是要把那些簡短的資料區塊用陣列去儲存，且切片。只是用陣列儲存也會有限制，像是不能用serverTimestamp, 整筆文件空間最高只能1MB等等。開發過程雖然遇到了很多坑，但是我的目標主要就是學習，想要知道他可以做到什麼地步，以及我可以從中學到之前我不會知道的知識跟技術。
後來，我靈光一閃，想出了一個獨創的功能，那就是
<span className="text-[1.35rem] font-semibold leading-[1.65]"><span className="text-amber-500">「語音貼文」</span></span> 以下是影片：
<Video src="https://firebasestorage.googleapis.com/v0/b/blog-98831.firebasestorage.app/o/posts%2F2005-10-09%2Fzh-tw%2F1759994315738-c6e0e2da-388e-4249-b344-a2a12089ce68.mp4?alt=media&token=645d2210-444b-44a5-af79-4a0030ede914" caption="影片說明" />這個功能的有趣之處在於，使用者不點擊播放的話就不會知道該篇PO文是在說什麼。而且點擊播放之後，不只是會播放語音，還會逐步顯示語音的文字，有點像是唱卡啦OK那樣，雖然我這輩子只去過不會三次的KTV XDDD。
知道要作這個功能之後就意考慮到如何呈現 如何使用，如何把聲音檔轉成文字，文字有了怎麼讓他有咖拉OK的效果，而且資料如何儲存等等。在實際叫AI動手之前，跟他討論了很久時間，最後定稿出規格書跟介面如下：
<Gallery images={[ { src: "https://firebasestorage.googleapis.com/v0/b/blog-98831.firebasestorage.app/o/posts%2F2005-10-09%2Fzh-tw%2F1759994482493-3d0e692e-7da3-4b09-84b1-59b08c249375.png?alt=media&token=85d39322-66d3-4be2-9786-439efb6da347", alt: "2005-10-09-zh-TW-gallery-1" }, { src: "https://firebasestorage.googleapis.com/v0/b/blog-98831.firebasestorage.app/o/posts%2F2005-10-09%2Fzh-tw%2F1759994483185-2c60eafb-e40a-44c6-b453-59e22daa8271.png?alt=media&token=e934914e-480f-4a74-8acf-30393df3a84f", alt: "2005-10-09-zh-TW-gallery-2" }, { src: "https://firebasestorage.googleapis.com/v0/b/blog-98831.firebasestorage.app/o/posts%2F2005-10-09%2Fzh-tw%2F1759994483772-832104de-ceb5-4b0e-adea-d8802143ac1c.png?alt=media&token=67a44fdc-6e64-474c-a41b-c1a7c78f3b1c", alt: "2005-10-09-zh-TW-gallery-3" }, { src: "https://firebasestorage.googleapis.com/v0/b/blog-98831.firebasestorage.app/o/posts%2F2005-10-09%2Fzh-tw%2F1759994484395-0cddfe08-fe2f-4c37-a385-2eff0d41ed8b.png?alt=media&token=4b019bef-49ea-48da-8db5-047157225215", alt: "2005-10-09-zh-TW-gallery-4" }, { src: "https://firebasestorage.googleapis.com/v0/b/blog-98831.firebasestorage.app/o/posts%2F2005-10-09%2Fzh-tw%2F1759994484947-31916986-c6be-4443-86ba-3c966ca2e232.png?alt=media&token=8ffa2bf0-6492-4d39-a6e7-6c41c7be8cf3", alt: "2005-10-09-zh-TW-gallery-5" }, { src: "https://firebasestorage.googleapis.com/v0/b/blog-98831.firebasestorage.app/o/posts%2F2005-10-09%2Fzh-tw%2F1759994485515-1752c78b-636d-4cbd-877b-596b67239e3c.png?alt=media&token=28d2f501-8769-44a2-b003-39a45b0adfcc", alt: "2005-10-09-zh-TW-gallery-6" }, { src: "https://firebasestorage.googleapis.com/v0/b/blog-98831.firebasestorage.app/o/posts%2F2005-10-09%2Fzh-tw%2F1759994486110-4039b736-2c5f-4570-8d2e-6cee71d77a54.png?alt=media&token=fcc0e00c-f3b1-4ae6-9502-abb9f4db7394", alt: "2005-10-09-zh-TW-gallery-7" }, { src: "https://firebasestorage.googleapis.com/v0/b/blog-98831.firebasestorage.app/o/posts%2F2005-10-09%2Fzh-tw%2F1759994486713-e9605df7-74aa-4db6-88a1-0ada44b528f0.png?alt=media&token=57d6d242-03c9-4d21-bdca-a301e608fe5e", alt: "2005-10-09-zh-TW-gallery-8" } ]} />
雖然他是說要好幾個月，但是一來我有經驗，二來事先規劃跟定義都十分的清楚，功能完成前後只花了三天就搞定。所謂
<span className="text-[1.35rem] font-semibold leading-[1.65]"><span className="text-rose-500">強強聯手</span></span>
莫過如此吧。XDDD
以下是更多截圖：
<Gallery images={[ { src: "https://firebasestorage.googleapis.com/v0/b/blog-98831.firebasestorage.app/o/posts%2F2005-10-09%2Fzh-tw%2F1759994895026-8dd684f4-cc90-47ee-9de4-93127956bb99.png?alt=media&token=8a7ad1a3-bb57-47e0-af5f-c40cf688c4d2", alt: "2005-10-09-zh-TW-gallery-1" }, { src: "https://firebasestorage.googleapis.com/v0/b/blog-98831.firebasestorage.app/o/posts%2F2005-10-09%2Fzh-tw%2F1759994895968-de4064ef-7106-472c-8acc-aeb1d9bd75eb.png?alt=media&token=51670392-a562-437a-a28c-cdb8c8361303", alt: "2005-10-09-zh-TW-gallery-2" }, { src: "https://firebasestorage.googleapis.com/v0/b/blog-98831.firebasestorage.app/o/posts%2F2005-10-09%2Fzh-tw%2F1759994896601-6b06519a-6566-47b7-8b09-9628348c46c3.png?alt=media&token=b7599557-f62a-496b-b2f4-f23b91f28fe4", alt: "2005-10-09-zh-TW-gallery-3" } ]} />
最後，這個專案，前後花了兩個月完成並上架，然後到現在總下載人數不會超過五人！可喜可賀！！現在這個APP從當初的<span className="text-emerald-500">地理位置社交</span>轉變成
<span className="text-[1.35rem] font-semibold leading-[1.65]"><span className="text-accent">「開發者一個人的ひそひそ」</span></span>
XDD
我也是從開發這個APP中建立了自信那就是『我掌握了AI開發的技術跟技巧，並且能快速開發出品質優良的程式』！！
留言
留言載入中...