রেলের সাথে হটওয়্যার ব্যবহার করা

আপনি যদি কোন জাভাস্ক্রিপ্ট কোড না লিখে পৃষ্ঠার পরিবর্তন এবং ফর্ম জমা দেওয়ার গতি বাড়ানো এবং জটিল পৃষ্ঠাগুলিকে উপাদানগুলিতে ভাগ করার উপায় খুঁজছেন, এই পোস্টটি আপনাকে হটওয়্যারের সাথে রেলগুলিকে পরবর্তী স্তরে নিয়ে যেতে সাহায্য করবে৷ এই নিবন্ধটি আপনাকে সার্ভার-সাইড রেন্ডারিংয়ের জন্য একটি টুল ব্যবহার করতে শেখাবে৷

হটওয়্যার কি?

হটওয়্যার তারের উপর JSON এর পরিবর্তে HTML পাঠিয়ে জাভাস্ক্রিপ্ট না লিখে আধুনিক ওয়েব অ্যাপ্লিকেশন তৈরি করার একটি উপায় প্রদান করে, যা পৃষ্ঠাগুলিকে দ্রুত লোড করে। এটি সার্ভার-সাইডে রেন্ডারিং বজায় রাখে এবং একটি সহজ এবং আরও বেশি উত্পাদনশীল বিকাশের অভিজ্ঞতার জন্য অনুমতি দেয়, কারণ রেল সর্বদা একটি প্রথাগত একক-পৃষ্ঠা অ্যাপ্লিকেশন (SPA) এর সাথে সম্পর্কিত গতি বা প্রতিক্রিয়াশীলতাকে ত্যাগ না করেই এর প্রযুক্তিগুলির মধ্যে অন্তর্ভুক্ত করেছে৷

Hotwire এর মূল হল Turbo রত্ন। এটি পরিপূরক কৌশলগুলির একটি সেট যা পৃষ্ঠাগুলির নেভিগেশন এবং ফর্ম জমা দেওয়ার গতি বাড়ায়, জটিল পৃষ্ঠাগুলিকে উপাদানগুলিতে বিভক্ত করে এবং ওয়েবসকেটের মাধ্যমে পৃষ্ঠাগুলির আংশিক আপডেট প্রেরণ করে (যা অ্যাকশনকেবল, চ্যানেল এবং স্ট্রিমিং ডেটা নিয়ে গঠিত)।

আপনি কেন এটি ব্যবহার করবেন?

আপনি যদি জাভাস্ক্রিপ্টের সাথে লড়াই করেন এবং আরও দ্রুত পৃষ্ঠাগুলির মধ্যে নেভিগেট করার অনুভূতির মাধ্যমে আরও ভাল ব্যবহারকারীর অভিজ্ঞতার সুবিধা নিতে চান, হটওয়্যার আপনার জন্য একটি বিকল্প৷

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

ব্যবহার করা কি সহজ?

এটি ব্যবহার করা খুব সহজ; আপনার শুধু একটি Rails প্রকল্পের ডিফল্ট প্যাকেজ (রুবি, RoR, ActionCable, এবং WebSocket), একটি Turbo রত্ন যা সমস্ত JS নির্ভরতা ডাউনলোড করে এবং WebSocket ব্রাউজ করার সময় কিছু অস্থায়ী ডেটা সঞ্চয় করার জন্য Redis প্রয়োজন৷

একটি একক-পৃষ্ঠার ওয়েব অ্যাপ্লিকেশনের গতি পেতে আপনাকে অন্য ভাষা (JS) শিখতে হবে না কারণ Turbo টারবো ড্রাইভ, ফ্রেম, স্ট্রিম এবং নেটিভ দ্বারা পরিপূরক। ড্রাইভ স্পিড-আপ লিঙ্ক এবং ফর্মগুলি এবং নেটওয়ার্কগুলি পুনরায় লোড করার প্রয়োজনীয়তা হ্রাস করে, যখন ফ্রেমগুলি নেটওয়ার্কগুলিকে স্বাধীন প্রসঙ্গে বিভক্ত করে যা লোড করা সহজ৷

এটি রেলের সাথে কীভাবে ব্যবহার করা হয়?

এই বিভাগটি আপনাকে একটি ধাপে ধাপে উদাহরণ দেখাবে।

এই উদাহরণের জন্য, আমাদের প্রয়োজন হবে:

• রুবি
• রুবি অন রেল
• রেডিস
• SQLite (ডিফল্ট ডাটাবেস)
• জেম হটওয়্যার
• টার্বোরেল
• StimulusJS
• ওয়েবসকেট
• ActionCable

আমরা কোন প্রকল্প তৈরি করব?

আমরা একটি সামাজিক মিডিয়া প্রকল্প তৈরি করব৷

প্রথমে আপনার টার্মিনাল খুলুন। আসুন একটি নতুন রেল প্রকল্প দিয়ে শুরু করি:

rails new social-media

আপনার প্রকল্প লিখুন:

cd social-media

হটওয়্যার যোগ করা হচ্ছে

আপনার প্রকল্পে Hotwire রত্ন যোগ করুন:

