分帳龍寶寶 LineBot 開發隨便寫之二

C.Dragon

11 min readJan 18, 2022

不專業開發筆記，跟技術沒什麼關係，但偶爾可能有一點點關係，大概就是我們在意的、我們想到的、我們曾經思考過的以及我們一起創造的一些眉眉角角。有興趣使用請點：https://lin.ee/52gLqtX

此篇是龍寶寶滿週歲回顧與更新反思。如果你完全不認識分帳龍寶寶，可以參考隨便寫之一：

分帳龍寶寶 LineBot 開發隨便寫之一

不專業開發筆記，跟技術沒什麼關係，但偶爾可能有一點點關係，大概就是我們在意的、我們想到的、我們曾經思考過的以及我們一起創造的一些眉眉角角。有興趣使用請點：https://lin.ee/52gLqtX

cdragon.medium.com

時光荏苒，就在你和我虛度光陰、比特幣漲你買入又跌的時候，龍寶寶滿周歲了！

龍寶寶在這麼特別的日子當然釋出了大更新（謎：意思是耍廢了將近一年）。

所謂的大更新真的是沒在開玩笑，我們重寫了整個前端、改了帳款架構、改了分帳算法來解決無限分帳；重畫了圖，多畫了沒用但自我滿足的廢圖（咦）…….最後發現，喔不，我們根本重新寫了一次龍寶寶。

至於為什麼要重寫，我覺得好像滿值得再來隨便寫一下⋯⋯

如果你想看看強者開發朋友的不同角度的認真心得，而不是流水帳，歡迎看看這篇：傳送門

我們很愛龍寶寶

在開始之前，我想要先澄清（討拍）：

分帳龍寶寶沒有收費、沒有花錢宣傳、沒有買官方帳號；牠是我們很珍愛的寶貝，是我們拿來解決自己煩惱的產品；因為很愛牠，所以我們注重每個願意使用並給牠機會的人。

我們看似隨心所欲的開發，但絕不是隨隨便便的更新。

在這一年中，開發者們都換了工作（還追了很多劇）；
在這一年之中，我們好像都有隨著疫情成長一點（喂……）。

回過頭來看最初衝動製作的青澀龍寶寶，牠很可愛、牠可以解決問題但不太親人，所以也許，我們可以想想辦法讓牠再更好一點……

如果你曾經使用過覺得失望，相信我你可以在試一次，因為龍寶寶真的長大了許多！你知道對未滿週歲的嬰兒感到失望是沒有意義的！（咦）

我們可能做對了什麼

明確的開發方向 — 就是要用來分帳

這是我們最一開始就有的共識：分帳龍寶寶是用來群組分帳而不是個人記帳，也因為有這樣讓開發的方向一直都很明確。

你會問：這兩者有什麼差別嗎？

當然有！我們要營造的是群組內一起記帳最後分帳的氛圍，而不是一個人努力記帳的感覺。這支機器人會被加入多人群組，所有的流程和操作都要考慮多人的狀況，也因為是多人，我們要針對多人操作做很多優化和設計上的取捨。

謎：那不能共存嗎？
龍寶寶：不能！我只能分帳！

對指令的執著 — 聊天機器人的有趣之處

：欸這次加一下龍寶寶算一下帳～先來玩一下～

如果使用者有這樣的想法，那就是我們成功了！

身為聊天機器人，你不想要加他跟他說說話要幹嘛？龍寶寶之所以有趣，是因為他是一隻機器人，自然而然你會想跟他說話。

我認為這是讓龍寶寶記帳有魅力的地方，他需要一點學習時間，但一但上手，你就會很想一直跟他說話。（謎：我決不說是前端很爛所以都寫指令）

讓自己看了就開心的設計

一股衝勁和戰鬥到底的驕傲

凡事起頭難，想到就做當然是最正確的事。（咦）

即便知道龍寶寶有許多缺陷，甚至要花非常大的力氣才能導向正途，我們就是要想辦法更新龍寶寶而不是刪掉他重來，戰鬥到底是我們的驕傲（謎：怎麼有點熟悉）。

我們可能忽略了什麼

忽略學習曲線 — 指令的複雜本質

跟工程師覺得vim很神是一樣的道理，對於不諳科技覺得難理解就是設計不良的一般使用者來說，太多依賴指令的操作的確設立很高的門檻。

輕忽群組的多人操作特性

沒錯，我們真的輕忽了多人群組洗版的嚴重性。

最初的版本，我們設計了很多巢狀流程、互動，以及縱向擴張的版面，˙不可否認這些設計很有趣新鮮（很愛互動的我們），但當多人使用時，會讓整個體驗不順暢甚至產生厭惡感。

對 LineBot 技術的陌生

除了小龍不純熟的 coding 外，對於 LineBot 能做到什麼程度，可以開啟什麼，都是是從頭摸索。包括從 Line 開啟內建網頁的 Line liff 功能也是上線後才知道。

因此，我們沒能在最一開始就掌握所有可用的工具，讓開發出來的功能受到些許限制。但也因為這樣我們想出的解決方式都特別有創意，例如：互動式編輯，即使到現在看還是覺得那是相當不錯的可愛設計。

不合理的分帳 — 無法回頭的帳款結構

龍寶寶有個特殊設定：群組帳款會隨分帳人員新增而變動。我想龍寶寶應該是目前唯一有這樣設定的分帳工具（笑）

這個設定其實讓龍寶寶很有「群組分帳」的感覺。畢竟一群人一起出遊總有要一起負擔的費用，我們稱它為群組帳款，他會隨著分帳人數動態平分。（不懂沒關係連開發者有時候都搞不懂）

