প্রতিক্রিয়াতে একটি সম্পাদনাযোগ্য রিয়েল-টাইম ডেটাগ্রিড তৈরি করুন

আপনি ডেটাগ্রিড ব্যবহার করতে এবং ডেটা ম্যানিপুলেট করতে পারেন। বেশিরভাগ ডেটা-চালিত অ্যাপ্লিকেশনগুলির মধ্যে এটি একটি গুরুত্বপূর্ণ কাজ।

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

এই নিবন্ধে, আমি আপনাকে কীভাবে প্রতিক্রিয়াতে একটি রিয়েল-টাইম ডেটাগ্রিড তৈরি করতে প্রতিক্রিয়া-টেবিল এবং হামনি সিঙ্ক ব্যবহার করব তা দেখাব।

প্রতিক্রিয়া-সারণী প্রতিক্রিয়াতে সারণী উপস্থাপনের জন্য একটি কমপ্যাক্ট এবং দ্রুত গ্রন্থাগার। এটি পৃষ্ঠাগুলি এবং অন্যান্য অনেক ফাংশন সমর্থন করে।

হামোনি সিঙ্ক হল একটি রিয়েল-টাইম স্ট্যাটাস সিঙ্ক্রোনাইজেশন পরিষেবা যা আপনাকে আপনার অ্যাপ্লিকেশন স্থিতিকে রিয়েল টাইমে সিঙ্ক্রোনাইজ করতে দেয়। আমি আপনাকে দেখাব যে কীভাবে মানুষের প্রথম এবং শেষ নামগুলির একটি ডেটাগ্রিড তৈরি করতে হয়।

আপনি যদি জড়িত থাকতে চান তবে আপনার প্রতিক্রিয়া সম্পর্কে কিছুটা জ্ঞান থাকা উচিত এবং নিম্নলিখিত সরঞ্জামগুলি ইনস্টল করা উচিত:

  1. নোডজেএস
  2. এনএমপি এবং এনপিএক্স আপনি যদি এনএমপি সংস্করণ 5.2.0 বা ততোধিক সংস্করণ ইনস্টল করে থাকেন, তবে এনপিএক্স এনপিএম সহ একসাথে ইনস্টল করা হবে।
  3. তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশন

প্রতিক্রিয়া অ্যাপ্লিকেশন তৈরি করুন

প্রথমে আমরা তৈরি-প্রতিক্রিয়া-অ্যাপ দিয়ে একটি নতুন প্রতিক্রিয়া প্রকল্প তৈরি করি।

কমান্ড লাইনটি খুলুন এবং এনপিএক্স-তৈরি করুন-প্রতিক্রিয়া-অ্যাপ রিয়েলটাইম-রিঅ্যাক্ট-ডেটাটেবল start এটি আমাদের জন্য একটি নতুন ডিরেক্টরি তৈরি করে একটি প্রতিক্রিয়া অ্যাপ্লিকেশন বুট করবে যা একটি প্রতিক্রিয়া অ্যাপ্লিকেশন তৈরি করতে প্রয়োজনীয় ফাইলগুলি সহ রিয়েল টাইমে পুনরায় সক্রিয় করা যেতে পারে।

প্রতিক্রিয়া অ্যাপটি তৈরি হওয়ার পরে, আমাদেরকে বিক্রিয়া সারণী এবং হামনি সিঙ্ক ইনস্টল করতে হবে। কমান্ড লাইনে, অ্যাপটির ডিরেক্টরিতে পরিবর্তন করতে সিডি রিয়েলটাইম-রিঅ্যাক্ট-ডেটাটেবল চালান। উভয় প্যাকেজ ইনস্টল করার জন্য কমান্ড লাইন থেকে এনপিএম আই রিঅ্যাক্ট-টেবিল হমনি-সিঙ্ক করুন Run

ডেটাগ্রিড রেন্ডার করুন

ডেটাগ্রিড রেন্ডার করার জন্য আমরা রিএ্যাক্ট টেবিল উপাদানটি ব্যবহার করব। Src / App.js ফাইলটি খুলুন এবং নিম্নলিখিত কোড সহ এটি আপডেট করুন:

