我构建了 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  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 上贡献或提交功能请求。