پست‌های انتشارات Xeniac

برای دوست عزیزمان، محمدمهدی فخرالاسلام

یوسف روشندل — Wed, 05 Feb 2025 22:05:04 +0330

با قلبی پر از اندوه، متأسفانه (15 بهمن 1403) محمدمهدی فخرالاسلام، یکی از اعضای تیم زنیاک، برای همیشه از میان ما رفت. دوستی که نه‌تنها در طراحی و برنامه‌نویسی استعداد کم‌نظیری داشت، بلکه اخلاق حرفه‌ای و منش والایش زبانزد تمام کسانی بود که افتخار همکاری با او را داشتند.برای دوست عزیزمان، محمدمهدی فخرالاسلاممهدی در ۳۰ مهر ۱۳۷۷ در شهر کمیجان، استان مرکزی به دنیا آمد و تحصیلات خود را در دانشگاه فنی امیرکبیر اراک در رشته مهندسی نرم‌افزار به پایان رساند. و پس از فارغ‌التحصیلی، دوران خدمت سربازی‌اش را در نیروی زمینی ارتش سپری کرد. او همچنین موفق به کسب رتبه‌ی هشتم المپیاد کشوری کامپیوتر نیر شد.حادثه‌ای که باورش سخت استمهدی در شبی تلخ، در یکی از خیابان‌های مرکز شهر اراک، در یک سانحه‌ی تصادف رانندگی جان خود را از دست داد. او که سوار موتور بود، با دو خودرو تصادف کرد. بعد از انتقال به بیمارستان و خارج شدن از اتاق عمل، متأسفانه به دلیل خون‌ریزی داخلی، تنها یک ساعت پس از حادثه، از میان ما رفت... باورش سخت است که او دیگر در کنار ما نیست.از روزهای اول دوستی تا پروژه‌های بزرگآشنایی ما به سال ۱۳۹۲ و دوران دبیرستان (هنرستان قائم اراک، رشته کامپیوتر) برمی‌گردد. از همان ابتدای مسیر، با هم ساخت پروژه‌های مختلفی را شروع کردیم:زون گیم، که اولین وب‌سایت بازی ما بود.آی‌میون، یک فروشگاه سی‌ دی کی دیجیتال.و در نهایت زنیاک، که آغاز فعالیت حرفه‌ای ما در قالب یک تیم ۶ نفره در دنیای توسعه نرم‌افزار بود.در کنار این‌ها، مهدی روی پروژه‌های متن‌باز (Open Source) متعددی کار کرد که برخی از آن‌ها شامل:پکیج persian-tools: مجموعه‌ای از ابزارهای کاربردی برای زبان فارسی در جاوا اسکریپت.پکیج xmodal: یک مدال سبک برای پروژه‌های Vue.js. پکیج vue-input-validator: یک سیستم قدرتمند برای اعتبارسنجی داده‌ها در Vue.نرم افزار chill-club: استریم ۲۴/۷ موسیقی آرامش‌بخش برای گیمینگ، کدنویسی و مطالعه.نرم افزار Foxhole artillery: یک ماشین حساب ساده برای استفاده از هویتزر، توپخانه صحرایی، قایق‌های توپدار و خمپاره برای بازی foxhole.و بسیاری دیگر.در همین روزها بود که قرار بود کار روی نسخه‌ی جدید وب‌سایت زنیاک را آغاز کنیم. ایده‌های بزرگی در سر داشتیم و آماده بودیم تا قدم‌های تازه‌ای برداریم، اما حالا با رفتن مهدی، نه‌تنها یکی از بهترین دوستان و همکارانمان را از دست دادیم، بلکه مسیر پیش رو هم برایمان تاریک شده است. ادامه دادن بدون او سخت خواهد بود... میراث مهدیکارهای ارزشمند مهدی را می‌توانید در لینک‌های زیر مشاهده کنید:🌐 Website🔗 Dribbble💻 GitHub👔 LinkedInنوشتن این پست، تنها راهی بود که می‌توانستیم گوشه‌ای از عشق و احترام‌مان به مهدی را نشان دهیم. اما حقیقت این است که هیچ واژه‌ای نمی‌تواند جای خالی او را پر کند.از طرف تمام دوستان دوران مدرسه، دانشگاه و همکاران.دلمان برایت خیلی تنگ خواهد شد، مهدی جان... 🕊💔

بهترین شیوه‌های Node.js: راهنمایی برای توسعه‌دهندگان

یوسف روشندل — Sat, 13 Jul 2024 17:22:11 +0330

نود جی‌اس (Node.js) یک ابزار قدرتمند برای ساخت برنامه‌های وب مقیاس‌پذیر و سریع است. با این حال، برای استفاده حداکثری از Node.js، پیروی از بهترین شیوه‌ها مهم است. در این پست، برخی از بهترین شیوه‌های کلیدی برای توسعه نرم افزارهای Node.js را بررسی خواهیم کرد.بهترین شیوه‌های Node.js: راهنمایی برای توسعه‌دهندگان 1. به پروژه خود Structure (ساختار) دهیدنگهداری و توسعه یک پروژه با ساختار مناسب به مراتب راحت‌تر از پروژه‌ای هست که ساختار استاندارد و مناسبی ندارد. در زیر یک Structure ساده آماده کرده‌ام که از آن میتوانید در پروژه های Node.js تان استفاده کنید:my-node-app/ │ ├── src/ │ ├── controllers/ │ ├── models/ │ ├── routes/ │ └── services/ │ ├── tests/ │ ├── .env ├── .gitignore ├── package.json └── README.mdsrc/شامل کد اصلی برنامه شماست.── controllers/مدیریت لاجیک برنامه.── models/تعریف ساختار داده‌ها.── routes/مدیریت endpoint های API ها.── services شامل بیزنس لاجیک‌ها.tests/پوشه مخصوص برای فایل‌های تست پروژه..envذخیره سازی تمامی environment variable ها..gitignoreمشخص کننده فایل های git که باید نادیده گرفته شوند..package.jsonاسکریپت‌ها و Dependency های پروژه .README.mdشرح و توضیحات مربوط به پروژه.2. از Environment Variable ها استفاده کنیدبا استفاده از Environment Variable ها می‌توانید تنظیمات پیکربندی‌های مربوط به پروژ را خارج از کدهایتان ذخیره کنید که این کار علاوه بر اینکه برنامه شمارا امن‌تر می‌کند، بلکه مدیریت آن‌را نیز ساده‌تر خواهد کرد.نمونه یک فایل .env:DB_HOST=localhost DB_USER=root DB_PASS=passwordبا استفاده از dotenv می‌توانید فایل .env را در کدتان لود و استفاده کنید:require('dotenv').config(); const dbHost = process.env.DB_HOST; const dbUser = process.env.DB_USER; const dbPass = process.env.DB_PASS; console.log(`Connecting to database at ${dbHost} with user ${dbUser}`);3. ارورها را به درستی مدیریت کنیدمدیریت صحیح ارورها تضمین می‌کند که برنامه شما بطور ناگهانی کرش نخواهد کرد.app.get('/user/:id', async (req, res, next) => { try { const user = await getUserById(req.params.id); if (!user) { return res.status(404).send('User not found'); } res.send(user); } catch (error) { next(error); } }); app.use((err, req, res, next) => { console.error(err.stack); res.status(500).send('Something went wrong!'); });4. از کد Asynchronous استفاده کنیدنود جی‌اس ذاتاً asynchronous (ناهمگام یا نامتقارن) است. از async و await بری هندل کردن asynchronous کدتان استفاده کنید.async function fetchData() { try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); console.log(data); } catch (error) { console.error('Error fetching data:', error); } } fetchData();5. پکیج‌ها و Dependency های پروژه را آپدیت نگه داریدبطور منظم پکیج‌ها و Dependency ها را به روز کنید تا مطمئن شوید که آخرین ویژگیها و اصلاحات امنیتی را دارید.می‌توانید با استفاده از دستور زیر پکیج‌های قدیمی پروژه را چک کنید:npm outdatedو سپس با دستور زیر آن‌ها را آپدیت کنید:npm update6. تست بنویسدنوشتن تست از رخ دادن بسیاری از باگ‌ها جلوگیری می‌کند و به شما اطمینان می‌دهند که برنامه طبق انتظارتان کار می‌کند.مرحله 1: نصب Jestیکی از محبوب‌ترین فریم‌ورک‌های قدرتمند برای تست کردن کدهای جاوااسکریپت Jest است که با دستور زیر می‌توانید آن‌را نصب کنید:npm install --save-dev jestمرحله 2: نوشتن تست‌هایک فایل تست ایجاد کنید. برای مثال (tests/example.test.js).یک مثال تست نویسی ساده:const sum = (a, b) => a + b; test('adds 1 + 2 to equal 3', () => { expect(sum(1, 2)).toBe(3); });7. از یک Linter استفاده کنیدLinter ابزاری که با آنالیز کردن کد منبع شما، هرگونه خطای برنامه نویسی، اشکالات، خطاهای سبکی و ساختارهای مشکوک را علامت گذاری کند. و در نهایت کدهای خود را تمیز و ثابت نگه دارید.ESLint یکی از محبوب‌ترین گزینه‌ها در میان برنامه نویس‌های جاوااسکریپت است.نصب ESLint:npm install eslint --save-devراه اندازی ESLint:npx eslint --initاضافه کردن lint به package.json پروژه:"scripts": { "lint": "eslint ." }اجرای linter:npm run lintنتجیه‌گیریاستفاده از این روش‌ها به شما کمک می‌کند تا بتوانید نرم افزارهای Node.js بهتری بنویسید که قابلیت نگهداری بیشتری نیز دارند. به خاطر داشته باشید که پروژه خود را ساختار دهید، از environmental variable ها استفاده کنید، خطاها را به درستی مدیریت کنید، کدهای asynchronous بنویسید، dependency ها را به‌روز نگه دارید، تست بنویسید و از linter استفاده کنید.با انجام این کارا نرم افزاهای Node.js تان علاوه بر اینکه قوی‌تر و کارآمد‌تر خواهد شد، بلکه مدیریت و نگهداری آن نیز به مراتب راحت‌تر خواهد بود.امیدوارم که این مقاله براتون مفید بوده باشه.- منبع

