75 Followers
·
Follow

比記帳APP更容易維持習慣!靠Google 表單自製記帳工具

過去使用過不少記帳App,包含介面簡潔的Ahorro、搞笑的碎碎念記帳跟精美的記帳城市,雖然確實養成記帳的習慣,但不知為何沒有養成預算的概念,也不常回顧自己總花費。

自從去年開始改用Google表單自製記帳app之後,才漸漸對於自己花錢如流水有感(疑)。

從去年五月開始使用自製的Google表單記帳,不用受限記帳APP的類別限制,能夠自己訂製有需求的類別以及選項,另外,Google表單不需另外下載程式,只要有網路,不管用電腦或是手機都能開起來記帳,電腦可以放在書籤上頭,手機也能夠將網址加到主畫面,跟APP一樣容易Access。

像我自己是跟男友一起共用,因為吃飯經常互相幫忙付錢,如果使用一般的記帳APP,幾乎很難找到能夠一起記帳或標記費用分攤的。但是,只要使用Google表單再加上Google試算表,便能夠達成這個需求。

以下是我目前使用的表單,為了有效提醒自己剩餘預算,甚至透過程式碼定時更新目前剩餘預算以及花費圖表到表單上。

Image for post
Image for post

如果你好奇要如何製作可以繼續往下閱讀!

三大步驟

  1. 製作表單
  2. 產生試算表
  3. 加入程式碼自動更新剩餘預算與圖表

自訂表單後再搭配試算表便能夠完成有效提醒自己花費與預算的記帳工具了。

Image for post
Image for post
試算表報表示意圖

Step 1: 製作表單

  1. Google雲端硬碟上新增一個Google表單
Image for post
Image for post

2. 設計記帳表單

這個Google表單便是我們主要的記帳畫面,在這裡我們設計幾個可以想要的項目。比如分類、金額、時間等等。建議大家先放幾個自己覺得必要的問題,實際使用過後,漸漸對於應該新增或刪減甚麼問題會更有想法,到時候都可以再進到此表單頁面修改。

2–a 填入問題,例如分類

Image for post
Image for post

2–b 設定問題類型與限制

每個問題可以設定類型(單選、多選或問答題)以及是否為必填(右下角),這邊就可以根據需求自行定義,比如金額是必須的但是項目不是等等。

另外也可以設定輸入限制,例如只能輸入數字等,目前Google會根據輸入的問題標題自動推薦比較適合的設定,所以通常不需要自行操作,尤其我們這個表單只會拿來自己使用。

個人是覺得題目越少,越能夠維持習慣。不過實際習慣記帳後,又會希望能夠進一步分析自己的消費,而增加其他問題。

3. 使用連結開始記帳!

問題設計完畢之後,我們便可以在該頁面上拿到記帳表單的網址,之後就能夠開始記帳囉!

3–a 在右上角點選「傳送」

3–b 點選連結的按鈕,將網址複製起來。使用新視窗或是手機開啟,便會看到我們設計好的表單,填寫按送出,你就記錄第一筆帳了!

Image for post
Image for post

手機使用瀏覽器打開表單之後,點選「加入主畫面」,就能夠將此表單pin在主畫面上,像是一個app一樣呢!

Image for post
Image for post

到這邊,我們就已經初步完成了自製的記帳工具了!

如果你希望像前面的範例一樣,顯示剩餘預算與花費圖表,請繼續參考以下步驟:

Step 2: 產生試算表

接下來,我們要仰賴試算表這個工具,來幫助我們統計目前消費並製作精美的花費分析圖。透過試算表中,我們只要填入每月預算,再套用公式,每個月便會自動統計剩餘餘額,如果你已經對試算表夠熟悉,可以往後看下個步驟。

Image for post
Image for post
  1. 產生Google試算表

首先我們要產生一個試算表跟表單連動,透過這樣產生出來的試算表,便會跟我們的表單連動,我們在表單上頭輸入的資料,都會自動的匯入到試算表裡頭。

Image for post
Image for post

在表單的畫面上,點選[回覆],再點選回應標題旁邊的[綠色的試算表]標誌,點選新試算表。

Image for post
Image for post

Google 便會自動生成試算表如下:

Image for post
Image for post

2. 新增工作表分析花費

Image for post
Image for post

首先我們要新增一個工作表來進一步統計每月花費。

2-a 點選底下的 + 號來新增一個新的工作表

