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

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

ভূমিকা

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

অ্যাপটিতে নিম্নলিখিত বৈশিষ্ট্যগুলি থাকবে:

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

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

প্রতিক্রিয়া ব্যবহার করে আমাদের অ্যাপের সম্মুখভাগটি তৈরি করে শুরু করা যাক।

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

p npx তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশন ইনস্টাগ্রাম-ক্লোন $ সিডি ইনস্টাগ্রাম-ক্লোন $ npm শুরু
দ্রষ্টব্য: এনপিএক্স একটি এনপিএম প্যাকেজ রানার। সাধারণ ব্যবহারটি হল অস্থায়ীভাবে বা পরীক্ষার জন্য একটি প্যাকেজ ডাউনলোড এবং চালানো। create-react-app হ'ল একটি এনপিএম প্যাকেজ যা প্রত্যাশা করা হয় কেবল একবার প্রকল্পের লাইফসাইলে একবার চালানো হবে। সুতরাং, এটি একক পদক্ষেপে ইনস্টল করতে এবং চালাতে এনপিএক্স ব্যবহার করা পছন্দ করা হয়। (সূত্র)

সার্ভারটি শুরু হবে এবং আপনাকে http: // লোকালহোস্ট: 3000- তে স্ক্রিন প্রতিক্রিয়া জানাতে (নীচের মত) দেখতে পারা উচিত।

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

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

Ode node_modules ├── package.json ├── সর্বজনীন ├── ├── favicon.ico ├── .h index.html │ └── manifest.json ├── src │ ├── App.test.js │ ── উপাদানগুলি │ │ └── App.js │ ├── index.js ├── ├── logo.svg │ ├── serviceWorker.js └── └── শৈলী ├── .c App.css │ └── সূচক। সিএসএস AD README.md

স্টাইলিংয়ের জন্য আমি রিঅ্যাক্ট-বুটস্ট্র্যাপ প্যাকেজটি ব্যবহার করব। প্যাকেজটি ব্যবহার করে ইনস্টল করুন:

। npm ইনস্টল করুন রিঅ্যাক্ট-বুটস্ট্র্যাপ বুটস্ট্র্যাপ

/Public/index.html এর স্টাইলশিটে সিডিএন লিঙ্কগুলি যুক্ত করার বিষয়টি নিশ্চিত করুন। লিঙ্কগুলি এখান থেকে অনুলিপি করুন।

নিম্নলিখিত কমান্ডটি ব্যবহার করে প্রতিক্রিয়া-অ্যাপোলো গ্রাফকিউএল ক্লায়েন্ট ইনস্টল করুন:

pm এনপিএম অ্যাপোলো-বুস্ট অ্যাপোলো-লিংক-প্রসঙ্গটি ইনস্টল করুন @ অ্যাপোলো / রিএ্যাক্ট হুক @ অ্যাপোলো / রিএ্যাক্ট-হ্যাক গ্রাফিক্যাল

অ্যাপোলো ক্লায়েন্ট আপনাকে ফ্রন্ট-এন্ড থেকে একটি গ্রাফিক্যুয়াল এপিআই ব্যবহার করতে সহায়তা করে।

এর পরে আমরা হাসুরা গ্রাফকিউল ইঞ্জিন এবং পোস্টগ্রিস ব্যবহার করে ব্যাকএন্ড সেটআপ করব।

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

ব্যাকএন্ড সেট আপ করা হচ্ছে

আমাদের পোস্টগ্রিস ডাটাবেস কাঠামো:

টাইপ পোস্ট {আইডি - পূর্ণসংখ্যা, প্রাথমিক কী ক্যাপশন - পাঠ্য ইউআরএল - পাঠ্য তৈরি_এইট - টাইমস্ট্যাম্প সহ টাইম জোন ব্যবহারকারী_আইডি - পাঠ্য} প্রকারের ব্যবহারকারী {নাম - পাঠ্য শেষ_সীন - সময় অঞ্চল অবতার সহ টাইমস্ট্যাম্প - পাঠ্য ইমেল - পাঠ্য আইডি - পাঠ্য, প্রাথমিক কী} টাইপ করুন {আইডি - পূর্ণসংখ্যা, প্রাথমিক কী ব্যবহারকারী_আইডি - পাঠ্য পোস্ট_আইডি - পূর্ণসংখ্যার} প্রকার অনুসরণ করুন {আইডি - পূর্ণসংখ্যা, প্রাথমিক কী অনুসারী_আইডি - পাঠ্য অনুসরণ_আইডি - পাঠ্য}
ডাটাবেস স্ট্রাকচার

সারণী তৈরি করা হচ্ছে

নিম্নলিখিত সারণী তৈরি করুন: ব্যবহারকারী সারণী

ব্যবহারকারীর টেবিল

পোস্ট টেবিল (আইডির টাইপ পূর্ণসংখ্যা রয়েছে (স্বতঃআগ্রহ)):

পোস্ট টেবিল

ইউজার_আইডি কলাম থেকে ইউজার.আইডিতে বিদেশী কী বাধা যুক্ত করুন। সীমাবদ্ধ হিসাবে লঙ্ঘন আপডেট এবং মুছুন সেট করুন।

টেবিলের মতো (আইডিতে টাইপ পূর্ণসংখ্যার (স্বতঃআগ্রহ)) রয়েছে:

টেবিলের মতো

সারণী অনুসরণ করুন (আইডিতে টাইপ পূর্ণসংখ্যার (স্বতঃআগ্রহ)) রয়েছে:

টেবিল অনুসরণ করুন

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

