मैं HTMX में गोता लगाने के लिए उत्सुक हूं, खासकर DjangoCon यूरोप 2022 टॉक देखने के बाद रियल-वर्ल्ड SaaS प्रोजेक्ट पर रिएक्ट से HTMX तक। मैं हाल ही में अपने दैनिक कार्य में एचटीएमएक्स और अल्पाइन का उपयोग कर रहा हूं, और साथ में, उन्होंने इंटरैक्टिव वेब ऐप्स विकसित करना बहुत अधिक मनोरंजक बना दिया है, खासकर किसी ऐसे व्यक्ति के लिए जो फ्रंट-एंड डेवलपमेंट का विशेष शौकीन नहीं है।

मैं Django टेम्प्लेट का बहुत बड़ा प्रशंसक नहीं रहा हूं, लेकिन HTMX, Alpine.js और Django कॉटन ने मेरे दृष्टिकोण को बदलना शुरू कर दिया है। और शीर्ष पर टेलविंड सीएसएस के साथ, यह अब तक मेरे द्वारा काम किए गए सबसे अच्छे स्टैक में से एक बन गया है।

यह परियोजना एक व्यक्तिगत वित्त प्रबंधन ऐप है जो बैंक खातों को जोड़ने और वित्तीय अंतर्दृष्टि प्रदान करने के लिए प्लेड को एकीकृत करता है। मैंने संदर्भ के रूप में उनके भंडार से प्लेड के आधिकारिक उदाहरणों का उपयोग किया।

कोड का त्वरित अवलोकन चाहते हैं? इसे GitHub पर देखें

विशेषताएँ

• बैंक खातों को लिंक करने, वास्तविक समय खाता डेटा प्राप्त करने और लेनदेन को ट्रैक करने के लिए प्लेड एकीकरण।
• स्वचालित वेबहुक:
  • जब भी नए लेनदेन उपलब्ध हों, बैंक डेटा को स्वचालित रूप से सिंक और अपडेट करें।
  • खातों के खराब स्थिति में आने पर उन्हें आसानी से अपडेट और पुन:प्रमाणित किया जा सकता है (उदाहरण के लिए, लॉगिन आवश्यक है)।
  • नए बैंक खातों का स्वचालित रूप से पता लगाएं और उपयोगकर्ताओं को नए पाए गए खातों को जोड़ने के लिए प्रेरित करें।
• निवल मूल्य, खाता-विशिष्ट विवरण और श्रेणी-आधारित खर्च विवरण जैसी वित्तीय अंतर्दृष्टि प्रदान करता है।
• सुरक्षा की एक अतिरिक्त परत के लिए एक प्रमाणक ऐप के साथ दो-कारक प्रमाणीकरण (2एफए)।

कविता के साथ निर्भरता प्रबंधन

इस परियोजना में निर्भरता के प्रबंधन के लिए, मैंने पोएट्री का उपयोग किया। कविता पैकेज प्रबंधन प्रक्रिया को सरल बनाती है और निर्भरता से जुड़े भारी काम को स्वचालित करती है। यह pyproject.toml फ़ाइल पर निर्भर करता है, जो अब आधुनिक पायथन परियोजनाओं में निर्माण आवश्यकताओं को परिभाषित करने के लिए मानक है।

कविता क्यों?

• आसान निर्भरता समाधान।
• यह आभासी वातावरण बनाता और प्रबंधित करता है, इसलिए यदि आप कभी भी एक वातावरण बनाना/सक्रिय करना भूल जाते हैं, तो कविता आपका साथ देगी।
• यह पैकेजों के सटीक संस्करणों को लॉक कर देता है, जिससे यह सुनिश्चित हो जाता है कि वातावरण प्रतिलिपि प्रस्तुत करने योग्य है। यह विशेष रूप से बड़ी टीम में काम करते समय बहुत मददगार होता है।

रफ और प्री-कमिट

मैं रफ़ का उपयोग कर रहा हूं, जो रस्ट में निर्मित एक बहुत तेज़ पायथन लिंटर और कोड फ़ॉर्मेटर है। यह ब्लैक, आइसोर्ट और अन्य जैसे अनेक टूल को एक साथ संभालता है।

मुझे रफ़ के बारे में क्या पसंद है:

• आप इसे pyproject.toml का उपयोग करके कॉन्फ़िगर कर सकते हैं, जो चीजों को साफ और केंद्रीकृत रखता है।
• यह ऑल-इन-वन है—इसलिए ब्लैक, आइसोर्ट आदि जैसे अलग-अलग टूल को प्रबंधित करने की कोई आवश्यकता नहीं है।

मैंने Django टेम्पलेट्स को लाइन करने के लिए djlint का भी उपयोग किया। यह अच्छा है, लेकिन मैं अभी भी कुछ बेहतर की तलाश में हूं। यदि आप किसी अच्छे विकल्प के बारे में जानते हैं, तो बेझिझक साझा करें!

