রিয়েল এপিআই-এ কেবল ব্যাকএন্ডে রুবি দিয়ে প্রতিক্রিয়া-নেটিভ এবং টেলওয়াইন্ড-সিএসএসে ইনস্টাগ্রাম ক্লোন তৈরি করা

** এই গাইডটি বেসিক রিঅ্যাক্ট.জেএস জ্ঞান এবং রেলগুলিতে রুবির কিছু এক্সপোজার ধরে নিয়েছে **

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

$ এক্সপো ডিআইআই ইনস্ট্যাক্লোন

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

$ সুতা যোগ করুন-নেটিভ-লেজবাইন্ডসকে রিঅ্যাক্ট করুন

এই মুহুর্তে, আমরা এই টিউটোরিয়ালটির উদ্দেশ্যে পুরো ইনস্টলটি ব্যবহার করতে যাচ্ছি টেইলবাইন্ড.কমফিজ.জেএস ফাইলটি তৈরি করতে হবে need

। npx টেলওয়াইন্ড init - সম্পূর্ণ

এটি টেলউইন্ডের সরবরাহিত সমস্ত স্টাইল সহ টেলওয়াইন্ডের সম্পূর্ণ কনফিগারেশন তৈরি করবে।

এর পরে, অ্যাপ্লিকেশনের অভ্যন্তরে আমাদের সমস্ত রাউটিং পরিচালনা করতে প্রতিক্রিয়া-রাউটার-নেটিভ ইনস্টল করুন

$ সুতা যোগ করুন বিক্রিয়া-রাউটার-নেটিভ

এবং আমরা এই প্রকল্পের সমস্ত আইকন পরিচালনা করতে ফন্ট আশ্চর্যরও ব্যবহার করি

$ সুতা যোগ করুন @ ফোর্টওয়াইভেলস / ফন্টউইউজেল-এসভিজি-কোর $ সুতা যোগ করুন @ ফোর্টওয়াইভাল / ফ্রি-সলিড-এসভিজি-আইকনগুলি $ সুতা যোগ করুন

এপিআই কলগুলি হ্যান্ডেল করতে আমাদের এখনও অক্ষগুলি ইনস্টল করতে হবে

arn সুতা যোগ অক্ষ

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

arn সূতা শুরু করুন 

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

ঠিক আছে, তাই আমি আমার রাউটিংগুলি টপ-লেভেল অ্যাপ.জেএস ফাইলগুলিতে পরিচালনা করছি, এখন আমরা একটি ./pages এবং ./ উপাদান উপাদান তৈরি করব।

k mkdir উপাদান পৃষ্ঠা

এবং উপাদান ডিরেক্টরিতে, আমি একটি বটমনাভ উপাদান তৈরি করেছি, এবং পৃষ্ঠাগুলি ডিরেক্টরিতে, পৃষ্ঠা পৃষ্ঠাতে সমস্ত তৈরি করেছি।

components স্পর্শ উপাদানসমূহ / বটমনাভ.জেএস পৃষ্ঠাগুলি / হোম.জেএস পৃষ্ঠা / অনুসন্ধান.জেএস পৃষ্ঠা / অ্যাডফোটো.জেএস পৃষ্ঠা / লাইক.জেএস পৃষ্ঠা / মাইফোটস.জেএস

আপাতত, আমি কেবল ত্রুটিগুলির চারপাশে কাজ করার জন্য তৈরি প্রতিটি উপাদানগুলিতে বেসিক বয়লারপ্লেট যুক্ত করেছি।

// *** লক্ষ্য করুন যে আমি উপরোক্ত সমস্ত ফাইলের জন্য এটি করেছি যে // সুনির্দিষ্টভাবে সমস্ত নাম মেলে ****
আমদানি করুন 'প্রতিক্রিয়া' আমদানি থেকে প্রতিক্রিয়া 'দেখুন, পাঠ্য' থেকে 'প্রতিক্রিয়া-নেটিভ'
কনস্ট হোম = () => {রিটার্ন ( বাড়ি )}
ডিফল্ট হোম রফতানি করুন

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