ব্যবহারকারীর টেবিলপোস্ট টেবিল

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

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

আপনি যদি অ্যাক্সেস নিয়ন্ত্রণের সাথে খুব বেশি পরিচিত না হন এবং এটি কীভাবে হাসুরায় কাজ করে তবে অ্যাক্সেস নিয়ন্ত্রণের বেসিকগুলি দেখুন।

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

প্রমাণীকরণের জন্য Auth0 JWT ব্যবহার করা

নিম্নলিখিত চিত্রটি কীভাবে JWT প্রমাণীকরণ কাজ করে তা দ্রুত ব্যাখ্যা করে। এখানে, আগত JWT প্রমাণীকরণের সার্ভার (Auth0) দ্বারা তৈরি করা হয়েছে তা যাচাই করতে অ্যাপ্লিকেশন সার্ভারকে (আমাদের ব্যাকএন্ড) কনফিগার করা দরকার needs (উত্স)

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

আসুন @ অ্যাপোলো / রিএ্যাক্ট-হুক এবং @ auth0 / auth0-spa-js ব্যবহার করে Auth0 দিয়ে শুরু করা যাক। আমাদের এই পদক্ষেপগুলি অনুসরণ করতে হবে:

হাসুরার সাথে অ্যাথ0 ​​জেডাব্লুটি সংহত: হাসুরার সাথে অথ 0 জেডব্লিউটি সংহতকরণের জন্য এই গাইডটি দেখুন এবং জেডব্লু কে (আগত জেডাব্লুটি এর বৈধতার জন্য কী) পান। অ্যাথ0 ​​ড্যাশবোর্ডে মঞ্জুরিপ্রাপ্ত কলব্যাক ইউআরএল, অনুমোদিত ওয়েব অরিজিনস, অনুমোদিত লগআউট ইউআরএলগুলি http: // লোকালহোস্ট: 3000 এ সেট করুন এবং পরিবর্তনগুলি সংরক্ষণ করুন।

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

এখানে, JWT মোডটি কাজ করার জন্য HASURA_GRAPHQL_ADMIN_SECRET কী। কীটি HASURA_GRAPHQL_JWT_SECRETen পরিবেশ পরিবর্তনশীলে রাখুন। আপনি এটি যোগ করার পরে গ্রাফকিউএল শেষ পয়েন্টগুলি কেবলমাত্র অনুমোদন শিরোনাম বা এক্স-হাসুরা-অ্যাডমিন-সিক্রেট শিরোনাম ব্যবহার করে অনুসন্ধান করা যেতে পারে।

অবশেষে, HASURA_GRAPHQL_UNAUTHORIZED_ROLE নাম বেনামে সেট করুন কারণ আমরা অ-প্রত্যাক্ষরিত ব্যবহারকারীদের কিছু ডেটা পড়ার অনুমতি দিই।

অননুমোদিত ভূমিকা: যখন অ্যাক্সেস-কী কেবল অ্যাক্সেস-কী মোডে না প্রেরণ করা হয় বা "অনুমোদন" শিরোনাম জেডব্লিউটি মোডে অনুপস্থিত থাকে তখন ব্যবহৃত হয়। উদাহরণ: বেনামি। এখন যখনই "অনুমোদন" শিরোনাম অনুপস্থিত, অনুরোধের ভূমিকাটি "বেনামে" ডিফল্ট হয়ে যাবে।

পরবর্তী পদক্ষেপটি হল আমাদের Auth0 অ্যাপে নিয়ম যুক্ত করা। নীচে দেখানো অনুসারে আমরা Auth0 অ্যাপে আরও 2 টি বিধি যুক্ত করব:

এখানে আমরা আইডটোকেনকে অ্যাক্সেস টোকেন দিয়ে প্রতিস্থাপন করছি। মূলত, auth0 বিভিন্ন ধরণের টোকেন সরবরাহ করে এবং auth0-spa-js idToken আর প্রকাশ করে না, তাই আমরা অ্যাক্সেস টোকেন ব্যবহার করব।

আপডেট: auth0-spa-js এর 1.2.0 সংস্করণ থেকে, আইডিটোকেনের কাঁচা মান getIdTokenClaims পদ্ধতি ব্যবহার করে প্রকাশ করা হবে।

এখানে টোকেন সম্পর্কে আরও পড়ুন।
নতুন এসপিএ এসডিকে কেবল অনুমোদন কোড গ্রান্ট + পিকেসিই ব্যবহার করে (আর অন্তর্নিহিত অনুদান নয়) সুতরাং আমাদের আইডটোকেনের জায়গায় অ্যাক্সেস টোকেন ব্যবহার করতে হবে ((এই থ্রেডটি দেখুন)।

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

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

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

আমাদের এথ 0 ড্যাশবোর্ড> এপিআইগুলিতে একটি কাস্টম এপিআইও তৈরি করতে হবে যা আমাদের হাসুরা গ্রাফকিএল এপিআইতে নির্দেশ করবে। নীচে প্রদর্শিত হিসাবে একটি নতুন এপিআই তৈরি করুন এবং এটি কোনও নাম দিন। আপনার গ্রাফিক্যালের শেষ পয়েন্ট সহ পরিচয়চিহ্ন পরিবর্তন করুন।

এখন যেহেতু আমরা আমাদের ব্যাকএন্ড এবং আথ 0 সেটআপ পেয়েছি, আমরা প্রতিক্রিয়া অ্যাপটি তৈরি করতে শুরু করতে পারি। কীভাবে তা জানতে এই সিরিজের ২ য় অংশে চলে যান।

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

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

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

আরো দেখুন

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