গ্রাফকিউএল এবং হাসুরার সাথে প্রতিক্রিয়া জানিয়ে একটি ইনস্টাগ্রাম ক্লোন তৈরি করা - দ্বিতীয় খণ্ড

এই টিউটোরিয়ালটি অভিজিৎ সিং লিখেছেন এবং হাসুরা টেকনিক্যাল রাইটার প্রোগ্রামের অংশ হিসাবে প্রকাশিত হয়েছে - এমন উদ্যোগ যা ওপেন সোর্স হাসুরা গ্রাফকিউএল ইঞ্জিনের গাইড এবং টিউটোরিয়াল লেখার পক্ষে সহায়তা করে supports

এই সিরিজের অংশ -১ এ, আমরা আমাদের ব্যাকএন্ড এবং অউথ0 সেটআপ করি। এই অংশে, আমরা আমাদের প্রতিক্রিয়া অ্যাপটি সেটআপ করব এবং এটিকে আমাদের ব্যাকএন্ডে সংযুক্ত করব।

অ্যাপ সেটআপ প্রতিক্রিয়া

আমরা প্রথমে ব্যবহারকারীর প্রমাণীকরণ প্রয়োগ করব। প্রমাণীকরণের জন্য আমরা JWT (JSON ওয়েব টোকেন) ব্যবহার করব। লগইন বোতামটি দেখানোর জন্য প্রথমে আমাদের প্রতিক্রিয়া অ্যাপটিতে কিছু বেসিক হেডার তৈরি করা যাক।

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

অ্যাপোলো গ্রাফকিউএল ক্লায়েন্ট সেটআপ করুন

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

লাইন 15-এ ইউসিকে আপনার গ্রাফকিউএল এন্ডপয়েন্টে হাসুরার পরিবর্তন করুন, যা আপনি হাসুরা কনসোলে খুঁজে পেতে পারেন (মনে রাখবেন আপনি কোথায় টেবিল তৈরি করেছেন)। এখানে আমরা শিরোনাম উপাদান আমদানি করেছি যা আমরা এখন বাস্তবায়ন করব।

শিরোনাম উপাদান তৈরি করুন এবং প্রতিক্রিয়া-রুটগুলি ব্যবহার করুন:

আমরা একক পৃষ্ঠার অ্যাপ্লিকেশন আচরণটি প্রয়োগ করতে প্রতিক্রিয়া-রাউটার ব্যবহার করব। ব্যবহার করে প্রতিক্রিয়া-রাউটার ইনস্টল করুন:

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

আমাদের অ্যাপ্লিকেশনটিতে রিএ্যাক্ট-রাউটার ব্যবহারের জন্য, আমাদের ব্রাউজাররউটারে পুরো অ্যাপটি लपेटতে হবে এটি রাউটিংয়ের জন্য একটি প্রসঙ্গ সরবরাহকারী, যা রাউটিংয়ের জন্য প্রয়োজনীয় বিভিন্ন প্রপস সরবরাহ করে (যেমন ম্যাচ, অবস্থান, ইতিহাস)। আপনি যদি প্রসঙ্গে অপরিচিত হন তবে এটি দেখুন। Index.js এর সামগ্রীগুলি প্রতিস্থাপন করুন:

এরপরে, আমরা অ্যাপের মধ্যে নেভিগেশনের জন্য একটি শিরোনাম উপাদান তৈরি করব। উপাদান ডিরেক্টরিতে একটি Header.js ফাইল তৈরি করুন। Header.js এর সামগ্রীগুলি হ'ল:

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

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

প্রতিক্রিয়া অ্যাপ্লিকেশানের সাথে Auth0 JWT ইন্টিগ্রেশন

প্রতিক্রিয়া অ্যাপ্লিকেশনে Auth0 অন্তর্ভুক্ত করার জন্য রেফারেন্স হিসাবে Auth0- প্রতিক্রিয়া-কুইকস্টার্ট গাইড সহ অনুসরণ করুন। অনুমোদিত কলব্যাক ইউআরএল, অনুমোদিত ওয়েব অরিজিনস, মঞ্জুরিপ্রাপ্ত লগআউট ইউআরএলগুলি http: // লোকালহোস্ট: 3000 এ সেট করে অ্যাথ0 ​​ক্লায়েন্ট কনফিগার করুন এবং যদি আপনি ইতিমধ্যে না করেন তবে কাস্টম এপিআই যুক্ত করুন। এখন auth0-spa-js ইনস্টল করুন:

