記帳App製作實習報告

課程概述

本次課程以三種不同技術方式製作個人記帳應用程式，分別為 MIT App Inventor（AI2）、PWA + Python Flask 以及結合 Firebase Hosting 上線部署，深入體驗從行動端到網頁端的完整 App 開發流程。

📱

方法一：MIT AI2

視覺化積木程式設計
搭配 TinyDB 本地儲存

🌐

方法二：PWA + Flask

Python 後端伺服器
網頁前端介面設計

☁️

方法三：Firebase

雲端資料庫整合
一鍵部署上線

MIT App Inventor 實作

🎯

學習目標：利用 TinyDB 元件將帳目儲存至 AI2 內建微型資料庫，以下拉式選單選擇類別，並設置儲存與清空功能。透過 BlueStacks 模擬器在電腦上直接執行測試。

TinyDB 儲存帳目至本地資料庫

清單變數存取並顯示於螢幕

下拉式選單選擇帳目類別

儲存成功或未選類別時顯示通知

清空按鈕清除 TinyDB 與畫面

Clock 計時器取得當前日期時間

▸ 實作截圖紀錄

圖① AI2 Designer — 元件樹與畫面佈局設計

圖② AI2 Blocks — 完整程式邏輯積木

圖③ BlueStacks 模擬器執行結果 — 帳目資料成功儲存並列出

介面元件設計

元件名稱	類型	功能說明
HorizontalArrangement1	Layout	類別選擇列容器
Label1 / 下拉式選單1	UI	Spinner 類別選擇（請選擇、其他、早餐、午餐、晚餐）
HorizontalArrangement2	Layout	明細輸入列容器
Label2 / TextBox_輸入明細	UI	明細文字輸入欄位
HorizontalArrangement3	Layout	金額輸入列容器
Label3 / TextBox_輸入金額	UI	金額數字輸入欄位
水平配置1	Layout	按鈕列容器
儲存按鈕 / 清空按鈕	UI	觸發儲存或清空動作
資料查詢 Label	UI	顯示所有帳目列表
對話框1	Non-vis	顯示通知訊息（儲存成功 / 請選擇類別）
微型資料庫1	Non-vis	TinyDB 本地資料儲存
計時器1	Non-vis	Clock 取得日期（格式：MMM d, yyyy）

程式積木邏輯說明

① 宣告變數與初始化

    App Inventor Blocks
    initialize global dataList to create empty list

when Screen1.Initialize
  if not is empty ( TinyDB.GetValue tag:"data" valueIfTagNotThere:"" )
  then
    set global dataList to TinyDB.GetValue tag:"data"
    set 資料查詢.Text to get global dataList
  

② 儲存帳目資料

    App Inventor Blocks
    when 儲存按鈕.Click
  if compare texts 下拉式選單1.Selection ≠ "請選擇"
  then
    if not is empty 輸入金額.Text
    then
      add items to list global dataList
        item: join ( Clock.FormatDate instant:Clock.Now
                        pattern:"MMM d, yyyy" )
              "," 下拉式選單1.Selection
              "," 輸入明細.Text
              "," 輸入金額.Text "
"
      TinyDB.StoreValue tag:"data" value:global dataList
      對話框1.ShowAlert notice:"儲存成功"
    else
      對話框1.ShowAlert notice:"請輸入金額"
  else
    對話框1.ShowAlert notice:"請選擇類別"
  

③ 清空資料

    App Inventor Blocks
    when 清空按鈕.Click
  set global dataList to create empty list
  set 資料查詢.Text to ""
  TinyDB.ClearAll
  

PWA + Flask 開發

💡

方法：詢問 Gemini AI 生成完整的 PWA 記帳 App 專案架構，使用 Python Flask 作為後端 API 伺服器，前端搭配 HTML/CSS/JavaScript 與 Firebase Realtime Database。

▸ 專案目錄結構

    Project Structure
    budget_app/
├── app.py              # Flask 後端主程式
├── requirements.txt    # Python 套件清單
├── templates/
│   └── index.html      # 主介面（含 PWA 設定）
└── static/
    ├── manifest.json   # PWA 設定檔
    ├── sw.js           # Service Worker（離線支援）
    └── script.js       # 前端邏輯（含 Firebase 互動）
  

