iT邦幫忙

2025 iThome 鐵人賽

DAY 11
0
生成式 AI

Android 不會只更新 UI ! 用 Vibe Coding ? 加速打造 Al-native App系列 第 11

Day 11 - 運用 Vibe Coding 在 Android Studio 上快速製作記帳 APP Part1

  • 分享至 

  • xImage
  •  

接下來,我們將利用 Vibe 的方式,全程只用 Prompt 技巧完成這個記帳 APP。
我會提供我的步驟與 Prompt 但你可以自己客製化。

使用環境

Android studio+Gemini 2.5 pro

目標

我們將模仿 Dark記帳 自己(?) 實作一個
https://ithelp.ithome.com.tw/upload/images/20250925/20176017W1pCm44kcw.png

原因: 因為可愛 💟

首先我們先觀察他的 View 與功能方便跟 AI 溝通需求。

他有四個關鍵特色如下:

https://ithelp.ithome.com.tw/upload/images/20250925/20176017wBmBHUsQiM.png

APP 的畫面:

記帳主頁(主頁)

https://ithelp.ithome.com.tw/upload/images/20250925/20176017sXEDYfO9gX.png

功能:
我們不講元件,只談需求。可以看到
1.上方可以選擇日期
2.有一個日平均預算
3.支出、收入、結餘
4.交易紀錄與圖表分析
5.有個按鈕直接記帳
6.最下方有選單可以有其他功能

資產(第一頁)

https://ithelp.ithome.com.tw/upload/images/20250925/20176017yDbGXeUZyh.png
功能:
1.管理資產
2.確認每個帳戶的剩餘金額
3.一個按鍵新增轉帳紀錄

存錢罐(第二頁)

https://ithelp.ithome.com.tw/upload/images/20250925/20176017GVmNmyOWrL.png
功能:
1.查看進行中與計畫中的存錢任務
2.一個按鍵紀錄新計畫

設定(最後一頁)

https://ithelp.ithome.com.tw/upload/images/20250925/20176017QPWW2yhyQ7.png
功能:
1.設定 APP 標誌
2.個人化設定主題風格
#因為資料備份比較複雜,我們先不做這個功能。
功能大概就是這樣

接下來寫出 Prompt 把圖跟通能需求一起給 AI

#如果你是使用網頁板 Gemini,加入”我的身份”這個 Prompt ,體驗會比較好。
#如果你是用內建的 Gemini Agent 可以不用。
#記得跟圖片一起上傳(按照順序)

#我的身分
安卓新手,需要一步一步教我複製貼上程式。
一次不能輸出太多內容,要一步一步輸出,並且check我有沒有做對,在進行下一步
#目標
設計一個以 java 撰寫的安卓 APP
View 可以看到如圖
你需要幫我思考怎麼做才不會跑版,必要時可以更改下面的功能以求穩定
#功能
記帳主頁(主頁):
1.上方可以選擇日期
2.有一個日平均預算
3.支出、收入、結餘
4.交易紀錄與圖表分析
5.有個按鈕直接記帳
6.最下方有選單可以有其他功能

#資產(第一頁)
1.管理資產
2.確認每個帳戶的剩餘金額
3.一個按鍵新增轉帳紀錄

#存錢罐(第二頁)
1.查看進行中與計畫中的存錢任務
2.一個按鍵紀錄新計畫

#設定(最後一頁)
1.設定 APP 標誌
2.個人化設定主題風格
"因為資料備份比較複雜,我們先不做這個功能。只要上面兩個就好"

#注意事項
先寫出一個 prd.txt 用來記錄我們的目標與功能,我會透過他確認你完全知道我的想法。
在每個重要的功能,加入log 方便Debug
需將資料紀錄在APP本地,確保關機不會不見

他應該會給你一份類似的 prd.txt

#prd.txt
1. 專案名稱:
MyLedger (我的記帳本)
2. 專案目標:
開發一款原生 Android 應用程式,幫助使用者輕鬆記錄個人收支、管理資產、規劃儲蓄目標。此應用程式應具備直觀的使用者介面與核心的記帳功能,並確保資料在本地端安全儲存。
3. 核心功能:
3.1. 主頁 (Home Screen)
功能描述: 應用程式的主要入口,提供當前財務狀況的總覽。
介面元件:
日期選擇器: 位於頂部,允許使用者切換月份(例如 < 2025-09 >)。
預算總覽: 顯示「日平均預算」和「剩餘預算」。
收支結餘: 以醒目的卡片顯示總「支出」、總「收入」及「結餘」。
內容分頁:
交易紀錄: 以列表形式顯示該月份的所有交易。
圖表分析: 將收支數據視覺化,例如圓餅圖或長條圖。
記帳按鈕: 一個懸浮按鈕或置於頁面下方的顯眼按鈕,用於快速新增一筆交易。
底部導覽列: 切換至其他主要功能頁面。
3.2. 資產頁 (Assets Screen)
功能描述: 讓使用者管理所有資產帳戶,如現金、銀行、信用卡等。
介面元件:
資產總覽: 顯示「淨資產」、「總資產」、「總負債」等數據。
帳戶列表:
分類顯示不同類型的帳戶(例如:現金帳戶、信用帳戶)。
每個帳戶項目旁都顯示其目前的剩餘金額。
新增轉帳按鈕: 讓使用者記錄一筆從 A 帳戶轉帳到 B 帳戶的紀錄。
3.3. 存錢罐頁 (Piggy Bank Screen)
功能描述: 幫助使用者建立並追蹤儲蓄計畫。
介面元件:
狀態分頁: 分為「進行中」與「計畫中」的儲蓄任務。
計畫列表: 顯示所有儲蓄計畫的名稱、目標金額與目前進度。
新增計畫按鈕: 用於建立一個新的儲蓄計畫。
3.4. 設定頁 (Settings Screen)
功能描述: 提供個人化設定。
介面元件:
APP 標誌設定: 允許使用者從預設的幾個圖示中選擇一個作為 APP Logo。
主題風格設定: 提供數種主題選項(例如:淺色、深色、少女風)。
排除功能:
根據指示,暫不開發雲端備份與還原功能。
4. 技術規格:
開發語言: Java
平台: Android
資料儲存: 所有使用者資料(交易紀錄、資產帳戶、存錢計畫等)將儲存在 APP 的本地資料庫中,確保裝置重新啟動後資料不會遺失。
偵錯機制 (Debug): 在關鍵功能點(如:新增/刪除/修改資料、讀取資料庫)加入 Log 記錄,方便追蹤與修正問題。

這樣前置準備就完成了!
今天先到這邊


上一篇
Day 10 - 西谷夕: 你們看著前面就好,背後由我來守護。Vibe技巧 Part2
下一篇
Day 12 - 運用 Vibe Coding 在 Android Studio 上快速製作記帳 APP Part2
系列文
Android 不會只更新 UI ! 用 Vibe Coding ? 加速打造 Al-native App12
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言