پیاده سازی reactivity فریمورک ویو در جاواسکریپت

Mahdi fakhr — Thu, 17 Mar 2022 14:14:48 +0330

توی این آموزش قصد داریم تا با هم از صفر یک سیستم دیتا reactivity رو در جاواسکریپت پیاده سازی کنیم.چرا reactivity?براتون یه مثال میزنم، کد زیر رو در نظر بگیریدconst price = 100 const fee = 10 const total = () => { return price + fee } render(total()) // 110 // new value price = 300 render(total()) // 310همونطوری که میبینید اگر ما بخوایم بدون استفاده از reactivity یک مقدار رو آپدیت کنیم، باید این کار رو به صورت دستی انجام بدیم و در هر مرحله مثل کد بالا، متد های خودمون رو صدا بزنیماما reactivity به ما کمک میکنه این پروسه رو اتوماتیک کنیم و اجازه بدیم روند برنامه صدا زدن متد ها و آپدیت داده های ما رو به عهده بگیره.خروجی این آموزش به این صورت خواهد بودخروجی نهاییری اکتیویتی در ویو جی استو این آموزش سعی میکنیم تا سیستم شبیه به فریم ورک vue رو پیاده سازی کنیم ( نسخه 2 )ما میخوایم ورودی شبیه به کد زیر داشته باشیم ( درست مثل ویو )const App = Observable({ data() { return { price: 300, fee: 10, } }, computed: { totalSpend() { return this.price + this.fee }, }, methods: { sayHello() { console.log("hello world") }, }, })خب برای شروع متد Observable رو تعریف میکنیمconst Observable = (input) => { const deps = {} let effect = null const _app = { ...input.data(), } }از _deps برای نگه داری وابستگی های متغیر ها به متد های computed استفاده میشهاز effect برای نگهداری computed فعال و در حال اجرا استفاده میشهاز _app به عنوان ورودی برنامه که به صورت دیفالت متغیر های داخل آبجکت Data رو داخلش میریزیم، استفاده میشهبرای ری اکتیو کردن داده ها، در جاوااسکریپت API وجود داره به اسمProxy. این API به شما اجازه میده درخواست های ارسالی به آبجکت رو شخصی سازی کنید. ما از این API برای خوندن و نوشتن داده توی متغیر هامون استفاده میکنیمما به 2 تا Proxy نیاز خواهیم داشت. یکی برای گوش کردن به تغییرات دیتا در ابجکت _app و دیگری برای گوش کردن به تغییرات computed هاابتدا با دیتا شروع میکنیم:const Observable = (input) => { const deps = {} let effect = null const _app = { ...input.data(), } // base proxy const _appProxy = new Proxy(_app, { get(target, key) { return target[key] }, set(target, key, value) { target[key] = value return true }, }) return _appProxy }در مرحله بعد Method هامون رو به آبجکت _app اضافه میکنیم// init methods _app.methods = {} Object.keys(input.methods).forEach((key) => { _app.methods[key] = input.methods[key].bind(_app) })تو اینجا از input.methods[key].bind(_app) استفاده شده. برای زمانی هست که وقتی از this استفاده کردیم رفرنس رو به ابجکت _app از دست ندیمتو مرحله بعد computed هامون رو اضافه میکنیم// init computed -- convert to getters Object.keys(input.computed).forEach((key) => { Object.defineProperty(_appProxy, key, { get() { const res = effect.call(_appProxy) return res }, }) })توی اینجا به جای Proxy از DefineProperty علت خاصی نداره فقط میخواستم نشون بدم از هر دو روش میشه این کار رو انجام داد. این کد به ما کمک میکنه، زمانی که کاربر یکی از متد های computed رو صدا زد، ما به اون فاکنشن دسترسی داشته باشیم اضافه کردن reactivity به computed هاما نیاز به مکانیزمی داریم تا بتونیم تشخیص بدیم که computed های ما چه متغیر هایی رو اجرا میکنن و بعد از تشخیص، این computed ها رو به عنوان dependency به متغیر هامون اضافه میکنیم تا در صورت تغییر مقدار هر کدوم از متغیر ها، computed هامون رو دوباره اجرا بکنیمقطعه کد زیر رو نظر بگیریدconst App = Observable({ data() { return { price: 300, } }, computed: { getPrice() { return this.price }, }, }) App.getPrice // 300اگر کد بالا رو اجرا بکنیم، Getter ای که در داخل فاکنشن Obseravable تعریف کردیم اجرا میشه. ما میدونیم که توی جاوااسکریپت در هر لحظه فقط یک دستور میتونه اجرا بشه پس: وقتی که getPrice اجرا میشه، ما باید اون رو به عنوان effect درحال اجرا در نظر بگیریمپس کد بخش computed ما به این صورت تغییر میکنه:// init computed -- convert computeds to getters Object.keys(input.computed).forEach((key) => { Object.defineProperty(_appProxy, key, { get() { effect = input.computed[key] const res = effect.call(_appProxy) effect = null return res }, }) })قبل از اجرا شدن متد computed ما، اون رو در درون متغیر effect قرار میدیم و بعد از اتمام اجرا، اون رو به null تغییر میدیمبه این نکته توجه کنید وقتی که computed ما اجرا میشه effect.call(_appProxy) چون در داخل این متد از this.price استفاده کردیم، این باعث میشه Proxy ما برای دیتا اجرا بشهاز اونجایی که ما effect و متد فعال فعلی رو ذخیره داریم، میتونیم این متد رو به عنوان dependency به متغیر ها اضافه کنیمپس بخش get ما به این صورت تغییر میکنه// base proxy const _appProxy = new Proxy(_app, { get(target, key) { if (!deps[key]) { deps[key] = new Set() } effect && deps[key].add(effect) return target[key] }, // -------------- })ابتدا چک میکنم تا ببینیم متغیر فعلی دارای در داخل ابجکت deps وجود داره یا نه، اگر وجود نداشت اون رو ایجاد میکنیم. علت استفاده از new Set() به این خاطر هست که ما نمیخوایم یک فاکنشن چند بار اجرا بشهبعد از ذخیره deps ها ما همچین ساختاری رو خواهیم داشتconsole.log(deps) /* { price: getPrice() { return this.price; } } */حالا اگر هرکدوم از این دیتا های ما تغییر بکنند، ما dependency های اون را دونه به دونه صدا میزنیمبرای اینکه متوجه بشیم آیا تغییر کردنند یا نه از set در proxy استفاده میکنیم کد ما به این صورت تغییر میکنه:// base proxy const _appProxy = new Proxy(_app, { // ---------------- set(target, key, value) { target[key] = value const _deps = deps[key] if (_deps) { _deps.forEach((effect) => { return effect.call(_appProxy) }) } return true }, })همونطور که میبینیدconst _deps = deps[key] if (_deps) { _deps.forEach((effect) => { return effect.call(_appProxy) }) }همه ی deps ها رو اجرا میکنیم تا مطلع بشن که دیتای ما تغییر کردهاگر تا اینجا دنبال کرده باشید کد ما به این صورت خواهد بودconst Observable = (input) => { const deps = {} let effect = null const _app = { ...input.data(), } // base proxy const _appProxy = new Proxy(_app, { get(target, key) { if (!deps[key]) { deps[key] = new Set() } effect && deps[key].add(effect) return target[key] }, set(target, key, value) { target[key] = value const _deps = deps[key] if (_deps) { _deps.forEach((effect) => { return effect.call(_appProxy) }) } return true }, }) // computed proxy // init methods _app.methods = {} Object.keys(input.methods).forEach((key) => { _app.methods[key] = input.methods[key].bind(_app) }) // init computed -- convert computeds to getters Object.keys(input.computed).forEach((key) => { Object.defineProperty(_appProxy, key, { get() { effect = input.computed[key] const res = effect.call(_appProxy) effect = null return res }, }) }) return _appProxy }خب کار ما اینجا تموم میشه. برای اینکه ببینیم کدی که زدیم کار میکنه یا نه یه پروژه کوچیک با هم انجام میدیمیک ابجکت از کلاس Observable مون میسازیم با ورودی های زیر:const App = Observable({ data() { return { price: 300, fee: 10, } }, computed: { totalSpend() { return this.price + this.fee }, }, methods: { price_up() { this.price++ }, price_down() { this.price-- }, fee_up() { this.fee++ }, fee_down() { this.fee-- }, }, })یک فاکنشن تعریف میکنیم به اسم render وظیفه این فاکنشن اضافه کردن کد html یک جدول به صفحه ماست (مثل گیف پروژه نهایی در بتدای پروژه)const render = () => { const appElem = document.getElementById("app") appElem = `

