為何選擇 PeerSplit？

多年來我一直依靠 Splitwise 來管理與朋友和室友的開支。但由於最近的每日交易限制和侵入性廣告，它的使用變得令人沮喪。

我想要一個免費的、隱私優先的替代方案，不需要伺服器來儲存或同步資料。我不會信任第三方伺服器來支付我的費用。

在完成了點對點、本地優先的專案（例如鍛鍊追蹤器和無幹擾寫作應用程式）後，我意識到我可以應用相同的方法來分配費用。

PeerSplit 就這樣誕生了。我開始設計應用程式。

使用 Nuxt 建立 UI Nuxt UI

我不擅長設計 UI。

幾個月前，我不會想到我可以建立一個像 PeerSplit 一樣精美的 UI（有些人甚至說它比 Splitwise 具有更好的用戶體驗）。

那麼，我是如何做到的呢？ Nuxt UI。

Nuxt UI 非常華麗，並且具有令人驚嘆的開發者體驗 (DX)。

它還附帶其他有用的 Nuxt 模組，如 @nuxt/icon、@nuxtjs/tailwindcss 和 @nuxtjs/colormode。

我所要做的就是選擇一種主色，並且我擁有了將 PeerSplit 的 UI 整合在一起所需的所有元件（圖標、深色模式和其他所有內容）。

cr-sqlite 用於本地同步？

對於本機資料儲存和同步，我選擇了 cr-sqlite，它基於 wa-sqlite 建置並使用 CRDT（無衝突複製資料類型）。

CRDT 非常適合點對點系統，因為它們會自動處理衝突，因此使用者可以離線工作，並且當他們重新連接時，變更會無縫合併。

但是，cr-sqlite 本身不會透過網路同步變更。它僅提供用於匯出和合併更改的 API。您需要在設備之間手動發送這些變更。

Gun.js 用於點對點同步？

為了處理安全的點對點同步，我使用了 Gun.js，它提供了點對點分散式圖形資料庫。

Gun 的gun.user API 讓我可以為每個群組建立加密節點。群組的所有變更都儲存在該節點上，並且僅與群組成員同步，從而保持所有內容的隱私。

當使用者執行操作時，我將從 cr-sqlite 匯出的變更並將它們推送到節點。當用戶重新上線時，Gun 會同步新的更改，讓每個人都了解最新情況。

以高性能的方式實現這一點很棘手。欲了解更多詳情，您可以在這裡查看原始程式碼。

簡化債務？

Splitwise（現在是 PeerSplit）的一個很酷的功能是「簡化債務」。

具體原理是這樣的：如果A欠B，B欠C，A可以直接向C付款，以減少還款次數。

在PeerSplit中，我先計算每個人的淨餘額。然後我對這些餘額進行排序，並建議一項一項付款，每次至少使一個人的餘額為零。

這種排序可確保每個人在其設備上看到相同的還款。

這不是 100% 最優（某些群體可能仍然有最多 n-1 筆付款），但在大多數情況下效果很好。

最佳解決方案的計算量是指數級的，並且只能節省少量費用。所以這是簡單性和速度的最佳權衡！

export const groupGetPayments = (group) => {
  const payments = [];
  const balances = Object.entries(groupGetBalances(group)).map(([a, b]) => [
    b,
    a,
  ]);
  balances.sort();
  let i = 0,
    j = balances.length - 1;
  while (i < j) {
    if (balances[i][0] === 0) {
      i++;
    } else if (balances[j][0] === 0) {
      j--;
    } else if (-balances[i][0] > balances[j][0]) {
      payments.push({
        from: balances[i][1],
        to: balances[j][1],
        value: round(balances[j][0]),
      });
      balances[i][0] += balances[j][0];
      balances[j][0] = 0;
    } else {
      payments.push({
        from: balances[i][1],
        to: balances[j][1],
        value: round(-balances[i][0]),
      });
      balances[j][0] += balances[i][0];
      balances[i][0] = 0;
    }
  }
  return payments;
};

登入後複製