我如何建立 PeerSplit：一個免費的點對點費用分攤應用程式 — 從創意到發布僅需數週時間

我建造了 PeerSplit——一個免費的、點對點的 Splitwise 替代品——從想法到發布，僅用了兩週時間！

PeerSplit 是一款本地優先的應用程序，用於分配團體費用。它可以離線工作，100% 免費且私密，不需要註冊或任何個人資料。

以下是我如何建造它以及我在過程中學到的一切。

為何選擇 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;
};

---

漸進式網頁應用

我希望 PeerSplit 能夠作為離線應用程式運行，但我不想經歷建立多個本機應用程式或處理在應用程式商店上發布它們的漫長過程的麻煩。因此，選擇漸進式 Web 應用程式 (PWA) 是明智的選擇。

PWA 結合了網路和行動應用程式的優點，讓使用者可以將其安裝在自己的裝置上，同時仍可享受離線功能。

為了將我的 Nuxt 應用程式轉換為 PWA，我使用了 vite-pwa。
我在 Figma 中設計了一個 SVG 徽標，並使用它透過 vite-pwa 的資產產生器來產生所有必需的 PWA 資產。

之後，我設定了 PWA 清單，vite-pwa 會自動為我設定 Service Worker。

我將 Nuxt 配置為預先渲染所有路線，以便我的應用程式可以完全離線運行。

---

這就結束了。感謝您的閱讀！

產品搜尋發布

PeerSplit 剛剛在 Product Hunt 上推出！這是我的第一次發布，希望得到您的支持和回饋。

看 Product Hunt 上的 PeerSplit

PeerSplit 是公平來源的，因此請隨時在 GitHub 上貢獻或提交功能請求。

塔奈維克 / 同行分裂

PeerSplit 是一款免費、本地優先的點對點應用程序，可幫助您輕鬆、私密地分配和追蹤團體費用。

對等分裂

PeerSplit 是一款免費、本地優先的點對點應用程序，可幫助您輕鬆、私密地分配和跟踪團體費用。

特點

• ？ 100% 免費 — 無註冊
• ？ 本地優先 — 完全離線工作
• ？ 跨平台 PWA — 在行動裝置、桌上型電腦或筆記型電腦上使用它
• ？ 點對點 — 與朋友合作，同時保持資料隱私性
• ⚡ 簡單的使用者體驗 — 流暢簡約的介面，不會妨礙您
• ？ 深色和淺色模式 — 在主體之間切換以符合您的喜好
• ？ 匯入/匯出 — 從 Splitwise 匯入並將資料匯出到 CSV

計畫的功能

• ？ 高級帳單拆分 — 將明細帳單加為單一費用。
• ？ 帳單掃描 — 透過拍照自動掃描和分割帳單。
• ？ 多幣種支援 — 透過即時匯率處理不同幣種的費用。
• ？ 交易註釋和評論 — 為每筆交易添加註釋和評論以保留...

在 GitHub 上查看

以上是我如何建立 PeerSplit：一個免費的點對點費用分攤應用程式 — 從創意到發布僅需數週時間的詳細內容。更多資訊請關注PHP中文網其他相關文章！