Ich habe PeerSplit – eine kostenlose Peer-to-Peer-Alternative zu Splitwise – in nur zwei Wochen erstellt, von der Idee bis zum Start!

PeerSplit ist eine Local-First-App zum Aufteilen von Gruppenausgaben. Es funktioniert offline, ist 100 % kostenlos und privat und erfordert keine Anmeldung oder persönliche Daten.

Hier erfahren Sie, wie ich es gebaut habe und was ich dabei gelernt habe.

Warum PeerSplit?

Ich verlasse mich seit Jahren auf Splitwise, um die Ausgaben mit Freunden und Mitbewohnern zu verwalten. Aber mit den aktuellen täglichen Transaktionslimits und aufdringlichen Werbeanzeigen ist die Nutzung frustrierend geworden.

Ich wollte eine kostenlose, datenschutzorientierte Alternative, die keine Server zum Speichern oder Synchronisieren von Daten erfordert. Ich würde meine Ausgaben nicht einem Server eines Drittanbieters anvertrauen.

Nachdem ich an Peer-to-Peer-Projekten gearbeitet hatte, bei denen die lokale Ausrichtung im Vordergrund stand, wie einem Workout-Tracker und einer App zum ablenkungsfreien Schreiben, wurde mir klar, dass ich den gleichen Ansatz auch auf die Kostenaufteilung anwenden könnte.

So wurde PeerSplit geboren. Ich habe angefangen, die App zu entwerfen.

Erstellen der Benutzeroberfläche mit Nuxt Nuxt UI

Ich bin schlecht darin, Benutzeroberflächen zu entwerfen.

Vor ein paar Monaten hätte ich nicht gedacht, dass ich eine so ausgefeilte Benutzeroberfläche wie die von PeerSplit erstellen könnte (einige Leute sagen sogar, dass es eine bessere UX als Splitwise hat).

Also, wie habe ich das geschafft? Nuxt-Benutzeroberfläche.

Nuxt UI ist großartig und bietet eine erstaunliche Entwicklererfahrung (DX).

Es enthält außerdem weitere nützliche Nuxt-Module wie @nuxt/icon, @nuxtjs/tailwindcss und @nuxtjs/colormode.

Alles, was ich tun musste, war, eine Primärfarbe auszuwählen, und ich hatte alle Komponenten, die ich brauchte – Symbole, Dunkelmodus und alles andere –, um die Benutzeroberfläche von PeerSplit zusammenzuführen.

cr-sqlite für die lokale Synchronisierung?

Für die lokale Datenspeicherung und -synchronisierung habe ich mich für cr-sqlite entschieden, das auf wa-sqlite aufbaut und CRDTs (konfliktfrei replizierte Datentypen) verwendet.

CRDTs eignen sich hervorragend für Peer-to-Peer-Systeme, da sie Konflikte automatisch behandeln – so können Benutzer offline arbeiten und bei erneuter Verbindung werden Änderungen nahtlos zusammengeführt.

Cr-SQLite synchronisiert Änderungen jedoch nicht selbst über das Netzwerk. Es stellt lediglich APIs zum Exportieren und Zusammenführen von Änderungen bereit. Sie müssen diese Änderungen manuell zwischen Geräten senden.

Gun.js für Peer-to-Peer-Synchronisierung?

Um eine sichere Peer-to-Peer-Synchronisierung zu ermöglichen, habe ich Gun.js verwendet, das eine Peer-to-Peer-Datenbank mit verteilten Diagrammen bereitstellt.

Mit der gun.user-API von Gun kann ich verschlüsselte Knoten für jede Gruppe erstellen. Alle Änderungen für eine Gruppe werden auf diesem Knoten gespeichert und nur mit Gruppenmitgliedern synchronisiert, sodass alles privat bleibt.

Wenn ein Benutzer eine Aktion ausführt, übernehme ich die aus cr-sqlite exportierten Änderungen und schiebe sie auf den Knoten. Wenn der Benutzer wieder online ist, synchronisiert Gun die neuen Änderungen und hält alle auf dem Laufenden.

Dies performant umzusetzen war schwierig. Für weitere Details können Sie sich den Quellcode hier ansehen.

Schulden vereinfachen?

Eine coole Funktion von Splitwise (und jetzt PeerSplit) ist die „Vereinfachung von Schulden“.

