ওয়েব অ্যাপ ওয়ার্কফ্লো
ওয়েব অ্যাপ্লিকেশানগুলির কর্মপ্রবাহ বিভিন্ন পর্যায়ে অন্তর্ভুক্ত করে, প্রাথমিক ব্যবহারকারীর মিথস্ক্রিয়া থেকে চূড়ান্ত আউটপুট বা প্রতিক্রিয়া পর্যন্ত। কার্যকরী এবং ব্যবহারকারী-বান্ধব ওয়েব অ্যাপ্লিকেশন তৈরির জন্য এই কর্মপ্রবাহ বোঝা অত্যন্ত গুরুত্বপূর্ণ।
অ্যাপমাস্টার ওয়েব ডিজাইনারে, আপনি ব্যাকএন্ড লজিক ছাড়াও ফ্রন্টেন্ড সাইডে ওয়েব অ্যাপ্লিকেশনের জন্য ব্যবসায়িক যুক্তি কনফিগার করতে পারেন। এই শক্তিশালী বৈশিষ্ট্যটি আপনাকে নির্দিষ্ট ব্যবসায়িক প্রয়োজন অনুসারে পরিশীলিত, গতিশীল ওয়েব অ্যাপ্লিকেশন তৈরি করতে দেয়।
একটি ওয়েব অ্যাপ্লিকেশন প্রসঙ্গে, ব্যবসায়িক প্রক্রিয়াগুলিতে ব্যবহারকারীর প্রমাণীকরণ, ডেটা প্রক্রিয়াকরণ, অনলাইন লেনদেন, বিষয়বস্তু পরিচালনা, গ্রাহক পরিষেবা অপারেশন এবং শর্তের উপর নির্ভর করে UI উপাদানগুলি কাস্টমাইজ করা অন্তর্ভুক্ত থাকতে পারে।
অ্যাপমাস্টার ওয়েব ডিজাইনারে ব্যবসায়িক যুক্তির তিনটি স্তর:
- অ্যাপ্লিকেশন ট্রিগার: এগুলি উচ্চ-স্তরের ট্রিগার যা অ্যাপ্লিকেশন-ব্যাপী ইভেন্ট বা রাজ্যগুলিতে প্রতিক্রিয়া জানায়, নির্দিষ্ট ব্যবসায়িক প্রক্রিয়াগুলিকে সেট করে।
- জেনেরিক বিজনেস প্রসেস: এগুলি হল পূর্বনির্ধারিত ক্রিয়াকলাপগুলির সেট যা অ্যাপ্লিকেশনের বিভিন্ন অংশ, স্বয়ংক্রিয় কাজগুলি এবং কর্মপ্রবাহকে স্ট্রিমলাইন করার জন্য প্রয়োগ করা যেতে পারে।
- এলিমেন্ট ট্রিগার: অ্যাপ্লিকেশন ট্রিগারের চেয়ে বেশি দানাদার, এগুলি নির্দিষ্ট UI উপাদানগুলির সাথে সংযুক্ত, এই উপাদানগুলির সাথে মিথস্ক্রিয়াগুলির উপর ভিত্তি করে ব্যবসায়িক প্রক্রিয়াগুলিকে সক্রিয় করে৷
ব্যবসায়িক যুক্তির এই স্তরগুলিকে কাজে লাগানোর মাধ্যমে, AppMaster ওয়েব ডিজাইনার আপনাকে এমন ওয়েব অ্যাপ্লিকেশনগুলি তৈরি করার ক্ষমতা দেয় যা কেবল দৃষ্টিকটু নয় বরং বুদ্ধিমান এবং ব্যবহারকারীর চাহিদা এবং আচরণের প্রতি প্রতিক্রিয়াশীলও।
🔔 বিপি চালু করার জন্য যেকোনো নতুন ব্যবসায়িক যুক্তি যোগ করার পর চলমান পূর্বরূপ পুনরায় লোড করা গুরুত্বপূর্ণ।
অ্যাপ্লিকেশন ট্রিগার
AppMaster Web Designer-এ অ্যাপ্লিকেশন ট্রিগারগুলি হল উচ্চ-স্তরের ট্রিগার যা অ্যাপ্লিকেশন-ব্যাপী ইভেন্টগুলিতে প্রতিক্রিয়া জানায় বা কার্যকারিতা এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে নির্দিষ্ট ব্যবসায়িক প্রক্রিয়াগুলিকে কার্যকর করে।
অ্যাপমাস্টার বিভিন্ন ধরনের অ্যাপ্লিকেশন ট্রিগার অফার করে, প্রতিটি নির্দিষ্ট পরিস্থিতির জন্য ডিজাইন করা হয়েছে:
- অ্যাপ লঞ্চে: অ্যাপ্লিকেশান শুরু হলে সক্রিয় হয়, প্রাথমিক সেটআপ পদ্ধতির জন্য আদর্শ।
- অন অ্যাপ নেভিগেট: অ্যাপ্লিকেশনের বিভিন্ন অংশের মধ্যে নেভিগেশনের সময় আগুন লেগে যায়।
- অ্যাপ ব্লার অন: অ্যাপ্লিকেশান যখন ফোকাস হারায় তখন ট্রিগার হয়, কর্ম বিরতি বা সংরক্ষণের জন্য দরকারী।
- অন অ্যাপ ফোকাস: যখন অ্যাপ্লিকেশান আবার ফোকাস ফিরে পায় তখন এক্সিকিউট করে, কন্টেন্ট পুনরায় শুরু বা আপডেট করার জন্য দুর্দান্ত।
- অ্যাপ লুকানোতে: অ্যাপ্লিকেশানটি ছোট হলে বা স্ক্রিনে দৃশ্যমান না হলে সক্রিয় হয়৷
- দৃশ্যমান অ্যাপে: অ্যাপ্লিকেশনটি আবার দৃশ্যমান হলে আগুন জ্বলে, সামগ্রী রিফ্রেশ করার জন্য দরকারী।
- অন অ্যাপ ডেস্ট্রয়: অ্যাপ্লিকেশনের শাটডাউন প্রক্রিয়া চলাকালীন কার্যকর করে।
- অ্যাপ অনলাইনে: যখন অ্যাপ্লিকেশনটি একটি অনলাইন স্থিতি শনাক্ত করে তখন ট্রিগার হয়, ডেটা সিঙ্ক করার জন্য উপযুক্ত।
- অ্যাপ অফলাইনে: অফলাইন কার্যকারিতা সক্ষম করে, অ্যাপ্লিকেশন অফলাইনে গেলে আগুন লাগে।
- অ্যাপে প্রমাণীকরণের প্রয়োজন: "401 (অননুমোদিত)" প্রতিক্রিয়া পাওয়ার পরে সক্রিয় হয়, ব্যবহারকারীকে পুনরায় প্রমাণীকরণের অনুরোধ জানায়।
- নিষিদ্ধ অ্যাপে: একটি "403 (নিষিদ্ধ)" প্রতিক্রিয়া ট্রিগার করে, সাধারণত অ্যাক্সেস নিয়ন্ত্রণ এবং অনুমতির জন্য ব্যবহৃত হয়।
আপনার অ্যাপ্লিকেশনের ব্যাকএন্ড স্তরে WebSocket এন্ডপয়েন্ট তৈরি করে অ্যাপ্লিকেশন ট্রিগারগুলির সঠিক তালিকা প্রসারিত করা যেতে পারে।
এই ট্রিগারগুলি লঞ্চের সময় ব্যবহারকারীর অনুমোদন পরিচালনা করতে, অ্যাক্সেসের অধিকার যাচাই করতে, অনুমোদনের পরিবর্তনের উপর পুনর্নির্দেশ কনফিগার করতে, ত্রুটিগুলি পরিচালনা করতে এবং আরও অনেক কিছুর জন্য নিযুক্ত করা যেতে পারে, একটি প্রতিক্রিয়াশীল এবং সুরক্ষিত ওয়েব অ্যাপ্লিকেশন তৈরিতে এগুলিকে অপরিহার্য করে তোলে।
জেনেরিক ব্যবসায়িক প্রক্রিয়া
অ্যাপমাস্টার ওয়েব ডিজাইনার-এ জেনেরিক বিজনেস প্রসেসগুলি বিশেষভাবে পুনরাবৃত্ত ক্রিয়াকলাপ এবং অপ্রয়োজনীয় যুক্তিকে স্বতন্ত্র প্রবাহে এনক্যাপসুলেট করার জন্য ডিজাইন করা হয়েছে। একবার তৈরি হয়ে গেলে, এই ব্যবসায়িক প্রক্রিয়াগুলি আপনার ওয়েব অ্যাপ্লিকেশনের ব্যবসায়িক প্রক্রিয়াগুলির যেকোনো স্তরে স্বতন্ত্র ব্লক হিসাবে বিরামহীনভাবে একত্রিত হতে পারে।
মুখ্য সুবিধা:
- দক্ষ ওয়ার্কফ্লো ম্যানেজমেন্ট: সাধারণ কাজগুলিকে জেনেরিক বিজনেস প্রসেসগুলিতে স্থানান্তরিত করার মাধ্যমে, আপনি উল্লেখযোগ্যভাবে ডুপ্লিকেশন কমাতে পারেন এবং আপনার অ্যাপ্লিকেশনের ওয়ার্কফ্লোকে স্ট্রিমলাইন করেন।
- ফ্রন্টএন্ড কার্যকারিতা: ব্যাকএন্ড ব্যবসায়িক প্রক্রিয়াগুলির কার্যকারিতা মিরর করার সময়, জেনেরিক ব্যবসার প্রক্রিয়াগুলি ফ্রন্টএন্ডে অনন্যভাবে সম্পাদিত হয়। এটি ব্যবহারকারী ইন্টারফেসের মধ্যে দ্রুত মিথস্ক্রিয়া এবং তাত্ক্ষণিক প্রতিক্রিয়ার জন্য অনুমতি দেয়।
পুনঃব্যবহারের সহজতা:
লজিক তৈরি করার সময় একটি জেনেরিক বিজনেস প্রসেস ব্যবহার করতে, আপনার ক্যানভাসে ব্যবহারকারী-নির্মিত BPs গ্রুপ থেকে পছন্দসই ব্লকটি টেনে আনুন।
🔔 পারফরম্যান্স বিবেচনা: এটা মনে রাখা গুরুত্বপূর্ণ যে জটিল এবং সম্পদ-নিবিড় কাজগুলির জন্য, আমরা সার্ভার সাইডে (ব্যাকএন্ড) এই প্রক্রিয়াগুলি চালানোর পরামর্শ দিই। এই পদ্ধতিটি আরও ভাল কর্মক্ষমতা এবং দক্ষতা নিশ্চিত করে, বিশেষ করে এমন ক্রিয়াকলাপগুলির জন্য যা গণনামূলকভাবে দাবি করে বা সংবেদনশীল ডেটার নিরাপদ পরিচালনার প্রয়োজন হয়।
উপাদান ট্রিগার
অ্যাপমাস্টার ওয়েব ডিজাইনারের উপাদান ট্রিগারগুলি আপনার ওয়েব অ্যাপ্লিকেশনগুলিতে ইন্টারঅ্যাক্টিভিটি যুক্ত করার জন্য অপরিহার্য। এই ট্রিগারগুলি নির্দিষ্ট UI উপাদানগুলির সাথে আবদ্ধ, ব্যবহারকারীর মিথস্ক্রিয়াগুলির প্রতিক্রিয়া হিসাবে পূর্বনির্ধারিত ব্যবসায়িক প্রক্রিয়াগুলি সক্রিয় করে৷ আপনার অ্যাপ্লিকেশনের প্রতিটি উপাদানে ট্রিগারের একটি সেট রয়েছে যা একটি গতিশীল এবং আকর্ষক ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে কাস্টমাইজ করা যেতে পারে:
- সাধারণ ট্রিগার: উপাদানগুলি স্ট্যান্ডার্ড ট্রিগারগুলির একটি সেট ভাগ করে যেমন onCreate , onDestroy , onShow , এবং onHide , যা উপাদানটির জীবনচক্র এবং দৃশ্যমানতার পরিবর্তনগুলিতে প্রতিক্রিয়া জানায়৷
- নির্দিষ্ট ট্রিগার: সাধারণ ট্রিগার ছাড়াও, উপাদানগুলির কার্যকারিতা অনুসারে অনন্য ট্রিগার রয়েছে। উদাহরণস্বরূপ, একটি বোতামে একটি onClick ট্রিগার থাকতে পারে, একটি টেবিল onUpdateData- এ সাড়া দিতে পারে এবং একটি ট্যাবে একটি onTabSelect ট্রিগার থাকতে পারে।
বৈচিত্র্য সত্ত্বেও, অন্তর্নিহিত নীতিটি সামঞ্জস্যপূর্ণ থাকে: একটি ঘটনা একটি সংশ্লিষ্ট ব্যবসায়িক প্রক্রিয়াকে ট্রিগার করে। কার্যকরভাবে কম্পোনেন্ট ট্রিগার ব্যবহার করে, আপনি একটি ইন্টারেক্টিভ এবং প্রতিক্রিয়াশীল ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন যা রিয়েলটাইমে ব্যবহারকারীর ইনপুটগুলিতে প্রতিক্রিয়া দেখায়, সামগ্রিক ব্যবহারকারীর অভিজ্ঞতা বাড়ায় এবং আপনার অ্যাপ্লিকেশনটিকে আরও স্বজ্ঞাত এবং ব্যবহারকারী-বান্ধব করে তোলে।
ট্রিগার অ্যাক্সেস করা
একটি উপাদানের ট্রিগার দেখতে এবং কনফিগার করতে, ক্যানভাসে উপাদানটি নির্বাচন করুন এবং ডান সাইডবারে 'ওয়ার্কফ্লো' ট্যাবে নেভিগেট করুন। এখানে, আপনি উপলব্ধ ট্রিগারগুলির একটি তালিকা পাবেন৷ একটিতে ক্লিক করলে আপনি এটিতে আপনার পছন্দসই ব্যবসায়িক প্রক্রিয়া সংযুক্ত করতে পারবেন। সহজ সনাক্তকরণের জন্য সংযুক্ত যুক্তি সহ ট্রিগারগুলি নীল রঙে হাইলাইট করা হয়েছে।
ব্যবসায়িক প্রক্রিয়া তৈরি করা
একটি কম্পোনেন্ট ট্রিগারের জন্য একটি ব্যবসায়িক প্রক্রিয়া সেট আপ করা ব্যাকএন্ড ব্যবসায়িক প্রক্রিয়া তৈরির অনুরূপ পদ্ধতি অনুসরণ করে, যেমনটি মডিউল 4 এ দেখা যায়। আপনি একটি সাধারণ ক্যানভাস ব্যবহার করবেন যেখানে বিভিন্ন ক্রিয়াকলাপের প্রতিনিধিত্বকারী ব্লকগুলি যোগ করা হয়। এই ব্লকগুলির মধ্যে সংযোগগুলি ক্রিয়াগুলির ক্রম সংজ্ঞায়িত করে, আপনাকে স্বজ্ঞাতভাবে জটিল কর্মপ্রবাহ তৈরি করতে দেয়।
বিল্ডিং অ্যাপ্লিকেশন ওয়ার্কফ্লো
ক্যালকুলেট বোতামের জন্য এমন একটি ব্যবসায়িক প্রক্রিয়া তৈরি করা যাক। প্রথমে, বোতামটি ক্লিক করার সময় আমাদের কী করতে হবে তা নির্ধারণ করুন:
- X এবং Y এর মানগুলি বের করুন। সংশ্লিষ্ট ইনপুট ক্ষেত্রগুলি থেকে সেগুলি পান৷
- গণনার জন্য একটি এন্ডপয়েন্ট চালু করুন এবং এতে X এবং Y প্যারামিটার পাস করুন।
- ফলাফলের ধারকটি দৃশ্যমান করুন।
- প্রয়োজনীয় লেবেল ক্ষেত্রগুলিতে গণনার ফলাফল রাখুন।
ক্যানভাসে আমাদের Calc বোতাম উপাদান নির্বাচন করুন এবং onClick Trigger-এ ক্লিক করুন।
ব্যবসায়িক প্রক্রিয়া সম্পাদক খোলা থাকবে। এখানে আমরা বোতামের জন্য আমাদের ব্যবসার প্রক্রিয়া তৈরি করব।
ইনপুট থেকে মান পান
প্রথম ধাপ হল ব্যবহারকারীর দ্বারা প্রবেশ করা মান পেতে। এটির জন্য, অ্যাপমাস্টার ইনপুট ফ্লোট গেট ডেটা ব্লক সরবরাহ করে, যা একটি 'এলিমেন্ট কী' এর ইনপুট প্যারামিটার হিসাবে বৈশিষ্ট্যযুক্ত করে এবং 'মান' আউটপুট করে, মূলত নির্দিষ্ট উপাদান থেকে বর্তমান মানগুলি পড়ে।
কারণ আমাদের দুটি পৃথক ক্ষেত্র রয়েছে (এক্স এবং ওয়াই মানগুলি উপস্থাপন করে), তাই আপনাকে দুটি 'ইনপুট ফ্লোট গেট ডেটা' ব্লক ব্যবহার করতে হবে - প্রতিটি ইনপুট ক্ষেত্রের জন্য একটি।
এটি সেট আপ করতে:
- প্রতিটি ইনপুট ক্ষেত্রের জন্য আপনার ক্যানভাসে দুটি ইনপুট ফ্লোট ডেটা ব্লক টেনে আনুন।
- সংশ্লিষ্ট ফ্লোট ইনপুটগুলির সাথে সামঞ্জস্যপূর্ণ প্রতিটি ব্লকের জন্য এলিমেন্ট কী সেট করুন। এটি ব্লকটিকে সঠিক UI উপাদানের সাথে লিঙ্ক করে, এটি নিশ্চিত করে যে এটি সঠিক ডেটা পড়ছে।
ইন্টারফেস তৈরি করার সময় আপনি যদি পূর্বে UI ডিজাইনারে আপনার উপাদানগুলির নাম পরিবর্তন করে থাকেন, তাহলে প্রতিটি ব্লকের জন্য প্রয়োজনীয় উপাদানগুলি সনাক্ত করা এবং নির্বাচন করা সহজ হয়ে যায়।
☝️ ডিজাইন পর্বের সময় উপাদানের পুনঃনামকরণ ব্যবসায়িক লজিক কনফিগারেশনের সময় পরবর্তীতে তাদের সহজেই সনাক্ত করতে সহায়তা করে।
এন্ডপয়েন্ট চালু করুন
ব্যবহারকারীর ইনপুট পুনরুদ্ধার করার পরে, আপনার ওয়েব অ্যাপ্লিকেশনের কর্মপ্রবাহের পরবর্তী ধাপটি হল এন্ডপয়েন্ট শুরু করা। এই গুরুত্বপূর্ণ পদক্ষেপটি আপনার ওয়েব অ্যাপ্লিকেশনের ফ্রন্টএন্ড (ইউজার ইন্টারফেস) এবং ব্যাকএন্ড (সার্ভার-সাইড প্রসেস) এর মধ্যে সংযোগ স্থাপন করে এবং গণনার কমান্ড ব্রাউজার থেকে সার্ভারে প্রেরণ করা হয়।
অ্যাপমাস্টারে এন্ডপয়েন্টগুলিকে অ্যাপ্লিকেশনের মধ্যে স্বতন্ত্র ব্যবসায়িক প্রক্রিয়া ব্লক হিসাবে উপস্থাপন করা হয়। আমাদের এন্ডপয়েন্টগুলি ব্যবহার করতে, ব্যবসায়িক প্রক্রিয়া ব্লক তালিকা থেকে কেবল উপযুক্তটি বেছে নিন এবং এটিকে আপনার ক্যানভাসে টেনে আনুন।
মডিউল 5 এ , আমরা একটি GET পদ্ধতির সাথে একটি শেষ পয়েন্ট কনফিগার করেছি এবং এটিকে বেস URL "module4-basic" বরাদ্দ করেছি। আপনার এটিকে তালিকাভুক্ত করা উচিত - সার্ভারের অনুরোধ GET /module4-basic/ এবং ক্যানভাসে টেনে আনুন।
উপাদানগুলির বিপরীতে, অ্যাপমাস্টার এন্ডপয়েন্টগুলির জন্য তাদের আইডি সেটিং প্রয়োজন হয় না, কারণ এটি পূর্বনির্ধারিত। এই বৈশিষ্ট্যটি আপনার ব্যবসার যুক্তিতে শেষ পয়েন্টগুলিকে একীভূত করার প্রক্রিয়াটিকে প্রবাহিত করে৷
শেষ ধাপ হল শেষপয়েন্টে পূর্ববর্তী ধাপ থেকে প্রাপ্ত X এবং Y মানগুলি ইনপুট করা। এটি ব্যাকএন্ডকে এই ইনপুটগুলি গ্রহণ এবং প্রক্রিয়া করার অনুমতি দেয়, প্রয়োজনীয় গণনা সম্পাদন করে।
UI উপাদানের অবস্থা
আপনার ওয়েব অ্যাপ্লিকেশন ওয়ার্কফ্লোতে নিম্নলিখিত ধাপটি কন্টেইনারগুলির দৃশ্যমানতা পরিচালনা করছে - বিশেষত, ফলাফলগুলি প্রদর্শন করে এমন ধারকটি দেখানো এবং একটি ইঙ্গিত রয়েছে এমন ধারকটিকে লুকিয়ে রাখা৷
এটি কীভাবে অর্জন করা যায় তা এখানে:
- আপনার ক্যানভাসে দুটি ফ্লেক্স আপডেট প্রোপার্টি ব্লক টেনে নিয়ে শুরু করুন।
- প্রতিটি ফ্লেক্স আপডেট প্রোপার্টিজ ব্লকের জন্য, সংশ্লিষ্ট কন্টেইনারগুলির সাথে সম্পর্কিত এলিমেন্ট কী প্যারামিটার বরাদ্দ করুন - একটি ফলাফলের ধারকটির জন্য এবং অন্যটি ইঙ্গিত ধারকের জন্য।
- এই ব্লকগুলির মধ্যে দৃশ্যমানতা পরামিতি কনফিগার করুন। ফলাফলের ধারকটির জন্য দৃশ্যমান প্যারামিটারটিকে সত্যে সেট করুন, এটি নিশ্চিত করুন যে এটি গণনার পরে দৃশ্যমান হয়। বিপরীতভাবে, হিন্ট কন্টেইনারের জন্য এই প্যারামিটারটি False এ সেট করুন যাতে এটি গণনা শেষ হওয়ার পরে লুকিয়ে থাকে।
এই পদক্ষেপগুলি বাস্তবায়ন করে, আপনি আপনার অ্যাপ্লিকেশন ইন্টারফেসে একটি গতিশীল প্রতিক্রিয়া তৈরি করেন। একজন ব্যবহারকারীর ক্রিয়া অনুসরণ করে, যেমন গণনা করার জন্য একটি বোতামে ক্লিক করা, অ্যাপ্লিকেশনটি স্বয়ংক্রিয়ভাবে ইঙ্গিত ধারকটি লুকিয়ে রাখে এবং ফলাফলের ধারকটি প্রদর্শন করে।
এটি শুধুমাত্র ব্যবহারকারীর অভিজ্ঞতাই বাড়ায় না বরং আপনার অ্যাপ্লিকেশন ইন্টারফেসকে পরিষ্কার রাখে এবং ইন্টারঅ্যাকশনের প্রতিটি পর্যায়ে প্রাসঙ্গিক তথ্যের উপর দৃষ্টি নিবদ্ধ করে।
রিয়েলটাইম প্রিভিউ
আপনার ব্যবসায়িক প্রক্রিয়ার অগ্রগতি মূল্যায়ন করতে, আপনি সহজেই মধ্যবর্তী ফলাফলের পূর্বরূপ দেখতে পারেন:
- প্রথমে, বিজনেস প্রসেস এডিটরের মধ্যে Save & Exit বাটনে ক্লিক করুন। এই ক্রিয়াটি আপনার বর্তমান কর্মপ্রবাহ সংরক্ষণ করবে এবং ব্যবসায়িক প্রক্রিয়া সম্পাদককে বন্ধ করবে।
- অ্যাপ্লিকেশনটির সাথে মিথস্ক্রিয়া পরীক্ষা করার জন্য আপনার ওয়েব অ্যাপ্লিকেশনটির একটি রিয়েলটাইম পূর্বরূপ চালান যেন এটি লাইভ ছিল৷
- গণনা বোতামে ক্লিক করে কার্যকারিতা পরীক্ষা করুন।
আপনার ব্যবসার প্রক্রিয়া সঠিকভাবে সেট আপ করা হলে, আপনি গতিশীল প্রতিক্রিয়া দেখতে পাবেন: ইঙ্গিত সহ ধারকটি লুকানো হবে, এবং একই সাথে, ফলাফলগুলি প্রদর্শনকারী ধারকটি প্রকাশিত হবে৷
পরীক্ষার এই পদ্ধতিটি আপনার ব্যবসায়িক প্রক্রিয়াগুলি উদ্দেশ্য অনুযায়ী কাজ করছে তা নিশ্চিত করার জন্য একটি ব্যবহারিক এবং তাৎক্ষণিক উপায় অফার করে, যাতে আপনি আপনার আবেদন চূড়ান্ত করার আগে যেকোনো প্রয়োজনীয় সমন্বয় করতে পারবেন।
ডেটা রেন্ডারিং
একবার আপনি সফলভাবে আপনার আবেদনের যুক্তি পরীক্ষা করে ফেললে, আপনার ব্যবসার যুক্তিকে আরও পরিমার্জিত করার সময় এসেছে।
চূড়ান্ত ধাপে আপনার ওয়েব অ্যাপ্লিকেশনের ইন্টারফেসের মধ্যে গণনা করা ফলাফল প্রদর্শন করা জড়িত। আমরা আমাদের ব্যাকএন্ড ব্যবসায়িক প্রক্রিয়ার আউটপুট ডেটা আপনার ওয়েব অ্যাপ্লিকেশনের প্রাসঙ্গিক UI উপাদানগুলিতে ম্যাপ করব।
প্রদত্ত যে ব্যাকএন্ড থেকে ফলাফলগুলি পূর্বনির্ধারিত ক্রমে ফেরত দেওয়া হয়, আপনার কাজটি হল আপনার UI-তে সঠিক পাঠ্য ব্লক উপাদানের সাথে প্রতিটি ডেটা (অ্যারে উপাদান) সারিবদ্ধ করা।
ডেটা পরিচালনার জন্য, আমরা নিম্নলিখিত ব্লকগুলি ব্যবহার করব:
- অ্যারে এলিমেন্ট : ফলাফল অ্যারের মধ্যে পৃথক উপাদান অ্যাক্সেস করতে এগুলি ব্যবহার করুন। আপনার প্রতিটি সূচকের জন্য একটি ব্লকের প্রয়োজন হবে, 0 থেকে 4 পর্যন্ত।
- পাঠ্যে: যেহেতু আপনার ডেটা ফ্লোট ফরম্যাটে রয়েছে, তাই এই ফ্লোট মানগুলিকে প্রদর্শনের জন্য উপযুক্ত একটি পাঠ্য বিন্যাসে রূপান্তর করতে এই ব্লকটি ব্যবহার করুন।
- টেক্সট ব্লক আপডেট ডেটা: কনভার্ট করা টেক্সট ডেটা দিয়ে আপনার UI-তে টেক্সট ব্লকগুলিকে পপুলেট করার জন্য এই ব্লকটি অপরিহার্য।
এই ব্লকগুলি ফলাফল অ্যারে থেকে ডেটা বের করবে, ডেটাটিকে একটি পাঠ্য বিন্যাসে রূপান্তর করবে এবং তারপরে আপনার UI-তে সংশ্লিষ্ট পাঠ্য ব্লকগুলি আপডেট করবে।
এটি কীভাবে সেট আপ করবেন তা এখানে:
- এই ব্লকগুলি ক্যানভাসে রাখুন।
- অ্যারে এলিমেন্ট ব্লকে, আপনার এন্ডপয়েন্ট থেকে প্রাপ্ত অ্যারে ইনপুট করুন (0 থেকে শুরু করুন)।
- অ্যারের মধ্যে উপযুক্ত উপাদান লক্ষ্য করার জন্য সূচক সেট করুন।
- টু টেক্সট ব্লকে অ্যারে এলিমেন্টের আউটপুট মান সংযুক্ত করুন।
- আপনার UI উপাদানে পাঠ্য ব্লক আপডেট ডেটাতে উপাদান কীটি নির্দিষ্ট করুন যেখানে আপনি ডেটা প্রদর্শন করতে চান৷
- ক্রমানুসারে ব্লকগুলিকে সংযুক্ত করুন।
আপনি যে অ্যারে প্রদর্শন করতে চান তার প্রতিটি উপাদানের জন্য ব্লকের এই ক্রমটি নকল করুন। অ্যারের বিভিন্ন উপাদানের সাথে সামঞ্জস্য করতে প্রতিটি 'অ্যারে এলিমেন্ট' ব্লকে সূচী সামঞ্জস্য করুন।
নিশ্চিত করুন যে এই ব্লকগুলিও একটি ক্রম অনুসারে সংযুক্ত রয়েছে।
সর্বশেষ ফলাফল
এটি ব্যবসায়িক প্রক্রিয়া তৈরি সম্পূর্ণ করে।
আপনার ব্যবসা প্রক্রিয়া সংরক্ষণ করুন এবং পূর্বরূপ চূড়ান্ত ফলাফল পরীক্ষা করুন. যে স্থাপনা পরিকল্পনায় আপনি মডিউল 5 এ আপনার শেষ পয়েন্ট প্রকাশ করেছেন সেখানে একটি অ্যাপ্লিকেশন প্রিভিউ চালান।
🎉 অসাধারণ কৃতিত্বের জন্য অভিনন্দন!
আপনি সফলভাবে ব্যবসায়িক যুক্তি এবং একটি ইন্টারেক্টিভ ইউজার ইন্টারফেস সহ একটি সম্পূর্ণ কার্যকরী ওয়েব অ্যাপ্লিকেশন তৈরি করেছেন। যদি সবকিছু উদ্দেশ্য অনুযায়ী কাজ করে, আপনি এখন আপনার অ্যাপ্লিকেশন প্রকাশ করার এবং ব্যবহারকারীদের সাথে শেয়ার করার পরবর্তী চূড়ান্ত পদক্ষেপ নিতে প্রস্তুত৷
তবে যাত্রা এখানেই থেমে নেই। আপনার আবেদন আরও পরিমার্জিত করার যথেষ্ট সুযোগ রয়েছে! আপনি আপনার UI উপাদানগুলির চেহারা কাস্টমাইজ করে বা আপনার ওয়েব অ্যাপ্লিকেশন লজিক প্রসারিত করে ভিজ্যুয়াল আবেদন এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারেন। উদাহরণস্বরূপ, আপনি প্রয়োজনীয় ক্ষেত্রগুলি তৈরি করতে পারেন এবং প্রতিটি ইনপুট ম্যানুয়ালি সাফ না করে ক্ষেত্রগুলি পুনরায় সেট করতে একটি বোতাম যোগ করতে পারেন।