ক্রেডিস এর সাথে রেলে অনায়াসে ক্ষণস্থায়ী UI স্টেট সঞ্চয় করুন

Kredis (Keyed Redis) হল রেল ডেভেলপারের টুলকিটে সাম্প্রতিক সংযোজন। এটি Redis-এ স্ট্রাকচার্ড ডেটা সঞ্চয় এবং অ্যাক্সেস সহজ করার চেষ্টা করে।

দুই পর্বের সিরিজের এই প্রথম অংশে, আমরা ক্রেডিস কীভাবে কাজ করে তা নিয়ে শুরু করব। তারপরে আমরা একটি বেসপোক রেডিস কী ব্যবহার করে ক্ষণস্থায়ী UI অবস্থা সংরক্ষণের জন্য একটি উদাহরণ ব্যবহারের ক্ষেত্রে চালাব৷

চলুন শুরু করা যাক!

রেলগুলির জন্য ক্রেডিসের একটি ভূমিকা

Kredis হল একটি Railtie যেটি তিনটি উপায়ে এর ব্যবহারকে স্ট্রীমলাইন করার জন্য সুবিধাজনক র‍্যাপার প্রদান করে:

• Ruby-esque API :যেমন Kredis.list সংগ্রহের ধরন অথবা Kredis.set যতটা সম্ভব নেটিভ রুবি প্রকারগুলি (এবং তাদের নিজ নিজ API) অনুকরণ করুন৷
• টাইপিং :সংগ্রহের জন্য বিশেষভাবে সুবিধাজনক, ক্রেডিস স্ট্যান্ডার্ড ডেটা টাইপ থেকে/তে উপাদানগুলিকে টাইপ কাস্টিং পরিচালনা করতে পারে (যেমন, datetime , json )।
• ActiveRecord DSL :সম্ভবত লাইব্রেরির সবচেয়ে বড় সম্পদ, এটি আপনাকে নির্দিষ্ট মডেল ইন্সট্যান্সের সাথে যেকোনো Redis ডেটা স্ট্রাকচার সহজেই সংযোগ করতে দেয়। .

এখানে README থেকে একটি উদাহরণ:

ক্রেডিস এর প্রধান সুবিধা হল এটি একটি নির্দিষ্ট রেকর্ডের সাথে যুক্ত ক্ষণস্থায়ী তথ্য সংরক্ষণ করার সহজতা প্রদান করে, তবে সেশন থেকে স্বাধীন . সাধারণত, যখন আপনাকে রেলে ডেটা বজায় রাখার প্রয়োজন হয়, তখন আপনার কাছে কয়েকটি বিকল্প থাকে — যার মধ্যে দুটি সবচেয়ে সাধারণ হল:

• ActiveRecord :বেশিরভাগ ক্ষেত্রে, এর জন্য একটি কলাম যোগ করা বা অন্যথায় আপনার ডেটা মডেল প্যাচ করা প্রয়োজন। একটি মাইগ্রেশন প্রয়োজন, সাথে পুরানো রেকর্ডের ঐচ্ছিক ব্যাকফিলিং।
• সেশন :প্রতিটি Rails অ্যাপের ডিফল্ট কী/মান সঞ্চয় এবং কোনো বা সামান্য সেটআপের প্রয়োজন নেই। খারাপ দিক হল এতে সংরক্ষিত ডেটা লগইন/লগআউট চক্রে টিকে থাকে না।

ক্রেডিস টেবিলে একটি তৃতীয় বিকল্প নিয়ে আসে। মডেলটিতে ডিএসএল আহ্বান করা ছাড়াও সামান্য সেটআপ প্রয়োজন। কিন্তু যদি না আপনার Redis ইনস্ট্যান্স কমে যায়, আপনার ডেটা সেশন, এমনকি ডিভাইস জুড়ে সংরক্ষণ করা হয়। তাই ক্রেডিস-এর জন্য একটি ভাল ব্যবহারের ক্ষেত্রে হল অ-সংবেদনশীল তথ্য যা আপনি ডিভাইসের সীমানা জুড়ে শেয়ার করতে চান, যেমন, একটি ওয়েব অ্যাপ এবং একটি সহযোগী মোবাইল অ্যাপে।

কেস স্টাডি:ক্রেডিস ব্যবহার করে একটি সঙ্কুচিত/প্রসারিত UI অবস্থা বজায় রাখুন এবং পুনরুদ্ধার করুন

ক্রেডিসের জন্য একটি ভাল ব্যবহারের ক্ষেত্রে একটি সাধারণ উদাহরণ হল যখন UI অবস্থা বজায় থাকে, যেমন:

• সাইডবার খোলা/বন্ধ অবস্থা
• ট্রি ভিউ খোলা/বন্ধ অবস্থা
• অ্যাকর্ডিয়ন ভেঙে পড়া/প্রসারিত অবস্থা
• কাস্টম ড্যাশবোর্ড লেআউট
• ডেটা টেবিলের কত লাইন প্রদর্শন করতে হবে