আমদানি প্রতিক্রিয়া, "প্রতিক্রিয়া" থেকে {উপাদান}; "./Logo.svg" থেকে লোগো আমদানি করুন; আমদানি "./app.css"; // আমদানি প্রতিক্রিয়া টেবিল "রিঅ্যাক্ট-টেবিল" থেকে আমদানি রিঅ্যাক্টেবল; আমদানি করুন "প্রতিক্রিয়া-টেবিল / প্রতিক্রিয়া-টেবিল.css"; // আমদানি হামনি সিঙ্ক "হামোনি-সিঙ্ক" থেকে হামনি আমদানি করুন;
শ্রেণি অ্যাপ্লিকেশনটি উপাদান {নির্মাতা () {সুপার () প্রসারিত করে; this.state = {ডেটা: [], প্রথম নাম: "", শেষ নাম: ""}; }
হ্যান্ডেলচেন্জ = ইভেন্ট => {যদি (ইভেন্ট.target.name === "প্রথম নাম") this.setState ({firstName: ইভেন্ট.target.value}); যদি (ইভেন্ট.তারেজেট.নেম === "শেষ নাম") this.setState ({lastName: ইভেন্ট.target.value}); };
হ্যান্ডেল সাবমিট = ইভেন্ট => {ইভেন্ট.প্রিভেন্টডেফল্ট (); };
রেন্ডারএটেটেবল = সেলআইএনফো => {রিটার্ন ( {কনট ডাটা = [... এটি.স্টেট.ডেটা]; ডেটা [cellInfo.index] [cellInfo.column.id] = e.target.innerHTML; this.setState ({ডেটা}); }} বিপজ্জনকভাবে সেটআইনারএইচটিএমএল = {{__html: this.state.data [সেলআইএনফো.ইন্ডেক্স] [সেলআইফোন.ক্লোম.আইডি]}} />); };
রেন্ডার () {const {ডেটা} = this.state;
ফিরে ( প্রতিক্রিয়া জানাতে স্বাগতম একটি নতুন রেকর্ড যুক্ত করুন   
( )}]} defaultPageSize = {10} ClassName = "- ডোরাকাটা চিহ্নিতকরণ" /> ); }}
রপ্তানি স্ট্যান্ডার্ড অ্যাপ্লিকেশন;

উপরের কোডটি একটি ফর্ম এবং একটি সম্পাদনাযোগ্য প্রতিক্রিয়া টেবিল উপাদান রেন্ডার করে। ডেটা, কলাম এবং ডিফল্ট পেজসাইজ প্রপস সহ একটি উপাদান সরবরাহ করে। ডেটা সমর্থন করে ডেটা প্রদর্শিত হতে পারে এবং কলাম সংজ্ঞা জন্য কলাম সমর্থন করে। কলাম প্রপসগুলিতে সম্পত্তি অ্যাক্সেসর সম্পত্তিটি নির্দিষ্ট করে যা এই কলামটির জন্য প্রদর্শিত মান রয়েছে। সেল: কলাম শিরোনামে এই.রেেন্ডার সম্পাদনযোগ্য বৈশিষ্ট্য প্রতিক্রিয়া সারণিকে বলে যে কলামটি সম্পাদনযোগ্য। অন্যান্য ফাংশনগুলির সাথে (হ্যান্ডেল সাবমিট এবং হ্যান্ডেল চেঞ্জ) আপনি পৃষ্ঠায় ফর্মটি থেকে নতুন ডেটা প্রবেশ করতে পারেন।

হামোনি সিঙ্ক যুক্ত করুন

ডেটাগ্রিডের ডেটা হামনি সিঙ্ক ব্যবহার করে রিয়েল টাইমে অ্যাক্সেস করা এবং আপডেট করা হয়। আমরা ইতিমধ্যে অ্যাপ.জেএস এর 18 লাইনে হামনি লাইব্রেরি আমদানি করেছি

"হোমনি-সিঙ্ক" থেকে হমনিকে আমদানি করুন;

