मैंने विचार से लॉन्च तक, केवल दो सप्ताह में PeerSplit—स्प्लिटवाइज़ का एक निःशुल्क, पीयर-टू-पीयर विकल्प—बनाया!

पीयरस्प्लिट समूह खर्चों को विभाजित करने के लिए एक स्थानीय-पहला ऐप है। यह ऑफ़लाइन काम करता है, 100% मुफ़्त और निजी है, और इसके लिए साइनअप या किसी व्यक्तिगत डेटा की आवश्यकता नहीं है।

यहां बताया गया है कि मैंने इसे कैसे बनाया और इस दौरान मैंने जो कुछ भी सीखा।

पियरस्प्लिट क्यों?

मैंने दोस्तों और रूममेट्स के साथ खर्चों का प्रबंधन करने के लिए वर्षों से स्प्लिटवाइज पर भरोसा किया है। लेकिन इसकी हालिया दैनिक लेन-देन सीमाओं और दखल देने वाले विज्ञापनों के कारण, इसका उपयोग करना निराशाजनक हो गया है।

मैं एक नि:शुल्क, गोपनीयता-प्रथम विकल्प चाहता था जिसमें डेटा को संग्रहीत या सिंक करने के लिए सर्वर की आवश्यकता न हो। मैं किसी तीसरे पक्ष के सर्वर पर अपने खर्चों पर भरोसा नहीं करूंगा।

वर्कआउट ट्रैकर और एक व्याकुलता-मुक्त लेखन ऐप जैसे पीयर-टू-पीयर, स्थानीय-प्रथम परियोजनाओं पर काम करने के बाद, मुझे एहसास हुआ कि मैं व्यय विभाजन के लिए एक ही दृष्टिकोण लागू कर सकता हूं।

इस तरह पियरस्प्लिट का जन्म हुआ। मैंने ऐप डिज़ाइन करना शुरू कर दिया।

Nuxt Nuxt UI के साथ UI का निर्माण

मुझे यूआई डिज़ाइन करना अच्छा नहीं लगता।

कुछ महीने पहले, मैंने नहीं सोचा था कि मैं पीयरस्प्लिट जैसा परिष्कृत यूआई बना सकता हूं (कुछ लोग यहां तक ​​कहते हैं कि इसमें स्प्लिटवाइज से बेहतर यूएक्स है)।

तो, मैंने यह कैसे कर लिया? अगला यूआई.

नेक्स्ट यूआई बहुत खूबसूरत है, और इसमें अद्भुत डेवलपर अनुभव (डीएक्स) है।

यह अन्य उपयोगी Nuxt मॉड्यूल जैसे @nuxt/icon, @nuxtjs/tailwindcss, और @nuxtjs/colormode के साथ भी आता है।

मुझे बस एक प्राथमिक रंग चुनना था, और मेरे पास पीयरस्प्लिट के यूआई को एक साथ लाने के लिए आवश्यक सभी घटक थे-आइकन, डार्क मोड और बाकी सब कुछ।

स्थानीय सिंकिंग के लिए cr-sqlite?

स्थानीय डेटा भंडारण और सिंकिंग के लिए, मैंने cr-sqlite को चुना, जो wa-sqlite पर बनता है और CRDTs (संघर्ष-मुक्त प्रतिकृति डेटा प्रकार) का उपयोग करता है।

सीआरडीटी पीयर-टू-पीयर सिस्टम के लिए बहुत अच्छे हैं क्योंकि वे विवादों को स्वचालित रूप से संभालते हैं - ताकि उपयोगकर्ता ऑफ़लाइन काम कर सकें, और जब वे दोबारा कनेक्ट होते हैं, तो परिवर्तन निर्बाध रूप से विलय हो जाते हैं।

हालाँकि, cr-sqlite नेटवर्क पर परिवर्तनों को स्वयं सिंक नहीं करता है। यह केवल परिवर्तनों को निर्यात और मर्ज करने के लिए एपीआई प्रदान करता है। आपको उन परिवर्तनों को डिवाइसों के बीच मैन्युअल रूप से भेजना होगा।

