প্রতিক্রিয়া এবং টেলওয়াইন্ড সিএসএস সহ একটি ফিড অ্যাপ কীভাবে তৈরি করবেন

আপনার প্রিয় উত্স থেকে সর্বশেষতম নিবন্ধগুলি আনুন এবং প্রদর্শন করুন

একটি ফিড অ্যাপ পুরো ওয়েব জুড়ে বিভিন্ন উত্স থেকে প্রাপ্ত সংবাদ এবং নিবন্ধগুলিকে সজ্জিত করে।

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

এই টুকরোটির শেষে, আমরা এর অনুরূপ কিছু তৈরি করতে সক্ষম হব: https://ey6n5.csb.app/

আপনি যদি লাইভ, হ্যান্ডস অন অভিজ্ঞতা চান তবে নীচের ভিডিওটি অনুসরণ করুন:

পূর্বশর্ত

  • প্রতিক্রিয়া অ্যাপ্লিকেশন তৈরি করুন (প্রতিক্রিয়া)
  • এক্সিয়াস (এইচটিটিপি)
  • টেলওয়াইন্ড সিএসএস (সিডিএন) (প্রয়োজনীয় নয়)

প্রকল্প স্থাপন করা হচ্ছে

প্রথম পদক্ষেপটি তৈরি করুন-প্রতিক্রিয়া-অ্যাপ্লিকেশন সহ আমাদের প্রতিক্রিয়া প্রকল্প সেট আপ করা। যদি আপনি ইতিমধ্যে এটি ইনস্টল না করে থাকেন তবে এখানে ইনস্টলেশন প্রক্রিয়া সম্পর্কে পড়ুন।

অ্যাপটি তৈরি করতে, কেবল নীচের কমান্ডটি চালান:

। npx অ্যাপ্লিকেশন ফিড-অ্যাপ্লিকেশন তৈরি করুন

সাফল্যের সাথে সিআরএ অ্যাপ্লিকেশন তৈরি করার পরে আসুন অন্য সেটআপগুলিতে আসুন।

মূল ডিরেক্টরিতে src ফোল্ডারে নেভিগেট করুন এবং তৈরি করুন:

  • এর ভিতরে তিনটি ফাইল সহ একটি উপাদান ফোল্ডার: সাইডবার.জেএস, মেইন.জেস, নিবন্ধ.জেএস।
  • একটি config.js ফাইল।
k এমকেডির উপাদানগুলি $ স্পর্শ করুন config.js উপাদানগুলি / সাইডবার.js উপাদানগুলি / main.js উপাদানগুলি / নিবন্ধগুলি .js

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

এখন, পাবলিক ফোল্ডারে, index.html খুলুন এবং এটি টেলওয়াইন্ড সিএসএস দিয়ে আপডেট করুন।

ফিড এপিআই - মেড্রাম এপিআই কীভাবে কাজ করে তা বোঝা

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

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

মূলত, সর্বশেষ নিবন্ধগুলি পেতে, আপনি এই শেষ পয়েন্টে একটি অনুরোধ পাঠাতে পারেন - https://medrum.herokuapp.com/articles/ যা এই জাতীয় কিছু ফিরে আসবে:

[{"শিরোনাম": "জুনো রচনা জুলিয়া দুর্দান্ত করে তোলে", "ইউআরএল": "https://towardsdatasज्ञान.com/juno-makes-writing-julia-awesome-f3e1baf92ea9", "মন্তব্য_আরল": নাল, "পূর্বে": "3 এইচ", "তারিখ": "2020-02-02 04:06:09 এএম ইউটিসি"}, {"শিরোনাম": "লিয়ার পরিচয় করিয়ে দিচ্ছি: মেটা-স্ট্যাটিস্টিকাল লিস্পের মতো ভাষা", "ইউআরএল": "https: / /towardsdatascience.com/introducing-leya-the-meta-statistical-lisp- Like-language-ef9012affbdb "," মন্তব্য_আর্ল ": নাল," পূর্বে ":" 8 ঘন্টা "," তারিখ ":" 2020-02-01 11: 26:32 PM UTC "}, {" শিরোনাম ":" পান্ডাদের সাথে বাস্তবতার রূপান্তর করুন "," url ":" https://towardsdatasज्ञान.com/transform-reality-with-pandas-96f061628030 "," মন্তব্য_আরল ": নাল," পূর্বে ":" 10 ঘন্টা "," তারিখ ":" 2020-02-01 09:34:26 পিএম ইউটিসি "}, {" শিরোনাম ":" স্ট্রিংর এবং রেজেক্স ব্যবহার করে পাঠ্য, বর্ণমালা এবং বিরামচিহ্ন ডেটা আর-তে ফিরিয়ে আনতে ", "url": "https://towardsdatasज्ञान.com/ using-stringr-and-regex-to-extract-features-from-textual-lphanumeric-and-punctuation-data-in-r-2565256c0a77", "মন্তব্য_আর্ল": নাল, "পূর্বে": "13 ঘন্টা", "তারিখ": "2020-02-01 06:31:13 প্রধানমন্ত্রী ইউটিসি"}, {"শিরোনাম ":" অনুমতিগুলির সাথে ব্রাউজার ব্যবহারকারীর অনুমতি প্রাপ্তি "," ইউআরএল ":" https://levelup.gitconnected.com/getting-browser-user-permission-with-tmitted-perifications-api-eafbc9c7f4d7 "," মন্তব্য_আর্ল " : নাল, "পূর্বে": "15 ঘন্টা", "তারিখ": "2020-02-01 04:03:06 PM ইউটিসি"}, {"শিরোনাম": "গুগল কোলাব থেকে আরও কিছু পান", "url": "https : //medium.com/analytics-vidhya/get-more-out-of-google-colab-5bf9d9519a56 "," মন্তব্য_উত্তর ": নাল," পূর্বে ":" 16 ঘন্টা "," তারিখ ":" 2020-02-01 03:34:54 অপরাহ্ন ইউটিসি "}]

আপনি সর্বশেষ, দিন, সপ্তাহ, মাস দ্বারা স্ক্র্যাপ করা নিবন্ধগুলির ব্যবধানগুলি ফিল্টার করতে পারেন। উদাহরণস্বরূপ, আপনি এই সপ্তাহে https://medrum.herokuapp.com/articles/?interval=week ব্যবহার করে সমস্ত নিবন্ধ পোস্ট করতে পারেন।

ফিড পেতে, আপনাকে অবশ্যই একটি উত্স আইডি নির্দিষ্ট করতে হবে, যা এখানে পাওয়া যাবে: https://medrum.herokuapp.com/source/।

Dev.to ফিডগুলি পেতে, আপনাকে নীচের সংমিশ্রণে dev.to উত্স আইডি (5bbb1af8af62ff6841b4b26e) ব্যবহার করতে হবে:

https://medrum.herokuapp.com/feeds/?source=5bbb1af8af62ff6841b4b26e&page=1&sort=popular

আপনি পৃষ্ঠাটি বাছাই করে শেষ পয়েন্টগুলি ফিল্টার করতে পারেন (জনপ্রিয়, সর্বশেষ)।

এটি ব্যবহার বিনামূল্যে!

ফিড অ্যাপ্লিকেশন নির্মাণ

এখন আমরা কীভাবে এপিআই কাজ করে তা বুঝতে পারি, আসুন আমরা কীভাবে এটি আমাদের অ্যাপ্লিকেশনটিতে অন্তর্ভুক্ত করতে পারি তা দেখুন।

Config.js ফাইলটি খুলুন:

রফতানির জন্য SOURCES_URL = "https://medrum.herokuapp.com/source/" রফতানির কাজটি FEEDS_URL = "https://medrum.herokuapp.com/feeds"

এটিতে আমাদের অ্যাপ্লিকেশনটিতে আমরা দুটি শেষ পয়েন্ট ব্যবহার করব।

এখন main.js ফাইলটি খুলুন এবং এটিতে এটি আটকে দিন:

এখানে আমরা উপরে যা করেছি তা এখানে:

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

এরপরে, আমরা সাইডবার.জেএস উপাদান খুলি:

উপরেরটি আসলে বুঝতে সহজ, তবে এখানে ভাঙ্গন এখানে রয়েছে:

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

এরপরে আর্টিকেল.জেএস ফাইলটি খুলুন:

এতে আমরা বেশি কিছু করি নি, আমরা সমস্ত ফিডগুলি প্রদর্শন করার জন্য প্রবন্ধগুলির মাধ্যমে ম্যাপ করেছি।

চূড়ান্ত কাজটি হ'ল আমাদের মেইন.জেএস উপাদানটি অ্যাপ.জেএস ফাইলগুলিতে আমদানি করা:

এটাই! যদি সবকিছু ঠিকঠাক হয় তবে আপনার এমন কিছু দেখা উচিত:

আপনি এখানে একটি লাইভ ডেমো পরীক্ষা করে দেখতে পারেন।

আপনি কোড স্যান্ডবক্সে কোডটি এখানে দেখতে পারেন:

পড়ার জন্য ধন্যবাদ!