সুতরাং, এখন আমাদের বটমনাভ উপাদানটি তৈরি করুন এবং বিভিন্ন পৃষ্ঠাগুলির সমস্ত লিঙ্ককে পরিচালনা করি।

https://gist.github.com/cgibsonmm/5703e34445445438c9bf5bfd3f2bf352

এতক্ষণে আপনার কাছে এমন কিছু হওয়া উচিত যা দেখতে দেখতে ভাল লাগে।

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

এবার রবি অন রেল!

অন্য ডিরেক্টরিতে একটি নতুন রেল প্রকল্প তৈরি করতে দেয় যা কেবলমাত্র API হবে এবং বাক্সের বাইরে পোস্টগ্রিসকিউএল ব্যবহার করবে use

new নতুন ইনস্টাক্লোন_ব্যাকেন্ড - অ্যাপি - ডেটাবেস = পোস্টগ্র্যাস্কল রেল

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

পদক্ষেপগুলি আমরা এখানে নেব ...

  1. PostgreSQL এ নতুন ডাটাবেস তৈরি করুন
  2. একটি বেসিক ফটোপোস্ট মডেল তৈরি করুন # চিত্রটির বিষয়ে চিন্তা করবেন না সক্রিয় স্টোরেজটি এটি পরিচালনা করবে
  3. রেলগুলি অ্যাক্টিভ স্টোরেজ ইনস্টল করুন
  4. আমাদের ডাটাবেস স্থানান্তর করুন
s রেলগুলি ডিবি: তৈরি করুন $ রেল জি মডেল ফটোপোস্টের ব্যবহারকারীর নাম: স্ট্রিং $ রেলগুলি সক্রিয়_ স্টোরেজ: ইনস্টল করুন $ রেল ডিবি: স্থানান্তর

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

আপনার রত্ন ফাইলটি দেখতে এমন হওয়া উচিত।

সবকিছু ইনস্টল করতে এখন একটি বান্ডিল ইনস্টল চালান

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

আমাদের ইমেজপোস্ট মডেলটিতে আমাদের এখনও সক্রিয় স্টোরেজ যুক্ত করা দরকার এটি আমাদের মডেলের কোডের একক লাইনের মতোই সহজ

রেল এবং 'র্যাক-কর্স' রত্নের মাধ্যমে বাইরের এপিআইয়ের অনুরোধ গ্রহণ করতে আমাদের এখন কয়েকটি ছোট জিনিস কনফিগার করতে হবে। আপাতত আমাদের ./config/initalizer/cors.rb এটিকে দেখতে দেয় যা বাইরের সংযোগগুলিকে রেল অ্যাক্সেস করতে দেয় এবং যে কোনও এবং প্রতিটি API অনুরোধটি এটি করতে দেয়। *** উত্পাদনের দিকে ধাক্কা দেওয়ার সময় এই নোটটি পরিবর্তন করতে হবে বা ব্যাকএন্ডের ঠিকানায় যে কেউ প্রবেশ করতে পারে অ্যাপ্লিকেশনটিতে ***

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

$ রেল জি সিরিয়ালাইজার ইমেজপোস্ট

এটি একটি /

আমরা এখানে কি করেছি?

  1. আমরা আমাদের অনুরোধটি থেকে ফিরে আসার জন্য তিনটি বৈশিষ্ট্য নির্ধারণ করেছি
  2. আমরা একটি শর্তসাপেক্ষ সেট করি যা কোনও চিত্র ইমেজপোস্টের সাথে সংযুক্ত থাকলে আমাদের চিত্রের পথে ফেরত দেয়।

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

$ এমকেডির। / প্রজাতন্ত্র / চিত্রসমূহ 