product price	${App.price}$
Fee	${App.fee}%
Total	${App.totalSpend}$

` } render()همونطور که میبینید در داخل جدول از String Template ها استفاده شده و داده هامون رو قراره نشون بده${App.fee}%همچنین مثل فریمورک vue از custom attribute ها استفاده کردیم تا بتونیم به click event گوش کنیم خب حالا به اونت کلیک روی صفحه گوش میدیم و برسی میکنیم که کاربر کجا کلیک کرده اگر روی المنت هایی که click attribute دارن کلیک کرده باشه، فاکنشن ها رو اجرا میکنیمdocument.addEventListener("click", (e) => { const customClickAttr = e.target.attributes // get click attribute from list of attributes const clickAttr = customClickAttr.getNamedItem("@click") if (clickAttr) { const methodName = clickAttr.value App.methods[methodName]() render() } })بعد از اینکه دیتامون رو اپدیت کردیم نیاز هست تا صفحه رو هم آپدیت کنیم. به خاطر همین بعد از اجرا متد هامون، متد render رو دوباره صدا میزنیمخب پروژه ما اینجا تموم میشه، برای تمرین اگر دوست داشتید سعی کنید مثل Vue قابلیت Watcher و گوش کردن به همه تغییرات متغیر ها رو پیاده کنید.اگر این آموزش براتون جالب بود میتونید کد های این پروژه روی گیت هاب مشاهده کنید[سورس کد پروژه]همچنین میتونید این مطلب رو در بلاگ شخصی من بخونید https://mediv.vercel.app/blog/data-reactivity-in-javascript HAPPY CODING

وب اسکرپینگ (Web Scraping) با JavaScript و Node.js

یوسف روشندل — Thu, 24 Feb 2022 16:51:18 +0330

جاوا اسکریپت با پیشرفت‌هایی که داشته و همچنین معرفی Node.js، حالا به یکی از محبوب‌ترین و پر استفاده‌ترین زبان‌های برنامه‌نویسی دنیا تبدیل شده. فرقی نمی‌کنه قصد توسعه نرم‌افزار وب داشته باشید و یا نرم افزار موبایل و دسکتاپ، جاوااسکریپت برای هر کاری کلی ابزار قدرتمند در اختیارتان قرار میده. حالا قصد دارم تو این مقاله بهتون نشون بدم که چطوری با استفاده از Node.js می‌تونید وب اسکرپینگ کنید.وب اسکرپینگ (Web Scraping) چیست؟قبل از اینکه بریم سراغ اصل مطلب، بهتره که خیلی خلاصه وب اسکرپینگ رو بهتون توضیح بدم:به فرآیند جمع‌آوری خودکار دیتاهای ساختار یافته وب، وب اسکرپینگ و یا استخراج داده‌های وب میگیم.و کاربردهای زیادی از جمله نظارت برروی قیمت‌ها و اخبار، جذب مخاطب، تحقیقات بازاریابی و... داره.روش‌های مختلفی برای اسکرپ کردن وجود داره که هر کدوم مزایا و معایت خاص خودشون رو دارن و من قصد دارم تو این مقاله اسکرپ کردن به روش‌های زیر رو توضیح بدم:JSON APIServer-Side Rendered HTMLJavaScript rendered HTMLو برای هر یک از این ۳ مورد،‌ من از وب‌سایت‌هایnba.com/statsespn.combasketball-reference.com(به ترتیب) استفاده می‌کنم. برای اینکه متوجه بشیم چه چیزی رو باید اسکرپ کنیم، چطوری با استفاده از network request ها API های مربوطه رو پیدا کنیم و چگونه با اسکریپت‌های Node.js، این فرآیند رو خودکار کنیم، لازمه که اول موارد رندر شده در صفحه رو بررسی کنیم.روش شماره ۱: JSON APIیکی از رایج‌ترین روش‌های استفاده شده در وب برای لود کردن دیتا،‌ استاده از درخواست‌‌های asynchronous از طرف جاوااسکریپت به API Server و دریافت داده‌ها با فرمت JSON است که بعد از رندر شدن، به کاربر نمایش داده می‌شن. در این روش، ما با استفاده از اسکریپت نوشته شده در Node.js، درخواست‌های API رو رهگیری می‌کنیم و سپس شروع به کار روی داده‌های JSON می‌کنیم. برای یادگیری این روش از وب‌سایت nba.com/stats استفاده می‌کنیم.پیدا کردن درخواست‌های APIقراره اسکریپتی بنویسیم که اطلاعات مربوط به هر سال LeBron James (بازیکن بسکتبال) رو ذخیره کنه.مرحله ۱: مطلع شدن از داینامیک بودن داده‌هااز اونجایی که فقط میخوایم اطلاعات مروبط به LeBron James رو بگیریم، پس به آدرس nba.com/stats/player/2544 که صفحه این بازیکن میشه میریم.اسکرین شات از صفحه LeBron Jamesهمونطور که می‌بینید، تمام داده‌های مورد نظرمون تو این جدول وجود داره. اما قبل از هرکاری باید برسی کنیم و ببینیم که آیا دیتاها به‌صورت استاتیک در جدول HTML قرار داده شدن و یا به‌صورت داینامیک و از طریق JSON API لود شدن. برای انجام این کار، روی صفحه راست کلیک کنید و گزینه View Page Source رو بزنید و یا از میانبرهای Ctrl+U استفاده کنید.حالا تو صفحه سورس Ctrl+F بزنید و برای مثال عبارت "2020-21" رو سرچ کنید. اگه مثل تصویر پایین عبارتی که سرچ کردید تو سورس نبود، مطلع میشیم که دیتا به‌صورت داینامیک و از طریق JSON API لود شده.اسکرین شات از صفحه سورس LeBron Jamesمرحله ۲: پیدا کردن APIحالا که از داینامیک بودن دیتا‌ها مطمئن شدیم، وقشته بفهمیم که دیتا‌ها از کجا میان. برای این کار، روی جدول راست کلیک کنید و گزینه inspect رو بزنید و یا از میانبر Ctrl+Shift+I استفاده کنید.سورس مربوط به جدول HTMLخوشبختانه در تگ یکسری سرنخ وجود داره که کمی تو این کار کمکمون می‌کنه.همونطوری که مشاهده می‌کنید، جدول به datasets.Base و datasets.Base.sets[1].rows اشاره می‌کنه. حالا باید به دنبال network call هایی بگردیم که با درخواست‌های API تطابق دارن. برای انجام این کار، به تب Network می‌ریم و صفحه رو یکبار رفرش می‌کنیم تا تمام درخواست‌ها ثبت بشن.بعد از اینکه به تب Network رفتید و صفحه رو رفرش کردید، چیزایی که در تصویر زیر مشاهده می‌کنید رو شماهم باید در تب Network مرورگرتون مشاهده کنید. (بسته به مرورگتون ممکنه developer tools شما با مال من کمی متفاوت باشه که چیز مهمی نیست)تب Network مرورگر فایرفاکساینا تمام درخواست‌هایی هستند که مرورگر برای رندر کردن صفحه درست می‌کنه. حالا باید دنبال درخواست API مدنظرمون بگردیم. برای اینکار، روی آیکون XHR کلیک کنید و در کادر مربوط به سرچ، عبارت "Base" رو تایپ کنید.بعد از اعمال فیلتر،‌ از بین درخواست‌ها دنبال درخواستی بگردید که مانند تصویر زیر، در Response آن یکسری اطلاعات JSON برامون برگردونده باشه:playerdashboardyearoveryearریسپانس مربوط بهحالا با استفاده از سرنخ‌هایی که قبلا از جدولمون پیدا کردیم، می‌دونیم که برای پیدا کردن داده‌‌های جدول باید دنبال دیتاستی به اسم Base بگردیم. با کمی دقت به داده‌های Response متوجه می‌شیم که دومین آیتم موجود در resultSets با داده‌های جدول مطابقت داره و همین بهمون نشون میده که این همون درخواست API ای هست که دنبالشیم.دانلود داده‌های Response با استفاده از cURLحالا که می‌دوینم چطوری می‌تونیم داده‌هایی که برامون از اهمیت برخورد دارن رو به‌صورت دستی پیدا کنیم، وقشته که با استفاده از اسکریپت این کار رو خودکار انجام بدیم. در این مرحله قراره از ابزارهای curl و jq در ترمینال استفاده کنیم.برای این کار نیاز که jq روی سیستمون نصب باشه و اگه نصب نیست برید نصبش کنید.خب، حالا باز به تب Network برید و روی playerdashboardyearoveryear راست کلیک کنید و از منوی Copy گزینه Copy as cURL رو بزنید. الان تو کلیپ‌بورد سیستممون یه چیزی شبیه به دستور زیر رو داریم:curl 'https://stats.nba.com/stats/playerdashboardbyyearoveryear?DateFrom=&DateTo=&GameSegment=&LastNGames=0&LeagueID=00&Location=&MeasureType=Base&Month=0&OpponentTeamID=0&Outcome=&PORound=0&PaceAdjust=N&PerMode=PerGame&Period=0&PlayerID=2544&PlusMinus=N&Rank=N&Season=2021-22&SeasonSegment=&SeasonType=Regular+Season&ShotClockRange=&Split=yoy&VsConference=&VsDivision=' \ -H 'Connection: keep-alive' \ -H 'sec-ch-ua: " Not A;Brand"v="99", "Chromium"v="98", "Google Chrome"v="98"' \ -H 'Accept: application/json, text/plain, */*' \ -H 'x-nba-stats-token: true' \ -H 'sec-ch-ua-mobile: ?0' \ -H 'User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.80 Safari/537.36' \ -H 'x-nba-stats-origin: stats' \ -H 'sec-ch-ua-platform: "Linux"' \ -H 'Origin: https://www.nba.com' \ -H 'Sec-Fetch-Site: same-site' \ -H 'Sec-Fetch-Mode: cors' \ -H 'Sec-Fetch-Dest: empty' \ -H 'Referer: https://www.nba.com/' \ -H 'Accept-Language: en-US,en;q=0.9,fa;q=0.8' \ -H 'If-Modified-Since: Sun, 13 Feb 2022 15:37:37 GMT' \ --compressedدستوری که کپی کردید رو با فلگ "--compressed" توی ترمینال paste کنید و بعد از زدن دکمه enter و کمی صبر،‌ می‌بینیم که پاسخ‌های JSON برامون بر‌میگرده.البته اگه از مرورگر کروم استفاده می‌کنید دیگه لازم نیست خودتون فلگ --compressed رو اضافه کنید. چون دستور کپی شده از اونجا، خودش این فلگ رو داره.اگه به فلگ‌های "-H" توی دستور کپی شده دقت کنید، می‌بینید که کلی HTTP Header داریم که به خیلی از اون‌ها اصلا نیازی نداریم.می‌خوام که درخواستمون تا حد ممکن ساده باشه، پس تا جای ممکنه گزینه‌‌های اضافه رو حذف می‌کنم و چیزی که در آخر برامون می‌مونه، دستور زیره:curl 'https://stats.nba.com/stats/playerdashboardbyyearoveryear?DateFrom=&DateTo=&GameSegment=&LastNGames=0&LeagueID=00&Location=&MeasureType=Base&Month=0&OpponentTeamID=0&Outcome=&PORound=0&PaceAdjust=N&PerMode=PerGame&Period=0&PlayerID=2544&PlusMinus=N&Rank=N&Season=2021-22&SeasonSegment=&SeasonType=Regular+Season&ShotClockRange=&Split=yoy&VsConference=&VsDivision=' \ -H 'Connection: keep-alive' \ -H 'x-nba-stats-token: true' \ -H 'User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.80 Safari/537.36' \ -H 'Referer: https://www.nba.com/' \ --compressedاز اونجایی که ریزالتی که تو ترمینال داریم مشاهده می‌کنیم، اصلا خوانا نیست، پس وقشته که از jq استفاده کنیم. برای این کار، آخر دستورمون "| jq" رو اضافه می‌کنیم. التبه jq بجز قشنگ و مرتب‌ کردن ریزالت، قابلیت‌های دیگه‌ای هم داره. براث مثال، با قرار دادن "| jq .resultSets[1].rowSet[0]" آخر دستور، از jq می‌خوایم که برامون فقط سطر اول جدول رو برگردونه:curl 'https://stats.nba.com/stats/playerdashboardbyyearoveryear?DateFrom=&DateTo=&GameSegment=&LastNGames=0&LeagueID=00&Location=&MeasureType=Base&Month=0&OpponentTeamID=0&Outcome=&PORound=0&PaceAdjust=N&PerMode=PerGame&Period=0&PlayerID=2544&PlusMinus=N&Rank=N&Season=2021-22&SeasonSegment=&SeasonType=Regular+Season&ShotClockRange=&Split=yoy&VsConference=&VsDivision=' \ -H 'Connection: keep-alive' \ -H 'x-nba-stats-token: true' \ -H 'User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.80 Safari/537.36' \ -H 'Referer: https://www.nba.com/' \ --compressed | jq '.resultSets[1].rowSet[0]'خروجی دستور بالا:[ "By Year", "2021-22", 1610612747, "LAL", "2022-02-12T00:00:00", 40, 20, 20, 0.5, 36.7, 11, 21.1, 0.52, 2.8, 7.9, 0.352, 4.3, 5.7, 0.746, 1.1, 6.8, 7.9, 6.5, 3.2, 1.6, 1, 0.8, 2.3, 5.3, 29, -0.9, 52.7, 15, 4, 19, 19, 11, 18, 14, 2, 3, 7, 1, 1, 8, 17, 17, 9, 10, 6, 6, 15, 17, 10, 4, 7, 2, 15, 4, 18, 6, 17, 9, 264, "2021-22" ]نوشتن اسکریپت Node.js برای اسکرپ کردن چند صفحهتا اینجای کار URL و HTTP Header هایی که نیاز داریم رو پیدا کردیم و حالا می‌تونیم اسکریپتی بنویسم که API رو بطور اتوماتیک اسکرپ کنه. این اسکریپت رو می‌تونید تقریبا با هر زبانی که بخواید بنویسد، اما تو این مقاله قصد داریم تا با استفاده از Node.js و لایبری request این کارو کنیم.برای ساخت پروژه جاوااسکریپت جدید، به دایرکتوری مد نظرتون برید و تو ترمینال این ۲ دستور زیر رو وارد کنید:npm init -y npm install --save request request-promise-nativeحالا باید درخواستمون رو از فرمت cURL به فرمت موردنیاز برای کتابخونه request، ترجمه کنیم. برای اینکه از مزایای async/await بهره‌مند هم بشیم و بتونیم کدهای asynchronous و خوانا بنویسیم، از Promise استفاده می‌کنیم. فایلی به اسم "index.js" ایجاد کنید و کدهای زیر رو توش قرار بدید:const rp = require("request-promise-native"); const fs = require("fs"); async function main() { console.log("Making API Request..."); // request the data from the JSON API const results = await rp({ uri: "https://stats.nba.com/stats/playerdashboardbyyearoveryear?DateFrom=&DateTo=&GameSegment=&LastNGames=0&LeagueID=00&Location=&MeasureType=Base&Month=0&OpponentTeamID=0&Outcome=&PORound=0&PaceAdjust=N&PerMode=PerGame&Period=0&PlayerID=2544&PlusMinus=N&Rank=N&Season=2021-22&SeasonSegment=&SeasonType=Regular+Season&ShotClockRange=&Split=yoy&VsConference=&VsDivision=", headers: { "Connection": "keep-alive", "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36", "x-nba-stats-origin": "stats", "Referer": "https://stats.nba.com/" }, json: true }); console.log("Got results =", results); // save the JSON to disk await fs.promises.writeFile("output.json", JSON.stringify(results, null, 2)); console.log("Done!"); } // start the main script main();و حالا در ترمینال با زدن دستور زیر، اسکریپت رو اجرا کنید:node index.jsو تمام! حالا اگه به فایل "output.json" که بعد از اجرای دستور بالا، توی دایرکتوری‌مون ایجاد شده برید،‌ داده‌های JSON رو مشاهده می‌کنید.گرفتن دیتای سایر بازیکن‌هاتا اینجا، کارمون تموم شده و اسکریپتی که نوشتیم دیتاهای مربوط به LeBron رو برامون اسکرپ می‌کنه. اما الان قصد دارم تا این یکم این اسکریپت رو ارتقاع بدم تا علاوه بر دیتای LeBron، دیتای چند بازیکن دیگه رو هم اسکرپ کنه.اگه به API URL دقت کنید، عبارت "PlayerID" رو مشاهده می‌کنید:الان فقط به ID سایر بازیکنان نیاز داریم. به صفحه چندتا دیگه از بازیکنا میرم و PlayerID اونارو برمیدارم. در مجموع ما الان ۴ تا بازیکن زیر رو داریم:Player ID | Player | URL2544 | LeBron James | https://stats.nba.com/player/2544/1629029 | Luka Doncic | https://stats.nba.com/player/1629029/201935 | James Harden | https://stats.nba.com/player/201935/202695 | Kawhi Leonard | https://stats.nba.com/player/202695/حالا فقط اسکریپتمون رو به شکل زیر تغییر میدیم تا بتونیم دیتای سایر بازیکن‌ها رو هم اسکرپ کنیم:const rp = require("request-promise-native"); const fs = require("fs"); // helper to delay execution by 300ms to 1100ms async function delay() { const durationMs = Math.random() * 800 + 300; return new Promise(resolve => { setTimeout(() => resolve(), durationMs); }); } async function fetchPlayerYearOverYear(playerId) { console.log(`Making API Request for ${playerId}...`); // add the playerId to the URI and the Referer header // NOTE: we could also have used the `qs` option for the // query parameters. const results = await rp({ uri: "https://stats.nba.com/stats/playerdashboardbyyearoveryear?DateFrom=&DateTo=&GameSegment=&LastNGames=0&LeagueID=00&Location=&MeasureType=Base&Month=0&OpponentTeamID=0&Outcome=&PORound=0&PaceAdjust=N&PerMode=PerGame&Period=0&" + `PlayerID=${playerId}` + "&PlusMinus=N&Rank=N&Season=2019-20&SeasonSegment=&SeasonType=Regular+Season&ShotClockRange=&Split=yoy&VsConference=&VsDivision=", headers: { "Connection": "keep-alive", "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36", "x-nba-stats-origin": "stats", "Referer": `https://stats.nba.com/player/${playerId}/` }, json: true }); // save to disk with playerID as the file name await fs.promises.writeFile( `${playerId}.json`, JSON.stringify(results, null, 2) ); } async function main() { // PlayerIDs for LeBron, Harden, Kawhi, Luka const playerIds = [2544, 201935, 202695, 1629029]; console.log("Starting script for players", playerIds); // make an API request for each player for (const playerId of playerIds) { await fetchPlayerYearOverYear(playerId); // be polite to our friendly data hosts and // don't crash their servers await delay(); } console.log("Done!"); } // start the main script main();در کد بالا، من فانکشنی async به اسم fetchPlayerYearOverYear نوشتم و با استفاده از حلقه for، تمام ID های موجود در آرایه رو fetch کردم و از اونجایی هم که نمی‌خوام سرور رو با تعداد درخواست‌های بالام بمب بارون کنم، بعد از هر مرحله fetch، از delay استفاده کردم.اگه تعداد درخواست‌هامون در یک مدت زمانی کوتاه زیاد باشه، ممکنه به عنوان اسپمر شناخته بشیم و بلاک شویم.اولین بخش از مقاله یعنی آموزش اسکرپ کردن به روش JSON API با استفاده از Node.js تموم شد و حالا روش ۲ و ۳ مونده.روش شماره ۲: Server-side Rendered HTMLعلاوه بر روش قبلی که گرفتن دیتا به‌صورت async از طریق API بود، روش دیگه‌ای وجود داره که در اون دیتا به‌صورت مستقیم و قبل از اینکه صفحه وب لود بشه به HTML رندر میشه. روشی که وب سرورها استفاده می‌کنن. در این قسمت توضیح میدم که چطوری می‌تونیم با دانلود و parse کردن (تبدیل) HTML به کمک Cheerio، دیتا استخراج کنیم.پیدا کردن HTML همراه با دیتادر ایجا قراره داده‌هارو از box scores وب‌سایت espn.com استخراج کنیم.مرحله ۱: مطلع شدن از داینامیک بودن داده‌هامثل روش اول، در این روش هم باید مطمئن بشیم که داده‌ها به‌صورت داینامیک در صفحه لود میشن. برای مثال، می‌خوایم دیتاهای box scores مربوط به یکی از بازی‌های بسکتبال 76ers رو اسکرپ کنیم.لینک گزارش بازی: https://www.espn.com/nba/boxscore?gameId=401160888.اسکرین شات از Box Score مربوط به بازیدقیقا همون کاری که در روش ۱ برای دیدن Source صفحه کردیم، اینبار هم انجام میدیم. روی صفحه راست کلیک کنید و گزینه View Page Source رو بزنید و یا از میانبرهای Ctrl+U استفاده کنید.حالا تو صفحه سورس Ctrl+F بزنید و یکی از نتایجی که تو جدول مشاهده می‌کنید رو سرچ کنید. برای مثال من "0-11" رو سرچ می‌کنم.اسکرین شات از source صفحهاینم از چیزی که دنبالش بودیم!مرحله ۲: پیدا کردن نحوه دسترسی به دیتابعد از اینکه از وجود داده‌ها در HTML مطلع شدیم، حالا باید ببینیم که چطوری می‌تونیم به اون‌ها از طریق مرورگر دسترسی پیدا کنیم. تو اینجا ما به یه چیزی نیاز داریم تا بخش‌هایی از HTML که برامون اهمیت دارن رو شناسایی کنه، چیزی که CSS Selector ها هم به‌خوبی بتونن باهاش کار کنن.دوباره به صفحه بر می‌گردیم و روی جدول راست کلیک می‌کنیم و گزینه Inspect رو میزنیم. در نتجیه باید یه چی شبیه به چیزی که در تصویر زیر می‌بینید رو مشاهده کنید:اسکرین شات از HTML مربوط به جدولالان به یک Selector نیاز داریم که تمام سطرهای جدول یا همون هارو برامون برگردونه که این کار رو با استفاده از فانکشن "document.querySelectorAll()" انجام میدیم. برای این کار، توی Console مرورگرتون کد زیر رو بزنید و enter کنید:document.querySelectorAll('tr')خروجی کد بالا:> NodeList(41) [tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr.highlight, tr.highlight, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr.highlight, tr.highlight, tr, tr, tr.highlight, tr.highlight, tr, tr]همونطور که می‌بینید استفاده از "tr" خیلی کلی هست و کدی که نوشتیم برامون ۴۱ سطر برگردوند و این در حالی است که تیم 76ers فقط ۱۳ بازیکن در جدول داره. دوباره به کدای HTML در Inspector نگاه کنید و متوجه میشید که المنت‌های والد تگ‌های ، یکسری ID و Class دارن:کدهای HTMl جدول Box Scoreبا استفاده از این ID و Class ها، کد Selector مون رو بازنویسی می‌کنیم:document.querySelectorAll('.gamepackage-away-wrap tbody tr')خروجی کد بالا:> NodeList(15) [tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr.highlight, tr.highlight]به هدفمون خیلی نزدیک شدیم. ولی اگه به خروجی نگاه کنید می‌بینید که دو تگ با کلاس highlight برامون برگردونده که خلاصه کل سطرهاست و بهشون نیازی نداریم. می‌تونیم خیلی راحت دستور Selector رو آپدیت کنیم تا اونارو فیلتر کنه:document.querySelectorAll('.gamepackage-away-wrap tbody tr:not(.highlight)')خروجی کد بالا:> NodeList(13) [tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr]عالی شد! حالا یک Selector داریم که تمام سطرهای بازیکن‌ها رو از جدول صفحه Box Score برامون برمیگردونه. کار این قسمت تموم و میشه و حالا نوبت نوشتن اسکریپته.نوشتن اسکریپت Node.js برای اسکرپ کردن صفحهالان علاوه بر URL صفحه‌ای که میخوایم اسکرپ کنیم، یک Selector هم داریم که برامون تمام سطرهایی که از جدول صفحه Box Score می‌خوایم رو برمیگردونه.دانلود صفحه HTMLکاری که اینجا می‌خوایم بکنیم، دقیقا مثل کاریه که در روش قبلی انجام دادیم. به دایرکتوری که میخواید پروژتون رو اونجا ایجاد کنید برید و دستورات زیر رو تو ترمینال وارد کنید:npm init -y npm install --save request request-promise-nativeمن معمولا ترجیح میدم که فایل HTML رو تو دایرکتوری ذخیره کنم تا وقتی که دارم فرآیند Parse کردن رو تکرار می‌کنم، مدام به سرور درخواست نفرستم. پس اول بریم یک اسکریپت به اسم "index.js" بسازیم تا صفحه HTML رو برامون دانلود کنه:const rp = require('request-promise-native'); const fs = require('fs'); async function downloadBoxScoreHtml() { // where to download the HTML from const uri = 'https://www.espn.com/nba/boxscore?gameId=401160888'; // the output filename const filename = 'boxscore.html'; // download the HTML from the web server console.log(`Downloading HTML from ${uri}...`); const results = await rp({ uri: uri }); // save the HTML to disk await fs.promises.writeFile(filename, results); } async function main() { console.log('Starting...'); await downloadBoxScoreHtml(); console.log('Done!'); } main();حالا با وارد کردن دستور زیر در ترمینال، اسکریپت رو ران می‌کنیم:node index.jsحالا در دایرکتوری پروژه، فایلی به اسم boxscore.html داریم که حاوی HTML صفحه‌ی مد نظرمونه.قبل از Parse کردن HTML، بیاید اسکریپت رو آپدیت کنیم تا فقط وقتی فایل رو دانلود که اون فایل در دایرکتوری وجود نداشته باشه. برای انجام این کار، تکه کد زیر (مثل تصویر پایین‌تر) رو قبل از قسمت ایجاد درخواست اضافه می‌کنیم:// check if we already have the file const fileExists = fs.existsSync(filename); if (fileExists) { console.log(`Skipping download for ${uri} since ${filename} already exists.`); return; }تبدیل (Parse) کردن HTML با استفاده از Cheerioبهترین راه برای بیرون کشیدن دیتا از HTML، استفاده از یک HTML Parser مثل Cheerio می‌باشد. Cheerio شباهت زیادی با jQuery داره، با این تفاوت که سمت سروره. ابتدا با زدن دستور زیر در ترمینال، Cheerio رو نصب می‌کنیم:npm install --save cheerioبرای شروع و استفاده از Cheerio، باید HTML رو به عنوان رشته (String) بهش پاس بدیم تا اونو برامون Parse و به قول معروف queryable یا قابل پرس و جو کنه و این کارو با استفاده از دستور load انجام میدیم:const $ = cheerio.load('...')کار خوندن و load کردن فایل HTML توسط Cheerio رو با دستورات زیر انجام میدیم:// the input filename const htmlFilename = 'boxscore.html'; // read the HTML from disk const html = await fs.promises.readFile(htmlFilename); // parse the HTML with Cheerio const $ = cheerio.load(html);بعد از اینه HTML پارس شد، می‌تونیم با استفاده از فانکشن $، Selector مون رو بنویسم:const $trs = $('.gamepackage-away-wrap tbody tr:not(.highlight)')کدی که نوشتیم، تمام ندهای tr جدول رو برامون برمیگردونه و برای اینکه از این بابت هم مطمئن شیم، می‌تونیم از "$.html" استفاده کنیم:console.log($.html($trs));خروجی کد بالا: T. Harris T. Harris SF 38 7-17 3-7 1-1 0 5 5 2 1 0 1 2 3 -10 18 ...حالا می‌تونیم یک object mapping برای اتریبیوت class مربوط به بسازیم تا مقادیر اونو ذخیره کنیم. این کارو روی هر سطر تکرار می‌کنیم تا تمام داده‌ها رو بیرون بکشیم:const values = $trs.toArray().map(tr => { // find all children const tds = $(tr).find('td').toArray(); // create a player object based on the values const player = {}; for (td of tds) { // parse the const $td = $(td); // map the td class attr to its value const key = $td.attr('class'); const value = $td.text(); player[key] = value; } return player: });حالا اگه یه نگاهی به خروجی کارمون بندازیم، یه چیزی شبیه به مقادیر زیر رو خواهیم داشت:[ { "name": "T. HarrisT. HarrisSF", "min": "38", "fg": "7-17", "3pt": "3-7", "ft": "1-1", "oreb": "0", "dreb": "5", "reb": "5", "ast": "2", "stl": "1", "blk": "0", "to": "2", "pf": "3", "plusminus": "-10", "pts": "18" } ... ]به اون چیزی که می‌خوایم خیلی نزدیک شدیم، ولی چندتا مشکل کوچیک داریم. به‌نظر میرسه مقدار name اشتباهه و تمام اعداد، به‌صورت String ذخیره شده. این مشکل رو از روش‌های مختلفی میشه حل کرد و ما از سریع‌ترین روش‌های ممکن برای حلش استفاده می‌کنیم.اول میریم سراغ درست کردن name. اگه به کد HTML نگاه کنید، متوجه میشید که ستون اول نسبت به سایر ستون‌ها، کمی متفاوته: T. Harris T. Harris SF به شکل زیر، اولین تگ توی تگ مربوط به ستون name رو انتخاب می‌کنیم:for (td of tds) { const $td = $(td); // map the td class attr to its value const key = $td.attr('class'); let value; if (key === 'name') { value = $td.find('a span:first-child').text(); } else { value = $td.text(); } player[key] = value; }و حالا نوبت درست کردن اعداده. از اونجایی که می‌دونیم تمام مقادیرمون String هستن، خیلی ساده می‌تونیم تمام اعداد رو به شکل زیر، تبدیل به عدد کنیم:player[key] = isNaN(+value) ? value : +value;با تغییراتی که انجام دادیم، خروجی‌مون بدین شکل میشه:[ { "name": "T. Harris", "min": 38, "fg": "7-17", "3pt": "3-7", "ft": "1-1", "oreb": 0, "dreb": 5, "reb": 5, "ast": 2, "stl": 1, "blk": 0, "to": 2, "pf": 3, "plusminus": -10, "pts": 18 }, ... ]حالا تمام کاری که مونده انجام بدیم، ذخیره کردن مقادیر توی دایرکتوریمونه:// save the scraped results to disk await fs.promises.writeFile( 'boxscore.json', JSON.stringify(values, null, 2) );و تمام! ما HTML رو که داده‌ها از قبل توش رندر شده بود رو دانلود کردیم و بعد با استفاده از Cheerio اونارو لود و Parse کردیم و در نهایت دیتا رو با فرمت JSON در فایل مربوط، ذخیره کردیم.کد کامل اسکریپتی که نوشتیم:const rp = require('request-promise-native'); const fs = require('fs'); const cheerio = require('cheerio'); async function downloadBoxScoreHtml() { // where to download the HTML from const uri = 'https://www.espn.com/nba/boxscore?gameId=401160888'; // the output filename const filename = 'boxscore.html'; // check if we already have the file const fileExists = fs.existsSync(filename); if (fileExists) { console.log(`Skipping download for ${uri} since ${filename} already exists.`); return; } // download the HTML from the web server console.log(`Downloading HTML from ${uri}...`); const results = await rp({ uri: uri }); // save the HTML to disk await fs.promises.writeFile(filename, results); } async function parseBoxScore() { console.log('Parsing box score HTML...'); // the input filename const htmlFilename = 'boxscore.html'; // read the HTML from disk const html = await fs.promises.readFile(htmlFilename); // parse the HTML with Cheerio const $ = cheerio.load(html); // Get our rows const $trs = $('.gamepackage-away-wrap tbody tr:not(.highlight)'); const values = $trs.toArray().map(tr => { // find all children const tds = $(tr).find('td').toArray(); // create a player object based on the values const player = {}; for (td of tds) { const $td = $(td); // map the td class attr to its value const key = $td.attr('class'); let value; if (key === 'name') { value = $td.find('a span:first-child').text(); } else { value = $td.text(); } player[key] = isNaN(+value) ? value : +value; } return player; }); return values; } async function main() { console.log('Starting...'); await downloadBoxScoreHtml(); const boxScore = await parseBoxScore(); // save the scraped results to disk await fs.promises.writeFile( 'boxscore.json', JSON.stringify(boxScore, null, 2) ); console.log('Done!'); } main():اینم از آموزش اسکرپ کردن به روش Server-side Rendered HTML. روش‌‌های ۱ و ۲ تموم شد و حالا فقط روش شماره ۳ مونده.روش شماره ۳: JavaScript rendered HTMLدر این قسمت قراره روش اسکرپ کردن HTML بعد از اجرا شدن JavaScript در صفحه رو توضیح بدم. در بسیاری از موارد می‌تونیم این کارو به شکلی که در روش ۱ انجام دادیم، انجام بدیم، اما معمولا گرفتن HTML و کار روش، ممکنه راحت‌تر باشه. اینجا دیگه کتابخونه Request که قبلا ازش استفاده کردیم، به کارمون نمیاد. چون، این کتابخونه فقط HTML رو دانلود می‌کنه و هیچ جاوااسکریپتی رو در صفحه اجرا نمی‌کنه. پس نیازه که از یه کتابخونه دیگه‌ای استفاده کنیم و Puppeteer همون کتابخونه قدرتمندیه که قراره در این قسمت ازش استفاده کنیم.برای این قسمت، قراره دیتای مربوط به پرتاب‌های Steph Curry از وب‌سایت Basketball Reference رو اسکرپ کنیم.نوشتن اسکریپت Node.js برای اسکرپ کردن صفحه بعد از اجرا شدن جاوااسکریپتهدف‌مون اسکرپ کردن دیتا از چارت مربوط پرتاب‌های بازی Steph Curry موجود در صفحه زیره:https://www.basketball-reference.com/players/c/curryst01/shooting/2020 Steph Curry نمودار پرتاب‌های بازی با راست کلیک روی یکی از نمادهای ● یا × روی عکس و زدن گزینه Inspect (مثل کاری که در روش‌های ۱ و ۲ انجام دادیم)، می‌تونیم تگ‌های تو در تو