দৃষ্টান্তমূলকভাবে, আমরা একটি <details> এর ধসে পড়া/প্রসারিত অবস্থা কীভাবে পরিচালনা করব তা দেখব। উপাদান।

চলুন একটি নতুন Rails অ্যাপ দিয়ে শুরু করা যাক, kredis যোগ করুন বান্ডেলে, এবং এর ইনস্টলার চালান:

দ্রষ্টব্য: এটি config/redis/shared.yml-এ একটি Redis কনফিগারেশন ফাইল তৈরি করবে .

এই নিবন্ধের বাকি অংশের জন্য, আমি ধরে নেব যে আপনার কাছে একটি স্থানীয় চলমান Redis উদাহরণ রয়েছে। হোমব্রু সহ macOS-এ, এটি চালানোর মতোই সহজ:

আপনার অপারেটিং সিস্টেমে কীভাবে রেডিস ইনস্টল করবেন সে সম্পর্কে তথ্যের জন্য অনুগ্রহ করে অফিসিয়াল "শুরু করা" নির্দেশিকা দেখুন৷

ব্যবহারকারীর প্রমাণীকরণ

আমরা একটি User ব্যবহার করতে যাচ্ছি UI রাজ্যের তথ্য সংরক্ষণ করার জন্য সত্তা হিসাবে মডেল। এখানে বাইকশেডিং এড়াতে, চলুন বাক্সের বাইরে ডিভাইস যা প্রদান করে তা ব্যবহার করা যাক:

তারপরে আমরা রেল কনসোলে একটি উদাহরণ ব্যবহারকারী তৈরি করি:

আমাদের উদাহরণ অ্যাপ:একটি অনলাইন স্টোর

ক্রেডিস কীভাবে একটি জটিল গাছের কাঠামোর অবস্থা বজায় রাখতে সাহায্য করতে পারে তা বোঝাতে, আসুন আমরা একটি অনলাইন ডিপার্টমেন্টাল স্টোর চালাচ্ছি। এই লক্ষ্যে, আমরা Department ভারা করব এবং Product মডেল একটি দ্বি-স্তরের নেস্টেড কাঠামো তৈরি করতে আমরা বিভাগ থেকে বিভাগে একটি স্বয়ং যোগদান অন্তর্ভুক্ত করি:

আমাদের অবশ্যই শূন্য পিতামাতার অনুমতি দিতে হবে, আমাদের গাছের গঠন শিকড়ের জন্য অনুমতি দিতে হবে:

আমাদের Department এবং Product মডেলগুলিকে এইভাবে সংজ্ঞায়িত করা হয়েছে:

অবশেষে, আমরা কিছু বীজ ডেটা তৈরি করতে ফেকার ব্যবহার করি:

একটি দোকানের সামনে ভারা

আমরা একটি খুব সহজ HomeController তৈরি করব যেটি আমাদের দোকানের স্টোরফ্রন্ট হিসেবে কাজ করবে।

আমরা ডিপার্টমেন্টের বাচ্চাদের সাথে একটি স্বয়ং যোগদান করি শুধুমাত্র সেগুলিকে পুনরুদ্ধার করার জন্য যাদের প্রকৃতপক্ষে উপ-বিভাগ আছে (বা অন্য কথায়, আমাদের গাছের শিকড়):

ইনডেক্স ভিউতে, আমরা <details> এর দুটি স্তর ব্যবহার করে একটি নেস্টেড ট্রি ভিউ সেট আপ করি আমাদের বিভাগের জন্য উপাদান:

এই মুহূর্তে আমাদের কাছে ইচ্ছাকৃতভাবে মূর্খ পণ্যের নাম সহ বিভাগগুলির একটি ট্রি ভিউ আছে যা আমরা খোলা এবং বন্ধ করে অন্বেষণ করতে পারি:

আমরা পৃথক বিভাগগুলির প্রকাশের অবস্থা বজায় রাখতে চাই, যা আমরা পরবর্তীতে প্রবণতা করব৷

ক্রেডিস-এ ক্যাটাগরির UI অবস্থা স্থির

ধাপে ধাপে আমরা যা করতে যাচ্ছি তা এখানে:

1. একটি kredis_set যোগ করুন open_department_ids বলা হয় User-এ মডেল আমরা এখানে একটি সেট ব্যবহার করার কারণ হল এটি সদৃশগুলিকে অনুমতি দেয় না, তাই আমরা নিরাপদে আমাদের বিভাগগুলি যোগ করতে এবং সরাতে পারি৷

2. একটি UIStateController তৈরি করুন যেটি নিম্নলিখিত প্যারামগুলি পাবে:

   • department_id
   • open সেই বিভাগের অবস্থা

   এটি তারপর এই বিভাগটিকে kredis_set-এ যোগ করবে বা সরিয়ে দেবে বর্তমানে লগ ইন করা ব্যবহারকারীর জন্য।