আমাদের এটি আরম্ভ করতে হবে এবং হামোনি সার্ভারে সংযুক্ত করতে হবে। এর জন্য আমাদের একটি অ্যাকাউন্ট এবং একটি অ্যাপ্লিকেশন আইডি দরকার। হামনিতে একটি অ্যাপ্লিকেশন তৈরি করতে এই পদক্ষেপগুলি অনুসরণ করুন।

  1. হামনি ড্যাশবোর্ডটিতে নিবন্ধ করুন এবং লগ ইন করুন
  2. পাঠ্য বাক্সে আপনার পছন্দসই অ্যাপ্লিকেশন নামটি প্রবেশ করুন এবং তৈরি বোতামটি ক্লিক করুন। এটি অ্যাপ্লিকেশন তৈরি করা উচিত এবং অ্যাপ্লিকেশন তালিকা বিভাগে উপস্থিত হওয়া উচিত।
  3. আপনার অ্যাকাউন্টের আইডি দেখতে অ্যাকাউন্ট আইডিআইডি বোতামটি ক্লিক করুন।

হামনি সিঙ্ক সার্ভারটি আরম্ভ করার জন্য এবং সংযোগ স্থাপনের জন্য নিম্নলিখিত কোডগুলি অ্যাপ্লিকেশনগুলিতে যুক্ত করুন।

উপাদানডিডমাউন্ট () {আসুন হামোনি = নতুন হামোনি ("ACCOUNT_ID", "APP_ID");
hamoni। সংযোগ () .থেন (() =>
;) .ক্যাচ (কনসোল.লগ); }

উপরের কোড সহ ক্লায়েন্ট ডিভাইস বা ব্রাউজারটি হামনি সিঙ্ক সার্ভারের সাথে সংযুক্ত রয়েছে। ড্যাশবোর্ড থেকে আপনার অ্যাকাউন্ট এবং অ্যাপ্লিকেশন আইডি অনুলিপি করুন এবং প্রতিটি স্ট্রিং প্লেসহোল্ডারের সাথে প্রতিস্থাপন করুন।

সার্ভারের সাথে সংযোগ সফল হলে কার্যকর করা হবে তখন () ব্লকটিতে ফাংশনে নিম্নলিখিতটি যুক্ত করুন:

hamoni .get ("ডেটাগ্রিড") .পরে (listPrimitive =>। this.listPrimitive = listPrimitive;
this.setState ({ডেটা: [... listPrimitive.getAll ()]});
listPrimitive.onItemAdded (আইটেম => {this.setState ({তথ্য: [... this.state.data, item.value]});}););
listPrimitive.onItemUpdated (আইটেম => {তথ্য = দিন [... this.state.data.slice (0, item.index), আইটেমের মান, ... this.state.data.slice (আইটেম.ইন্ডেক্স + 1)] ;
this.setState ({ডেটা: ডেটা;); });
listPrimitive.onSync (তথ্য => {this.setState ({ডেটা: ডেটা});}); ;) .ক্যাচ (কনসোল.লগ);

উপরের কোডটি ডেটা পেতে hamoni.get ("ডেটাগ্রিড") কল করে, যেখানে ডেটাগ্রিড হ্যামনি সিঙ্কে অ্যাপ্লিকেশন স্টেটের নাম। হামোনি সিঙ্ক আপনাকে তিন ধরণের স্থিতি সংরক্ষণ করতে দেয়, যাকে সিঙ্ক প্রিমিটিভস বলা হয়। তুমি:

  1. বেস মান: এই ধরণের স্থিতিতে স্ট্রিং, বুলিয়ান মান বা সংখ্যা হিসাবে ডেটা ধরণের দ্বারা প্রতিনিধিত্ব করা সহজ তথ্য থাকে। এটি অপঠিত বার্তা, টগলিং ইত্যাদির মতো ক্ষেত্রে সবচেয়ে ভাল কাজ করে
  2. অবজেক্ট-আদিম: অবজেক্টের স্ট্যাটাস এমন স্ট্যাটাসগুলি উপস্থাপন করে যা জাভাস্ক্রিপ্ট অবজেক্ট হিসাবে মডেল করা যায়। একটি উদাহরণ ব্যবহার গেমের ফলাফল সংরক্ষণ করতে পারে।
  3. প্রাথমিক আদিম তালিকা: স্থিতি বস্তুর একটি তালিকা রয়েছে। একটি স্থিতি বস্তু একটি জাভাস্ক্রিপ্ট অবজেক্ট। তালিকার সূচকের ভিত্তিতে আপনি কোনও আইটেম আপডেট করতে পারবেন।

