這次我試著用 AI 做出另一款 APP——「樂透財寶圖」（產品連結）。
它是一款用來記錄我自己買樂透時中獎記錄的 App。這個概念是某天突然想到的，一開始的想法是：「如果我每次都用同一組號碼，但在不同的彩券行買，會不會有些地方就是比較容易中獎？」，根據我自己的實驗，同一組號碼買了約 30 次，大概平均 4-6 次會中一次 100 塊。慢慢地，我發現自己在台北「大安區」比較容易對中號碼，就開始思考，會不會那個地方是我的財位？或者是大安區就是一個中獎熱點？於是我就想開發一個產品來紀錄這樣的中獎軌跡，也驗證自己的想法。
樂透財寶圖的功能
這款 App 的功能其實很單純：
- 地圖顯示全台 5000 多間彩券行的位置
- 可以自己設定一組選號（目前支援威力彩）
- 在地圖上紀錄中獎的號碼
- 查詢自己的「財運指數」和熱區
技術選擇與架構
這是我第一次開發 App（我前一個產品 introly.me 是 web 產品），所以架構上差蠻多的。我選擇了：
- React Native + Supabase（用 Zeabur 部署）
- Expo 上架 App Store
- 使用 AI 編輯器 Windsurf，模型為 Claude 3.7 Sonnet
我沒有選 native，是因為比較熟悉 web 技術，React Native 基本上還是 web 為基礎，也方便同時做 Android 版本，不用維護兩套技術。而選擇 Windsurf，是因為一開始試了 Cursor，但延遲感太強，後來發現 Windsurf 的反應速度更快，搭配 Claude 的互動體驗也比較順。
開發過程的挑戰
開發 App 和網頁不同，最大的差別是偵錯不方便。我很依賴 AI 幫我 console 出資料流程，這樣才能快速定位錯誤。與 Web 不同的是，App 沒有現成的 DevTools，因此我花了不少時間學習怎麼讓 AI console 出我要的結果，幾乎每一段程式都要 console，因此程式碼也比 web 更長更難維護。
UI 設計的取捨
因為這個產品是我原創的概念，市場上沒有參考範例，所以 UI 完全是憑著自己的經驗試出來的。我採取原生風格設計（iOS native），盡量不讓自己一開始就陷入視覺設計的細節，雖然介面上有點陽春，但不影響功能，等有空再來強化視覺。另外我還導入 Tamagui 的 UI 框架，但後來發現其實沒必要，Tamagui 是為了跨平台（web + app），但我並不打算做 web，但導入後要再移除，整個產品的架構也要換（暈，AI 還主動強調我不要這樣做）…這也讓我學到：導入任何框架前都要再想清楚，有些事情 AI 要搞，他也會覺得麻煩。
狀態管理與資料載入
React 的渲染機制真的很麻煩，AI 的短期記憶無法完全的記住上下脈絡，在處理相同問題的時候，一不小心就會走歪，導致畫面會重複渲染，最後還是使用了「狀態管理 （我使用的是 Zustand）」解決同步與控制問題，遇到資料更新與同步的問題，就讓 AI 先去檢查 store 看有無可用資訊，雖然到目前為止，還是有重覆渲染的問題，但是…沒壞就好。
另外一個挑戰是資料載入策略。要一次載入全台 5000 多間彩券行資訊、加上中獎紀錄，又要顧及地圖渲染效率、即時更新、還不能拖慢整體效能，這塊也是花了不少時間與 AI 反覆確認比較好的資料載入策略，最終採取了 async storage 的暫存策略，在渲染畫面時，也實作了依地圖的載入範圍手動的載入渲染的資料，這點的操作與 google map 相似。
登入功能的挑戰
這次我用 Zeabur 自架 Supabase，最大的好處就是「省錢」，Zeabur 簡化了 supabase 的功能，讓它變的更輕量，同時也可以關閉一些用不到的服務來節省記憶體使用，唯一遇到的問題，是簡化後功能有時需要「手動」的方式來開啟一些服務，像是 auth 的服務，只能夠透 zeabur 後台來手動設定環境參數（期待 zeabur 團隊能提供更好的解決方案）。
另外， Windsurf 雖然有內建 Supabase MCP Serve，卻不像 Lovable 能直接幫你改 SQL 結構。我只能請 AI 幫我檢查資料結構、產出 SQL 語句再手動貼上，尤其在串接 Google Auth 與 Apple Auth 時，不能完全靠 AI，只能靠文件、log、問人（感謝 Zeabur 跟 Daniel），一步步 debug。雖然卡關很多，但最後還是成功完成登入功能了。
產品上架比想像中複雜
產品功能完成後，接下來就是上架流程的挑戰。雖然這次我還沒正式上架到 Google Play，但在串接 Google 登入時，Google 要求必須提供一個完整的 callback 網址，並且這個網址還需要通過 DNS 驗證，否則會無法啟用登入功能。這部分花了我一些時間理解整個驗證流程。
至於 Apple 上架則是另一個層級的挑戰，不只是技術問題，還包含了許多政策與文件細節。 Apple 對於隱私權政策和 App Tracking Transparency（ATT）相關的設定也非常嚴格。另外我是使用 expo 上架，設定 app config 也是讓人頭大，要不斷的 prebuild 後確認 info plist 沒有問題，才能送審，這次送審至少被打回來三次。
還有像 screenshot 的尺寸對應、metadata 的描述、分類選項等等，Apple 都審得很細，任何一個小細節沒填好都可能導致補件或退件。整體來說，Apple 上架需要的耐心比我預期多很多，但也因此讓我更熟悉整個上架的流程與規則。
產品未來規劃
目前產品只有 iOS 版，接下來我打算：
- 推出 Android 版本
- 加入廣告做為基本收入來源
- 推出付費版，支援更多彩種、記錄多組號碼，並產生每組號碼的財運地圖
總結
其實這個產品比較像是一個我在生活中實驗與探索的小工具。
「幸運數字」、「財位」這件事或許有點不符合科學，但仔細觀察，或許每個人生命中都會有一些重覆的「暗示」。那些「暗示」的意義會是什麼？如果有意識的探索，也許會出現一些意想不到的驚喜。
期待大家也能透過這個 App 找到自己的財位，如果你真的找到了，也請一定要跟我分享！
最後，如果你願意支持我持續開發與維運這個產品，可以透過以下方式贊助我：
—
• 使用「街口」或「全支付」的小額零錢贊助
https://introly.me/reihuang（進到我的電子名片後，點擊「雙箭頭」的 icon 及可開啟街口或全支付的 App 進行轉帳）
• 使用 windsurf 的推薦碼註冊產品，幫我增加開發點數：
https://windsurf.com/refer?referral_code=jma4thh5tcckt076
• 使用 zeabur 的推薦碼註冊，支持伺服器運作：
https://zeabur.com/referral?referralCode=reidevbx
非常感謝願意支持這個小小計畫的你！如果想一起交流也歡迎加入臉書的社群
https://www.facebook.com/groups/aidevgroup
最後的最後，再特別感謝一些協助我這個專案的人
Zeabur 的團隊支援，半夜一直被我敲訊息😂，但他們的產品真的很讚，官方的 supabase 一個月就是 $25 美金！但使用zeabur 可以降低到 $5 美金以下，依量計費，對於還無法變現的產品前期的成本控制真的很重要，另外創辦人林沅霖年輕又帥氣！
Lifenote 的創辦人 Daniel，私下也請教了他許多關於產品上架的問題，他每次都很認真的回覆我的問題，真是個有溫度的男人。也歡迎大家認識 life note 這個產品，是一個能夠與智者對話並寫成日記的產品，認真使用或許能讓妳對生活有更深刻的認知。Life note : https://mylifenote.ai/
產品的成本
- Windsurf：每月 1,800 元，另需點數補充 900 元
- iOS 開發者帳號：每年 3,000 元
- Expo 佈署成本：每次 60 元，共佈署 10 次，總計 600 元
- Zeabur：每月 150 元
歡迎使用：樂透財寶圖
huangruilin 