# "ট্রানজ্যাকশন যোগ করুন" ডায়ালগ বাস্তবায়ন ## সংক্ষিপ্ত বিবরণ আপনার ব্যাংকিং অ্যাপে এখন শক্তিশালী স্টেট ম্যানেজমেন্ট এবং ডেটা সংরক্ষণ ব্যবস্থা রয়েছে, তবে এটি একটি গুরুত্বপূর্ণ ফিচার থেকে বঞ্চিত যা প্রকৃত ব্যাংকিং অ্যাপগুলোর প্রয়োজন: ব্যবহারকারীদের তাদের নিজস্ব ট্রানজ্যাকশন যোগ করার ক্ষমতা। এই অ্যাসাইনমেন্টে, আপনি একটি সম্পূর্ণ "ট্রানজ্যাকশন যোগ করুন" ডায়ালগ তৈরি করবেন যা আপনার বিদ্যমান স্টেট ম্যানেজমেন্ট সিস্টেমের সাথে নির্বিঘ্নে সংযুক্ত হবে। এই অ্যাসাইনমেন্টটি ব্যাংকিং সম্পর্কিত চারটি পাঠের সবকিছু একত্রিত করে: HTML টেমপ্লেটিং, ফর্ম হ্যান্ডলিং, API ইন্টিগ্রেশন এবং স্টেট ম্যানেজমেন্ট। ## শেখার লক্ষ্য এই অ্যাসাইনমেন্ট সম্পন্ন করার মাধ্যমে আপনি: - **একটি** ব্যবহারকারী-বান্ধব ডায়ালগ ইন্টারফেস তৈরি করবেন ডেটা এন্ট্রির জন্য - **অ্যাক্সেসযোগ্য** ফর্ম ডিজাইন বাস্তবায়ন করবেন যা কীবোর্ড এবং স্ক্রিন রিডার সমর্থন করে - **নতুন ফিচার** আপনার বিদ্যমান স্টেট ম্যানেজমেন্ট সিস্টেমের সাথে সংযুক্ত করবেন - **API যোগাযোগ** এবং ত্রুটি পরিচালনা অনুশীলন করবেন - **আধুনিক ওয়েব ডেভেলপমেন্ট প্যাটার্ন** বাস্তব জীবনের ফিচারে প্রয়োগ করবেন ## নির্দেশনা ### ধাপ ১: ট্রানজ্যাকশন যোগ করার বোতাম **তৈরি করুন** একটি "ট্রানজ্যাকশন যোগ করুন" বোতাম আপনার ড্যাশবোর্ড পেজে যা ব্যবহারকারীরা সহজেই খুঁজে পাবে এবং ব্যবহার করতে পারবে। **প্রয়োজনীয়তা:** - বোতামটি ড্যাশবোর্ডে একটি যৌক্তিক স্থানে **রাখুন** - **স্পষ্ট** এবং কার্যকর বোতামের টেক্সট ব্যবহার করুন - বোতামটি আপনার বিদ্যমান UI ডিজাইনের সাথে **মিলিয়ে স্টাইল করুন** - **নিশ্চিত করুন** বোতামটি কীবোর্ডে অ্যাক্সেসযোগ্য ### ধাপ ২: ডায়ালগ বাস্তবায়ন আপনার ডায়ালগ বাস্তবায়নের জন্য দুটি পদ্ধতির মধ্যে একটি বেছে নিন: **অপশন A: আলাদা পেজ** - **তৈরি করুন** একটি নতুন HTML টেমপ্লেট ট্রানজ্যাকশন ফর্মের জন্য - **যোগ করুন** একটি নতুন রুট আপনার রাউটিং সিস্টেমে - **বাস্তবায়ন করুন** ফর্ম পেজে যাওয়ার এবং সেখান থেকে ফিরে আসার নেভিগেশন **অপশন B: মডাল ডায়ালগ (প্রস্তাবিত)** - **জাভাস্ক্রিপ্ট ব্যবহার করুন** ড্যাশবোর্ড ছাড়াই ডায়ালগ দেখানোর/লুকানোর জন্য - **বাস্তবায়ন করুন** [`hidden` প্রপার্টি](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) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। নথিটির মূল ভাষায় থাকা আসল সংস্করণকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়ী থাকব না।