So funktioniert es: Wenn A B schuldet und B C schuldet, kann A C einfach direkt bezahlen, um möglicherweise die Anzahl der Rückzahlungen zu reduzieren.

In PeerSplit berechne ich zunächst den Nettosaldo für jede Person. Dann sortiere ich diese Salden und schlage Zahlungen nacheinander vor, um jedes Mal den Saldo mindestens einer Person auf Null zu bringen.

Diese Sortierung stellt sicher, dass jeder die gleichen Rückzahlungen auf seinen Geräten sieht.

Es ist nicht 100 % optimal (einige Gruppen haben möglicherweise immer noch bis zu n-1 Zahlungen), aber es funktioniert in den meisten Fällen gut.

Eine optimale Lösung wäre exponentiell zu berechnen und würde nur wenige Zahlungen einsparen. Das war also der beste Kompromiss zwischen Einfachheit und Geschwindigkeit!

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;
};

Nach dem Login kopieren

PWA

Ich wollte, dass PeerSplit als Offline-App funktioniert, aber ich wollte mir nicht die Mühe machen, mehrere native Anwendungen zu erstellen oder mich mit dem langwierigen Prozess ihrer Veröffentlichung in App-Stores herumzuschlagen. Daher war die Entscheidung für eine Progressive Web App (PWA) die klare Entscheidung.

Eine PWA kombiniert das Beste aus Web- und mobilen Apps und ermöglicht es Benutzern, sie auf ihren Geräten zu installieren und gleichzeitig die Offline-Funktionen zu nutzen.

Um meine Nuxt-App in eine PWA umzuwandeln, habe ich vite-pwa verwendet.
Ich habe in Figma ein SVG-Logo entworfen und es verwendet, um alle notwendigen PWA-Assets über den Asset-Generator von vite-pwa zu generieren.

Danach habe ich das PWA-Manifest konfiguriert und vite-pwa hat den Service Worker automatisch für mich eingerichtet.

Ich habe Nuxt so konfiguriert, dass alle Routen vorab gerendert werden, sodass meine App offline vollständig funktionieren kann.

Und das ist Schluss. Danke fürs Lesen!

Einführung von Product Hunt

PeerSplit ist gerade auf Product Hunt gestartet! Es ist mein erster Start und ich würde mich über Ihre Unterstützung und Ihr Feedback freuen.

Schauen Sie sich PeerSplit auf Product Hunt an

PeerSplit ist eine faire Quelle, Sie können also gerne einen Beitrag leisten oder Funktionsanfragen auf GitHub einreichen.

tanayvk / Peersplit

PeerSplit ist eine kostenlose, lokal ausgerichtete Peer-to-Peer-App, mit der Sie Gruppenausgaben einfach und privat aufteilen und verfolgen können.

PeerSplit

PeerSplit ist eine kostenlose, lokal ausgerichtete Peer-to-Peer-App, mit der Sie Gruppenausgaben einfach und privat aufteilen und verfolgen können.

Funktionen

? 100 % kostenlos – Keine Anmeldung erforderlich
? Local-First – Funktioniert vollständig offline
? Plattformübergreifende PWA – Verwenden Sie es auf Mobilgeräten, Desktops oder Laptops
? Peer-to-Peer – Arbeiten Sie mit Freunden zusammen und schützen Sie gleichzeitig Ihre Daten
⚡ Einfache UX – Eine reibungslose und minimalistische Benutzeroberfläche, die Ihnen nicht im Weg steht
? Dunkler und heller Modus – Wechseln Sie je nach Ihren Vorlieben zwischen den Themen
? Import/Export – Daten aus Splitwise importieren und in CSV exportieren

Geplante Funktionen

? Erweiterte Rechnungsaufteilung – Fügen Sie eine Einzelrechnung als einzelne Ausgabe hinzu.
? Rechnungsscannen – Rechnungen automatisch scannen und aufteilen, indem Sie ein Foto machen.
? Unterstützung mehrerer Währungen – Verwalten Sie Ausgaben in verschiedenen Währungen mit Echtzeit-Umrechnungskursen.
? Transaktionsnotizen und Kommentare – Fügen Sie Notizen und Kommentare für jede Transaktion hinzu, um sie aufzubewahren...

Auf GitHub ansehen

Das obige ist der detaillierte Inhalt vonWie ich PeerSplit entwickelt habe: Eine kostenlose Peer-to-Peer-App zur Kostenteilung – von der Idee bis zur Markteinführung in nur wenigen Sekunden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!