a npm ইনস্টল করুন @ auth0 / auth0-spa-js

এখন আমরা আমাদের অ্যাপ্লিকেশনটিতে রিএ্যাক্ট-আউথ0-রেপার অন্তর্ভুক্ত করব যা কাস্টম রিঅ্যাক্ট হুকগুলির একটি সেট যা আপনাকে আথ0 এসডিকে নিয়ে কাজ করতে সক্ষম করে। একটি নতুন ডিরেক্টরি src / auth তৈরি করুন এবং ফাইলটি প্রতিক্রিয়া যুক্ত করুন - auth0-wrapper.js এখান থেকে কোড সহ এটি তৈরি করে।

এখন src / auth এ auth / auth_config.json হিসাবে অন্য একটি ফাইল যুক্ত করুন। নিম্নলিখিত কোড সহ auth_config.jsonকে জনসংখ্যা দিন (সেই অনুযায়ী মান পরিবর্তন করুন):

এখন আমরা আমাদের প্রতিক্রিয়া অ্যাপটিতে লগইন কার্যকারিতা অন্তর্ভুক্ত করতে প্রস্তুত। মূলত, আমরা হেডারে লগইন বোতামটি অন্তর্ভুক্ত করব। লগইন / সাইনআপ সম্পূর্ণ হয়ে গেলে এই বোতামটি আমাদের লোকালহোস্টে পুনর্নির্দেশের সাথে অথ0 এর মাধ্যমে লগইন করতে পরিচালিত করে। একই সাথে লগইন / সাইনআপ ডেটা আমাদের ইউজার টেবিলটিতে hasura ব্যাকএন্ডে আপডেট করা হবে যা আমরা আগে যুক্ত করেছি Auth0 নিয়মের কারণে। একবার লগইন হয়ে গেলে, আমরা অ্যাপ.জেএসসে অ্যাথ0 ​​এসডিকে সরবরাহিত ফাংশনগুলি ব্যবহার করে জেডাব্লুটি ফর্ম্যাটে অ্যাক্সেসটোকেন পাব। এই অ্যাক্সেস টোকেনটি ব্যাক-এন্ডে অ্যাপোলো ক্লায়েন্টের ক্যোয়ারীতে অনুমোদনের শিরোনাম হিসাবে ব্যবহৃত হবে, সুতরাং প্রতিটি ক্যোয়ারী যা ব্যাকএন্ডে যায় অনুমোদনের শিরোনাম থাকবে।

প্রথমত, index.js এর বিষয়বস্তুগুলিকে নিম্নলিখিতটিতে পরিবর্তন করুন:

এখানে, আমরা Auth0Provider ব্যবহার করছি যা Auth0 ক্লায়েন্টের জন্য একটি প্রসঙ্গ সরবরাহকারী। যে কোনও শিশু উপাদানগুলিতে এখন Auth0 ক্লায়েন্টের অ্যাক্সেস থাকবে।

আমাদের অ্যাপ্লিকেশনটিতে Auth0 ক্লায়েন্ট সরবরাহ করে, আমরা এখন নিম্নলিখিত উপাদানগুলিতে / Header.js ফাইলের সামগ্রীগুলি প্রতিস্থাপন করেছি:

আমরা আউথ0 দ্বারা সরবরাহিত বিভিন্ন ফাংশনগুলির ব্যবহার করতে আমরা আউট 0 হুক (লাইন 7) ব্যবহার করছি। isAuthenticated ব্যবহারকারীর লগ ইন হয়েছে কিনা তা পরীক্ষা করতে ব্যবহৃত হয়। লগইনWithRedirect নির্দিষ্ট পুনর্নির্দেশ-url এ লগইন পরে লগইন এবং পুনঃনির্দেশ ব্যবহৃত হয়। ব্যবহারকারীর অবজেক্টের বর্তমান লগ ইন করা ব্যবহারকারী সম্পর্কে তথ্য রয়েছে।