這個依照自己的旅遊經驗直覺的設計，卻成為後來很頭痛的設定。

除了會讓龍寶寶的分帳算法複雜化：每加一個人都要重算現有分帳，也衍伸出許問題，例如：不能臨時加人，退出分帳調整金額？……等等，更讓我們在後續 UI 介面設計也有很大的限制。

無論如何，3.0 會完全移除群組帳款，我們花了極大的心力確保新舊帳款相容，也是更新拖延了很久的原因。（謎：你確定不是因為華燈初上？）

龍寶寶：我自己想到都想放棄……

就這樣，帶著幼幼龍的智慧，我們壓了時程開始改造夢想中的龍寶寶 3.0。

龍寶寶的門面

首先，又要感謝我的強者開發朋友設計的的全新 Web UI 。

真實小龍OS：超多頁一堆框框還要動畫真是搞死我這個前端白痴

雖然我們決心做出完整的 Web UI（＝小龍決心開始學習前端），但不代表我們放棄任何在 Line 與龍寶寶互動的時機和快速指令。畢竟這種在 Line 才能體驗的記帳樂趣，是龍寶寶之所以為龍寶寶特色之一。

Onboarding 流程也是更改的重點之一，做了全新的橫向發展懶人包：

匯出帳款格式也隨著新結構而變：

我必須要在此炫耀（抱怨）一下，這些大概花了我三週（菸）：

順帶一提，新增帳款的 1.0 頁面是小龍自己畫的，而 3.0 是強者朋友做的，有看過你就知道有些事情應該要交給專業的不要自己勉強（菸）。

智慧分帳

身為一個聰明的龍寶寶，我們還想讓他更智慧。

庸俗的人們：不就分帳可以有多智慧呢？
龍寶寶：你太淺了！

來自強者開發朋友許願，希望在UI上面智慧動態分帳，除了想要支援算式，還要能幫忙動態的計算平分，甚至能在手動改動的情況下還能將剩下的帳平分。（謎：你在講外星文？）

聽起來很簡單但實作起來有太多Edge case需要考慮，例如：超過總額？手動輸入又刪除？輸入不正確算式？要邊打邊算還是 onBlur 才算？…….

另外，由於人們時常追不上龍寶寶的聰明，我們還要在超智慧與人類智商間取得平衡，否則原始人類就會覺得難用（龍寶寶：人類真難搞…）

於是超智慧龍寶寶誕生了……

龍寶寶的後盾

膚淺的人們總是只在乎眼睛看得見的東西，所以必須來說說那些看不見被踩在腳下的基石。

當然，此次主要就是在處理新帳款架構和確保他的穩定性。

除了要保證新算法的正確性、新舊帳款架構的相容性，也要想辦法不被使用者察覺的更新舊帳款。最後，我們還想支援選擇性更新，畢竟算是 breaking （淚奔）。

另外，由於舊帳款數量眾多，即時更新帳款其實會讓 server 負擔很重。要如何在使用者察覺前更新這些帳款又不要炸掉 server 也是一大課題。

畢竟有錢不是萬能，沒有錢萬萬不能，龍寶寶沒有所以 server 不是特別堅強勇敢（菸）。

當然，上線前我們花很多時間測試，確保在任何情況下，融合新舊帳款都會得到正確的分帳結果。畢竟，這是我們的最後底線：聰明的分帳龍寶寶打死都不能算錯（自己滿意點頭）。

至於其他更新：我們優化了速度、提高訪問驗證安全性、做了更聰明的指令偵測……總之你沒想到的我們都想到了（咦）。

平分也是一門學問

這次更新最讓人緊張的就是如何把舊的群組帳款更新成新的結構。

舊群組帳款因為龍寶寶會加總平均，所以總是可以把帳分配的很得宜。（龍寶寶：我分不好那還得了……）

(100 + 100 + 100) / 3 = 100        A   B   C 
300 -> 100 100 100
       -----------
       100 100 100

新的帳款設定每筆帳記下去，都會預先分好。因此後面即使後來有人加入，不會影響原本的分帳：

         A   B   C
100 ->  34  33  33
100 ->  34  33  33
100 ->  34  33  33
       ------------
        102 99  99

問題來了，這樣代表舊群組更新後，如果有除不盡，A 可能要多付錢，BC 少付錢，不僅分帳會變，甚至分配的極度不平均！這當然是絕對不能發生的事情！聰明的龍寶寶不能接受！

研究了一下，一般分帳軟體通常會使用小數點兩位來解決此問題。

但由於這個解法還是會影響最終結果甚至會影響匯出帳款（整行加起來就是無法一樣啊）畢竟世上就是有除不盡的整數。

龍寶寶：11.345345345345345345345345345345……

再者，這樣實在有點不美觀，小龍也實在不想處理網頁 overflow （謎：這才是主要原因吧）：

         A      B      C
100 ->  33.33  33.33  33.33
100 ->  33.33  33.33. 33.33
100 ->  33.33  33.33. 33.33
       ------------
        99.99  99.99  99.99

於是，龍寶寶只好想出一個辦法：記錄一下除不盡多付出的人的位置，並且在下一次除不盡時整排換一下座位，並把這一次的多付次數再加上去，以此類推，結案！

user_size = 3         A   B   C
100 ->  34  33  33 , shift = 1
100 ->  33  34  33 , shift %= user_size; shift += 1
100 ->  33  33  34 , shift %= user_size; shift += 1
       ------------
        100 100 100