رو مشاهده کنیم:کدهای HTML مربوط به چارتحالا با استفاده از Console مرورگر، یک Selector می‌نویسیم تا تگ‌های

که میخوایم رو برامون بگیره:document.querySelectorAll('.shot-area > div')خروجی کد بالا:> NodeList(66) [div.tooltip.miss, div.tooltip.miss, div.tooltip.miss, div.tooltip.make, div.tooltip.make, ...]حالا با استفاده از این Selector میریم تا اسکریپت Node.js رو بنویسیم.راه‌اندازی Puppeteerبرای ساخت پروژه جاوااسکریپت جدید، به دایرکتوری مد نظرتون برید، یک فایل به اسم "index.js" بسازید و تو ترمینال این ۲ دستور زیر رو وارد کنید:npm init -y npm install --save cheerio puppeteerکار با لایبری Puppeteer، کمی از request پیچیده‌تره، ولی سعی می‌کنم تا به ساده‌ترین شکل ممکن کار باهاشو بهتون توضیح بدم. Puppeteer با اجرای یک مرورگر headless کروم کار می‌کنه، بنابراین به‌صورت تئوری هر کاری که مرورگر شما بتونه انجام بده، اینم میتونه انجامش بده. برای شروع، نیاز داریم تا ابتدا puppeteer رو import کنیم و سپس مرورگر رو اجرا کنیم:const fs = require('fs'); const puppeteer = require('puppeteer'); async function main() { console.log('Starting...'); const browser = await puppeteer.launch(); // TODO download the HTML after running js on the page await browser.close(); console.log('Done!'); } main();در قدم بعدی، نیاز که یک صفحه جدید بسازیم تا HTML رو باش fetch کنیم. برای ساخت صفحه، دوست دارم که یه helper function (تابع کمکی) داشته باشم تا بتونم تمام گزینه‌هایی که برای درخواستم می‌خوام رو، توش قرار بدم. تو اینجا من timeout رو ۲۰ ثانیه قرار دادم و از یک User Agent string جعلی هم استفاده کردم:async function newPage(browser) { // get a new page page = await browser.newPage(); page.setDefaultTimeout(20000); // 20s // spoof user agent await page.setUserAgent('Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.111 Safari/537.36'); // pretend to be desktop await page.setViewport({ width: 1980, height: 1080, }); return page; }پس از ست کردن صفحه، حالا باید کار fetch کردن و اجرای JS رو انجام بدیم که دوباره این کار رو با یک helper function دیگه انجام دادم:async function fetchUrl(browser, url) { const page = await newPage(browser); await page.goto(url, { timeout: 20000, waitUntil: 'domcontentloaded' }); const html = await page.content(); await page.close(); return html; }دانلود صفحه HTMLبا دو فانکشنی که نوشتیم، می‌تونیم کدی بنویسیم تا دیتای مربوط به پرتاب‌ها رو برامون دانلود کنه:async function downloadShootingData(browser) { const url = 'https://www.basketball-reference.com/players/c/curryst01/shooting/2020'; const htmlFilename = 'shots.html'; // download the HTML from the web server console.log(`Downloading HTML from ${url}...`); const html = await fetchUrl(browser, url); // save the HTML to disk await fs.promises.writeFile(htmlFilename, html); }دوباره، از اونجای puppeteer ممکنه کمی کند باشه، توصیه می‌کنم که قبل از اجرای فانکشن fetchUrl، چک کنید که آیا فایل رو از قبل داریم یا نه:async function downloadShootingData(browser) { const url = 'https://www.basketball-reference.com/players/c/curryst01/shooting/2020'; const htmlFilename = 'shots.html'; // check if we already have the file const fileExists = fs.existsSync(htmlFilename); if (fileExists) { console.log(`Skipping download for ${url} since ${htmlFilename} already exists.`); return; } // download the HTML from the web server console.log(`Downloading HTML from ${url}...`); const html = await fetchUrl(browser, url); // save the HTML to disk await fs.promises.writeFile(htmlFilename, html); }حالا فقط نیازه تا قبل از اینکه مرورگر رو اجرا کنیم، فانکشن رو صدا بزنیم.async function main() { console.log('Starting...'); // download the HTML after javascript has run const browser = await puppeteer.launch(); await downloadShootingData(browser); await browser.close(); console.log('Done!'); }سپس با دستور زیر در ترمینال، اسکریپت رو اجرا می‌کنیم:node index.jsحالا اگه فایل shots.html رو چک کنید، تمام تگ‌های

که می‌خوایم رو توش می‌بینید که منتظرن تا اونارو Parse و سپس ذخیرشون کنیم.تبدیل (Parse) کردن HTML با استفاده از Cheerioفرآيند Parse کردن در این روش، به همون شکلی که در روش ۲ انجام دادیم، انجام میشه. یک فایل HTML داریم و می‌خوایم داده رو با استفاده از selector ازش استخراج کنیم. دوباره به تگ

مربوط به shot نگاه کنید. به‌نظرتون چه داده‌هایی می‌تونیم ازش بدست بیاریم؟نظرتون چیه که موقیت x و y رو از اتریبیوت style، مقدار امتیاز پرتاب رو از اتریبیوت tip و اینکه پرتاب موفقیت آمیز بود یا خیر رو از اتریبیوت class بگیریم؟پس بریم فایل HTML رو لود و سپس با استفاده از cheerio اونو Parse کنیم:async function parseShots() { console.log('Parsing shots HTML...'); // the input filename const htmlFilename = 'shots.html'; // read the HTML from disk const html = await fs.promises.readFile(htmlFilename); // parse the HTML with Cheerio const $ = cheerio.load(html); // for each of the shot divs, convert to JSON const divs = $('.shot-area > div').toArray(); // TODO: convert divs to shot JSON objects return shots; }الان تگ‌های

رو به عنوان آرایه در اختیار داریم. حالا با map کردن اونا به آبجکت‌های JSON، مقادیر اتربیوبت‌هایی که در بالا بهشون اشاره کردیم رو برمی‌گردونیم:const shots = divs.map(div => { const $div = $(div); // style="left:50px;top:120px" -> x = 50, y = 120 // slice -2 to drop "px", prefix with `+` to make a number const x = +$div.css('left').slice(0, -2); const y = +$div.css('top').slice(0, -2); // class="tooltip make" or "tooltip miss" const madeShot = $div.hasClass('make'); // tip="...Made 3-pointer..." const shotPts = $div.attr('tip').includes('3-pointer') ? 3 : 2; return { x, y, madeShot, shotPts }; });کد بالا باید خروجی شبیه به زیر رو بهمون بده:[ { "x": 259, "y": 331, "madeShot": false, "shotPts": 3 }, ... ]حالا فقط باید فانکشن parseShots() رو به فانکشن main() وصل کنیم و نتیحه رو ذخیره کنیم:async function main() { console.log('Starting...'); // download the HTML after javascript has run const browser = await puppeteer.launch(); await downloadShootingData(browser); await browser.close(); // parse the HTML const shots = await parseShots(); // save the scraped results to disk await fs.promises.writeFile('shots.json', JSON.stringify(shots, null, 2)); console.log('Done!'); }و الان اگه فایل shots.json رو چک کنید، باید نتیجه کارمون رو مشاهده کنید.کد کامل اسکریپتی که نوشتیم:const fs = require('fs'); const cheerio = require('cheerio'); const puppeteer = require('puppeteer'); const TIMEOUT = 20000; // 20s timeout with puppeteer operations const USER_AGENT = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.111 Safari/537.36'; async function newPage(browser) { // get a new page page = await browser.newPage(); page.setDefaultTimeout(TIMEOUT); // spoof user agent await page.setUserAgent(USER_AGENT); // pretend to be desktop await page.setViewport({ width: 1980, height: 1080, }); return page; } async function fetchUrl(browser, url) { const page = await newPage(browser); await page.goto(url, { timeout: TIMEOUT, waitUntil: 'domcontentloaded' }); const html = await page.content(); // sometimes this seems to hang, so now we create a new page each time await page.close(); return html; } async function downloadShootingData(browser) { const url = 'https://www.basketball-reference.com/players/c/curryst01/shooting/2020'; const htmlFilename = 'shots.html'; // check if we already have the file const fileExists = fs.existsSync(htmlFilename); if (fileExists) { console.log( `Skipping download for ${url} since ${htmlFilename} already exists.` ); return; } // download the HTML from the web server console.log(`Downloading HTML from ${url}...`); const html = await fetchUrl(browser, url); // save the HTML to disk await fs.promises.writeFile(htmlFilename, html); } async function parseShots() { console.log('Parsing box score HTML...'); // the input filename const htmlFilename = 'shots.html'; // read the HTML from disk const html = await fs.promises.readFile(htmlFilename); // parse the HTML with Cheerio const $ = cheerio.load(html); // for each of the shot divs, convert to JSON const divs = $('.shot-area > div').toArray(); const shots = divs.map(div => { const $div = $(div); // style="left:50px;top:120px" -> x = 50, y = 120 const x = +$div.css('left').slice(0, -2); const y = +$div.css('top').slice(0, -2); // class="tooltip make" or "tooltip miss" const madeShot = $div.hasClass('make'); // tip="...Made 3-pointer..." const shotPts = $div.attr('tip').includes('3-pointer') ? 3 : 2; return { x, y, madeShot, shotPts, }; }); return shots; } async function main() { console.log('Starting...'); // download the HTML after javascript has run const browser = await puppeteer.launch(); await downloadShootingData(browser); await browser.close(); // parse the HTML const shots = await parseShots(); // save the scraped results to disk await fs.promises.writeFile('shots.json', JSON.stringify(shots, null, 2)); console.log('Done!'); } main();اینم از روش شماره ۳ و آخرین روش! موفق شدیم تا یک صفحه رو پس اجرا شدن JavaScript روش دانلود، کدهای HTML اش رو Parse و داده‌ها رو ازش استخراج کنیم و در نهایت در یک فایل JSON ذخیره کنیم.امیدوارم که این مقاله براتون مفید بوده باشه و تونسته باشم که به خوبی وب اسکرپینگ با جاوا اسکریپت رو توضیح داده باشم.فقط حواستون باشه که با اسکرپ کردن میشه کارهای زیادی انجام داد و اگه قراره ازش استفاده کنید، در جای درست و به روش درست ازش استفاده کنید (از اسکرپ کردن خیلی راحت میشه سو استفاده ها کرد :) ) .خلاصه اگه سوالی، پیشنهادی چیزی داشتید تو کامنت برام بنویسید. همچنین، من تمام کدهایی که نوشتیم + خروجی اون‌هارو تو ریپازیتوری گیت‌هابم هم قرار دادم که می‌تونید ازشون استفاده کنید.- منبع