এখানে, যদি ব্যবহারকারী লগ ইন থাকে, আমরা ব্যবহারকারীকে ব্যবহারকারী-প্রোফাইলে নিয়ে যাব, যা আমরা পরে প্রয়োগ করব। যদি ব্যবহারকারী লগ আউট হয় তবে আমরা কেবল লগইন বোতামটি দেখাব।

এখন আমরা আমাদের অ্যাপ.জেজেসগুলিতে Auth0 কার্যকারিতা অন্তর্ভুক্ত করতে পরিবর্তন করব। App.js এর সামগ্রীগুলিকে নিম্নলিখিতটিতে পরিবর্তন করুন:

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

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

আমাদের কাছে টোকেন অ্যাক্সেস হয়ে গেলে, অ্যাপোলো ক্লায়েন্ট ব্যবহার করে আমরা আমাদের ব্যাকএন্ডে অনুরোধ জানাতে এটি ব্যবহার করব। শিরোলেখ ব্যবহার করে অ্যাপোলো প্রমাণীকরণের জন্য অ্যাপোলো-ডক্স দেখুন। মূলত, আমরা আমাদের অ্যাপোলো প্রশ্নগুলিতে অ্যাক্সেস টোকেনকে অনুমোদনের শিরোনাম (লাইন 52) হিসাবে পাস করছি। এই ক্লায়েন্টটি এখানে অ্যাপোলো ক্লায়েন্টের জন্য শিশু উপাদানগুলির অ্যাক্সেস সরবরাহ করতে অ্যাপোলোপ্রাইডার (প্রসঙ্গ সরবরাহকারী) এর অভ্যন্তরে ব্যবহৃত হয়।

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

দ্রষ্টব্য: আপনি যদি ত্রুটির মুখোমুখি হয়ে থাকেন তবে প্রতিক্রিয়া-অ্যাপোলোতে কোনও নির্ভরতা রাখবেন না মনে রাখবেন। @ অ্যাপোলো / রিএ্যাক্ট-হুকগুলি পরিবর্তে অবশ্যই ব্যবহার করা উচিত।
এখন আমাদের অ্যাপ্লিকেশনটি দেখতে এমন দেখাচ্ছে

ফিড এবং লাইকগুলি প্রয়োগ করে (লাইকের রিয়েলটাইম আপডেট)

আমরা পোস্টগুলির একটি তালিকা (ফিড) এবং একটি পছন্দ মতো বোতাম প্রয়োগ করব। একটি নতুন উপাদান উপাদান / ফিড.জেস তৈরি করুন:

POSTS_LIST ক্যোয়ারী (লাইন 8) আমাদের ডাটাবেসে পোস্ট টেবিল থেকে বিশদ আনতে ব্যবহৃত হচ্ছে। আমরা পোস্টটির আইডি জিজ্ঞাসা করছি। useQuery (18 লাইন) একটি কাস্টম অ্যাপোলো-ক্লায়েন্টের প্রতিক্রিয়া হুক act আমরা ডেটা অবজেক্টে ক্যারিয়ার ডেটা পাই (লাইন 18) যা পোস্টের উপাদান হিসাবে প্রোপ হিসাবে পাস করা হয়, যা আমরা এখন প্রয়োগ করব।

একটি নতুন উপাদান উপাদান / Post.js তৈরি করুন:

এখানে, আমরা ফিড.জেএস উপাদান দিয়ে প্রপসগুলি পাচ্ছি এবং আইডি প্রপ ব্যবহার করে, আমরা পস এসআইএনএফও কোয়েরি ব্যবহার করে সম্পূর্ণ পোস্টের ডেটা পাচ্ছি। তারপরে আমরা স্টেটিং দিয়ে রিটার্ন স্টেটমেন্টে ডেটা রেন্ডার করছি। আমরা post.created_at ইনস্টাগ্রাম শৈলীতে রূপান্তর করার জন্য ফাংশন টাইমফরফফারফরমডেট (লাইন 68) ব্যবহার করছি। এখন আমাদের এই ফাংশনটি কার্যকর করতে হবে। আমরা লাইক উপাদানটি আমদানি করছি যা কার্যকরীতার মতো যত্ন নেয় যা আমরা পরে প্রয়োগ করব।

