ক্র্যাশ কোর্স 101
10 মডিউল
5 সপ্তাহ

কর্মপ্রবাহ

অনুলিপি করতে ক্লিক করুন

ওয়েব-অ্যাপ্লিকেশন উপাদানের জন্য কর্মপ্রবাহ


এবং এখানে আমরা ওয়েব অ্যাপ্লিকেশন তৈরির মূল মুহুর্তে পেয়েছি। সর্বোপরি, আমরা এখন পর্যন্ত যা করেছি তা কেবল একটি ছবি তৈরি করা। বেশ সুন্দর, সম্ভবত, কিন্তু প্রায় অকেজো। এখন আমাদের মূল কাজটি করতে হবে। এটি পুনরুজ্জীবিত করুন, এবং আমাদের কর্মের একটি প্রতিক্রিয়া যোগ করুন।

এই কাজের জন্য প্রতিটি উপাদানের একটি Workflow ট্যাব আছে। এটিতে, আপনি ব্যবসায়িক প্রক্রিয়া তৈরি করতে পারেন এবং তাদের লঞ্চের জন্য শর্ত (ট্রিগার) সংজ্ঞায়িত করতে পারেন। Calculate বোতামের জন্য এমন একটি ব্যবসায়িক প্রক্রিয়া তৈরি করা যাক।


ট্রিগার

ব্যাকএন্ডের জন্য একটি ব্যবসায়িক প্রক্রিয়া তৈরি করার সময় আমরা মডিউল 4-এ যা দেখেছি তার মতোই একটি ব্যবসায়িক প্রক্রিয়া তৈরি করা। একটি সাধারণ ক্যানভাস রয়েছে, ব্লকগুলি সেখানে যোগ করা হয়েছে এবং তাদের মধ্যে সংযোগগুলি কর্মের ক্রম নির্ধারণ করে। একটি গুরুত্বপূর্ণ পার্থক্য হল যে ফ্রন্ট-এন্ড ওয়ার্কফ্লোতে একটি ব্যবসায়িক প্রক্রিয়া শুরু করার জন্য বিভিন্ন ব্লক রয়েছে। এই ট্রিগার যে ব্যবসা প্রক্রিয়া শুরু. ট্রিগারগুলি প্রতিটি উপাদানের জন্য আলাদা হতে পারে (একটি বোতামে একটি ক্লিক রয়েছে, একটি টেবিলে একটি ডেটা আপডেট রয়েছে এবং একটি তালিকায় কিছু বিকল্পের পছন্দ রয়েছে), তবে কাজের সাধারণ যুক্তি যে কোনও ক্ষেত্রে একই। একটি ইভেন্ট ঘটে এবং এই ইভেন্টটি সংশ্লিষ্ট ব্যবসায়িক প্রক্রিয়া শুরু করে।


আসুন একটি সাধারণ পরিকল্পনার সিদ্ধান্ত নেওয়া যাক। বোতামটি ক্লিক করলে আমাদের কী করতে হবে:

  • X এবং Y এর মানগুলি বের করুন। সংশ্লিষ্ট ইনপুট ক্ষেত্রগুলি থেকে সেগুলি পান৷
  • গণনার জন্য একটি এন্ডপয়েন্ট চালু করুন এবং এতে X এবং Y প্যারামিটার পাস করুন।
  • ফলাফলের ধারকটি দৃশ্যমান করুন।
  • প্রয়োজনীয় Label ক্ষেত্রগুলিতে গণনার ফলাফল রাখুন।

ব্যবসা প্রক্রিয়া ব্লক

প্রথম ধাপে একটি InputFloat Get Properties ব্লক প্রয়োজন। এটি উপাদানটির বর্তমান মানগুলি পড়ে, শুধুমাত্র ব্যবহারকারী যা প্রবেশ করেছে তা নয় বরং অন্যান্য সেটিংসও (উদাহরণস্বরূপ, উপস্থিতি সেটিংস বা মানগুলির অনুমোদিত পরিসীমা)। আমাদের Value পেতে হবে, ঠিক এতে ব্যবহারকারীর দ্বারা প্রবেশ করা ডেটা রয়েছে। প্রতিটি মান তার ইনপুট ক্ষেত্র থেকে এবং এর জন্য আমাদের দুটি ব্লক প্রয়োজন (X এর জন্য এবং Y এর জন্য)। তাদের মধ্যে, আপনাকে ইনপুটে Component ID মান নির্বাচন করতে হবে। আপনি যদি তৈরি করার সময় তাদের নাম উল্লেখ করতে ভুলবেন না, তবে প্রয়োজনীয় উপাদানটি খুঁজে পাওয়া এবং নির্বাচন করা কঠিন হবে না।