bundle add hotwire-rails

বিকল্পভাবে, আপনার Gemfile খুলুন এবং এটি যোগ করুন:

gem "hotwire-rails"

আপনি যদি দ্বিতীয় বিকল্পটি ব্যবহার করেন, তাহলে আপনাকে এখনই বান্ডিল চালাতে হবে।

bundle install

তারপর, আপনি এটি ইনস্টল করবেন।

rails hotwire:install

প্রাথমিক সেটিংস

হটওয়্যার তৈরি করা প্রাথমিক সেটিংস বিশ্লেষণ করার জন্য এখন একটি দুর্দান্ত সময়। Gemfile পরিদর্শন করার সময়, এটি এইরকম হওয়া উচিত:

gem 'redis', '~> 4.0'

আমাদের কেন Redis দরকার?

Redis মণি যোগ করা হয়েছে কারণ WebSocket ব্রাউজ করার সময় কিছু অস্থায়ী ডেটা সংরক্ষণ করার জন্য ActionCable এর প্রয়োজন। যাইহোক, এটি ব্যবহার করার জন্য শুধুমাত্র Redis ইনস্টল করা যথেষ্ট নয়। আমাদের এটি সঠিকভাবে কনফিগার করা হয়েছে কিনা তা পরীক্ষা করতে হবে। আপনি যখন config/cable.yml এ যান ফাইল, এটি এই মত হওয়া উচিত:

development:
 adapter: redis
 redis://localhost:6379/1

আপনার অ্যাপ্লিকেশন শুরু করার সময় Redis চলছে কিনা নিশ্চিত করুন (redis-server )।

JS নির্ভরতা

package.json-এ নির্ভরতা পরীক্ষা করুন :

dependencies: {
 @hotwired/turbo-rails: ^7.0.0-beta.5,
 @rails/actioncable: ^6.0.0,
 @rails/activestorage: ^6.0.0,
 @rails/ujs: ^6.0.0,
 @rails/webpacker: 4.3.0,
 stimulus: ^2.0.0
}

আমাদের মডেল তৈরি করা হচ্ছে

সমস্ত ফাইল চেক করার পর, আমরা আমাদের views জেনারেট করব , controllers , models এবং migrations posts জন্য body সহ টেবিল , এবং likes কলাম. এটি করার জন্য, টার্মিনালে নিম্নলিখিতটি চালান:

rails g scaffold posts body:text likes:integer

আমাদের ডাটাবেস তৈরি করা হচ্ছে

এখন যেহেতু আমরা সবকিছু তৈরি করেছি, আমাদের এই পরিবর্তনগুলি ডাটাবেসে পাঠাতে হবে, তাই টার্মিনালে নিম্নলিখিতটি চালান:

rails db:create db:migrate

সবকিছু ঠিকঠাক থাকলে, আমরা সার্ভার চালাতে পারি (rails server ) এবং সবকিছু ঠিক আছে কিনা তা পরীক্ষা করুন। এটি করার জন্য, আমরা সার্ভার চালাব এবং তারপর posts দেখুন পৃষ্ঠা, যা হবে https://localhost:3000/posts :

পোস্ট ডিরেক্টরির প্রিন্টস্ক্রিন

পোস্টের তালিকা করা

এখন, আমরা পোস্টের তালিকা করব। এটি করার জন্য, আমরা app/views/posts/_post.html.erb তৈরি করব ফাইল করুন এবং এতে নিম্নলিখিত কোড যোগ করুন:

<div style="background: lightgrey; width: 300px; padding: 10px;">
  <%= post.body %>
  <br>
  <%= link_to :edit, edit_post_path(post) %>
  <%= button_to "likes (#{post.likes || 0})", post_path(post, like: true), method: :put %>
</div>
<br>

বৈধকরণ

আমাদের বডি ফিল্ডকে যাচাই করতে হবে (যা শূন্য হতে পারে না), এবং আমরা ব্রডকাস্টকে বলবো টুইট তৈরি করার পর প্রথম টুইটের মতো একই স্ক্রিনে একটি টুইট প্রদর্শন করতে। এটি করার জন্য, আমরা app/models/post.rb ফাইলটি সম্পাদনা করব এবং নিম্নলিখিত কোড সন্নিবেশ করুন:

class Post < ApplicationRecord
  validates_presence_of :body

  after_create_commit { broadcast_prepend_to :posts }
end

অর্ডার করা

আমাদের পোস্ট অর্ডার করতে হবে, তাই আপনার কন্ট্রোলার খুলুন (app/controllers/posts_controller.rb )।

...
def index
  @posts = Post.all.order(created_at: :desc)
  @post = Post.new
end
...

র্যাপিং আপ

এখন, আমাদের index সম্পাদনা করা যাক (app/views/posts/index.html.erb ) new post দেখাতে পৃষ্ঠা এবং সমস্ত posts তালিকা .

<%= turbo_stream_from :posts %>

<%= turbo_frame_tag :post_form do %>
  <%= render 'posts/form', post: @post %>
<% end %>

<%= turbo_frame_tag :posts do %>
  <%= render @posts %>