3. একটি উদ্দীপক নিয়ামক তৈরি করুন যা বিশদ উপাদানে টগল ইভেন্টের জন্য শুনবে এবং সংশ্লিষ্ট পেলোডের উপর পাঠাবে।

আসুন এটিতে প্রবেশ করি!

User এ ক্রেডিস ডেটা স্ট্রাকচার যোগ করা হচ্ছে মডেল kredis_set কল করার মতোই সহজ৷ এবং একটি শনাক্তকারী পাস করা:

এরপর, আমরা একটি UIStateController তৈরি করি UI অবস্থার আপডেট পেতে। মনে রাখবেন যে আমাদের তৈরি করা রুটটিকে একটি patch হতে কনফিগার করতে হবে শেষ বিন্দু:

ক্রেডিস এপিআই-এর সাথে আমাদের প্রথম সাক্ষাৎ কন্ট্রোলারে। আমরা দেখতে পাচ্ছি যে এটি যতটা সম্ভব রুবি বিকাশকারীদের প্রত্যাশার সাথে সামঞ্জস্য করার চেষ্টা করে, তাই আপনি << ব্যবহার করে সেটে যোগ করতে পারেন , এবং remove ব্যবহার করে মুছুন .

এখানে যা ঘটছে তা হল আমরা একটি নির্দিষ্ট department_id এর উপস্থিতি টগল করি সেটে open এর উপর ভিত্তি করে ক্লায়েন্টের কাছ থেকে প্যারাম হস্তান্তর করা হচ্ছে। ছবি সম্পূর্ণ করতে, এই UI অবস্থার পরিবর্তনগুলি প্রেরণ করার জন্য আমাদের অবশ্যই কিছু ক্লায়েন্ট-সাইড কোড লিখতে হবে।

আমরা @rails/request.js ব্যবহার করতে যাচ্ছি ক্রিয়া সম্পাদন করতে, তাই আমাদের এটি পিন করতে হবে:

একটি নতুন স্টিমুলাস কন্ট্রোলারে যা আমরা একটি নির্দিষ্ট <details> এর সাথে সংযুক্ত করব উপাদান, আমরা বিভাগ আইডি এবং এর open যোগ করি একটি FormData এ রাজ্য বস্তু, এবং এটি জমা দিন:

আমরা প্রস্তাবিত হিসাবে আমাদের ভিউ কোড সম্পাদনা করি এবং toggle শুনি প্রতিটি <details> এর ইভেন্ট UI স্টেট আপডেট ট্রিগার করার উপাদান:

DOM ম্যানুয়ালি রিহাইড্রেট করুন

সম্পূর্ণ বৃত্তে যাওয়ার জন্য অনুপস্থিত একমাত্র উপাদান হল রিহাইড্রেটিং ব্যবহারকারী পৃষ্ঠাটি রিফ্রেশ করার পরে আমাদের DOM পছন্দসই অবস্থায়। আমরা open যোগ করে ম্যানুয়ালি এটি করি <details>-এর বৈশিষ্ট্য নোড (যদি এর ডিপার্টমেন্ট আইডি ক্রেডিস সেটে থাকে):

অবশেষে, এখানে ফলাফল. মনে রাখবেন যে পৃথক ট্রি নোডের খোলা/বন্ধ অবস্থা 2 স্তরের উপরে সংরক্ষিত হয়:

পরবর্তী:UI রাজ্যের জন্য একটি সাধারণ ব্যবহারকারী-স্থানীয় ধারক

এই দুই-অংশের সিরিজের প্রথম অংশে, আমরা ক্রেডিসকে পরিচয় করিয়ে দিয়েছি এবং ক্রেডিস-এর সাথে কীভাবে একটি ধসে পড়া/প্রসারিত UI অবস্থা বজায় রাখা যায় এবং পুনরুদ্ধার করা যায় তা অনুসন্ধান করেছি।

DOM কে ম্যানুয়ালি রিহাইড্রেট করার আগে ক্রেডিস কীভাবে একটি জটিল গাছের কাঠামোর অবস্থা বজায় রাখতে পারে তা হাইলাইট করার জন্য আমরা একটি অনলাইন ডিপার্টমেন্টাল স্টোরের উদাহরণ ব্যবহার করেছি৷

যাইহোক, এর মানে এই যে আমাদের প্রচুর ক্রেডিস কী উদ্ভাবন করতে হবে। পরের বার, আমরা UI রাজ্যের জন্য একটি সাধারণ ব্যবহারকারী-স্থানীয় কন্টেনার দিয়ে কীভাবে এটিকে মোকাবেলা করতে পারি তা নিয়ে আলোচনা করব৷

ততক্ষণ পর্যন্ত, খুশি কোডিং!

পি.এস. আপনি যদি রুবি ম্যাজিক পোস্টগুলি প্রেস থেকে বের হওয়ার সাথে সাথে পড়তে চান তবে আমাদের রুবি ম্যাজিক নিউজলেটারে সাবস্ক্রাইব করুন এবং একটি পোস্ট মিস করবেন না!