যদি স্থিতি উপলব্ধ থাকে তবে তা সমাধান হয়ে যায় এবং আদিম স্থিতি অবজেক্টের সাথে প্রতিশ্রুতি দেয়। এই অবজেক্টটি আমাদেরকে স্থিতি আপডেট করার এবং রিয়েল-টাইম স্থিতির আপডেট পাওয়ার জন্য পদ্ধতিগুলিতে অ্যাক্সেস দেয়।

লাইনে 36 এ, আমরা ডেটা পেতে getAll () পদ্ধতিটি ব্যবহার করে এবং প্রতিক্রিয়া উপাদানটির জন্য স্থিতি সেট করি। আইটেম যুক্ত করা বা আপডেট করা হলে আপডেট পেতে অনআইটেমএডেড () এবং অন আইটেম আপডেটেড () পদ্ধতিগুলিও ব্যবহার করা হয়। অনসাইক () পদ্ধতিটি এমন দৃশ্যে কার্যকর যেখানে কোনও ডিভাইস বা ব্রাউজার সংযোগ বিচ্ছিন্ন হয়ে যায় এবং যখন এটি পুনরায় সংযোগ করে তখন সার্ভার থেকে সর্বশেষতম স্থিতি পাওয়ার চেষ্টা করে এবং স্থানীয় স্থিতিটি যদি থাকে তবে তা আপডেট করে।

আইটেমগুলি যুক্ত এবং আপডেট করুন

পূর্ববর্তী বিভাগে আমরা ডেটাগ্রিডের জন্য ডেটা পেতে পারি এবং কোনও আইটেম যুক্ত করা বা আপডেট করা হলে স্থিতি আপডেট করতে পারি। আসুন নতুন আইটেম যুক্ত করতে কোড যুক্ত করুন এবং একটি কলাম সম্পাদনা করা হলে একটি আইটেম আপডেট করুন। হ্যান্ডেল সাবমিট পদ্ধতিতে নিম্নলিখিত কোডটি যুক্ত করুন:

হ্যান্ডেল সাবমিট = ইভেন্ট => {this.listPrimitive.push ({প্রথম নাম: this.state.firstName, শেষ নাম: this.state.lastName}); this.setState ({firstName: "", সর্বশেষ নাম: ""}); ইভেন্ট.প্রিভেন্টডেফল্ট (); };

এই কোডটি ফর্মটি থেকে প্রথম এবং শেষ নামটি পায় এবং এটি পুশ () পদ্ধতিতে কল করে হামোনি সিঙ্কের তালিকার স্থিতিকালীন তালিকায় যুক্ত করে। এটি on_Ittemadded () পদ্ধতিটি ট্রিগার করে।

আইটেমগুলি ডেটাগ্রিডে সম্পাদিত হওয়ার সাথে সাথে আপডেট করার জন্য, আমরা নীচে line৪ লাইনে অনব্লুর প্রপসে ফাংশনটি আপডেট করব:

onBlur = {e => {সারিটি = this.state.data [cellInfo.index]; সারি [cellInfo.column.id] = e.target.innerHTML; this.listPrimitive.update (cellInfo.index, সারি); }}

এই কোডটি সূচীতে আইটেমটি আপডেট করে যা সেলআইএনফো অবজেক্ট থেকে প্রাপ্ত হয়েছিল। হামোনি সিঙ্কে একটি তালিকা স্থিতি আদিম আপডেট করতে, উপাদানটির সূচক এবং আপডেট হওয়া মানটির সাথে আপডেট () পদ্ধতিতে কল করুন। রেন্ডারএটেটেবল পদ্ধতিটি এখন শেষ পরিবর্তনের পরে দেখতে এইরকম হওয়া উচিত:

রেন্ডারএটেটেবল = সেলআইএনফো => {রিটার্ন ( {চলুন সারি = this.state.data [সেলআইএনফো.ইন্ডেক্স]; সারি [cellInfo.column.id] = e.target.innerHTML; this.listPrimitive.update (cellInfo.index, সারি); }} বিপজ্জনকভাবে সেটআইনারএইচটিএমএল = {{__html: this.state.data [সেলআইএনফো.ইন্ডেক্স] [সেলআইফোন.ক্লোম.আইডি]}} />); };