▸ 後端核心程式（app.py）

    Python · Flask
    from flask import Flask, render_template, send_from_directory
import os

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/sw.js')
def serve_sw():
    return send_from_directory('static', 'sw.js',
           mimetype='application/javascript')

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=5000)
  

▸ 執行過程截圖

圖④ 向 Google Gemini 詢問並生成完整 PWA 專案架構

圖⑤ VS Code 執行 Flask 伺服器，瀏覽器即時預覽 App

圖⑥ PWA 記帳 App 完成介面 — 多筆帳目記錄成功儲存與顯示

▸ 啟動步驟

安裝依賴套件

執行 pip install flask firebase-admin 安裝必要套件

啟動 Flask 伺服器

執行 python app.py，伺服器運行於 0.0.0.0:5000

瀏覽器開啟 App

輸入 192.168.x.x:5000 即可使用 PWA 記帳介面

Firebase 雲端資料庫整合

✅

成果：帳目資料即時同步至 Firebase Realtime Database，每筆記錄包含 amount、category、date、detail 四個欄位。

欄位	範例值	說明
amount	"400"	消費金額
category	"早餐"	消費類別
date	"5月 13, 2026"	記帳日期
detail	"永和豆漿"	消費明細

▸ 部署至 Firebase Hosting

    Terminal · PowerShell
    # 安裝 Firebase CLI（需先安裝 Node.js）
npm install -g firebase-tools

# 確認版本
firebase --version

# 登入 Firebase 帳號
firebase login

# 一鍵部署至 Hosting
firebase deploy
  

🔗

線上網址： https://budget-app-6c6f1.web.app/ — 部署完成，可從任何裝置存取

優化專案（Antigravity AI 擴充）

利用 VS Code 內建的 Antigravity AI 助理，對現有記帳 App 進行功能擴充，另存新目錄 20260514_app。

    Prompt to Antigravity AI
    請優化專案內程式（記帳APP）
1. 增加可上傳發票選項
2. 自動將上傳項目區分（其他、早餐、午餐、晚餐）
3. 統計明細表格，再增加統計圖表
相關修改程式另存至目錄夾 20260514_app
  

發票掃描 OCR：整合 Tesseract.js 自動讀取發票金額與明細

智能分類系統：依時間、關鍵字自動歸類早餐／午餐／晚餐

視覺化統計圖表：Chart.js 圓餅圖與每日趨勢折線圖

介面美化：玻璃擬態（Glassmorphism）現代設計風格

REFLECTION

心得與感想

📱 MIT App Inventor

第一次使用積木式程式設計製作行動應用程式，感覺非常直觀。TinyDB 的概念讓我理解了本地資料儲存的原理。透過 BlueStacks 模擬器可以即時看到執行結果，大幅降低了學習門檻，對程式邏輯的理解也更加深刻。

🌐 PWA + Flask 開發

利用 Gemini AI 生成完整專案架構，體驗了 AI 輔助開發的強大效率。Flask 後端結合前端 HTML/CSS 讓我了解了 Web App 的完整架構。Service Worker 的離線支援功能讓 PWA 真正具備原生 App 的體驗。

☁️ Firebase 雲端整合

Firebase Realtime Database 的即時同步功能令人印象深刻，資料能在毫秒內更新至雲端。透過 firebase deploy 一鍵部署的體驗讓我感受到現代 DevOps 的便利，未來可以將此技術應用於更多實際專案。

本次課程透過三種截然不同的技術路線製作同一個記帳應用，讓我深刻體會到「工具選擇」對開發效率的影響。從 MIT AI2 的零程式碼體驗，到 Flask + Firebase 的全端開發，每種方式都有其適用場景。特別是 AI 工具（Gemini、Antigravity）的應用，大幅縮短了開發時間，也讓我思考未來軟體開發者如何與 AI 協作。這次實習讓我對 App 開發有了更全面的認識，也激發了我繼續深入學習的動力。