রেল অন রুবেল দ্বারা ইনস্টাগ্রাম তৈরি করুন (পর্ব 1)

আমি ইনস্টাগ্রাম অ্যাপ্লিকেশন তৈরির মাধ্যমে রুবেলগুলিতে রুবি পর্যায়ক্রমে শেখার জন্য আপনাকে গাইড করব।

ক্রিস্টোফার গওয়ারের ছবি

এই প্রকল্পটি শেষ করার পরে আপনি কী শিখবেন?

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

সুচিপত্র:

  • টেক স্ট্যাকস
  • রিলে অন রুবেলে এমভিসি সম্পর্কে বোঝা।
  • নতুন রেল অ্যাপ্লিকেশন তৈরি করুন
  • আমাদের অ্যাপ্লিকেশনটির জন্য পোস্টগ্রাইএসকিউএল ডাটাবেস এবং বুটস্ট্র্যাপ ব্যবহার করা
  • সাইন আপ - সাইন ইন - ডিভাইস রত্ন ব্যবহার করে ব্যবহারকারীদের জন্য সাইন আউট
  • ব্যবহারকারীর প্রোফাইল পৃষ্ঠা তৈরি করুন
  • ব্যবহারকারীর প্রোফাইল সম্পাদনা / আপডেট করুন

টেক স্ট্যাকস

ব্যাক-এন্ড:

  • রুবি ২.৪
  • রেলগুলি 5.2.x
  • ডাটাবেস: পোস্টগ্রিজ 9.6

সামনের অংশ:

  • এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট, jQuery
  • বুটস্ট্র্যাপ (3.x বা 4.x)

এমভিসি (মডেল - দেখুন - কন্ট্রোলার) রিলে অন রুবেলে

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

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

কারাগারে অনুরোধ-প্রতিক্রিয়া চক্র

সূত্র: https://www.codecademy.com
  1. ব্যবহারকারী তার ব্রাউজার খুলবে, একটি ইউআরএল টাইপ করুন এবং এন্টার টিপুন। যখন কোনও ব্যবহারকারী এন্টার টিপেন, ব্রাউজারটি সেই ইউআরএলটির জন্য একটি অনুরোধ করে।
  2. অনুরোধটি রেলস রাউটারকে হিট করে (কনফিগার / রুট.আরবি)।
  3. রাউটারটি অনুরোধটি পরিচালনা করতে সঠিক নিয়ামক এবং ক্রিয়ায় ইউআরএল ম্যাপ করে।
  4. ক্রিয়াটি অনুরোধটি গ্রহণ করে এবং মডেলটিকে ডেটাবেস থেকে ডেটা আনতে বলে।
  5. মডেলটি নিয়ামক ক্রিয়ায় ডেটার একটি তালিকা ফেরত দেয়।
  6. কন্ট্রোলার অ্যাকশনটি ডেটা ভিউতে পাস করে।
  7. ভিউ পৃষ্ঠাকে HTML হিসাবে রেন্ডার করে।
  8. কন্ট্রোলার ব্রাউজারে HTML ফেরত পাঠায় back পৃষ্ঠাটি লোড হয় এবং ব্যবহারকারী এটি দেখে।

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

রিয়েলগুলি ইনস্টল করুন:

রেলগুলি ইনস্টল করতে, আমরা রুবিগেমস দ্বারা সরবরাহিত রত্ন ইনস্টল কমান্ডটি ব্যবহার করি:

রত্ন ইনস্টল রেল -v 5.2.1

রেলগুলি ইনস্টল করার পরে রেলের সংস্করণটি পরীক্ষা করুন:

রেল - রূপান্তর
=> রেলগুলি 5.2.1

যদি এটি 'রেলস 5.2.1' এর মতো কিছু ফিরে আসে তবে আপনি নতুন রেল অ্যাপ্লিকেশন তৈরি করা চালিয়ে যেতে পারেন।

PostgreSQL ইনস্টল করুন:

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

ব্রেইন ইনস্টল postgresql

Postgresql পরিষেবা শুরু করুন:

ব্রিউ পরিষেবাগুলি পোস্টগ্রেস্কল শুরু করে

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

রেলগুলি নতুন ইনস্টাগ্রাম - রূপান্তর = 5.2.1

ইনস্টাগ্রাম অ্যাপ্লিকেশন তৈরির পরে, এর ফোল্ডারে স্যুইচ করুন

সিডি ইনস্টাগ্রাম

আমাদের প্রয়োগের জন্য রত্ন ইনস্টল করুন:

বান্ডিল ইনস্টল

ওয়েব সার্ভার শুরু করা:

রেল সার্ভার

অ্যাপ্লিকেশনটি দেখতে, আপনার ব্রাউজারটি খুলুন এবং http: // লোকালহোস্ট: 3000 / এ নেভিগেট করুন

আপনি রেলগুলির ডিফল্ট পৃষ্ঠাটি দেখতে পাবেন:

এবং ওয়েব সার্ভারটি বন্ধ করতে, টার্মিনালে Ctrl + C চাপুন।

হোমপেজ তৈরি করুন

  • একটি ক্রিয়া সহ একটি নতুন নিয়ামক তৈরি করুন
  • রুট যুক্ত করুন

সূচক ক্রিয়া সহ হোম কন্ট্রোলার তৈরি করুন:

রেল জি নিয়ন্ত্রণকারী হোম সূচক