একটি নতুন ডিরেক্টরি src / utils তৈরি করুন এবং একটি নতুন টাইমডিফারেন্স.জেএস ফাইল তৈরি করুন:

তারিখ-কালীন ডেটা আমাদের প্রয়োজনীয় ফর্ম্যাটে রূপান্তর করা এটি কেবল একটি ইউটিলিটি ফাংশন।

এখন আমরা লাইক উপাদানটি বাস্তবায়ন করব। একটি নতুন ফাইল উপাদান / Like.js তৈরি করুন:

উপাদানগুলির মতো প্রপসের মাধ্যমে পোস্ট_আইডি পাওয়া যায়। এখানে আমরা দুটি মিউটেশন এবং একটি কোয়েরি লিখছি। FETCH_LIKES টি পোস্ট টেবিল থেকে পছন্দগুলির সংখ্যা আনতে ব্যবহৃত হয়। বর্তমানে আমরা লগ ইন করা ব্যবহারকারী ইতিমধ্যে পোস্টটি (লাইন 15) পছন্দ করেছে কিনা তাও আমরা আনছি। LIKE_POST এবং DELETE_LIKE লাইক টেবিলের মতো পছন্দ সন্নিবেশ করতে এবং লাইক টেবিল থেকে যথাক্রমে মুছতে ব্যবহৃত হয়।

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

আমাদের দুটি মিউটেশন রয়েছে, লাইকটি জমা দিন (58 লাইন) এবং মুছে ফেলুন (লাইনের 69)। উভয় মিউটেশনগুলি রিফেটচুয়েশিয়ার যুক্তি (লাইন 60) ব্যবহার করে যা FETCH_LIKES ক্যোয়ারীটি পুনরায় পাঠাতে ব্যবহৃত হয়, সুতরাং নতুন মান সহ অ্যাপোলো ক্যাশে আপডেট করে। এটি রিয়েল-টাইম পছন্দগুলি প্রয়োগ করে।

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

স্যুইচটি প্রতিক্রিয়া-রাউটারের একটি অংশ যা তাদের পাথের সাথে উপাদানগুলির সাথে মেলে ব্যবহৃত হয়। পোস্ট টেবিলটিতে হাসুরা কনসোল থেকে কিছু এলোমেলো ডেটা (পোস্ট) .োকান অ্যাপটি চেষ্টা করে দেখুন।

এখন আমাদের অ্যাপ্লিকেশনটি দেখতে এমন দেখাচ্ছে

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

ব্যবহারকারীর প্রোফাইল কার্যকর করা হচ্ছে

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

একটি নতুন উপাদান উপাদান / প্রোফাইল.js তৈরি করুন:

আমাদের কাছে তিনটি আলাদা প্রশ্ন রয়েছে, যা ব্যবহারকারীর সমস্ত বুনিয়াদি ডেটা প্রদর্শিত হবে। লক্ষ্য করুন যে আমরা একসাথে সমস্ত প্রশ্ন কল করতে পারতাম, তবে অনুসরণের পরিবর্তনের ক্ষেত্রে প্রশ্নগুলি পুনরায় পাঠানোর সময়, আমাদের ক্যাশে আপডেট করার জন্য সমস্ত ডেটা পুনরায় সংযুক্ত করতে হবে, তবে কেবল অনুসরণের তথ্য পরিবর্তন হবে changed সুতরাং আমরা NUMBER_OF_FOLLOWERS (লাইন 41) এবং NUMBER_OF_FOLLOWING (লাইন 31) এর জন্য দুটি পৃথক ক্যোয়ারী করেছি। আমরা এই অনুসন্ধানগুলি রফতানি করেছি, সুতরাং অনুসরণ উপাদান প্রয়োগ করার সময়, আমরা কোয়েরিগুলি আমদানি করতে এবং পুনরায় সেট করতে সক্ষম হব। আমরা অনুসরণ কার্যকারিতা বাস্তবায়ন শুরু করলে এটি আরও স্পষ্ট হয়ে উঠবে।

