You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
162 lines
19 KiB
162 lines
19 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "50a7783473b39a2e0f133e271a102231",
|
|
"translation_date": "2025-10-22T17:02:57+00:00",
|
|
"source_file": "7-bank-project/4-state-management/assignment.md",
|
|
"language_code": "ne"
|
|
}
|
|
-->
|
|
# "ट्रान्जेक्सन थप गर्नुहोस्" संवाद लागू गर्नुहोस्
|
|
|
|
## अवलोकन
|
|
|
|
तपाईंको बैंकिङ एपमा अब ठोस राज्य व्यवस्थापन र डाटा स्थायित्व छ, तर यसमा वास्तविक बैंकिङ एप्सलाई आवश्यक पर्ने एक महत्वपूर्ण सुविधा छैन: प्रयोगकर्ताहरूले आफ्नै ट्रान्जेक्सनहरू थप्न सक्ने क्षमता। यस असाइनमेन्टमा, तपाईंले पूर्ण "ट्रान्जेक्सन थप गर्नुहोस्" संवाद लागू गर्नुहुनेछ जसले तपाईंको हालको राज्य व्यवस्थापन प्रणालीसँग सहज रूपमा एकीकृत गर्दछ।
|
|
|
|
यो असाइनमेन्टले बैंकिङका चार पाठहरूमा सिकेका सबै कुराहरूलाई एकसाथ ल्याउँछ: HTML टेम्प्लेटिङ, फारम ह्यान्डलिङ, API एकीकरण, र राज्य व्यवस्थापन।
|
|
|
|
## सिक्ने उद्देश्यहरू
|
|
|
|
यो असाइनमेन्ट पूरा गरेर, तपाईं:
|
|
- **प्रयोगकर्ता-अनुकूल** डाटा प्रविष्टिका लागि संवाद इन्टरफेस सिर्जना गर्नुहोस्
|
|
- **पहुंचयोग्य** फारम डिजाइन लागू गर्नुहोस् जसमा किबोर्ड र स्क्रिन रिडर समर्थन होस्
|
|
- **नयाँ सुविधाहरू** तपाईंको हालको राज्य व्यवस्थापन प्रणालीसँग एकीकृत गर्नुहोस्
|
|
- **API संचार** र त्रुटि ह्यान्डलिङ अभ्यास गर्नुहोस्
|
|
- **आधुनिक वेब विकास ढाँचाहरू** वास्तविक-विश्व सुविधामा लागू गर्नुहोस्
|
|
|
|
## निर्देशनहरू
|
|
|
|
### चरण १: ट्रान्जेक्सन थप्ने बटन
|
|
|
|
ड्यासबोर्ड पृष्ठमा प्रयोगकर्ताहरूले सजिलै भेट्न र पहुँच गर्न सक्ने "ट्रान्जेक्सन थप्नुहोस्" बटन **सिर्जना गर्नुहोस्**।
|
|
|
|
**आवश्यकताहरू:**
|
|
- बटनलाई ड्यासबोर्डमा तार्किक स्थानमा **राख्नुहोस्**
|
|
- स्पष्ट, कार्य-उन्मुख बटन पाठ **प्रयोग गर्नुहोस्**
|
|
- बटनलाई तपाईंको हालको UI डिजाइनसँग मेल खाने गरी **स्टाइल गर्नुहोस्**
|
|
- बटन किबोर्ड पहुँचयोग्य **सुनिश्चित गर्नुहोस्**
|
|
|
|
### चरण २: संवाद कार्यान्वयन
|
|
|
|
तपाईंको संवाद कार्यान्वयनका लागि यी दुई दृष्टिकोणहरू मध्ये एक चयन गर्नुहोस्:
|
|
|
|
**विकल्प A: अलग पृष्ठ**
|
|
- ट्रान्जेक्सन फारमको लागि नयाँ HTML टेम्प्लेट **सिर्जना गर्नुहोस्**
|
|
- तपाईंको राउटिङ प्रणालीमा नयाँ रूट **थप्नुहोस्**
|
|
- फारम पृष्ठमा र पृष्ठबाट नेभिगेसन **लागू गर्नुहोस्**
|
|
|
|
**विकल्प B: मोडल संवाद (सिफारिस गरिएको)**
|
|
- ड्यासबोर्ड छोड्न बिना संवाद देखाउन/लुकाउन JavaScript **प्रयोग गर्नुहोस्**
|
|
- [`hidden` property](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) वा CSS क्लासहरू **प्रयोग गरेर लागू गर्नुहोस्**
|
|
- उचित फोकस व्यवस्थापनको साथमा सहज प्रयोगकर्ता अनुभव **सिर्जना गर्नुहोस्**
|
|
|
|
### चरण ३: पहुँचयोग्यता कार्यान्वयन
|
|
|
|
तपाईंको संवादले [मोडल संवादहरूको पहुँचयोग्यता मापदण्डहरू](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) **पूरा गरेको सुनिश्चित गर्नुहोस्**:
|
|
|
|
**किबोर्ड नेभिगेसन:**
|
|
- संवाद बन्द गर्न Escape कुञ्जी **समर्थन गर्नुहोस्**
|
|
- संवाद खुला हुँदा फोकसलाई संवादभित्र **फसाउनुहोस्**
|
|
- बन्द हुँदा ट्रिगर बटनमा फोकस **फिर्ता गर्नुहोस्**
|
|
|
|
**स्क्रिन रिडर समर्थन:**
|
|
- उपयुक्त ARIA लेबलहरू र भूमिका **थप्नुहोस्**
|
|
- स्क्रिन रिडरहरूलाई संवाद खोल्ने/बन्द गर्ने **घोषणा गर्नुहोस्**
|
|
- स्पष्ट फारम फिल्ड लेबलहरू र त्रुटि सन्देशहरू **प्रदान गर्नुहोस्**
|
|
|
|
### चरण ४: फारम सिर्जना
|
|
|
|
ट्रान्जेक्सन डाटा सङ्कलन गर्ने HTML फारम **डिजाइन गर्नुहोस्**:
|
|
|
|
**आवश्यक फिल्डहरू:**
|
|
- **मिति**: ट्रान्जेक्सन कहिले भयो
|
|
- **विवरण**: ट्रान्जेक्सन केका लागि हो
|
|
- **रकम**: ट्रान्जेक्सनको मूल्य (आम्दानीको लागि सकारात्मक, खर्चको लागि नकारात्मक)
|
|
|
|
**फारम सुविधाहरू:**
|
|
- फारम सबमिट गर्नु अघि प्रयोगकर्ताको इनपुट **मान्य गर्नुहोस्**
|
|
- अमान्य डाटाको लागि स्पष्ट त्रुटि सन्देशहरू **प्रदान गर्नुहोस्**
|
|
- उपयोगी प्लेसहोल्डर पाठ र लेबलहरू **सामेल गर्नुहोस्**
|
|
- तपाईंको हालको डिजाइनसँग **सुसंगत रूपमा स्टाइल गर्नुहोस्**
|
|
|
|
### चरण ५: API एकीकरण
|
|
|
|
तपाईंको फारमलाई ब्याकएन्ड API सँग **जोड्नुहोस्**:
|
|
|
|
**कार्यान्वयन चरणहरू:**
|
|
- [सर्भर API निर्दिष्टीकरणहरू](../api/README.md) सही एन्डप्वाइन्ट र डाटा ढाँचाको लागि **समीक्षा गर्नुहोस्**
|
|
- फारम इनपुटहरूबाट JSON डाटा **सिर्जना गर्नुहोस्**
|
|
- उपयुक्त त्रुटि ह्यान्डलिङको साथमा API मा डाटा **पठाउनुहोस्**
|
|
- प्रयोगकर्तालाई सफलता/असफलता सन्देशहरू **प्रदर्शन गर्नुहोस्**
|
|
- नेटवर्क त्रुटिहरूलाई **सजिलै ह्यान्डल गर्नुहोस्**
|
|
|
|
### चरण ६: राज्य व्यवस्थापन एकीकरण
|
|
|
|
नयाँ ट्रान्जेक्सनको साथमा तपाईंको ड्यासबोर्ड **अपडेट गर्नुहोस्**:
|
|
|
|
**एकीकरण आवश्यकताहरू:**
|
|
- सफल ट्रान्जेक्सन थपेपछि खाता डाटा **रिफ्रेस गर्नुहोस्**
|
|
- पृष्ठ पुनःलोड आवश्यक बिना ड्यासबोर्ड प्रदर्शन **अपडेट गर्नुहोस्**
|
|
- नयाँ ट्रान्जेक्सन तुरुन्तै **देखिनुहोस्**
|
|
- प्रक्रियाभर उचित राज्य स्थिरता **राख्नुहोस्**
|
|
|
|
## प्राविधिक निर्दिष्टीकरणहरू
|
|
|
|
**API एन्डप्वाइन्ट विवरणहरू:**
|
|
[सर्भर API डकुमेन्टेसन](../api/README.md) हेर्नुहोस्:
|
|
- ट्रान्जेक्सन डाटाको लागि आवश्यक JSON ढाँचा
|
|
- HTTP मेथड र एन्डप्वाइन्ट URL
|
|
- अपेक्षित प्रतिक्रिया ढाँचा
|
|
- त्रुटि प्रतिक्रिया ह्यान्डलिङ
|
|
|
|
**अपेक्षित परिणाम:**
|
|
यो असाइनमेन्ट पूरा गरेपछि, तपाईंको बैंकिङ एपमा पूर्ण रूपमा कार्यात्मक "ट्रान्जेक्सन थप्नुहोस्" सुविधा हुनेछ जसले व्यावसायिक रूपमा देखिन्छ र व्यवहार गर्दछ:
|
|
|
|
|
|
|
|
## तपाईंको कार्यान्वयन परीक्षण गर्दै
|
|
|
|
**कार्यात्मक परीक्षण:**
|
|
1. "ट्रान्जेक्सन थप्नुहोस्" बटन स्पष्ट रूपमा देखिने र पहुँचयोग्य छ भनी **पुष्टि गर्नुहोस्**
|
|
2. संवाद ठीकसँग खुल्छ र बन्द हुन्छ भनी **परीक्षण गर्नुहोस्**
|
|
3. सबै आवश्यक फिल्डहरूको लागि फारम मान्यता ठीकसँग काम गर्छ भनी **पुष्टि गर्नुहोस्**
|
|
4. सफल ट्रान्जेक्सनहरू तुरुन्तै ड्यासबोर्डमा देखिन्छन् भनी **जाँच गर्नुहोस्**
|
|
5. अमान्य डाटा र नेटवर्क समस्याहरूको लागि त्रुटि ह्यान्डलिङ ठीकसँग काम गर्छ भनी **सुनिश्चित गर्नुहोस्**
|
|
|
|
**पहुंचयोग्यता परीक्षण:**
|
|
1. केवल किबोर्ड प्रयोग गरेर सम्पूर्ण प्रवाह **नेभिगेट गर्नुहोस्**
|
|
2. स्क्रिन रिडर प्रयोग गरेर उचित घोषणाहरू सुनिश्चित गर्न **परीक्षण गर्नुहोस्**
|
|
3. फोकस व्यवस्थापन ठीकसँग काम गर्छ भनी **पुष्टि गर्नुहोस्**
|
|
4. सबै फारम तत्वहरूमा उपयुक्त लेबलहरू छन् भनी **जाँच गर्नुहोस्**
|
|
|
|
## मूल्याङ्कन मापदण्ड
|
|
|
|
| मापदण्ड | उत्कृष्ट | पर्याप्त | सुधार आवश्यक |
|
|
| -------- | --------- | -------- | ----------------- |
|
|
| **कार्यक्षमता** | ट्रान्जेक्सन थप्ने सुविधा उत्कृष्ट प्रयोगकर्ता अनुभवको साथमा त्रुटिरहित रूपमा काम गर्छ र पाठहरूबाट सबै उत्तम अभ्यासहरू अनुसरण गर्छ | ट्रान्जेक्सन थप्ने सुविधा ठीकसँग काम गर्छ तर केही उत्तम अभ्यासहरू अनुसरण नगरेको वा साना प्रयोगकर्ता समस्याहरू छन् | ट्रान्जेक्सन थप्ने सुविधा आंशिक रूपमा काम गर्छ वा महत्वपूर्ण प्रयोगकर्ता समस्याहरू छन् |
|
|
| **कोड गुणस्तर** | कोड राम्रोसँग व्यवस्थित छ, स्थापित ढाँचाहरू अनुसरण गर्छ, उचित त्रुटि ह्यान्डलिङ समावेश गर्छ, र हालको राज्य व्यवस्थापनसँग सहज रूपमा एकीकृत हुन्छ | कोड काम गर्छ तर केही संगठन समस्याहरू वा हालको कोडबेससँग असंगत ढाँचाहरू छन् | कोडमा महत्वपूर्ण संरचनात्मक समस्याहरू छन् वा हालको ढाँचासँग राम्रोसँग एकीकृत हुँदैन |
|
|
| **पहुंचयोग्यता** | पूर्ण किबोर्ड नेभिगेसन समर्थन, स्क्रिन रिडर अनुकूलता, र उत्कृष्ट फोकस व्यवस्थापनको साथमा WCAG दिशानिर्देशहरू अनुसरण गर्छ | आधारभूत पहुँचयोग्यता सुविधाहरू लागू गरिएका छन् तर केही किबोर्ड नेभिगेसन वा स्क्रिन रिडर सुविधाहरू हराइरहेका छन् | सीमित वा कुनै पहुँचयोग्यता विचारहरू लागू गरिएका छैनन् |
|
|
| **प्रयोगकर्ता अनुभव** | सहज, परिष्कृत इन्टरफेस स्पष्ट प्रतिक्रिया, सहज अन्तरक्रियाहरू, र व्यावसायिक उपस्थिति सहित | राम्रो प्रयोगकर्ता अनुभव तर प्रतिक्रिया वा दृश्य डिजाइनमा सुधारको लागि साना क्षेत्रहरू छन् | खराब प्रयोगकर्ता अनुभव जसमा भ्रमित इन्टरफेस वा प्रयोगकर्ता प्रतिक्रिया अभाव छ |
|
|
|
|
## अतिरिक्त चुनौतीहरू (वैकल्पिक)
|
|
|
|
आवश्यकताहरू पूरा गरेपछि, यी सुधारहरू विचार गर्नुहोस्:
|
|
|
|
**विस्तारित सुविधाहरू:**
|
|
- ट्रान्जेक्सन कोटीहरू (खाना, यातायात, मनोरञ्जन, आदि) **थप्नुहोस्**
|
|
- वास्तविक-समय प्रतिक्रिया सहित इनपुट मान्यता **लागू गर्नुहोस्**
|
|
- पावर प्रयोगकर्ताहरूका लागि किबोर्ड सर्टकटहरू **सिर्जना गर्नुहोस्**
|
|
- ट्रान्जेक्सन सम्पादन र मेट्ने क्षमता **थप्नुहोस्**
|
|
|
|
**उन्नत एकीकरण:**
|
|
- हालै थपिएका ट्रान्जेक्सनहरूको लागि Undo कार्यक्षमता **लागू गर्नुहोस्**
|
|
- CSV फाइलहरूबाट बल्क ट्रान्जेक्सन आयात **थप्नुहोस्**
|
|
- ट्रान्जेक्सन खोज र फिल्टर गर्ने क्षमता **सिर्जना गर्नुहोस्**
|
|
- डाटा निर्यात कार्यक्षमता **लागू गर्नुहोस्**
|
|
|
|
यी वैकल्पिक सुविधाहरूले तपाईंलाई थप उन्नत वेब विकास अवधारणाहरू अभ्यास गर्न र अधिक पूर्ण बैंकिङ एप सिर्जना गर्न मद्दत गर्नेछ!
|
|
|
|
---
|
|
|
|
**अस्वीकरण**:
|
|
यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं। |