রেলগুলি আপনার জন্য কিছু ফাইল এবং একটি রুট তৈরি করবে

অ্যাপ / কন্ট্রোলারগুলি / হোম_কন্ট্রোলআরআরবি রুটটি 'হোম / ইনডেক্স' পেতে অনুরোধ করুন ইরব তৈরি করুন অ্যাপ্লিকেশন / ভিউ / হোম অ্যাপ্লিকেশন / ভিউ / হোম / ইনডেক্স। html.erb আহ্বান করুন পরীক্ষার_আনিট তৈরি করুন পরীক্ষার / নিয়ন্ত্রণকারী / হোম_কন্ট্রোলার_টায়.আরবি আহ্বান সহায়ক সাহায্যকারী তৈরি / সহায়ক / হোম_হেল্পার.আরবি টেস্ট_উইনোটের সম্পদ আহ্বান করায় কফি তৈরির জন্য অ্যাপ্লিকেশন / সম্পদ / জাভাস্ক্রিপ্ট / হোম.কোফিকে অনুরোধ করা এসএসএস তৈরি করুন অ্যাপ / সম্পদ / স্টাইলশিট / হোম.এসএসএস

অ্যাপ্লিকেশন / দর্শন / হোম / সূচক html.erb ফাইলটি খুলুন এবং বিদ্যমান কোডটি নিম্নলিখিত কোডের সাথে প্রতিস্থাপন করুন:

এটি আমার হোম পেজ

ওয়েব সার্ভার পুনরায় চালু করুন (সার্ভার আরম্ভ করার জন্য সার্ভার এবং রেল সার্ভার থামাতে Ctrl + C) এবং আপনার ব্রাউজারে HTTP: // লোকালহস্ট: 3000 / হোম / সূচক নেভিগেট করুন। আপনি ভিউ / হোম / ইনডেক্স html.erb এ রেখেছেন "এটি আমার হোম পৃষ্ঠা" বার্তাটি দেখতে পাবেন

ফাইলটি কনফিগার / রুট.আরবি খুলুন

রেইস.অ্যাপ্লিকেশন.আর্টস.ড্রে 'হোম / ইনডেক্স' পাবেন
  # এই ফাইলের মধ্যে উপলব্ধ ডিএসএল সম্পর্কিত তথ্যের জন্য http://guides.rubyonrails.org/routing.html শেষে দেখুন

এবং কোডটি মূলের 'হোম # সূচক' এর লাইন যুক্ত করুন। এর মতো কিছু দেখতে পাওয়া উচিত:

রেইস.অ্যাপ্লিকেশন.আর্টস.ড্রে 'হোম / ইনডেক্স' পাবেন
  মূল থেকে: 'হোম # সূচক' শেষ

'হোম / ইনডেক্স' পেতে রেলকে http: // লোকালহস্ট: 3000 / হোম / ইনডেক্সে হোম কন্ট্রোলারের সূচক ক্রিয়ায় অনুরোধগুলি ম্যাপ করতে বলে।

রুট 'হোম # সূচক' রেলকে হোম কন্ট্রোলারের সূচক ক্রিয়ায় অ্যাপ্লিকেশনটির মূলটিতে অনুরোধগুলি ম্যাপ করতে বলে।

ওয়েব সার্ভার পুনঃসূচনা করুন এবং http: // লোকালহোস্ট: 3000 / এ নেভিগেট করুন, আপনি "এটি আমার হোম পৃষ্ঠা" বার্তাটি দেখতে পাবেন।

আপনি অ্যাপ্লিকেশনটির বর্তমানের সমস্ত রুটগুলি এর দ্বারা দেখতে পারবেন:

রেলপথ

রেল অ্যাপ্লিকেশনগুলিতে পোস্টগ্রিএসকিউএল ব্যবহার করা

রেল অ্যাপ্লিকেশনটির জন্য পোস্টগ্রাইএসকিউএল ব্যবহার করতে আমরা জেমফাইলে রত্ন 'পিজি' যুক্ত করি

রত্ন 'পিজি'

পিজি মণি ইনস্টল করতে বান্ডিল ইনস্টল করুন।

ডাটাবেস কনফিগার (কনফিগার / ডাটাবেস.আইএমএল)

ডিফল্ট: & ডিফল্ট অ্যাডাপ্টার: পোস্টগ্রেকসুল পুল: <% = ENV.fetch ("RAILS_MAX_THREADS") {5}%> সময়সীমা: 5000
বিকাশ: <<: * ডিফল্ট ডাটাবেস: উন্নয়ন_ ইনস্টাগ্রাম agram
পরীক্ষা: <<: * ডিফল্ট ডাটাবেস: টেস্ট_ইনস্টগ্রাম
উত্পাদন: <<: * ডিফল্ট ডাটাবেস: product_instગ્રામ

আরও বিশদ: http://guides.rubyonrails.org/configuring.html#configuring-a- ডেটাবেস

ডাটাবেস তৈরি করুন

অ্যাপ্লিকেশনটির জন্য ডেটাবেস তৈরি করতে মাইগ্রেশন কমান্ড ব্যবহার করা হচ্ছে।

রেলস ডিবি: তৈরি করুন
>> তৈরি ডেটাবেস 'বিকাশ_ইনস্টগ্রাম' >> ডাটাবেস তৈরি 'টেস্ট_ইনস্টগ্রাম'

