共同記帳 (Google AppSheet & Google Sheet)

前言

一直見到各文章各影片說著 Vibe Coding 多厲害多好用, 剛好市面上的記帳 APP 都不太符合我的需求, 就想說拿這個來當作題材試著做一個 APP 看看。 需求如下:

• 需要支援 Android 跟 iOS
• 需要兩個人都能夠編輯記帳
• 需要記錄這筆支出是誰付的款
• 需要月結兩人各自為家庭支出了多少

想好了需求之後, 我就開始問 ChatGPT 我要如何開始進行 Vibe Coding, GPT 首推的是 ‘Glide’ 這個工具, 但當我跟他聊沒幾句話就發生了…

登登, 您的免費次數用完了

Q_Q 都還沒開始就已經結束了, 只好再問 GPT 老大有沒有其他的工具可以使用, 它給了我幾個選擇: Adalo, Softr, Bubble, Thunkable, AppSheet。

考慮到我的資料庫來源主要是來自 Google Sheet, 同是 Google 出產的 AppSheet 可能會有比較好的相容性, 所以最終選擇了 AppSheet 來做開發。

Start

基本上我是一直問 chatGPT 然後一邊穿梭在 Google Sheet 和 AppSheet 來回跑做設定跟 debug, 但這篇我只是想分享一下如何架出自己的共同記帳 APP, 所以只會紀錄要設定哪些東西, 設定完之後就可以架出屬於自己的共同記帳 APP。

Step 1. 建立資料庫

AppSheet 支援多種資料庫來源, 而我使用的是 Google Sheet, 所以一開始要到 Google Sheet 建立你的資料表

由上圖可以見到我建立了三個分頁, 分別是家庭支出、每月結算和FilterTable，接下來會一一講解用途，首先先建立出你的試算表文件, 然後建立這三個分頁, 家庭支出的欄位設計如我圖片所展示的:

• 日期：記錄支出日期
• 項目：消費名稱（例如早餐、車票、學費…）
• 金額：支出金額
• 收入/支出: 記錄這筆金額是收入還是支出
• 類別：餐費 / 交通費 / 學費 / 其他
• PayBy: 是誰付的錢 (付錢的時候我跟我先生會先付錢, 事後月結計算各自花了多少然後從共同帳戶轉帳給各自帳戶)
• 建立人: 自動抓使用者的 Google 帳號
• 備註：額外說明
• 年月: 這個欄位主要是為了每月結算使用, 如果不需要”每月結算”或是”顯示每月開銷分布”的功能可以不用有這個欄位

每月結算的欄位設計:

• 年月
• XXX支出: 這個月XXX付了多少$$
• OOO支出: 這個月OOO付了多少$$
• 共同帳戶支出: 這個月從共同帳戶付了多少$$
• 總支出

FilterTable 的欄位設計:

• 年月選擇

建立好這三個分頁之後就可以開始到 AppSheet 開始進行 Vide Code 了。

Step 2. AppSheet include 資料庫

首先到 AppSheet 登入你的 google 帳號後按左上角的 Create -> App -> Start with existing data。

填寫完你的App name 後, Select data source 選擇 “Google Sheets” 點選你剛剛建立的試算表，Default 就會建立出家庭支出的頁面。

首先先到左側欄第二的 icon 點下去來到 “Data” 設定

日期 Type 設定為 Date, 然後因為我不想要每次記帳都還要在那邊填日期, 所以在 Formula 的欄位中我直接填入 “= TODAY()” 讓他在新增資料的時候自動帶入當下的日期。

金額 Type 設定為 Number (這個很重要, 因為這牽扯到後面你圓餅圖和結算能不能計算, 如果讓它維持原本 Text type 是無法幫你做數字計算的)。

收入/支出 Type 設定為 Enum, 然後點選欄位左邊的鉛筆到 Type Details-> Values 新增兩個 value “支出”, “收入”, 然後 Allow other values 和 Auto-complete other values 記得不要勾選。

類別 Type 設定為 Enum, 然後點選欄位左邊的鉛筆到 Type Details-> Values 新增你想要的類別, 這個選項我是選擇可以 Allow other values 和 Auto-complete other values。

PayBy Type 設定為 Enum, 然後點選欄位左邊的鉛筆到 Type Details-> Values 新增付款人資訊, 這邊我是設我和我先生的綽號跟共同帳戶作為 value, 然後不允許 Allow other values 和 Auto-complete other values。

建立人 Type 設定為 Email, Formula = USEREMAIL() 讓它自動帶入登入者的 email。

年月 Type 設定為 Text, Formula = TEXT([日期],’yyyy-mm’), 讓它自動根據日期去產生。

Note

這邊設定好之後就可以到右邊的 APP 介面操作看看 insert 資料了!! 記帳的初步功能也算完成了 XDDD

Step 3. Security 設定

既然是共同記帳, 當然不能只有自己有權限去記帳, 也要加入共同記帳者的資料, 這就要來到 Security 設定頁面了。

到左側欄第五的 icon Security 設定頁面: Security->Require sign-in->Manage users, 加入需要共同記帳的 gmail 帳戶並分享給對方使用吧!

Step 4. 下載 APP

到 APP store 安裝 AppSheet。

進階功能開發與設定

每月結算功能

有了前面”家庭支出”頁面後就可以新增幾筆測試資料, 或是直接修改試算表檔案加入幾筆測資再開始進行”每月結算”功能的開發。