पीयर-टू-पीयर सिंकिंग के लिए Gun.js?

सुरक्षित पीयर-टू-पीयर सिंकिंग को संभालने के लिए, मैंने गन.जेएस का उपयोग किया, जो एक पीयर-टू-पीयर, वितरित ग्राफ़ डेटाबेस प्रदान करता है।

गन का गन.यूजर एपीआई मुझे प्रत्येक समूह के लिए एन्क्रिप्टेड नोड्स बनाने की सुविधा देता है। किसी समूह के सभी परिवर्तन उस नोड पर संग्रहीत किए जाते हैं और सब कुछ निजी रखते हुए केवल समूह के सदस्यों के साथ समन्वयित किए जाते हैं।

जब कोई उपयोगकर्ता कोई कार्रवाई करता है, तो मैं cr-sqlite से निर्यात किए गए परिवर्तनों को लेता हूं और उन्हें नोड पर धकेलता हूं। जब उपयोगकर्ता वापस ऑनलाइन आता है, तो गन सभी को अपडेट रखते हुए नए परिवर्तनों को सिंक करता है।

इसे प्रभावी तरीके से लागू करना मुश्किल था। अधिक विवरण के लिए, आप यहां स्रोत कोड देख सकते हैं।

ऋणों को सरल बनाना?

स्प्लिटवाइज (और अब पीयरस्प्लिट) की एक अच्छी सुविधा "ऋणों को सरल बनाना" है।

यहां बताया गया है कि यह कैसे काम करता है: यदि A पर B का बकाया है और B पर C का बकाया है, तो A संभावित रूप से पुनर्भुगतान की संख्या को कम करने के लिए C को सीधे भुगतान कर सकता है।

पियरस्प्लिट में, मैं पहले प्रत्येक व्यक्ति के लिए शुद्ध शेष की गणना करता हूं। फिर मैं उन शेष राशि को क्रमबद्ध करता हूं और हर बार कम से कम एक व्यक्ति की शेष राशि को शून्य पर लाने के लिए एक-एक करके भुगतान का सुझाव देता हूं।

यह सॉर्टिंग सुनिश्चित करती है कि हर कोई अपने डिवाइस पर समान पुनर्भुगतान देख सके।

यह 100% इष्टतम नहीं है (कुछ समूहों में अभी भी एन-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) को चुनना स्पष्ट विकल्प था।

एक PWA सर्वोत्तम वेब और मोबाइल ऐप्स का संयोजन करता है, जिससे उपयोगकर्ता ऑफ़लाइन क्षमताओं का आनंद लेते हुए भी इसे अपने डिवाइस पर इंस्टॉल कर सकते हैं।

अपने Nuxt ऐप को PWA में बदलने के लिए, मैंने vite-pwa का उपयोग किया।
मैंने फिग्मा में एक एसवीजी लोगो डिज़ाइन किया और इसका उपयोग vite-pwa के एसेट जेनरेटर के माध्यम से सभी आवश्यक PWA संपत्तियां उत्पन्न करने के लिए किया।

उसके बाद, मैंने PWA मेनिफेस्ट को कॉन्फ़िगर किया, और vite-pwa ने स्वचालित रूप से मेरे लिए सेवा कार्यकर्ता को सेट कर दिया।

मैंने सभी मार्गों को प्रीरेंडर करने के लिए Nuxt को कॉन्फ़िगर किया, ताकि मेरा ऐप पूरी तरह से ऑफ़लाइन काम कर सके।

और वह एक कवर हैं। पढ़ने के लिए धन्यवाद!

प्रोडक्ट हंट लॉन्च

पीयरस्प्लिट को अभी प्रोडक्ट हंट पर लॉन्च किया गया है! यह मेरा पहला लॉन्च है, और मुझे आपका समर्थन और प्रतिक्रिया पसंद आएगी।

प्रोडक्ट हंट पर पीयरस्प्लिट देखें

पीयरस्प्लिट निष्पक्ष-स्रोत है, इसलिए योगदान देने या GitHub पर फीचर अनुरोध सबमिट करने के लिए स्वतंत्र महसूस करें।