পরবর্তী ধাপ হল শেষ পয়েন্ট চালু করা। এখানেই ফ্রন্ট-এন্ড এবং ব্যাকএন্ডের মধ্যে সংযোগ ঘটে এবং গণনার কমান্ড ব্রাউজার থেকে সার্ভারে প্রেরণ করা হয়। আমাদের আবেদনের প্রতিটি শেষ পয়েন্ট একটি পৃথক ব্লক হিসাবে উপস্থাপিত হয়। আপনি শুধু আপনার প্রয়োজন একটি নির্বাচন এবং এটি সংযোগ করতে হবে. পঞ্চম মডিউল চলাকালীন এই এন্ডপয়েন্টটিকে একটি GET পদ্ধতি এবং একটি module4-basic URL বরাদ্দ করা হয়েছিল। এটি ব্লকের তালিকায় এই নামে থাকবে - Server request GET /module4-basic/

উপাদানগুলির বিপরীতে, এন্ডপয়েন্টগুলিকে তাদের Endpoint ID সেট করার প্রয়োজন নেই (এটি ডিফল্টরূপে সঠিকভাবে সেট করা আছে)। এটি শুধুমাত্র পূর্ববর্তী ধাপে প্রাপ্ত ইনপুট X এবং Y-তে প্রয়োগ করা প্রয়োজন।

পরবর্তী কাজ হল ফলাফল ধারক দৃশ্যমান করা। এটি করার জন্য, Container Update Properties ব্লক ব্যবহার করুন। ব্লকেই, পছন্দসই ধারকটির ID নির্বাচন করুন এবং Visible = true সেট করুন।


শেষ কাজটি করা বাকি হল অ্যারে থেকে 5টি ফলাফলের উপাদানগুলিকে ওয়েব অ্যাপ্লিকেশনের সংশ্লিষ্ট উপাদানগুলিতে বিতরণ করা। আমরা জানি যে ফলাফলটি সর্বদা একটি কঠোরভাবে সংজ্ঞায়িত ক্রমে আসা উচিত, তাই আমাদের কেবলমাত্র পছন্দসই সূচকের সাথে উপাদানটিকে ক্রমানুসারে বাছাই করতে হবে এবং Label উপাদানে এর মান নির্ধারণ করতে হবে। এটি করার জন্য, আমরা Array Element ব্লক ব্যবহার করি (0 থেকে 4 পর্যন্ত একটি সূচক সহ), toString ( Float ডেটাকে String -এ রূপান্তর করতে), এবং Label পাঠ্য পরিবর্তন করতে এবং ফলাফল প্রদর্শন করতে Label Update Properties ব্যবহার করি।


আপনি হয়তো লক্ষ্য করেছেন যে যেকোনো উপাদানের বৈশিষ্ট্যগুলি আপডেট করার জন্য দুটি ব্লক বিকল্প রয়েছে - Update Properties করুন এবং Set Properties ৷ তাদের মধ্যে পার্থক্যটি রেস্ট এপিআই-তে Patch এবং Put পদ্ধতির মতোই। প্রথমটি শুধুমাত্র সুনির্দিষ্টভাবে নির্দিষ্ট বৈশিষ্ট্যগুলিকে পরিবর্তন করে, যখন দ্বিতীয়টি সেগুলিকে ওভাররাইট করে।

সর্বশেষ ফলাফল

এটি ব্যবসায়িক প্রক্রিয়া তৈরি সম্পূর্ণ করে। আপনি চূড়ান্ত ফলাফল সংরক্ষণ, প্রকাশ এবং পরীক্ষা করতে পারেন।


যদি সবকিছু সঠিকভাবে করা হয়, তাহলে চূড়ান্ত ফলাফলটি এইরকম হওয়া উচিত:


Was this article helpful?
এখনও একটি উত্তর খুঁজছেন?
কমিউনিটিতে যোগ দিন