রেলের অ্যাপ্লিকেশনটির জন্য বুটস্ট্র্যাপ ইনস্টল করা হচ্ছে

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

রেল অ্যাপ্লিকেশন সহ বুটস্ট্র্যাপ সংহত করার জন্য আমরা রত্ন বুটস্ট্র্যাপ-রুবিজেম ব্যবহার করি (রেলগুলির জন্য বুটস্ট্র্যাপ 4 রুবি রত্ন)

আপনার জেমফাইলে বুটস্ট্র্যাপ যুক্ত করুন:

রত্ন 'বুটস্ট্র্যাপ', '4.> ৪.১.১'

বুটস্ট্র্যাপ রত্ন ইনস্টল করতে বান্ডেল ইনস্টল চালান এবং পাইপলাইনের মাধ্যমে ফাইলগুলি উপলভ্য করতে আপনার সার্ভারটি পুনরায় চালু করুন।

অ্যাপ্লিকেশন.এসএস (অ্যাপ্লিকেশন / সম্পদ / স্টাইলশিট / অ্যাপ্লিকেশন.এসএস) কনফিগার করুন

  • Application.ssss এ প্রয়োগ
  • তারপরে, স্যাস ফাইল থেকে সমস্ত * = প্রয়োজনীয় এবং * = প্রয়োজনীয়_ট্রি স্টেটমেন্ট সরান। পরিবর্তে, স্যাস ফাইলগুলি আমদানি করতে @ ইমপোর্ট ব্যবহার করুন।
  • প্রয়োগ.এসএসএস-এ বুটস্ট্র্যাপ শৈলীগুলি আমদানি করুন:
@ ইমপোর্ট "বুটস্ট্র্যাপ";

প্রয়োগ.জেজে কনফিগার করুন

বুটস্ট্র্যাপ জাভাস্ক্রিপ্ট jQuery উপর নির্ভর করে। যেহেতু আমরা রেলগুলি 5.1+ ব্যবহার করছি, তাই আপনার জেমফাইলে জেকারি-রেলস রত্ন যুক্ত করুন:

রত্ন 'jquery- রেলস'

আপনার প্রয়োগ.জেজে বুটস্ট্র্যাপ নির্ভরতা এবং বুটস্ট্র্যাপ যুক্ত করুন

// = jquery3 প্রয়োজন // = পপার প্রয়োজন // = বুটস্ট্র্যাপ প্রয়োজন

লেআউট অ্যাপ্লিকেশন

আমি আমাদের লেআউট অ্যাপ্লিকেশনটি 3 টি প্রধান অংশে গঠন করতে যাচ্ছি:

  • ন্যাভিগেশন বার
  • মূল
  • পেয়াদা

নীচের চিত্র মত:

রেলগুলি ডিফল্ট লেআউট ফাইল ব্যবহার করে: অ্যাপ / ভিউ / লেআউট / অ্যাপ্লিকেশন html.erb

লেআউটে HTML কোড যুক্ত করুন (/layouts/application.html.erb):

দুর্দান্ত আইকন ব্যবহার করে

ফন্ট আশ্চর্য আইকন থেকে আমরা আমাদের অ্যাপ্লিকেশনটির জন্য কিছু আইকন ব্যবহার করি। এই আইকনটি সহজেই ব্যবহার করতে আমাদের ফন্ট-দুর্দান্ত-রেলওয়ে রত্ন ইনস্টল করতে সক্ষম হওয়া উচিত।

এটি আপনার জেমফাইলে যুক্ত করুন:

রত্ন 'ফন্ট-অসাধারণ-রেল'

এবং বান্ডেল ইনস্টল চালান।

অ্যাপ্লিকেশন.এসএসএস ফাইলে ফন্ট-অসাধারণ আমদানি করুন:

@ ইমপোর্ট "ফন্ট-দুর্দান্ত";

লেআউটের জন্য সিএসএস কোড (application.scss)

ব্যবহারকারী: সাইন আপ - সাইন ইন - সাইন আউট

এই বিভাগে, আমরা ব্যবহারকারীর জন্য সাইন আপ তৈরি করতে, সাইন ইন করতে এবং সাইন আউট ফাংশন সার্থক রত্ন ব্যবহার করতে যাচ্ছি।

ডিভাইসটি রেলগুলির জন্য একটি নমনীয় প্রমাণীকরণ সমাধান।