這個功能可以用 AppSheet 來撈資料後計算, 但是 GPT 不建議這麼做，原因如下:

所以這邊我們要先回到google sheet對”每月結算”分頁做設定：

• 在欄位年月的地方加入公式: =UNIQUE(FILTER('家庭支出'!I:I, '家庭支出'!I:I<>""))
• XXX支出: =SUMIFS('家庭支出'!C:C,'家庭支出'!F:F, "XXX", '家庭支出'!D:D,"支出", '家庭支出'!I:I, A2)
• OOO支出: =SUMIFS('家庭支出'!C:C,'家庭支出'!F:F, "OOO", '家庭支出'!D:D,"支出",'家庭支出'!I:I, A2)
• 共同帳戶支出 = SUMIFS('家庭支出'!C:C,'家庭支出'!F:F, "共同帳戶", '家庭支出'!D:D,"支出",'家庭支出'!I:I, A2)
• 總支出: =SUMIFS('家庭支出'!C:C,'家庭支出'!D:D,"支出",'家庭支出'!I:I,A2) 這樣所有計算都會在 google sheet 中完成, AppSheet 只要秀資料就可以了。

現在回到 AppSheet, Data->Add new data, 選擇 google sheet 每月結算分頁, 如下圖, 在新增的時候會見到”Update, Add, Delete”, 由於這邊資料我不希望使用者誤動到它, 所以我這邊有把它修改成 Read-Only

Note

這邊點太快不小心沒有改設定也沒關係, 事後可以再修改

然後Data->每月結算修正資料表的Type設定如下:

接著到左側第三個 icon -> Views -> 點 Primary Navigation 旁邊的 + 號 (Add View) -> Create a new view

• For this data 選擇剛剛新增入的”每月結算”
• View Type 選擇 Table

新增這個View的時候會發現這個 New View 變成第一個, “家庭支出”變成第二的, 如果不滿意這個順序可以在 Position 中調整。

這樣就完成了每月結算的功能了~

Note

其實每個步驟設定都還有一些小細節需要調整, 但目前我們先完成功能面再來慢慢喬細節, 畢竟不是每個人都在乎一些細節的部份)

消費分析

這個功能就有點麻煩了, 首先, 我們希望呈現的最後結果如下圖:

這是由兩個 View 所組成的, 一個是”選擇月份”, 一個是”Result”。

消費分析 — 選擇月份

月份的選擇有幾個做法, 但我覺得直接有選單讓使用者點選要哪個月份是最直覺也是最常見的, 所以這邊就只寫出用選單給使用者點選的作法。

Important

AppSheet 的 View（例如 dropdown list）本身不能直接「傳值」給 Slice。

所以需要一個「中介資料表」來當成「全域變數」，讓 View 選擇的年月 → 自動影響 Slice。

(不知道這對於不會寫 code 的人來說是不是很好理解, 一開始我卡了一陣子就是搞不懂我要怎麼搞一個 dropdown list 連動, 後面才發現要這樣做…)

首先, 到 Data->Add New Data 將 FilterTable 加進來, 如下將年月選擇設為 Enum:

點選年月選擇旁邊的鉛筆進入編輯細節的畫面, 找到 Data Validity:

Valid If 設定如下:

SORT(
  UNIQUE(
    SELECT(
      家庭支出[年月],
      ISNOTBLANK([年月])
    )
  ),
  TRUE
)

這個是去撈家庭支出現有的年月資料並它轉成 Enum value, 以此來達到不用手動去填寫要查看的年月。

Data 建置完之後到 View 的地方 Reference Views -> Add View, 設定如下:

這個建置完之後就可以透過這個 View 來選擇你要看的圓餅圖介面, 你選的年月會去更新 google sheet FilterTable 分頁的年月選擇, 接下來就是建立一個 Slice 去抓 FilterTable的值然後篩選出該年月的資料, 讓我們進入到下一個環節繼續。

消費分析 — Result(圓餅圖)

我的圓餅圖希望可以秀出我選擇的那個月份的消費類別占比, 為了能夠 filter 出特定月份資料, 我們需要到 Data 建立一個 Slice 如下:

可以見到我建立了一個”支出_依月份過濾”的 Slice, Source Table 是家庭支出, 然後在 Row filter condition 做了以下設定:

AND(
  [收入/支出] = "支出",
  [年月] = ANY(FilterTable[年月選擇])
)

只撈出支出的 data 並且年月需要等於 FilterTable 的年月選擇。

接下來再到 View 建立一個 reference view 叫 Result 並且設定如下:

消費分析 — 介面整合

現在要將前面做好的兩個 reference view 結合成一個頁面, 再次來到 View-> Primary Navigation 新增一個 view “消費分析”。

View Type 選擇 dashboard, 然後在 View Options-> View entries 這地方加入剛剛建立的兩個 reference view 並開啟 Interactive mode。

這樣就打完收工了。

(後面有點懶得一個一個打了所以就直接截圖, 等有空的時候會再慢慢把這份文件寫完整, 下面應該會先寫一些細節怎麼喬再回頭把文章順一下)

(目前重點部分應該都列完了)

心得

與其說這是Vibe Code, 我感覺更像是我用 AppSheet 這個工作來設定出我想要的東西, 而這個工具支援將表格轉化成資料庫, 讓一般使用者可以做常見的資料庫操作(Insert, Delete, Modify)之類的, 不是我真的跟它說我想要怎樣怎樣它幫我兜出來這樣, 但也算不寫 code 的完成了一個記帳工具。