Django में कोड फ़ॉर्मेटिंग और लिंटिंग के लिए प्री-कमिट हुक स्थापित करने के बारे में अधिक जानकारी के लिए, मेरा लेख यहां देखें।

परियोजना संरचना

django_finance/
├── apps/
│   ├── accounts/
│   ├── common/
│   └── plaid/
├── config/
│   ├── app_template/
│   ├── settings/
│   ├── asgi.py
│   ├── celery.py
│   ├── urls.py
│   └── wsgi.py
├── static/
│   ├── css/
│   ├── images/
│   └── js/
├── templates/
│   ├── account/
│   ├── components/
│   ├── errors/
│   ├── layouts/
│   ├── mfa/
│   ├── plaid/
│   ├── _base_dashboard.html
│   ├── _base.html
│   └── index.html
├── tests/
│   ├── accounts/
│   ├── common/
│   ├── plaid/
│   └── conftest.py
├── theme/
├── .pre-commit-config.yaml
├── db.sqlite3
├── manage.py
├── poetry.lock
├── pyproject.toml
└── README.md

सामान्य ऐप में, मैं प्रबंधन कमांड, सत्यापन, बेस मॉडल, टेम्पलेट टैग आदि जोड़ता हूं। बेसमॉडल इस तरह दिखता है:

class BaseModel(models.Model):
    """
    Base model for common fields and methods.
    """

    id = models.AutoField(primary_key=True)
    uuid = models.UUIDField(default=uuid.uuid4, unique=True, editable=False)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)
    is_active = models.BooleanField(default=True, db_index=True, help_text="Used for soft deleting records.")

    objects = BaseModelManager()

    class Meta:
        abstract = True

    def soft_delete(self):
        self.is_active = False
        self.save()

    def restore(self):
        self.is_active = True
        self.save()

मैंने अपने उपयोग के मामले के लिए उपयुक्त पूर्वनिर्धारित फ़ाइलों और सामग्री के साथ Django ऐप्स उत्पन्न करने के लिए एक कस्टम स्टार्टअप कमांड भी बनाया है।

परीक्षण

परीक्षण लिखने के लिए, मैं फ़ैक्टरी_बॉय के साथ पाइटेस्ट का उपयोग करता हूं, जिससे परीक्षण-विशिष्ट फ़ील्ड घोषित करना और परीक्षण डेटा बनाना आसान हो जाता है।

प्रारंभ में, मैं प्रत्येक Django ऐप के भीतर एक परीक्षण फ़ोल्डर रखता था। हालाँकि, मैंने तब से प्रत्येक ऐप के लिए सबफ़ोल्डर्स के साथ प्रोजेक्ट के मूल में एक एकल परीक्षण फ़ोल्डर रखना शुरू कर दिया है। इस दृष्टिकोण ने नेविगेशन को बहुत आसान बना दिया है और सब कुछ व्यवस्थित रखता है। साथ ही, यह सामान्य फिक्स्चर को साझा करना बहुत आसान बनाता है क्योंकि उन्हें उच्च स्तर पर परिभाषित किया जा सकता है और कई परीक्षण मॉड्यूल में पुन: उपयोग किया जा सकता है।

tests/
├── accounts/
│   ├── __init__.py
│   ├── factories.py
│   ├── test_managers.py
│   ├── test_models.py
├── common/
│   ├── __init__.py
│   ├── test_validators.py
├── plaid/
│   ├── conftest.py
│   ├── dummy_data.py
│   ├── factories.py
│   ├── test_models.py
│   ├── test_services.py
│   ├── test_tasks.py
│   ├── test_views.py
│   ├── test_webhooks.py
├── __init__.py/
└── conftest.py

एक नमूना परीक्षण:

class TestCreatePlaidLinkToken:
    LINK_TOKEN = "link_token"

    class MockLinkTokenResponse:
        def to_dict(self):
            return {
                "link_token": TestCreatePlaidLinkToken.LINK_TOKEN,
                "expiration": "2020-03-27T12:56:34Z",
                "request_id": "request_id",
            }

    @pytest.fixture
    def setup_mocks(self, mocker):
        return {
            "mock_link_token": mocker.patch(
                "django_finance.apps.plaid.views.plaid_config.client.link_token_create",
                return_value=self.MockLinkTokenResponse(),
            ),
            "mock_logger": mocker.patch("django_finance.apps.plaid.views.logger"),
        }

    @pytest.fixture
    def create_link_token(self, client):
        def _create_link_token(data=None):
            return client.post(
                reverse("create_link_token"),
                json.dumps(data) if data else None,
                content_type="application/json",
            )

        return _create_link_token

    def test_create_plaid_link_token_success(self, login, setup_mocks, create_link_token):
        login()
        response = create_link_token()
        assert response.status_code == 201
        data = json.loads(response.content)
        assert "link_token" in data
        assert data["link_token"] == self.LINK_TOKEN
        setup_mocks["mock_link_token"].assert_called_once()