এই মুহুর্তে, আমাদের কাছে ডেটাগ্রিডে রেন্ডার করা প্রাথমিক ডেটা বাদে অ্যাপ্লিকেশন চালাতে লাগে প্রায় সমস্ত কিছুই।

আমাদের রাষ্ট্রটি তৈরি করতে হবে এবং এটিকে হামনি সিঙ্কে কিছু তথ্য দিতে হবে। আপনার কার্যনির্বাহী ডিরেক্টরিটির মূলটিতে একটি নতুন সিড.জেএস ফাইল যুক্ত করুন এবং নিম্নলিখিত কোডটি যুক্ত করুন:

কনস্ট হামনি = আবশ্যক ("hamoni-sync");
হামোনি = নতুন হামনি ("অ্যাকাউন্টআইডি", "অ্যাপ্লিকেশন_আইডি") দিন;
hamoni .verbinden () .পথ (প্রতিক্রিয়া => {hamoni .createList ("ডেটাগ্রিড", [{প্রথম নাম: "জেমস", শেষ নাম: "ডারউইন"}, {প্রথম নাম: "জিমি", শেষ নাম: "আগস্ট"}]) .ঠিন (() => কনসোল.লগ ("সাফল্য তৈরি করুন")) কেচ (কনসোল.লগ);}) .ক্যাচ (কনসোল.লগ);

এটি হামনি সিঙ্কে ডেটাগ্রিড নামে একটি আদি তালিকা তালিকা তৈরি করে। আপনার অ্যাকাউন্ট এবং অ্যাপ্লিকেশন আইডি দিয়ে অ্যাকাউন্টআইডি এবং অ্যাপ্লিকেশন_আইডি স্ট্রিংগুলি প্রতিস্থাপন করুন। কমান্ড লাইনটি খুলুন এবং बीज.js নোডটি চালান। এটি সফল হওয়া উচিত এবং একটি সাফল্যের বার্তা প্রদর্শন করা উচিত।

এখন আমরা প্রতিক্রিয়া অ্যাপ্লিকেশন চালু করতে পারি এবং আমাদের অ্যাপ্লিকেশনটি কার্যকর অবস্থায় দেখতে পারি! কমান্ড লাইন থেকে এনপিএম স্টার্ট কমান্ডটি চালান এবং অ্যাপ্লিকেশনটি আপনার ডিফল্ট ব্রাউজারে খোলা হবে।

হুররে! পৃষ্ঠাগুলি সহ আমাদের একটি রিয়েল-টাইম সম্পাদনাযোগ্য ডেটাগ্রিড রয়েছে!

উপসংহার

প্রতিক্রিয়া-সারণী এবং হামনি সিঙ্কের সাহায্যে আমরা প্রতিক্রিয়াটিতে একটি রিয়েল-টাইম ডেটাগ্রিড তৈরি করেছি। প্রতিক্রিয়া-সারণী-শক্তি দিয়ে ডেটাগ্রিড এবং হামনি সিঙ্কটি ডেটাগ্রিডের স্থিতি প্রক্রিয়া করে। এই সমস্ত কিছু কোডের কয়েকটি লাইন এবং রিয়েল-টাইম স্থিতি যুক্তির নকশায় কম পরিশ্রমে অর্জন করা হয়েছিল। আমরা গিটহাবের উপর যা তৈরি করেছি তা থেকে আপনি সমাপ্ত অ্যাপটি পেতে পারেন। বর্তমানে কোন ঘরটি সম্পাদনা করা হচ্ছে তার ট্র্যাক রাখতে পারেন বা অন্য ব্যবহারকারীর দ্বারা সম্পাদিত কক্ষগুলি লক করতে পারেন। আমি এটি আপনার জন্য একটি সাপ্তাহিক হ্যাক হিসাবে ছেড়ে দেব।

কোনও লক যুক্ত করা বা বর্তমানে সম্পাদিত হওয়া ঘরগুলি হাইলাইট করতে কোনও বিভ্রান্তি বা সমস্যা থাকলে আপনি সর্বদা একটি মন্তব্য দিতে পারেন leave

শুভ কোডিং