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

প্রতিউত্তর: প্রवीণ দুবে

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

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

চলুন প্রযুক্তিগত বিবরণে ঢুকি।

উচ্চ-স্তरीय ওভারভিউ

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

মিডিয়াম কিছু পরিস্থিতিতে পেজ রিফ্রেশ করে না। ফিলহাল, একটি স্টোরি ক্রল করি এবং স্ক্র্যাপিং শেষে কনসোল থেকে স্বয়ংক্রিয়ভাবে ফাইলে ডেটা সংরক্ষণ করি।

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

ডেমো

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

// নতুন ডেটা লগ করার আগে কনসোল ক্লিয়ার করার জন্য কনসোল API
console.API; 
if (typeof console._commandLineAPI !== 'undefined') { console.API = console._commandLineAPI; // ক্রোম 
} else if (typeof console._inspectorCommandLineAPI !== 'undefined'){ console.API = console._inspectorCommandLineAPI; // সাফারি 
} else if (typeof console.clear !== 'undefined') { console.API = console; 
} 

এই কোডটি ব্যবহারকারীর বর্তমান ব্রাউজার অনুযায়ী কনসোল অবজেক্ট ইনস্ট্যান্স পाने চেষ্টা করে। আপনি এটিকে উপেক্ষা করে সরাসরি আপনার ব্রাউজারের ইনস্ট্যান্স অ্যাসাইন করতে পারেন।

উদাহরণস্বরূপ, আপনি যদি ক্রোম ব্যবহার করেন, তবে নিচের কোডই পর্যাপ্ত।

if (typeof console._commandLineAPI !== 'undefined') { console.API = console._commandLineAPI; // ক্রোম 
} 

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

আমি ধরে নিচ্ছি আপনি ইতিমধ্যে ব্রাউজারে একটি মিডিয়াম স্টোরি খুলেছেন। লাইন ৬ থেকে ১২ DOM এলিমেন্টের এট্রিবিউট সংজ্ঞায়িত করে যা স্টোরির শিরোনাম, ক্ল্যাপ কাউন্ট, ইউজারনেম, প্রোফাইল ইমেজ URL, প্রোফাইল বর্ণনা এবং স্টোরির পড়ার সময় বের করতে ব্যবহার করা হয়।

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

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

পেজ থেকে বিভিন্ন এলিমেন্ট ক্রল করার সময় আমরা সেগুলো একটি কালেকশনে সংরক্ষণ করব। এই কালেকশনটি প্রধান ফাংশনগুলোর একটিতে পাস করা হবে।

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

এটি আমাদের ডেটার সাথে একটি Blob অবজেক্ট তৈরি করে। একটি Blob অবজেক্ট কাঁচা, অপরিবর্তনীয় ডেটার একটি ফাইল-সদৃশ অবজেক্ট উপস্থাপন করে। Blob-ها এমন ডেটা উপস্থাপন করে যা জাভাস্ক্রিপ্ট-নেটিভ ফরম্যাটে নাও হতে পারে।

তবে ব্লবটি একটি লিংক ট্যাগ <a> এর সাথে সংযুক্ত করা হয় এবং সেটিতে একটি ক্লিক ইভেন্ট ট্রিগার করা হয়।

এখানে একটি ছোট array ডেটা পাস করে console.save-এর একটি কুইক ডেমো।

সব কোডের টুকরো একসাথে করলে আমরা পাই:

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

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

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

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

চলুন একাধিক স্টোরি থেকে প্রোফাইল বর্ণনা বের করার জন্য কোডটি একশনে দেখি।

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

কনসোল সেভ ফাংশন দ্রুত আপনার কনসোল কোডের সাথে অ্যাটাচ করা যায় এবং ডেটা ফাইলে ডাম্প করতে সাহায্য করে। আমি বলছি না যে আপনাকে অবশ্যই কনসোল ব্যবহার করতে হবে ডেটা স্ক্র্যাপ করার জন্য, কিন্তু иногда এটি খুব দ্রুত পদ্ধতি হয় কারণ আমরা সবাই CSS সিলেক্টর ব্যবহার করে DOM-এর সাথে কাজ করতে অভ্যস্ত।

আপনি কোডটি গিটহাব থেকে ডাউনলোড করতে পারেন।

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

কনসোল সম্পর্কে আরও শিখতে রিসোর্স:

Using the Console | Tools for Web Developers | Google Developers
_ক्रोম ডেভটুলস জাভাস্ক্রিপ্ট কনসোল নেভিগেট করা শিখুন।_ developers.google.com

Browser Console
_ব্রাউজার কনসোল 웹 কনসোলের মতো, কিন্তু একটি একক কন্টেন্ট ট্যাবের পরিবর্তে পুরো ব্রাউজারের জন্য প্রযোজ্য।_ developer.mozilla.org

Blob
_একটি Blob অবজেক্ট কাঁচা, অপরিবর্তনীয় ডেটার একটি ফাইল-সদৃশ অবজেক্ট উপস্থাপন করে..._ developer.mozilla.org

নি:শুল্কে কোডিং শিখুন। freeCodeCamp-এর ওপেন সোর্স ক্যারিকুলাম ৪০,০০০-এর অধিক লোককে ডেভেলপার হিসেবে চাকরি পেতে সাহায্য করেছে। শুরু করুন।