রেলগুলিতে রুবির সাথে একটি ইনস্টাগ্রাম ক্লোন তৈরি: অংশ 1 1

এই বহু-অংশের টিউটোরিয়ালে, আমরা রেল অন অ্যাপটি তৈরি করব যা জনপ্রিয় সামাজিক যোগাযোগমাধ্যম জায়ান্ট ইনস্টাগ্রামের চেহারা এবং বৈশিষ্ট্যগুলি কার্যকর করে। আমরা রেল 6, ওয়েবপ্যাকার 4, টারবোলিংকস, স্টিমুলাস জেস এবং টেলওয়াইন্ডসএস ব্যবহার করব।

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

আমি ওয়েবপ্যাকার 4, টারবোলিংকস এবং টেলউইনডকস এর আসন্ন প্রকাশের 1.0 এর সাথে একটি রেলস 6 অ্যাপ (আরসি 1 সংস্করণ) সেট করেছি। আপনি যদি অনুসরণ করতে চান তবে নীচের শাখা থেকে অ্যাপটি ক্লোন করতে পারেন:

গিট ক্লোন-বি টিউটোরিয়াল-শুরু [email protected]: রডলোবোজ / রেলস্টগ্রাম.git

বয়লারপ্লেটটি চালানোর জন্য আপনাকে আপনার মেশিনে রুবি 2.5.3 ইনস্টল করতে হবে এবং তারপরে ক্লোনড প্রকল্প ফোল্ডারের ভিতরে টার্মিনাল থেকে চালাতে হবে:

বান্ডেল ইনস্টল সুতা ইনস্টল রেলস ডিবি: তৈরি ডিবি: মাইগ্রেট ডিবি: বীজ রেল গুলি

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

যদিও আমরা শুরু করার আগে, টেলওয়াইন্ডসেসের একটি সংক্ষিপ্ত ভূমিকা:

বুটস্ট্র্যাপের বিপরীতে, ফাউন্ডেশন, বুলমা, টেলউইন্ডসকস কোনও ইউআই কিট নয় (কোনও থিম নেই বা কোনও বিল্ট-ইন ইউআই উপাদান নেই)। ডকুমেন্টেশন অনুযায়ী:

টেলওয়াইন্ড অত্যন্ত কম্পোজেবল, নিম্ন-স্তরের ইউটিলিটি ক্লাস সরবরাহ করে যা কোনও দুটি সাইটকে একইরকম দেখতে অনুরোধ না করে জটিল ইউজার ইন্টারফেস তৈরি করা সহজ করে তোলে।

এটি প্রতিক্রিয়াশীল এবং বারবার ইউটিলিটি প্যাটার্নগুলি থেকে উপাদান শ্রেণিগুলি আহরণের জন্য সরঞ্জাম সরবরাহ করে, এটি আমাদের নিজস্ব কাস্টম ইউআই উপাদানগুলি তৈরি করা সহজ করে তোলে:

// বোতামের বৈচিত্র তৈরি করতে টেলওয়াইন্ডের ইউটিলিটি ক্লাস ব্যবহার করা
.btn-blue {@ অ্যাপ্লিকেশন বিজি-ব্লু -500 টেক্সট-সাদা; b .বিটিএন-হোয়াইট {@ অ্যাপ্লিকেশন টেক্সট-ব্লু -500}। বিটিএন-হোয়াইট: ফোকাস করুন {@ অ্যাপ্লিকেশন টেক্সট-ব্লু -400}

টেলওয়াইন্ড পোস্টসিএসএস-এ লেখা এবং জাভাস্ক্রিপ্টে কনফিগার করা হয়েছে। তাই আমি ওয়েবপ্যাক দ্বারা সংকলিত করতে অ্যাপ / জাভাস্ক্রিপ্ট / স্টাইলশিটগুলিতে উপাদানগুলি রেখেছি। আপনি অ্যাপ্লিকেশন / জাভাস্ক্রিপ্ট / স্টাইলশিট / কনফিগারেশন / টেলওয়াইন্ড.কমফিগ.জেজে মূল টেলওয়াইন্ড কনফিগারেশন ফাইলটি খুঁজে পেতে পারেন

ব্যবহারকারী মডেল

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

টার্মিনালে একটি স্থানান্তর উত্পন্ন করুন:

রেল g মাইগ্রেশন অ্যাডআট্রিবিউটস ব্যবহারকারীদের পুরো নাম ব্যবহারকারীর নাম: স্ট্রিং: ইউনিট সম্পর্কে: পাঠ্য

এটি নিম্নলিখিত স্থানান্তর উত্পন্ন করে:

ইনস্টাগ্রাম ব্যবহারকারী প্রোফাইলের ইউআরএল তৈরি করতে ব্যবহারকারীর নাম ব্যবহার করে। যেমন, ব্যবহারকারীর নাম অবশ্যই অনন্য হতে হবে, তাই আমরা স্থানান্তরিত ডাটাবেসে সেই সীমাবদ্ধতাটি যুক্ত করছি। এটি একটি কলামও যুক্ত করে যা আমরা পরে এটি প্রয়োগ করব।

রেলকে ভুলে যাবেন না ডিবি: মাইগ্রেশন প্রয়োগ করতে মাইগ্রেট করুন।

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

বৈধকরণ: ব্যবহারকারীর নাম, উপস্থিতি: সত্য, ফর্ম্যাট: {সহ: /\A(?=.* azাব্যালেজ পৃষ্ঠাটি ++ZZ / আই}, স্বতন্ত্রতা: {কেস_সেটিউটিভ: মিথ্যা}

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

আমাদের ব্যবহারকারীদের সাইন-আপ ফর্মটিতে অতিরিক্ত পরামিতি সরবরাহ করার অনুমতি দেওয়া দরকার। এটি অ্যাপ্লিকেশনকন্ট্রোলারে যুক্ত করুন।

এটি ডিভাইসের শক্তিশালী প্যারামগুলিতে অতিরিক্ত বৈশিষ্ট্যগুলি যুক্ত করতে দেয়।

ব্যবহারকারীর অবতার এবং ড্রপডাউন প্রদর্শনের জন্য আমাদের নভবারটি সংশোধন করতে হবে যাতে লগ ইন হওয়া ব্যবহারকারীরা সাইন আউট করতে পারেন। আপনি আপডেট হওয়া কোডটি এখানে দেখতে পাবেন: https://github.com/rodloboz/railstگرام/blob/master/app/views/shared/_navbar.html.erb

দ্রষ্টব্য: আপনি যদি টিউটোরিয়ালটি অনুসরণ করে চলেছেন তবে আপনাকে টেলউইন্ড কনফিগারেশনের ফাইলটিতে নিম্নলিখিতগুলি যুক্ত করতে হবে:

// অ্যাপ্লিকেশন / জাভাস্ক্রিপ্ট / স্টাইলশিট / কনফিগারেশন / লেজবাইন্ড.কমফিগ.জেএস
রূপগুলি: {সীমান্ত অনুবাদ: ['প্রতিক্রিয়াশীল', 'হোভার', 'ফোকাস', 'গ্রুপ-হোভার'], দৃশ্যমানতা: ['প্রতিক্রিয়াশীল', 'গ্রুপ-হোভার'],}

এবং একটি ড্রপডাউন সিএসএস উপাদান তৈরি করুন:

সঠিক ব্যবহারকারী অবতারের URL নির্ধারণ করতে আমরা একটি ভিউ সহায়কও ব্যবহার করব। যতক্ষণ না আমরা চিত্র আপলোডগুলি প্রয়োগ করি, কেবলমাত্র দুটি বিকল্প রয়েছে: আমরা পরীক্ষা করে দেখি যে ব্যবহারকারী ইমেলটি গ্রাভাতার অ্যাকাউন্টের সাথে যুক্ত কিনা। যদি তা না হয় তবে আমরা একটি ডিফল্ট ব্যবহারকারী অবতার চিত্র প্রদর্শন করি:

ব্যবহারকারীদের ব্যবহারকারীর নাম দিয়ে সাইন ইন করার অনুমতি দিচ্ছে

ডিফল্টরূপে, ডিভাইস ব্যবহারকারীদের সাইন ইন করতে এবং তাদের ইমেল ঠিকানা সরবরাহ করে তাদের পাসওয়ার্ড পুনরায় সেট করার অনুমতি দেয়। ইনস্টাগ্রাম ব্যবহারকারীদের ব্যবহারকারীর নাম বা ইমেল ঠিকানা সরবরাহ করতে দেয়। আমাদের এটির জন্য ডিভাইস ডিফল্টগুলি ওভাররাইড করতে হবে।

ব্যবহারকারীর মডেলটিতে অ্যাট্রিবিউট অ্যাকসেসর হিসাবে লগইন যুক্ত করুন: attr_accessor: লগইন

কনফিগার / ইনিশিয়ালাইজার / ডিভাইস.আরবি সংশোধন করুন:

config.authentication_keys = [: লগইন]

এবং ব্যবহারকারীর মডেলটিতে ডিভাইসের ফাইন্ড_ফোর্ড_ড্যাটাবেস_সৌধায়ন পদ্ধতি ওভাররাইড করুন:

পাসওয়ার্ড পুনরুদ্ধারের জন্য আপনি এই উইকিটি অনুসরণ করতে পারেন: https://github.com/plataformatec/devise/wiki/How-To:- সহযোগী-ব্যবহারকারী- to-sign_in- using-their-username-or-email -ঠিকানা

এই মুহুর্তে, আপনার অ্যাপ্লিকেশনটি এগিয়ে যাওয়ার আগে এটি কাজ করে কিনা তা পরীক্ষা করে দেখা উচিত।

মডেল কনসার্নের সাথে ব্যবহারকারীর মডেলটিকে রিফ্যাক্টরিং:

এতক্ষণে, আপনার ব্যবহারকারীর মডেলটি প্রচুর ছদ্মবেশী পদ্ধতি সহ বেশ চর্বিযুক্ত দেখতে শুরু করবে এবং আমরা কেবল শুরু করেছি। মডেল উদ্বেগের মধ্যে এই কোডটি সমস্ত বের করুন ract অ্যাপ / মডেল / উদ্বেগ / সত্যায়িত.আরবিতে একটি ফাইল তৈরি করুন এবং মডেল থেকে সমস্ত ফাইলকে এই ফাইলে সরান:

তারপরে আপনাকে যা করতে হবে তা হ'ল ব্যবহারকারীর মডেলটিতে প্রমাণীকরণযোগ্য অন্তর্ভুক্ত। এটি আবার পরীক্ষা করার বিষয়টি নিশ্চিত করুন।

ব্যাবহারকারীর বিস্তারিত

ইনস্টাগ্রাম ব্যবহারকারীর প্রোফাইলগুলি অ্যাক্সেস করতে তাদের URL এর মূলে ব্যবহারকারীর নাম ব্যবহার করে। এটি করতে, আমাদের নীচের রুট প্রয়োজন:

সংস্থানসমূহ: ব্যবহারকারী, পথ: '/', পরম:: ব্যবহারকারীর নাম, কেবলমাত্র:% i [দেখান]

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

# ব্যবহারকারীর ডিএফ থেকে_পরিম ব্যবহারকারীর নাম শেষ

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

নিম্নলিখিত ব্যবহারকারীগণ

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

রেল জি মডেল অনুসরণ করুন

সেই অনুযায়ী মাইগ্রেশন সংশোধন করুন:

এবং কোডটিকে একটি প্রাসঙ্গিক উদ্বেগের মধ্যে আনুন:

রুটগুলি আপডেট করুন:

আমরা ব্যবহারকারীদের অধীনে ফলোস কনট্রোলারটির নামকরণ করব এবং একটি ক্রিয়া ক্রিয়া (নামযুক্ত ফলো_পথ) ব্যবহার করব যা আমাদের উদ্বেগের জন্য উপরে প্রয়োগ করা ফলো পদ্ধতি এবং একটি ধ্বংস কর্ম (নামেই আনফলো_প্যাথ) বলে যা একে একই উদ্বেগে বাস্তবায়িত অনুসরণ অনুসরণ না করে calls উভয় ক্রিয়া একই শেষ পয়েন্ট /: ব্যবহারকারীর নাম / অনুসরণের অধীনে থাকে এবং আমরা HTTP ক্রিয়াগুলি পোষ্ট এবং ডিলেটটি উভয়ের মধ্যে পার্থক্য করতে ব্যবহার করি। (আপনি এখানে রেল রাউটিংয়ের সম্ভাবনার উপর আরও গভীরতর নিবন্ধটি পড়তে পারেন)।

প্রথমত, আমরা নিশ্চিত করে নিই যে ভিউতে অনুসরণ করা / অনুসরণ না করা বোতামটি নিয়মিত এইচটিএমএল অনুরোধের মাধ্যমে সঠিকভাবে কাজ করে। তারপরে, আমরা বিকল্পটি রিমোট যুক্ত করে এটিকে জাজিফাই করি: সেই লিঙ্কগুলিতে সত্য। এটি পুরো পৃষ্ঠাটি পুনরায় লোড না করে ব্যাকএন্ডে একটি এজেএক্স অনুরোধ প্রেরণ করে এবং তারপরে আমরা জাভাস্ক্রিপ্টের সাথে বোতাম এবং সংশ্লিষ্ট লিঙ্কটি আপডেট করি। এই উদ্দেশ্যে আমি আংশিক দৃষ্টিতে বোতাম কোডটি বের করেছি: অ্যাপ / ভিউ / ব্যবহারকারী / _ফলো_বিটিএন। Html.erb

কাউন্টার ক্যাচিং

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

প্রথমত, আমাদের ব্যবহারকারী মডেলটিতে আমাদের দুটি কলাম যুক্ত করতে হবে যা নিম্নলিখিত মাইগ্রেশন সহ সেই দুটি কাউন্টারের উপর নজর রাখবে:

তারপরে আমরা কাউন্টার_ক্যাস বিকল্পটি অনুসরণ করুন মডেলটিতে যুক্ত করুন। এই রেলগুলি অনুসরণকারীদের সঠিক গণনা সহ ব্যবহারকারী কলামগুলি আপডেট করার নির্দেশ দেয় এবং প্রতিবার অনুসরণ করে রেকর্ড তৈরি বা ধ্বংস হয়।

তারপরে এই দুটি নতুন কলামের সাথে আমাদের ভিউটি আপডেট করুন এবং এজেএক্স অনুরোধের সময় ভিউটি আপডেট হয় তা নিশ্চিত করতে create.js.erb সম্পাদনা করুন:

যেহেতু কাউন্টার_ক্যাচগুলি ট্রিগার হওয়ার আগে এবং ব্যবহারকারী যখনই কোনও ব্যবহারকারী অন্য ব্যবহারকারীকে অনুসরণ করা বা অনুসরণ করা অনুসরণ না করে কাউন্টারের কলামগুলি আপডেট হওয়ার আগে @ ব্যবহারকারীর দৃষ্টান্তটি লোড করা হয়, তাই অনুসরণকারীদের সঠিক সংখ্যা এবং অনুসরণ করার জন্য আমাদের উদাহরণটি পুনরায় লোড করতে হবে। আমরা অনুসরণকন্ট্রোলারের ক্রিয়া তৈরি এবং ধ্বংস করতে ব্লকটির ভিতরে @ user.reload যুক্ত করে এটি করি।

অবশেষে, আমরা অনুগামীদের গণনাটির বহুবচনকরণের যত্ন নেওয়ার জন্য স্টিমুলাস যুক্ত করব। আমরা রেলগুলি বহুবচন করার পদ্ধতিটি ব্যবহার করতে পারি, তবে উদ্দীপকটি পরে তা কার্যকর হবে।

টার্মিনালে উদ্দীপনা ইনস্টল করুন:

বান্ডেল এক্সিকিউট রেলস ওয়েবপ্যাকার: ইনস্টল করুন: উদ্দীপনা

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

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

তারপরে আমরা এজ্যাক্স শোনার জন্য আমাদের ফলো / অনপল বোতামটি সেট আপ করেছি: ডেটা-অ্যাকশন বৈশিষ্ট্যের সাথে সাফল্য ইভেন্ট এবং অনুপ্রেরণার সাথে অনুসরণকারী বার্তা / শব্দ আপডেট করুন:

এবং উদ্দীপনা নিয়ামকটি দেখতে এরকম দেখাচ্ছে:

এটি এই টিউটোরিয়ালের অংশ 1 এর জন্য। আমরা পার্ট 2 এ আমাদের ইনস্টাগ্রাম ক্লোনটি চালিয়ে যাব আপনি এখানে এই অংশের জন্য সম্পূর্ণ কোডটি পরীক্ষা করতে পারেন https://github.com/rodloboz/railstગ્રામ/tree/tutorial-part1

দ্রষ্টব্য: এই নিবন্ধে উন্নতি পরামর্শ এবং টাইপস এবং ত্রুটি বন্ধ করার জন্য জুলিয়েট শেভালিয়ারকে অনেক ধন্যবাদ।