দক্ষ ওয়েব স্ক্র্যাপিং:জাভাস্ক্রিপ্টের সাথে ডেটা বের করতে এবং সংরক্ষণ করতে ব্রাউজার কনসোল ব্যবহার করুন

লিখেছেন প্রবীণ দুবে

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

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

আসুন প্রযুক্তিগত বিবরণে ঝাঁপ দেওয়া যাক।

উচ্চ স্তরের ওভারভিউ

একটি পৃষ্ঠায় সমস্ত লিঙ্ক ক্রল করার জন্য, আমি কনসোলে JS এর একটি ছোট টুকরো লিখেছি। এই জাভাস্ক্রিপ্টটি সমস্ত লিঙ্ক ক্রল করে (1-2 ঘন্টা সময় লাগে, যেমন এটি পেজিনেশনও করে) এবং একটি json ডাম্প করে সমস্ত ক্রল করা ডেটা সহ ফাইল। মনে রাখতে হবে যে ওয়েবসাইটটি একই পৃষ্ঠার অ্যাপ্লিকেশনের মতো কাজ করে তা নিশ্চিত করতে হবে। অন্যথায়, আপনি একাধিক পৃষ্ঠা ক্রল করতে চাইলে এটি পৃষ্ঠাটি পুনরায় লোড করে না। যদি তা না হয়, আপনার কনসোল কোড চলে যাবে।

মাঝারি কিছু পরিস্থিতিতে পৃষ্ঠাটি রিফ্রেশ করে না। আপাতত, আসুন একটি গল্প ক্রল করি এবং স্ক্র্যাপ করার পরে স্বয়ংক্রিয়ভাবে কনসোল থেকে একটি ফাইলে স্ক্র্যাপ করা ডেটা সংরক্ষণ করি৷

কিন্তু আমরা তা করার আগে এখানে চূড়ান্ত সম্পাদনের একটি দ্রুত ডেমো।

ডেমো

1. ব্রাউজার থেকে কনসোল অবজেক্ট ইনস্ট্যান্স পান

// Console API to clear console before logging new data

console.API;

if (typeof console._commandLineAPI !== 'undefined') { console.API = console._commandLineAPI; //chrome

} else if (typeof console._inspectorCommandLineAPI !== 'undefined'){ console.API = console._inspectorCommandLineAPI; //Safari

} else if (typeof console.clear !== 'undefined') { console.API = console;

}

কোডটি ব্যবহারকারীর বর্তমান ব্রাউজারের উপর ভিত্তি করে কনসোল অবজেক্টের উদাহরণ পেতে চেষ্টা করছে। আপনি উপেক্ষা করতে পারেন এবং সরাসরি আপনার ব্রাউজারে দৃষ্টান্ত বরাদ্দ করতে পারেন৷

উদাহরণ, আপনি যদি Chrome ব্যবহার করেন , নিচের কোডটি যথেষ্ট হওয়া উচিত।

if (typeof console._commandLineAPI !== 'undefined') { console.API = console._commandLineAPI; //chrome

}

2. জুনিয়র হেল্পার ফাংশন সংজ্ঞায়িত করা

আমি অনুমান করব যে আপনি এখন পর্যন্ত আপনার ব্রাউজারে একটি মাঝারি গল্প খুলেছেন। লাইন 6 থেকে 12 DOM উপাদানের বৈশিষ্ট্যগুলিকে সংজ্ঞায়িত করে যা গল্পের শিরোনাম, হাততালি গণনা, ব্যবহারকারীর নাম, প্রোফাইল চিত্র URL, প্রোফাইল বিবরণ এবং গল্পের পড়ার সময়, বের করতে ব্যবহার করা যেতে পারে। যথাক্রমে।

এই মৌলিক জিনিস যা আমি এই গল্পের জন্য দেখাতে চাই. আপনি আরও কিছু উপাদান যোগ করতে পারেন যেমন গল্প থেকে লিঙ্ক বের করা, সমস্ত ছবি বা এম্বেড লিঙ্ক।

3. আমাদের সিনিয়র হেল্পার ফাংশন সংজ্ঞায়িত করা — জানোয়ার