এটি 10 ​​মডিউল নিয়ে গঠিত:

  • ডাটাবেস প্রমাণীকরণযোগ্য: সাইন ইন করার সময় কোনও ব্যবহারকারীর সত্যতা যাচাই করতে ডাটাবেসে একটি পাসওয়ার্ড হ্যাশ করে এবং সংরক্ষণ করে The প্রমাণীকরণটি POST অনুরোধ বা HTTP বেসিক প্রমাণীকরণের মাধ্যমে উভয়ই করা যায়।
  • Omniauthable: OmniAuth সমর্থন যোগ করে।
  • নিশ্চিতকরণযোগ্য: নিশ্চিতকরণের নির্দেশাবলী সহ ইমেলগুলি প্রেরণ করে এবং সাইন ইন করার সময় কোনও অ্যাকাউন্ট ইতিমধ্যে নিশ্চিত হয়েছে কিনা তা যাচাই করে।
  • পুনরুদ্ধারযোগ্য: ব্যবহারকারীর পাসওয়ার্ড পুনরায় সেট করে এবং পুনরায় সেট করার নির্দেশাবলী প্রেরণ করে।
  • নিবন্ধনযোগ্য: একটি নিবন্ধীকরণ প্রক্রিয়া মাধ্যমে ব্যবহারকারীদের সাইন আপ পরিচালনা করে, তাদের অ্যাকাউন্ট সম্পাদনা করতে এবং ধ্বংস করতে দেয়।
  • স্মরণযোগ্য: সংরক্ষিত কুকি থেকে ব্যবহারকারীর মনে রাখার জন্য একটি টোকেন উত্পন্ন এবং সাফ করার ব্যবস্থা করে।
  • অনুসরণযোগ্য: ট্র্যাকগুলি সাইন ইন কাউন্ট, টাইমস্ট্যাম্পস এবং আইপি ঠিকানা।
  • সময়োপযোগযোগ্য: সেশনের মেয়াদ শেষ হয় যা নির্দিষ্ট সময়কালে সক্রিয় ছিল না।
  • বৈধতাযোগ্য: ইমেল এবং পাসওয়ার্ডের বৈধতা সরবরাহ করে। এটি alচ্ছিক এবং কাস্টমাইজ করা যায়, তাই আপনি নিজের বৈধতা সংজ্ঞায়িত করতে সক্ষম হন।
  • লকযোগ্য: সাইন-ইন ব্যর্থতার নির্দিষ্ট সংখ্যক প্রচেষ্টার পরে একটি অ্যাকাউন্ট লক করে। ইমেলের মাধ্যমে বা একটি নির্দিষ্ট সময়ের পরে আনলক করতে পারে।

নকশাকার রত্ন ইনস্টল করা

এটি আপনার জেমফাইলে যুক্ত করুন:

রত্ন 'চালিত'

তারপরে বান্ডিল ইনস্টল চালান।

এর পরে, আপনাকে জেনারেটর চালাতে হবে:

রেলগুলি নকশা তৈরি করে: ইনস্টল করুন

এটি 2 টি ফাইল স্বয়ংক্রিয়ভাবে উত্পন্ন করবে:

  • কনফিগ / initializers / devise.rb
  • কনফিগ / লোকেল / devise.en.yml

ডিভাইস মেলারের জন্য ডিফল্ট ইউআরএল বিকল্পগুলি সেট আপ করুন

বিকাশের পরিবেশে: (কনফিগারেশন / পরিবেশ / વિકાસ.rb)

config.action_mailer.default_url_options = {হোস্ট: 'লোকালহোস্ট', পোর্ট: 3000}

উত্পাদন পরিবেশে:: হোস্ট আপনার অ্যাপ্লিকেশনটির আসল হোস্টে সেট করা উচিত।

ব্যবহারকারী মডেল উত্পন্ন করুন

রেলগুলি ডিভ / মাইগ্রেট / 20180722043305_ ডিভাইস_ক্রিয়েট_ইউজার্স.আরবি তৈরি অ্যাপ / মডেল / ইউজার.আরবি ইনভেস্ট টেস্ট_উইনটি টেস্ট / মডেল / ইউজার_টায়.আরবি তৈরি টেস্ট / ফিক্সচার / ইউজারস.আইএমএল অ্যাপ্লিকেশন / মডেলগুলি / ইউজারআরবি রুট ডিভাইস_র জন্য তৈরি করে : ব্যবহারকারীরা

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

ব্যবহারকারী মডেল ফাইলটি খুলুন (অ্যাপ্লিকেশন / মডেল / ইউজার.আরবি), আপনি ব্যবহারকারী মডেলটিতে অন্তর্ভুক্ত ডিফল্ট নকশা মডিউল দেখতে পাবেন।

নকশাকৃত: ডাটাবেস_অথিতান্ত্রিক,: পুনরুক্তিযোগ্য:: পুনরুদ্ধারযোগ্য,: স্মরণযোগ্য,: ট্র্যাকযোগ্য,: বৈধতাযোগ্য

তারপরে রেল চালান ডিবি: মাইগ্রেট করুন

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

সাইন ইন / লিঙ্ক সাইন আউট যুক্ত করুন

নেভিগেশন বারের ডানদিকে, নিচের মত সাইন_ইন এবং সাইন_আউট লিঙ্ক যুক্ত করুন:

লেআউটটিতে HTML কোড প্রতিস্থাপন করুন (application.html.erb):

দ্বারা

  • user_signed_in? এমন একজন ছদ্মবেশী সহায়তা যা কোনও ব্যবহারকারীকে সাইন ইন করা হয়েছে তা যাচাই করতে।
  • नष्ट করুন_ ব্যবহারকারী_অ্যাসিওন_পথ: সাইন আউট পাথ, পদ্ধতি:: মুছুন ডিফল্ট এইচটিটিপি পদ্ধতিটি কোনও সংস্থান সাইন আউট করার জন্য ব্যবহৃত হয় (ব্যবহারকারী)
  • new_user_session_path: সাইন ইন পথ।

আপনি যখন সাইন ইন করতে আইকনে ক্লিক করেন, আপনি সেই মত দর্শনটি দেখতে পাবেন:

সাইন ইন ভিউ

সাইন ইন করার আগে আপনাকে লগ ইন বোতামের নীচে সাইন আপলিংক ক্লিক করে একটি নতুন অ্যাকাউন্ট তৈরি করতে হবে।

