لقد قمت بتصميم PeerSplit — وهو بديل مجاني من نظير إلى نظير لـ Splitwise — في أسبوعين فقط، من الفكرة إلى الإطلاق!

PeerSplit هو أول تطبيق محلي لتقسيم نفقات المجموعة. إنه يعمل دون اتصال بالإنترنت، وهو مجاني وخاص بنسبة 100%، ولا يتطلب الاشتراك أو أي بيانات شخصية.

إليك كيفية إنشائه وكل ما تعلمته على طول الطريق.

لماذا بير سبليت؟

لقد اعتمدت على Splitwise لسنوات لإدارة النفقات مع الأصدقاء وزملاء السكن. ولكن مع حدود المعاملات اليومية الأخيرة والإعلانات المتطفلة، أصبح استخدامه محبطًا.

كنت أرغب في الحصول على بديل مجاني يولي الأولوية للخصوصية ولا يتطلب من الخوادم تخزين البيانات أو مزامنتها. لن أثق بنفقاتي مع خادم طرف ثالث.

بعد العمل على مشاريع نظير إلى نظير، وأول مشاريع محلية مثل متتبع التمارين وتطبيق الكتابة الخالي من التشتيت، أدركت أنه يمكنني تطبيق نفس النهج لتقسيم النفقات.

هكذا ولدت PeerSplit. لقد بدأت بتصميم التطبيق.

بناء واجهة المستخدم باستخدام Nuxt Nuxt UI

أنا فاشل في تصميم واجهات المستخدم.

قبل بضعة أشهر، لم أكن أعتقد أن بإمكاني إنشاء واجهة مستخدم مصقولة مثل PeerSplit (حتى أن بعض الأشخاص يقولون إنها تتمتع بتجربة مستخدم أفضل من Splitwise).

إذًا، كيف تمكنت من القيام بذلك؟ واجهة المستخدم Nuxt.

واجهة مستخدم Nuxt رائعة، وتتمتع بتجربة مطورين مذهلة (DX).

كما يأتي أيضًا مع وحدات Nuxt المفيدة الأخرى مثل @nuxt/icon و@nuxtjs/tailwindcss و@nuxtjs/colormode.

كل ما كان علي فعله هو اختيار لون أساسي، وكان لدي كل المكونات التي أحتاجها - الأيقونات، والوضع الداكن، وكل شيء آخر - لتجميع واجهة مستخدم PeerSplit معًا.

cr-sqlite للمزامنة المحلية؟

من أجل تخزين البيانات المحلية ومزامنتها، استخدمت cr-sqlite، الذي يعتمد على wa-sqlite ويستخدم CRDTs (أنواع البيانات المنسوخة الخالية من التعارض).

تعد CRDTs رائعة لأنظمة نظير إلى نظير لأنها تتعامل مع التعارضات تلقائيًا — بحيث يمكن للمستخدمين العمل دون اتصال بالإنترنت، وعندما يعيدون الاتصال، يتم دمج التغييرات بسلاسة.

ومع ذلك، لا يقوم cr-sqlite بمزامنة التغييرات عبر الشبكة بنفسه. إنه يوفر فقط واجهات برمجة التطبيقات (APIs) لتصدير التغييرات ودمجها. تحتاج إلى إرسال هذه التغييرات يدويًا بين الأجهزة.

Gun.js للمزامنة من نظير إلى نظير؟

للتعامل مع المزامنة الآمنة من نظير إلى نظير، استخدمت Gun.js، الذي يوفر قاعدة بيانات رسومية موزعة من نظير إلى نظير.

تتيح لي واجهة برمجة تطبيقات gun.user الخاصة بـ Gun إنشاء عقد مشفرة لكل مجموعة. يتم تخزين جميع تغييرات المجموعة على تلك العقدة وتتم مزامنتها مع أعضاء المجموعة فقط، مع الحفاظ على خصوصية كل شيء.

عندما يقوم المستخدم بإجراء ما، آخذ التغييرات المصدرة من 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;
};

PWA

أردت أن يعمل PeerSplit كتطبيق غير متصل بالإنترنت، لكنني لم أرغب في الخوض في متاعب إنشاء تطبيقات أصلية متعددة أو التعامل مع العملية الطويلة لنشرها في متاجر التطبيقات. لذلك، كان اختيار تطبيق الويب التقدمي (PWA) هو الاختيار الواضح.

يجمع PWA بين أفضل تطبيقات الويب والهاتف المحمول، مما يسمح للمستخدمين بتثبيته على أجهزتهم مع الاستمرار في الاستمتاع بإمكانيات عدم الاتصال بالإنترنت.

لتحويل تطبيق Nuxt الخاص بي إلى PWA، استخدمت vite-pwa.
لقد صممت شعار SVG في Figma واستخدمته لإنشاء جميع أصول PWA الضرورية من خلال منشئ أصول vite-pwa.

بعد ذلك، قمت بتكوين بيان PWA، وقام vite-pwa تلقائيًا بإعداد عامل الخدمة لي.

لقد قمت بتكوين Nuxt لعرض جميع المسارات مسبقًا، حتى يتمكن تطبيقي من العمل بشكل كامل في وضع عدم الاتصال.

وهذا التفاف. شكرا على القراءة!

إطلاق البحث عن المنتج

تم إطلاق PeerSplit للتو في Product Hunt! إنها أول عملية إطلاق لي، وأريد دعمكم وتعليقاتكم.

قم بالاطلاع على PeerSplit في Product Hunt

PeerSplit مصدر عادل، لذا لا تتردد في المساهمة أو إرسال طلبات الميزات على GitHub.