এখন কিছু ডামি ডেটা সহ আমাদের ডাটাবেস বীজ করতে দেয় এবং একটি অনুরোধ করার জন্য আমাদের সীমা সেট করুন।

এখানে আমি আমার ইমেজ ফোল্ডার থেকে ফেকার এবং এলোমেলো চিত্র ব্যবহার করে 100 ইমেজপোস্ট তৈরি করি। এখন আমাদের বীজ ফাইল চালাতে দিন

s রেল ডিবি: বীজ

এখন আমাদের কেবলমাত্র আমাদের নিয়ামক তৈরি করতে হবে এবং আমাদের সূচক ক্রিয়াটি সেট আপ করতে হবে।

s রেল জি নিয়ন্ত্রণকারী ইমেজপোস্ট সূচক

এটি একটি নতুন কন্ট্রোলার ফাইল তৈরি করে খালি সূচক ক্রিয়াকলাপের দ্বারা পপুলেশন করা উচিত ছিল, চলুন বর্তমানে ডাটাবেসে থাকা ইমেজপোস্টগুলি সমস্ত ফিরিয়ে দিতে সেই ফাইলটিতে দুটি লাইন যুক্ত করা যাক।

এই দু'টি লাইনের কোড সেই সমস্ত ভয়ঙ্কর এন +1 কোয়েরিকে আটকাতে সমস্ত ইমেজপোস্টগুলি এবং সংযুক্ত চিত্রটি সন্ধান করবে। এই মুহুর্তে যদি আমরা আমাদের রেল সার্ভার চালাই তবে আমাদের জেএসওন অনুরোধ এবং প্রতিক্রিয়াটি যাচাই করতে সক্ষম হওয়া উচিত।

s রেল এস 

জেএসএন থাকুক !!!

এখন আসুন ব্রাউজারে আসুন এবং আমাদের এপিআই এর শেষ পয়েন্টটি পরীক্ষা করুন। HTTP: // লোকালহোস্ট: 3000 / চিত্র_পোস্ট / সূচীতে নেভিগেট করুন এবং আমাদের সমস্ত ডেটা সহ আপনার JSON এর একটি সুন্দর অংশ দেখতে হবে।

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

সুতরাং, আপনি যদি এখনও হুক ব্যবহার না করে থাকেন তবে স্টেট এবং ইউজএফেক্ট আপনার কাছে বিদেশী হতে পারে তবে এটি আসলে খুব খারাপ নয়।

কনস্ট [পোস্টস, সেটপোস্টস] = ইউজ স্টেট ([])

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

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

useEffect (() => {
// দ্বিতীয় আর্গুমেন্ট হিসাবে খালি অ্যারে দিয়ে লিখিত ব্যবহারের প্রভাব // এটি কেবলমাত্র প্রাথমিক রেন্ডারে চালিত হয়
}, [])

ঠিক আছে এখন কোডটি বের করার জন্য আমি একটি। / কম্পোনেন্টস / ফটোপোস্ট.জগুলি প্রকল্পে যুক্ত করেছি এবং এটি আমাদের প্রকল্পে দেখা প্রতিটি ছবি পরিচালনা করবে।

ঠিক আছে এই মুহুর্তে সবকিছু কাজ করা উচিত এবং আপনি যখন আমাদের অ্যাপ্লিকেশনটির হোম বোতামে ক্লিক করেন আমাদের ডাটাবেসে সমস্ত 100 টি পোস্টের একটি তালিকা দেখতে হবে।

Woot!

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

এটি আরও একটি পূর্ণ বৈশিষ্ট্যযুক্ত অ্যাপ্লিকেশন তৈরির লক্ষ্য সহ সম্ভবত ছয় অংশের টিউটোরিয়ালের একটি অংশ। আরও জন্য থাকুন দয়া করে!

সামনের শেষ গিট

পিছনের গিট

আরো দেখুন

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