যেহেতু আমরা বিভিন্ন উপাদানের জন্য পৃষ্ঠাটি ক্রল করছি, আমরা সেগুলিকে একটি সংগ্রহে সংরক্ষণ করব। এই সংগ্রহটি একটি প্রধান ফাংশনে প্রেরণ করা হবে৷

আমরা একটি ফাংশনের নাম সংজ্ঞায়িত করেছি, console.save . এই ফাংশনের কাজ হল পাস করা ডেটা সহ একটি csv/json ফাইল ডাম্প করা।

এটি আমাদের ডেটা দিয়ে একটি ব্লব অবজেক্ট তৈরি করে। একটি Blob অবজেক্ট অপরিবর্তনীয়, কাঁচা ডেটার ফাইলের মতো বস্তুর প্রতিনিধিত্ব করে। ব্লবগুলি এমন ডেটা উপস্থাপন করে যা জাভাস্ক্রিপ্ট-নেটিভ ফর্ম্যাটে অপরিহার্য নয়৷

একটি লিঙ্ক ট্যাগের সাথে ব্লব তৈরি করুন <;a> যার উপর একটি ক্লিক ইভেন্ট ট্রিগার হয়৷

এখানে console.save এর দ্রুত ডেমো একটি ছোট array সহ ডেটা হিসাবে পাস করা হয়েছে৷

কোডের সমস্ত টুকরো একত্রিত করা, এটি আমাদের কাছে রয়েছে:

1. কনসোল API ইনস্ট্যান্স
2. এলিমেন্ট বের করতে সাহায্যকারী ফাংশন
3. ফাইল তৈরি করতে কনসোল সেভ ফাংশন

একটি ফাইলে ডেটা সংরক্ষণ করতে ব্রাউজারে আমাদের console.save() এক্সিকিউট করি। এর জন্য, আপনি মিডিয়ামের একটি গল্পে যেতে পারেন এবং ব্রাউজার কনসোলে এই কোডটি কার্যকর করতে পারেন।

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

একজন প্রকাশকের হোম পেজ থেকে একাধিক গল্প বের করার জন্য আপনাকে ন্যূনতম কোডটি দিতে হবে।

একাধিক গল্প থেকে প্রোফাইলের বিবরণ পাওয়ার জন্য কোডটি কার্যকর করা যাক।

এই ধরনের যেকোনো অ্যাপ্লিকেশনের জন্য, একবার আপনি ডেটা স্ক্র্যাপ করে ফেললে, আপনি এটি আমাদের console.save-এ পাঠাতে পারেন ফাংশন এবং এটি একটি ফাইলে সংরক্ষণ করুন৷৷

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

আপনি Github

এই নিবন্ধটি পড়ার জন্য আপনাকে ধন্যবাদ! আশা করি এটি আপনাকে খুব বেশি সেটআপ ছাড়াই কিছু ডেটা দ্রুত স্ক্র্যাপ করার দুর্দান্ত ধারণা দিয়েছে। এটা উপভোগ করা হলে তালি বোতাম টিপুন! যদি আপনার কোন প্রশ্ন থাকে, আমাকে একটি ইমেল পাঠান (praveend806 [at] gmail [dot] com)।

কনসোল সম্পর্কে আরও জানতে সম্পদ:

কনসোল ব্যবহার করে | ওয়েব ডেভেলপারদের জন্য টুল | Google Developers
_Chrome DevTools JavaScript Console._developers.google.comBrowser Console কিভাবে নেভিগেট করতে হয় তা জানুন
_Browser Console হল ওয়েব কনসোলের মত, কিন্তু একটি একক সামগ্রী ট্যাবের পরিবর্তে সমগ্র ব্রাউজারে প্রয়োগ করা হয়।_developer.mozilla.orgব্লব
_একটি ব্লব বস্তু অপরিবর্তনীয়, কাঁচা ডেটার একটি ফাইলের মতো বস্তুর প্রতিনিধিত্ব করে। ব্লবগুলি এমন ডেটা উপস্থাপন করে যা অগত্যা…_developer.mozilla.org

বিনামূল্যে কোড শিখুন. freeCodeCamp-এর ওপেন সোর্স পাঠ্যক্রম 40,000-এরও বেশি লোককে ডেভেলপার হিসেবে চাকরি পেতে সাহায্য করেছে। শুরু করুন