अग्रभाग

यह परियोजना निम्नलिखित फ्रंटएंड टूल को जोड़ती है:

HTMX आपको भारी जावास्क्रिप्ट फ्रेमवर्क की आवश्यकता के बिना अपने प्रोजेक्ट में गतिशील इंटरैक्शन जोड़ने की अनुमति देता है। आप अपने Django टेम्पलेट्स को छोटे, पुन: प्रयोज्य HTMX स्निपेट के साथ व्यवस्थित कर सकते हैं। यह आपको पूर्ण पृष्ठ पुनः लोड करने की आवश्यकता के बिना, उपयोगकर्ता क्रियाओं के आधार पर पृष्ठ के विशिष्ट भागों को अपडेट करने की अनुमति देता है। यह पैटर्न Django के विचारों के साथ बहुत अच्छा काम करता है क्योंकि सामग्री के प्रत्येक टुकड़े को अपने स्वयं के दृश्य के रूप में माना जा सकता है और फिर गतिशील रूप से DOM में इंजेक्ट किया जा सकता है।

Alpine.js एक अन्य हल्का जावास्क्रिप्ट फ्रेमवर्क है जिसका उपयोग अन्तरक्रियाशीलता जोड़ने के लिए किया जाता है। यह Django की टेम्पलेट संरचना के साथ अच्छी तरह से खेलता है और मोडल्स, ड्रॉपडाउन या टॉगल जैसी चीजों के लिए त्वरित, घोषणात्मक व्यवहार प्रदान करता है। HTMX के संयोजन में, अल्पाइन आपको React या Vue जैसी किसी चीज़ से निपटने के बिना UX को बढ़ाने के लिए पर्याप्त जावास्क्रिप्ट दे सकता है। उदाहरण के लिए, आप फ्रंटएंड में स्थिति को प्रबंधित करने के लिए अल्पाइन का उपयोग कर सकते हैं, जैसे मोडल्स को खोलना और बंद करना या क्लाइंट-साइड सत्यापन को संभालना।

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

Django कॉटन आपको पुन: प्रयोज्य Django टेम्पलेट बनाने की अनुमति देता है। एक मॉडल को पुन: प्रयोज्य बनाने का प्रयास करते समय मैंने प्रोजेक्ट के आधे रास्ते में इस अद्भुत लाइब्रेरी की खोज की। प्रारंभ में, मैंने Django के शामिल टेम्पलेट टैग का उपयोग करने का प्रयास किया, लेकिन बहुत सारे संदर्भ डेटा पास करते समय, यह जल्दी ही अव्यवस्थित हो गया। Django-कॉटन आपको अत्यधिक पुन: प्रयोज्य घटक बनाने की अनुमति देता है जो HTML टैग-जैसे सिंटैक्स में आपके HTMLX और टेलविंड के साथ अच्छी तरह से जुड़ते हैं। उदाहरण के लिए:

AllAuth के साथ दो-कारक प्रमाणीकरण

इस प्रोजेक्ट में प्रमाणीकरण लागू करने के लिए, मैंने ऑलऑथ लाइब्रेरी का उपयोग किया, जो मल्टी-फैक्टर प्रमाणीकरण (एमएफए) के लिए भी समर्थन प्रदान करता है। यह एक एमएफए मॉड्यूल प्रदान करता है जो आपके मौजूदा उपयोगकर्ता प्रमाणीकरण सेटअप के साथ सहजता से एकीकृत होता है। आप सुरक्षा की एक अतिरिक्त परत जोड़कर, एक प्रमाणक ऐप के माध्यम से 2FA सक्षम कर सकते हैं। आप अपने ऐप के स्वरूप और अनुभव से मेल खाने के लिए AllAuth द्वारा प्रदान किए गए टेम्प्लेट को आसानी से कस्टमाइज़ भी कर सकते हैं।

निष्कर्ष

कुल मिलाकर, यह प्रोजेक्ट मुख्य रूप से शैक्षिक है और इसमें Django, HTMX, Alpine.js, Tailwind, और Playid को एकीकृत करने की शुरुआत करने के लिए पर्याप्त सुविधाएं हैं।

ऐसा कहा जा रहा है कि, सावधान रहें कि यहां-वहां कुछ बग हो सकते हैं, और सुधार और घटकों के पुन: उपयोग की हमेशा गुंजाइश रहती है। लेकिन कुल मिलाकर, यह उन लोगों के लिए एक ठोस आधार है जो इन तकनीकों का पता लगाना चाहते हैं।

GitHub पर प्रोजेक्ट चेकआउट करें

यदि आप चाहते हैं कि मैं यहां उल्लिखित विषयों के बारे में अधिक विस्तार से बताऊं, तो मुझे टिप्पणियों में बताएं।

हैप्पी कोडिंग! ?