2-b 接著我們在這頁工作表中一一拉出我們之後需要呈現的資料

  • 每月預算: 直接填入金額
  • 本月花費: 使用公式計算目前月份累積花費金額

找一個格子輸入以下公式

=SUMIFS('表單回應 1'!$D:$D, '表單回應 1'!$G:$G,">="&EOMONTH(TODAY(),-1)+1,'表單回應 1'!$G:$G,"<="&EOMONTH(TODAY(),0))

如果你不熟悉,簡單說這個公式是將符合條件的資料(如記帳時間落在本月)的金額欄位拿出來計算總和。因此範例中金額在D欄位,因此第一格便填入D:D,G欄位則是我自己新增的日期欄位,使用預設的A欄位也是可以的。

=SUMIFS(要總合的欄位, 須符合的條件1, 須符合的條件2)
  • 餘額: 設定公式將上述相減兩格相減即可(例如: =B2-B3)
Image for post
Image for post

因為這邊大家的分類應該非常不同,只能給大概的公式,如果還是不清楚,歡迎留言或是email詢問協助你設定好哦!

3. 新增一個圖表

如果希望在記帳表單上加入統計圖表的讀者,需要在此試算表上先建立一個圖表,之後我們再使用Google Script將圖表加入記帳表單上頭。

簡單說步驟先建立圖表上各類花費的表格,再利用資料插入圖表。

Step 3: 加入程式自動更新剩餘預算與圖表

最後我們需要透過Google Script加入程式碼,來將餘額自動更新至表單上。

1. 回到Google表單點選…選單再點選「指令碼編輯器」

Image for post
Image for post

2. 將下面指令複製到指令碼編輯器中

var sheetId = ‘<試算表ID>’
var formId = ‘<表單ID>’
function myFunction() {
var rawFile = SpreadsheetApp.openById(sheetId);
var rawSheet = rawFile.getSheetByName('<工作表名稱, ex: Status>');

// Get your monthly budge
var remainBudge = rawSheet.getRange('<餘額儲存格位置, ex:B4>').getValue();

// Open a form by ID.
var form = FormApp.openById(formId);
var currentTime =Utilities.formatDate(new Date(), "GMT+8", "MM-dd-yyyy HH:mm:ss");
// Update form properties via chaining.
form.setDescription('Budge Remaining:' + remainBudge + '\n\n更新時間: '+ currentTime);
}

2-a 修改試算表ID

sheet ID可以在網址列上找到,如下圖:

Image for post
Image for post

2-b 修改變表單ID

Form ID同樣的也可以在網址列上找到

Image for post
Image for post

2-c 加入圖表

如果需要加入圖表,請先在試算表插入好圖表,並上3–1的腳本中加入下面這段,便會將圖表加在表單最後。

  // Get Chart
var chart =rawSheet.getCharts()[0];
var blob = chart.getBlob();

// Open a form by ID.
// var form = FormApp.openById(formId);

form.getItems(FormApp.ItemType.IMAGE).forEach(function(item){form.deleteItem(item);});

form.addImageItem()
.setTitle('Expense')
.setHelpText('Expense') // The help text is the image description
.setImage(blob);

3. 點選執行(▶️)進行測試

Image for post
Image for post

第一次使用時會跳出以下視窗,需要授權讓我們的程式碼能夠access到資料。

3-a 點選核對權限

Image for post
Image for post

3-b 開啟進階設定後,點選前往「無標題專案」

Image for post
Image for post
Image for post
Image for post

3-c 登入帳號後,點選「允許」

4. 到表單上檢查剩餘餘額是否有加在一開始說明的部分!

5. 設定定時執行

5–1 點選編輯中的現有專案啟動程序

Image for post
Image for post

5–2 在新開啟的頁面點選右下角的「新增觸發條件」

Image for post
Image for post

5–3 設定觸發條件為每兩個小時,詳細設定如下:

Image for post
Image for post

恭喜你!

通過這三大步驟已經完成一個符合自己使用需求的記帳表單了!

不佔手機空間、手機電腦皆可記帳,而且不用擔心資料不見👌

讓我們透過記帳表單養成記帳的習慣,透過檢視自己的消費,往財富自由更靠近吧!

如果你喜歡我的分享,歡迎幫我拍手或按讚,會讓我更有動力分享喔!

參考資料

Written by

貓奴兼軟體工程師|歡迎來信交流: yuwaj6 @gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store