সাইন আপ পৃষ্ঠা দেখুন:

সাইন আপ ভিউ

আপনি নিজের ইমেল এবং পাসওয়ার্ড পূরণ করে সাইন আপ করতে পারেন এবং তারপরে অ্যাপ্লিকেশনটিতে সাইন ইন করতে ফিরে যেতে পারেন।

আপনি যখন সাইন ইন সফল, আইকন-সাইন ইন নেভিগেশন বারে আইকন ব্যবহারকারী দ্বারা প্রতিস্থাপন করা হবে। এবং আপনি যদি আইকন-ব্যবহারকারীকে ক্লিক করেন তবে আপনাকে লগ আউট করতে হবে।

ব্যবহারকারীর প্রোফাইল পৃষ্ঠা তৈরি করুন

ব্যবহারকারীর কলাম যুক্ত করুন

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

রেল g মাইগ্রেশন অ্যাডমোরফিল্ডস ব্যবহারকারীর নাম: স্ট্রিং নাম: স্ট্রিং ওয়েবসাইট: স্ট্রিং বায়ো: টেক্সট ফোন: পূর্ণসংখ্যা লিঙ্গ: স্ট্রিং

মাইগ্রেশন চালান:

রেলস ডিবি: মাইগ্রেট
== 20180813140820 অ্যাডমোরফিল্ডস ব্যবহারকারীগণ: স্থানান্তরিত ==============================
- add_column (: ব্যবহারকারী, ব্যবহারকারী নাম:: স্ট্রিং)
-> 0.0333 এস
- add_column (: ব্যবহারকারী, নাম,: স্ট্রিং)
-> 0.0006 এস
== 20180813140820 অ্যাডমোরফিল্ডস টিউস ব্যবহারকারীগণ: স্থানান্তরিত (0.0363 গুলি) ====================

ব্যবহারকারী নিয়ামক তৈরি করুন

ব্যবহারকারীর প্রোফাইল পৃষ্ঠা তৈরি করতে, প্রথমে আমাদের এই কমান্ডের সাহায্যে ইউজারসকন্ট্রোলার নামে একটি নিয়ামক তৈরি করতে হবে:

রেলগুলি নিয়ন্ত্রণকারী ব্যবহারকারী তৈরি করে

সম্পাদকটিতে অ্যাপ / কন্ট্রোলার / ব্যবহারকারী_কন্ট্রোলআরবিবি ফাইল খুলুন এবং এর মতো কোড দেখুন

বর্গ ব্যবহারকারীগণের নিয়ন্ত্রণকারী <অ্যাপ্লিকেশনকন্ট্রোলার সমাপ্ত

পরবর্তী পদক্ষেপ, ইউজার্স নিয়ন্ত্রণকারীকে একটি শো ক্রিয়া যুক্ত করুন

ক্লাস ইউজারসকন্ট্রোলার <অ্যাপ্লিকেশনকন্ট্রোলার ডিএফ শো শেষ করুন

তারপরে, একটি সম্পর্কিত ভিউ তৈরি করুন হ'ল অ্যাপ / ভিউ / ব্যবহারকারী / শো html.erb

শেষ অবধি, রুটগুলিতে প্রদর্শন ক্রিয়া যুক্ত করুন (কনফিগার / রুট.আরবি)

Rails.application.routes.draw কর
  ...
  সংস্থানসমূহ: ব্যবহারকারীগণ, কেবলমাত্র: [: শো]
শেষ

সংস্থানসমূহ: ব্যবহারকারীগণ, কেবলমাত্র: [: শো] রেলগুলি http: // লোকালহস্ট: 3000 / ব্যবহারকারী /: আইডিতে ব্যবহারকারী কন্ট্রোলারের শো ক্রিয়ায় অনুরোধগুলি ম্যাপ করতে বলে, সাথে: আইডি বর্তমান ব্যবহারকারীর আইডি। যদি বর্তমান ব্যবহারকারীর আইডি 1 হয় তবে ব্যবহারকারীর প্রোফাইল পৃষ্ঠার পয়েন্ট পয়েন্টটি হল http: // লোকালহোস্ট: 3000 / ব্যবহারকারী / 1 1

নেভিগেশন বারে ব্যবহারকারী প্রোফাইল লিঙ্ক আপডেট করুন

ন্যাভিগেশন বার

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

<% যদি ব্যবহারকারী_ সাইনড_ইন? %> ”> <% other%> "> <% শেষ%>

ব্যবহারকারীর প্রোফাইল পৃষ্ঠার জন্য ইউআই তৈরি করুন

আমি ব্যবহারকারীর প্রোফাইল পৃষ্ঠাটিকে 2 বিভাগে বিন্যাস করি: প্রাথমিক তথ্য এবং পোস্টগুলি।

  • বুনিয়াদি তথ্য: অবতার, ব্যবহারকারীর নাম, নাম, পোস্ট, অনুসরণকারী অন্তর্ভুক্ত।
  • পোস্টসমূহ: ব্যবহারকারীর চিত্র ধারণ করে।

বিভাগ 1: ব্যবহারকারীর প্রাথমিক তথ্য

বেসিক তথ্য বিভাগের জন্য মকআপ

এই বিভাগটি 2 কলামে বিভক্ত:

  • বাম কলামটি ব্যবহারকারীর অবতার।
  • ডান কলামে ব্যবহারকারীর অন্যদের তথ্য রয়েছে।