<% end %>

সূচীতে পুনঃনির্দেশ করা হচ্ছে

অবশেষে, আসুন create পরিবর্তন করি আমাদের কন্ট্রোলারে পদ্ধতি। আমাদেরকে show post এ পুনঃনির্দেশ করা এড়াতে পৃষ্ঠা, আসুন সবকিছু একই পৃষ্ঠায় রাখি।

...
def create
  @post = Post.new(post_params)

  respond_to do |format|
  if @post.save
   format.html { redirect_to posts_path }
   format.json { render :show, status: :created, location: @post }
 else
    format.turbo_stream { render turbo_stream: turbo_stream.replace(@post, partial: 'posts/form', locals: { post: @post }) }
    format.html { render :new, status: :unprocessable_entity }
   format.json { render json: @post.errors, status: :unprocessable_entity }
 end
  end
end
...

আমাদের চূড়ান্ত পৃষ্ঠাটি এইরকম হওয়া উচিত:

চূড়ান্ত পৃষ্ঠার প্রিন্টস্ক্রিন

লগগুলি পরীক্ষা করা হচ্ছে

যখন একটি পোস্ট তৈরি করা হয়, আপনার টার্মিনাল লগ চেক করুন; তাদের দেখতে এইরকম হওয়া উচিত:

[ActionCable] Broadcasting to posts: "<turbo-stream action=\"prepend\" target=\"posts\"><template><div style=\"background: lightgrey; width: 300px; padding: 10px;\">\n  first post\n  <br>\n  <a href=\"/posts/1/edit\">edit</a>\n  <form class=\"button_to\" method=\"post\" action=\"/posts/4?like=true\"><input type=\"hidden\" name=\"_method\" value=\"put\" /><input type=\"submit\" value=\"likes (0)\" /><input type=\"hidden\" name=\"authenticity_token\" value=\"<token>==\" /></form>\n</div>\n<br>\n</template></turbo-stream>"

চিন্তা

এর মানে হল যে ActionCable একটি সুপার ফাস্ট পারফরম্যান্স সহ টার্বো স্ট্রিমের সাথে কাজ করছে, আপনি দেখতে পাচ্ছেন:Completed 302 Found in 18ms .

নিয়োগ করা হচ্ছে

আমাদের রেল সার্ভারের পাশাপাশি চালানোর জন্য কি আর একটি এক্সিকিউটেবল দরকার?

না, কারণ ActionCable জনপ্রিয় সার্ভারের সাথে ভালো কাজ করে, যেমন ইউনিকর্ন, পুমা এবং প্যাসেঞ্জার।

Heroku কি Hotwire সমর্থন করে?

হ্যাঁ, Heroku হটওয়্যার (ওয়েবসকেট) এর ভিত্তি সমর্থন করে। আপনার যদি আরও কোন প্রশ্ন থাকে, আপনি Heroku এর অফিসিয়াল ডকুমেন্টেশন চেক করতে পারেন।

আপনি যদি ভাবছেন আমরা কেন রেডিস ব্যবহার করছি, তার আরও একটি কারণ আছে

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

Heroku এ Redis সেট আপ করুন

আপনার দূরবর্তী রেডিস উদাহরণের সাথে একটি Redis CLI সেশন স্থাপন করতে, heroku redis:cli ব্যবহার করুন .যদি আপনি একটি দৃষ্টান্ত নির্দিষ্ট না করেন, তাহলে উদাহরণটি REDIS_URL এ অবস্থিত ডিফল্টরূপে ব্যবহৃত হয়৷ আপনার যদি একাধিক দৃষ্টান্ত থাকে, তাহলে আপনি যে দৃষ্টান্তে সংযোগ করতে চান তা নির্দিষ্ট করুন৷

এটি অ্যাপ্লিকেশন সার্ভারে কিভাবে কাজ করে?

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

নিরাপত্তা

বর্তমানে, অ্যাপ্লিকেশনটি উন্মুক্ত এবং অনেক আক্রমণের জন্য ঝুঁকিপূর্ণ। অনুগ্রহ করে WSS সেট আপ করুন এবং আপনার ইনপুট স্যানিটাইজ করুন। WebSocket নিরাপত্তা সম্পর্কে এখানে আরও জানুন।

উপসংহার

একটি নতুন অ্যাপ্লিকেশনের মাধ্যমে Hotwire ব্যবহার করা সম্ভব, যেমনটি আমরা এখানে দেখিয়েছি, কিন্তু Turbolinks থেকে আপডেট করা সম্ভব৷

এই নিবন্ধটি আপনাকে "জাদু কাঠামো" কীভাবে কাজ করে তা বুঝতে সাহায্য করেছে। এটিতে, আপনার কাছে বাস্তবে, একটি ছোট সাধারণ অ্যাপ্লিকেশন বিকাশ করার সম্ভাবনা ছিল যা ওয়েবসকেটের মাধ্যমে ম্যানিপুলেশন এবং নেভিগেশন সহ একটি সমষ্টিগত টার্বো স্ট্রিমের মাধ্যমে অনুরোধগুলি দেখায়৷