আমরা প্রাপ হিসাবে ইউজার_আইডি পাচ্ছি যা প্রদত্ত ইউজার_আইডের জন্য ব্যবহারকারীর তথ্যের জন্য আমাদের ব্যাকএন্ড ডাটাবেসটি অনুসন্ধান করতে ব্যবহৃত হবে। এরপরে ডেটা রেন্ডার করা হয় ()। এখানের প্রপস (ইউজার_আইডি) ইউআরএল আকারে পাস হচ্ছে এবং আমরা সেই প্রপসটি পেতে প্রপস.ম্যাচ.প্রেমস.আইডি ব্যবহার করছি। এই প্রপসগুলি প্রতিক্রিয়া-রাউটার ব্রাউজাররউটার প্রসঙ্গ সরবরাহকারী দ্বারা সরবরাহ করা হয়েছে, যা আমাদের সূচি.জেএস ফাইলটিতে অন্তর্ভুক্ত রয়েছে।

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

এছাড়াও আমরা ব্যবহারকারীর প্রোফাইলের নীচে পোস্ট গ্রিডটি প্রয়োগ করতে, প্রতি সারিতে তিনটি আইটেম (লাইন 147) সহ প্রতিক্রিয়া-বুটস্ট্র্যাপ সারিগুলি ব্যবহার করছি। গ্রিডে প্রতিটি পোস্ট আইটেম একটি ক্লিকযোগ্য লিঙ্ক যা সংশ্লিষ্ট পোস্টে নিয়ে যায়। এখানে, আমরা 148 লাইনে url (to = {"/ post /" + post.id}) এর মাধ্যমে প্রপস হিসাবে আইডি দিচ্ছি, যা প্রাপ্ত উপাদানগুলির মধ্যে props.match.params.id এর মাধ্যমে অ্যাক্সেস করা হয়েছে। প্রপ কেটে দেওয়ার এটি একটি প্রতিক্রিয়া-রাউটার উপায় way আরও বিশদ জন্য এই উদাহরণ দেখুন।

এখন, আমরা ফলো উপাদানটি বাস্তবায়ন করব। একটি নতুন ফাইল উপাদান / অনুসরণ.js তৈরি করুন:

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

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

এখন, আমরা App.js এ প্রয়োজনীয় পরিবর্তন করব will তবে প্রথমে উপাদান / SecuredRoute.js হিসাবে একটি নতুন ফাইল তৈরি করুন:

এটি আমাদের কিছু সুরক্ষিত রুট তৈরি করতে সহায়তা করবে যা কেবলমাত্র ব্যবহারকারী লগ ইন থাকলেই অ্যাক্সেস করা যায়। রাউটিংয়ের সময় আমরা সুরক্ষিত রুটগুলি ব্যবহার করব। সুরক্ষিত রুট ব্যবহার করে, যদি কেউ লগ-ইন না করেই ইউআরএলগুলি অ্যাক্সেস করার চেষ্টা করে তবে ব্যবহারকারীকে স্বয়ংক্রিয়ভাবে লগইন করতে পুনঃনির্দেশিত করা হবে।

এখন App.js এ নিম্নলিখিত পরিবর্তনগুলি করুন:

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

ব্যবহারকারীর প্রোফাইলটি দেখে মনে হচ্ছে

জমা দেওয়ার পোস্ট কার্যকারিতা কার্যকর করা হচ্ছে

একটি নতুন ফাইল উপাদান / আপলোড.জেস তৈরি করুন:

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

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

এখন আমরা App.js এ প্রয়োজনীয় পরিবর্তনগুলি করব:

যদি ব্যবহারকারী প্রমাণীকৃত হয় তবে আমরা একটি আপলোড বোতামটি দেখাব যা ক্লিক করার পরে নিম্নলিখিত পপআপটি খুলবে:

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

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

স্বীকৃতি:

টাইমডিফারেন্স ফাংশন: https://github.com/howtographicql/react-apollo

কয়েকটি স্টাইল নেওয়া হয়েছে: https://pusher.com / টিউটোরিয়ালস / ইন্সটগ্রাম- ক্লোন- পার্ট-1

লেখক সম্পর্কে

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

মূলত https://blog.hasura.io এ 6 সেপ্টেম্বর, 2019 এ প্রকাশিত।

আরো দেখুন

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