আমি লেআউটে সারি এবং কলামগুলি ব্যবহার করছি, এইচটিএমএল কোডটি দেখতে:

# অ্যাপ / ভিউ / ব্যবহারকারী / শো html.erb
  

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

এই বিভাগে অন্যান্য উপাদান যুক্ত করার পরে, এইচটিএমএল কোডটি দেখতে এমন দেখাচ্ছে:

এই দর্শনটির জন্য সিএসএস: আমি সম্পদ / স্টাইলশিট / ব্যবহারকারী.এসএসএস ফাইল তৈরি করি যা এই পৃষ্ঠার জন্য শৈলী ধারণ করবে এবং এটি এপ্লিকেশন.এসএসএস ফাইলে আমদানি করবে।

@ ইমপোর্ট "ব্যবহারকারী";

ইউজার.এসএসএস-এর নিচে সিএসএস কোড যুক্ত করুন

দৃশ্যটি দেখতে দেখতে:

বিভাগ 1: ব্যবহারকারীর প্রাথমিক তথ্য

বিভাগ 2: ব্যবহারকারীর পোস্ট

4 টি ট্যাব যুক্ত করুন: নীচের চিত্রের মতো পোষ্টস, আইজিটিভি, সংরক্ষণ করা, ট্যাগগড:

POSTS টি IGTV সংরক্ষিত বাঁধা

ব্যবহারকারীদের আরও স্টাইল কোড যুক্ত করুন। এসএসএস:

.user-tabs {সীমানা শীর্ষ: 1px কঠিন #efefef; প্রদর্শন: ফ্লেক্স; ন্যায্যতা-সামগ্রী: কেন্দ্র;
a.tab {উচ্চতা: 35px; মার্জিন-ডান: 50px; লাইন-উচ্চতা: 45px; রঙ: # 999; হরফ-আকার: 12px; হরফ ওজন: 500; পাঠ্য-সারিবদ্ধ: কেন্দ্র; i {প্যাডিং-ডান: 1 পিএক্স; } &: হোভার {পাঠ্য-সজ্জা: কিছুই নয়; ;। a.active {সীমানা শীর্ষ: 1px কঠিন # 262626; রঙ: # 262626; }}

চিত্র বিভাগে: এই বিভাগের প্রতিটি সারি নীচে হিসাবে 3 টি চিত্র উপস্থাপন করবে:

এইচটিএমএল কোড:

আমি এই চিত্রগুলি বিন্যাস করতে সিএসএস ফ্লেক্সবক্স কৌশল ব্যবহার করি, আপনি CSS কোডে কীভাবে ব্যবহার করবেন তা দেখতে পাবেন:

.user-images {প্রদর্শন: ফ্লেক্স; ফ্লেক্স-মোড়ানো: মোড়ানো; ন্যায্যতা-সামগ্রী: স্থান-মধ্যে; মার্জিন: 0 20px;
.wrapper {প্রস্থ: 280px; উচ্চতা: 280px; মার্জিন: 15px; img {প্রস্থ: 100%; সীমানা ব্যাসার্ধ: 4%; }}}

শেষ অবধি, ব্যবহারকারীর প্রোফাইল পৃষ্ঠাটি দেখতে দেখতে:

ব্যবহারকারী প্রোফাইল পৃষ্ঠা

হ্যাঁ, দুর্দান্ত চেহারা! আমরা ব্যবহারকারীর প্রোফাইল পৃষ্ঠা তৈরি করেছি, পরের ধাপে, আমরা ব্যবহারকারীর জন্য সম্পাদনা / আপডেট পৃষ্ঠা যুক্ত করব।

ব্যবহারকারীকে সম্পাদনা / আপডেট করুন

সম্পাদনা প্রোফাইল পৃষ্ঠা তৈরিতে প্রবাহে 4 টি প্রধান পদক্ষেপ রয়েছে:

  • পদক্ষেপ 1: সম্পাদনা প্রোফাইল পৃষ্ঠা যুক্ত করুন
  • পদক্ষেপ 2: লেআউট সম্পাদনা প্রোফাইল পৃষ্ঠা
  • পদক্ষেপ 3: পৃষ্ঠার বামে ন্যাভ-লিঙ্কগুলি যুক্ত করুন
  • পদক্ষেপ 4: পৃষ্ঠার ডানদিকে ফর্ম সম্পাদনা প্রোফাইল যুক্ত করুন।

প্রোফাইল পৃষ্ঠা সম্পাদনার ইউআই:

প্রোফাইল পৃষ্ঠা সম্পাদনা করুন

পদক্ষেপ 1: সম্পাদনা প্রোফাইল পৃষ্ঠা যুক্ত করুন

প্রথম পদক্ষেপে, আমরা নামের সাথে একটি ক্রিয়া যুক্ত করি ইউজার্স কন্ট্রোলারের সম্পাদনা

ক্লাস ইউজারস কনট্রোলার <অ্যাপ্লিকেশন নিয়ন্ত্রণকারী ...
Def সম্পাদনা
শেষ প্রান্ত

তারপরে, অ্যাপ্লিকেশন / দর্শন / ব্যবহারকারী / edit.html.erb একটি সম্পর্কিত ভিউ তৈরি করুন

এরপরে, রুটে সম্পাদনার ক্রিয়া যুক্ত করুন:

সংস্থানসমূহ: ব্যবহারকারীগণ, কেবলমাত্র: [: প্রদর্শন, সম্পাদনা]

আপনি টাইপ কমান্ড দ্বারা সম্পাদনা প্রোফাইল পৃষ্ঠার পাথ দেখতে পাবেন:

রেক রুট ... ... edit_user GET /users/:id/edit(.: ফর্ম্যাট) ব্যবহারকারী # সম্পাদনা

সংস্থানসমূহ: ব্যবহারকারীগণ, কেবলমাত্র: [...,: সম্পাদনা] রেলগুলিকে ব্যবহারকারী নিয়ন্ত্রকের সম্পাদনা ক্রিয়ায় http: // লোকালহস্ট: 3000 / ব্যবহারকারী /: আইডি / সম্পাদনায় অনুরোধগুলি ম্যাপ করতে বলে।

ব্যবহারকারী প্রোফাইল পৃষ্ঠায় প্রোফাইল সম্পাদনা বোতামে লিঙ্ক সম্পাদনা প্রোফাইল যুক্ত করুন:

কারেন্ট_উজার হ'ল ছলনার সহায়ক, এটি বর্তমান ব্যবহারকারী সাইন ইন হয়েছে।

পদক্ষেপ 2: লেআউট সম্পাদনা প্রোফাইল পৃষ্ঠা

আমরা 2 কলাম সহ প্রোফাইল পৃষ্ঠা সম্পাদনা করলাম: বাম কলামটি ক্রিয়াকলাপ এবং ডান কলামটি সম্পর্কিত বিশদ সম্পর্কিত।

প্রোফাইল পৃষ্ঠার সম্পাদনা বিন্যাস।

এইচটিএমএল কোড:

সিএসএস কোড: আমি বিন্যাসে ফ্লেক্স কৌশল ব্যবহার করছি

.user-edit-page {ডিসপ্লে: ফ্লেক্স; মার্জিন-শীর্ষ: 60px; ন্যূনতম উচ্চতা: 500px; .অ্যাকশনস {প্রস্থ: 220px; সীমানা: 1px কঠিন #dbdbdb; d বিবরণ {নমনীয়: 1; সীমানা: 1px কঠিন #dbdbdb; সীমান্ত-বাম: কেউ না; }}

পদক্ষেপ 3: পৃষ্ঠার বামে নেভিগেশন যুক্ত করুন

আমরা এই বিভাগের জন্য উল্লম্ব বড়গুলি সহ বুটস্ট্র্যাপ 4 এর নাভস উপাদানগুলি ব্যবহার করি। নীচে HTML কোডটি দেখুন:

ক্রিয়া বিভাগের জন্য সিএসএস:

.অ্যাকশনস {প্রস্থ: 220px; সীমানা: 1px কঠিন #dbdbdb;
.nav-link {হরফ আকার: 14px; পটভূমি রঙ: সাদা; রঙ কালো; সীমানা ব্যাসার্ধ: 0; প্যাডিং: 12px 0 12px 30px; &: হোভার {কার্সার: পয়েন্টার; nav nav .nav-pills .nav-link.active {সীমানা-বাম: 2px শক্ত; হরফ ওজন: 600; }}

এখন ইউআই দেখতে দেখতে:

বাম সম্পাদনা প্রোফাইল পৃষ্ঠা

পদক্ষেপ 4: পৃষ্ঠার ডানদিকে ফর্ম সম্পাদনা ব্যবহারকারী যুক্ত করুন

Users_controller.rb এ কর্ম সম্পাদনা করতে বর্তমান ব্যবহারকারীকে খুঁজতে একটি লাইন কোড যুক্ত করুন

Def সম্পাদনা @ ব্যবহারকারীর = ব্যবহারকারী.ফাইন্ড (প্যারাম [: আইডি]) সমাপ্ত

ডান কলামে, বর্তমান ব্যবহারকারী আপডেট করতে একটি ফর্ম যুক্ত করুন। আমরা ফর্ম উত্পন্ন করতে রেলগুলির ফর্ম_এই সাহায্যকারী ব্যবহার করি।

নীচের হিসাবে ফর্ম সম্পাদনা ব্যবহারকারী:

ফর্মের সিএসএস:

.ফর্ম-সম্পাদনা-ব্যবহারকারী {প্যাডিং: 30px 100px 10px 50px;
.ফর্ম-গ্রুপ, ইনপুট {ফন্ট-আকার: 14px; রঙ কালো; } ইনপুট, টেক্সারিয়া {সীমানা: 1px কঠিন #efefef; c .col- ফর্ম-লেবেল {পাঠ্য-সারিবদ্ধ: ডান; হরফ ওজন: 600; }
.avatar {উচ্চতা: 38px; প্রস্থ: 38px; সীমানা ব্যাসার্ধ: 50%; u ব্যবহারকারীর নাম {হরফ আকার: 20px; লাইন-উচ্চতা: 22px; মার্জিন-নীচে: 0; change পরিবর্তন-ফটো {রঙ: # 3897f0; পাঠ্য-সজ্জা: কিছুই নয়; হরফ-আকার: 13px; } ইনপুট [প্রকার = 'জমা'] {রঙ: সাদা; }}

ফর্মের ইউআই দেখতে পাবেন:

আপনি যখন ফর্মটিতে তথ্য পূরণ করবেন এবং আপডেট ব্যবহারকারীকে প্রক্রিয়া করতে বোতাম জমা দিন ক্লিক করুন, আপনি কোনও ত্রুটির কোনও ত্রুটি দেখতে পাবেন না:

ত্রুটি ঘটেছিল কারণ আমরা এখনও ব্যবহারকারীর কাছে আপডেটের রুটটি সংজ্ঞায়িত করি না। এখন, আমাদের রুট.আরবিতে আপডেট ব্যবহারকারী রুট যুক্ত করতে হবে add

সংস্থানসমূহ: ব্যবহারকারীগণ, কেবলমাত্র: [: দেখান,: সম্পাদনা করুন: আপডেট]

ফর্মটি পূরণ করুন এবং আবার জমা দিন, আপনার একটি পরিবারের ত্রুটি দেখা উচিত:

অ্যাকশন আপডেটটি খুঁজে পাওয়া যায় নি, সুতরাং আমাদের মতো ইউজারকন্ট্রোলারে আপডেট ক্রিয়া তৈরি করতে হবে:

Def আপডেট কারেন্ট_ইউজার.আপডেট (প্যারামগুলি [: ব্যবহারকারী]) রিডাইরেক্ট_ থেকে বর্তমান_উজার ব্যবহারকারী শেষ

আপডেট ক্রিয়াকলাপে, আমরা বর্তমান ব্যবহারকারীকে প্যারামের উপর ভিত্তি করে আপডেট করি যা ফর্ম সম্পাদনা থেকে পূর্ণ হয়েছে update কারেন্ট_উজার বর্তমান সাইন ইন ব্যবহারকারী।

আবার চেষ্টা করুন, উফ! আপনি এর মতো একটি ত্রুটি পাবেন:

নিষিদ্ধ বৈশিষ্ট্য ত্রুটি

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

সুতরাং এখন, ফরবিডনঅ্যাট্রিবিউটস এরর ঠিক করতে আমাদের ব্যবহারকারীকে আপডেট করার আগে শক্তিশালী পরামিতি ব্যবহার করতে হবে।

আমাদের ক্ষেত্রে শক্তিশালী পরামিতিগুলি ব্যবহার করার জন্য, আমরা এর মতো প্রয়োজনীয় ও অনুমতি পদ্ধতি ব্যবহার করি:

params.require (: ব্যবহারকারী) .প্রিমিট (: ব্যবহারকারীর নাম, নাম:: ওয়েবসাইট,: বায়ো, ইমেল,: ফোন,: লিঙ্গ)

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

Def আপডেট কারেন্ট_ইউজার.আপডেট (ইউজার_প্রেমস) পুনঃনির্দেশ করুন_ বর্তমান_উজার ব্যবহারকারীর শেষ
ব্যক্তিগত
ডিফল্ট ইউজার_প্রেমস প্যারামস.রেয়ায়ার (: ব্যবহারকারী) .প্রিমিট (: ব্যবহারকারীর নাম, নাম:: ওয়েবসাইট,: বায়ো,: ইমেল, ফোন,: লিঙ্গ) শেষ

এখন, ফর্ম সম্পাদনায় ফিরে যান এবং আবার আপডেট জমা দিন। এটা কাজ! আপডেট ব্যবহারকারী সফল হওয়ার পরে এটি ব্যবহারকারীর প্রোফাইল পৃষ্ঠায় পুনর্নির্দেশ করবে।

ব্যবহারকারীর তথ্য আপডেট করার পরে সহজেই পরিবর্তনটি দেখতে, ব্যবহারকারীর আসল ডেটা দ্বারা কিছু জাল তথ্য প্রতিস্থাপনের জন্য আমাদের ব্যবহারকারীর প্রোফাইল পৃষ্ঠাতে (ব্যবহারকারী / শো html.erb) ফিরে যেতে হবে।

এর মতো এইচটিএমএল কোড আপডেট করুন:

<% = কারেন্ট_ইউজার.উজারনেম%> ...
  ...
<% = কারেন্ট_উজার.নেম%> <% = লিঙ্ক_ টু কারেন্ট_ইউজার.ওয়েবসাইট, কারেন্ট_উজার.ওয়েবসাইট, ক্লাস: 'ওয়েবসাইট'%>

উপসংহার

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

পরবর্তী নিবন্ধে, আমি আপনার সাথে অ্যাক্টিভ রেকর্ড (সিআরইউডি, বৈধকরণ, সমিতি), অ্যাক্টিভ স্টোরেজ বৈশিষ্ট্য এবং পৃষ্ঠাতে প্যাকেজটিতে কামিনারি রত্ন ব্যবহার সম্পর্কে বিশদ জানাতে যাচ্ছি।

গিথুব সম্পর্কিত পূর্ণ কোড: https://github.com/thanhluanuit/instuigram

সম্পর্কিত পোস্ট:

  • খণ্ড ২: মাঝারি.com/luanotes/build-instagram-by-ruby-on-rails-part-2
  • অংশ 3: মাঝারি.com/luanotes/build-instagram-by-ruby-on-rails-part-3

তথ্যসূত্র:

  • গাইড রেলগুলি: https://guides.rubyonrails.org/
  • বুটস্ট্র্যাপ: http://getbootstrap.com/
  • রত্নটি তৈরি করুন: https://github.com/plataformatec/devise
  • https://www.codecademy.com/articles/request-response-cycle-dynamic

আরো দেখুন

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