بروزرسانی: 08 اردیبهشت 1404
یک خواننده RSS ثابت برای مبارزه با FOMO درونی خود بسازید - مجله Smashing
در صنعت پر سرعتی مانند فناوری، مقابله با ترس از دست دادن اخبار مهم دشوار است. اما، همانطور که بسیاری از ما می دانیم، روزانه حجم عظیمی از اطلاعات وارد می شود، و یافتن زمان و تعادل مناسب برای ادامه دادن می تواند دشوار باشد، اگر استرس زا نباشد. یک قطعه کلاسیک از تکنولوژی مانند فید RSS راهی لذت بخش برای پس گرفتن مالکیت زمان خودمان است. در این مقاله، ما یک خواننده استاتیک Really Simple Syndication (RSS) ایجاد خواهیم کرد که آخرین اخبار مدیریت شده را تنها یک بار برای شما به ارمغان می آورد (بله: یک بار) یک روز
بدیهی است که در این فرآیند با فناوری RSS کار خواهیم کرد، اما همچنین قصد داریم آن را با مواردی که شاید قبلاً امتحان نکرده اید ترکیب کنیم، از جمله Astro (چارچوب سایت استاتیک)، TypeScript (برای چیزهای جاوا اسکریپت)، بسته ای به نام rss-parser (برای اتصال چیزها به یکدیگر)، و همچنین توابع برنامه ریزی شده و ساخت قلاب ارائه شده توسط Netlify (اگرچه خدمات دیگری نیز وجود دارد که این کار را انجام می دهند).
من این فناوری ها را صرفاً به این دلیل انتخاب کردم که واقعاً از آنها لذت می برم! ممکن است راه حل های دیگری نیز وجود داشته باشد که کارایی بیشتری داشته باشند، ویژگی های بیشتری داشته باشند یا به سادگی برای شما راحت تر باشند - و در این موارد، من شما را تشویق می کنم که هر چیزی را که می خواهید عوض کنید. مهمترین چیز رسیدن به نتیجه نهایی است!
طرح
در اینجا نحوه انجام این کار آمده است. Astro وب سایت را تولید می کند. من عمداً تصمیم گرفتم از یک سایت ثابت استفاده کنم، زیرا می خواهم فیدهای RSS مختلف فقط یک بار در طول زمان ساخت واکشی شوند، و این چیزی است که ما می توانیم هر بار که سایت «بازسازی» می شود و با به روزرسانی ها دوباره مستقر می شود، کنترل کنیم. اینجاست که توابع برنامه ریزی شده Netlify وارد عمل می شوند، زیرا به ما اجازه می دهند بازسازی ها را به طور خودکار در زمان های خاص آغاز کنیم. نیازی به بررسی دستی به روز رسانی و استقرار آنها نیست! اگر راه حل سمت سرور را ترجیح می دهید، Cron jobs به همین راحتی می تواند این کار را انجام دهد.
در طول بازسازی آغاز شده، به بسته rss-parser اجازه می دهیم دقیقاً همان کاری را انجام دهد که می گوید: تجزیه لیستی از فیدهای RSS که در یک آرایه موجود است. این بسته همچنین به ما امکان می دهد فیلتری را برای نتایج واکشی شده تنظیم کنیم تا فقط موارد روز، هفته و غیره را دریافت کنیم. من شخصا فقط اخبار هفت روز گذشته را برای جلوگیری از اضافه بار محتوا ارائه می کنم. ما به آنجا می رسیم!
اما ابتدا…
RSS یک فناوری فید وب است که می توانید آن را به خواننده یا جمع آوری اخبار وارد کنید. از آنجایی که RSS استاندارد است، می دانید که در مورد قالب فید چه انتظاری دارید. این بدان معناست که ما در هنگام مدیریت داده هایی که فید ارائه می کند، فرصت های سرگرم کننده زیادی داریم. اکثر وب سایت های خبری فید RSS خود را دارند که می توانید در آن مشترک شوید (این است فید RSS مجله Smashing: https://www.smashingmagazine.com/feed/). یک فید RSS می تواند هر بار که سایتی محتوای جدید منتشر می کند به روزرسانی شود، به این معنی که می تواند منبع سریع آخرین اخبار باشد، اما ما می توانیم این فرکانس را نیز تنظیم کنیم.
فیدهای RSS در قالب زبان نشانه گذاری توسعه پذیر (XML) نوشته شده اند و دارای عناصر خاصی هستند که می توان در آن استفاده کرد. به جای تمرکز بیش از حد بر روی نکات فنی در اینجا، من به شما یک لینک به مشخصات RSS می دهم. نگران نباشید؛ آن صفحه باید به اندازه کافی قابل اسکن باشد تا بتوانید مرتبط ترین اطلاعات مورد نیاز خود را بیابید، مانند انواع عناصری که پشتیبانی می شوند و چه چیزی را نشان می دهند. برای این آموزش، ما فقط از عناصر زیر استفاده می کنیم: ،
ایجاد سایت دولتی
ما با ایجاد سایت Astro خود شروع می کنیم! در اجرای ترمینال شما pnpm create astro@latest. شما می توانید از هر مدیر بسته ای که می خواهید استفاده کنید - من فقط pnpm را برای خودم امتحان می کنم.
پس از اجرای دستور، کمک کننده مبتنی بر چت Astro، هیوستون، برخی از سوالات راه اندازی را برای شروع کار بررسی می کند.
astro Launch sequence initiated. dir Where should we create your new project? ./rss-buddy tmpl How would you like to start your new project? Include sample files ts Do you plan to write TypeScript? Yes use How strict should TypeScript be? Strict deps Install dependencies? Yes git Initialize a new git repository? Yesمن دوست دارم از فایل های نمونه Astro استفاده کنم تا بتوانم سریع شروع به کار کنم، اما در این فرآیند کمی آنها را پاکسازی می کنیم. بیایید تمیز کنیم src/pages/index.astro با حذف همه چیز داخل فایل برچسب ها پس ما خوب هستیم که برویم!
از آنجا، ما می توانیم چیزها را با دویدن بچرخانیم pnpm start. ترمینال شما به شما می گوید که در کدام آدرس لوکال هاست می توانید سایت خود را پیدا کنید.
این src/pages/index.astro فایل جایی است که آرایه ای از فیدهای RSS را که می خواهیم دنبال کنیم ایجاد می کنیم. ما از نحو الگوی Astro استفاده خواهیم کرد، بنابراین بین دو حصار کد (-)، یک آرایه از feedSources و چند فید اضافه کنید. اگر به الهام نیاز دارید، می توانید این را کپی کنید:
const feedSources = ( \'https://www.smashingmagazine.com/feed/\', \'https://developer.mozilla.org/en-US/blog/rss.xml\', // etc.)اکنون بسته rss-parser را با اجرا در پروژه خود نصب می کنیم pnpm install rss-parser. این بسته یک کتابخانه کوچک است که XML را که از واکشی فید RSS بدست می آوریم به اشیاء جاوا اسکریپت تبدیل می کند. این کار خواندن فیدهای RSS و دستکاری داده ها را به هر طریقی که می خواهیم برای ما آسان می کند.
پس از نصب بسته، آن را باز کنید src/pages/index.astro فایل، و در بالا، rss-parser را وارد کرده و نمونه سازی می کنیم Partner کلاس
import Parser from \'rss-parser\';const parser = new Parser();ما از این تجزیه کننده برای خواندن فیدهای RSS خود استفاده می کنیم و (تعجب!) تجزیه آنها را به جاوا اسکریپت. ما در اینجا با لیستی از وعده ها سر و کار خواهیم داشت. به طور معمول، من احتمالا استفاده می کنم Promise.all()، اما موضوع این است که این یک تجربه پیچیده است. اگر یکی از فیدها به دلایلی کار نمی کند، ترجیح می دهم به سادگی آن را نادیده بگیرم.
چرا؟ خوب، چون Promise.all() همه چیز را رد می کند حتی اگر فقط یکی از وعده هایش رد شود. این ممکن است به این معنی باشد که اگر یک فید آنطور که من انتظار دارم رفتار نکند، وقتی صبح نوشابه داغم را می گیرم و اخبار را می خوانم، کل صفحه من خالی می شود. نمی خواهم روزم را با اشتباه شروع کنم.
در عوض، استفاده از آن را انتخاب می کنم Promise.allSettled(). این روش در واقع به همه وعده ها اجازه می دهد حتی اگر یکی از آنها شکست بخورد. در مورد ما، این بدان معنی است که هر گونه فید که خطاها صرفاً نادیده گرفته می شوند، که عالی است.
بیایید این را به src/pages/index.astro فایل:
interface FeedItem { feed?: string; title?: string; link?: string; date?: Date;}const feedItems: FeedItem() = ();await Promise.allSettled( feedSources.map(async (source) => { try { const feed = await parser.parseURL(source); feed.items.forEach((item) => { const date = item.pubDate ? new Date(item.pubDate) : undefined; feedItems.push({ feed: feed.title, title: item.title, link: item.link, date,}); }); } catch (error) { console.error(`Error fetching feed from ${source}:`, error); } }));این یک آرایه (یا بیشتر) به نام ایجاد می کند feedItems. برای هر URL در feedSources آرایه ای که قبلا ایجاد کردیم، تجزیه کننده rss آیتم ها را بازیابی می کند و، بله، آنها را در جاوا اسکریپت تجزیه می کند. سپس، ما هر داده ای را که می خواهیم برمی گردانیم! فعلاً آن را ساده نگه می داریم و فقط موارد زیر را برمی گردانیم:
- عنوان خوراک،
- عنوان آیتم خوراک،
- لینک مورد،
- و تاریخ انتشار آیتم
گام بعدی این است که اطمینان حاصل کنیم که همه موارد بر اساس تاریخ مرتب شده اند، بنابراین ما واقعاً "آخرین" اخبار را دریافت خواهیم کرد. این کد کوچک را به کار خود اضافه کنید:
const sortedFeedItems = feedItems.sort((a, b) => (b.date ?? new Date()).getTime() - (a.date ?? new Date()).getTime());اوه، و… یادتان هست وقتی گفتم نمی خواهم این RSS خوان چیزی قدیمی تر از هفت روز را رندر کند؟ بیایید در حال حاضر با آن مقابله کنیم زیرا ما قبلاً در این کد هستیم.
یک متغیر جدید به نام می سازیم sevenDaysAgo و برای آن تاریخ تعیین کنید. سپس آن تاریخ را بر روی هفت روز پیش تنظیم می کنیم و قبل از اینکه یک آیتم جدید به خود اضافه کنیم از آن منطق استفاده می کنیم feedItems آرایه
این چیزی است که src/pages/index.astro اکنون فایل باید به این صورت باشد:
---import Layout from \'../layouts/Layout.astro\';import Parser from \'rss-parser\';const parser = new Parser();const sevenDaysAgo = new Date();sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);const feedSources = ( \'https://www.smashingmagazine.com/feed/\', \'https://developer.mozilla.org/en-US/blog/rss.xml\',)interface FeedItem { feed?: string; title?: string; link?: string; date?: Date;}const feedItems: FeedItem() = ();await Promise.allSettled( feedSources.map(async (source) => { try { const feed = await parser.parseURL(source); feed.items.forEach((item) => { const date = item.pubDate ? new Date(item.pubDate) : undefined; if (date && date >= sevenDaysAgo) {feedItems.push({ feed: feed.title, title: item.title, link: item.link, date,}); } }); } catch (error) { console.error(`Error fetching feed from ${source}:`, error); } }));const sortedFeedItems = feedItems.sort((a, b) => (b.date ?? new Date()).getTime() - (a.date ?? new Date()).getTime());--- ارائه داده های XML
وقت آن است که مقالات خبری خود را در سایت Astro نشان دهیم! برای ساده نگه داشتن این موضوع، موارد را در یک لیست نامرتب به جای طرح بندی فانتزی دیگر قالب بندی می کنیم.
تنها کاری که باید انجام دهیم این است که به روز رسانی کنیم
{sortedFeedItems.map(item => ( ))} برو جلو و بدو pnpm start از ترمینال صفحه باید فهرست نامرتب اقلام فید را نمایش دهد. البته، همه چیز در حال حاضر سبک است، اما خوشبختانه برای شما، می توانید با CSS آن را دقیقاً همانطور که می خواهید جلوه دهید!
و به یاد داشته باشید که حتی وجود دارد فیلدهای بیشتری در XML برای هر مورد موجود است اگر می خواهید اطلاعات بیشتری را نمایش دهید. اگر قطعه زیر را در کنسول DevTools خود اجرا کنید، تمام فیلدهایی را که در اختیار دارید مشاهده خواهید کرد:
feed.items.forEach(item => {}برنامه ریزی ساخت سایت استاتیک روزانه
ما تقریباً تمام شده ایم! فیدها در حال واکشی هستند، و داده ها را در جاوا اسکریپت برای استفاده در قالب صفحه Astro به ما برمی گردانند. از آنجایی که فیدها هر زمان که محتوای جدید منتشر می شود به روز می شوند، ما به راهی برای واکشی آخرین موارد از آن نیاز داریم.
ما می خواهیم از انجام هر یک از این کارها به صورت دستی اجتناب کنیم. بنابراین، اجازه دهید این سایت را در Netlify تنظیم کنیم تا به عملکردهای برنامه ریزی شده آنها که باعث بازسازی می شود و قلاب های ساخت آنها که ساختمان را انجام می دهند دسترسی پیدا کنیم. باز هم، سرویس های دیگر این کار را انجام می دهند، و شما می توانید این کار را با ارائه دهنده ای دیگر انجام دهید - از آنجایی که من در آنجا کار می کنم فقط به Netlify علاقه مند هستم. در هر صورت می توانید مستندات نتلیفای را برای راه اندازی سایت جدید دنبال کنید.
هنگامی که سایت شما میزبانی و زنده شد، آماده برنامه ریزی برای بازسازی خود هستید. یک build hook یک URL به شما می دهد تا از آن برای راه اندازی ساخت جدید استفاده کنید، چیزی شبیه به این:
https://api.netlify.com/build_hooks/your-build-hook-idبیایید هر روز در نیمه شب بیلدها را راه اندازی کنیم. ما از توابع برنامه ریزی شده Netlify استفاده خواهیم کرد. به همین دلیل است که در وهله اول از Netlify برای میزبانی این برنامه استفاده می کنم. آماده بودن آنها از طریق میزبان کارها را بسیار ساده می کند زیرا هیچ کار سرور یا پیکربندی پیچیده ای برای انجام این کار وجود ندارد. تنظیمش کن و فراموشش کن!
نصب می کنیم @netlify/functions (دستورالعمل) به پروژه و سپس فایل زیر را در پوشه اصلی پروژه ایجاد کنید: netlify/functions/deploy.ts.
این چیزی است که می خواهیم به آن فایل اضافه کنیم:
// netlify/functions/deploy.tsimport type { Config } from \'@netlify/functions\';const BUILD_HOOK = \'https://api.netlify.com/build_hooks/your-build-hook-id\'; // replace me!export default async (req: Request) => { await fetch(BUILD_HOOK, { method: \'POST\', })};export const config: Config = { schedule: \'0 0 * * *\',};اگر کد خود را commit کنید و آن را فشار دهید، سایت شما باید به طور خودکار دوباره مستقر شود. از آن نقطه به بعد، برنامه ای را دنبال می کند که هر روز در نیمه شب سایت را بازسازی می کند، تا شما آماده باشید تا دم نوش صبحگاهی تان را مصرف کنید و همه چیز را دنبال کنید. شما فکر کن مهم است
(gg, yk)منبع: https://smashingmagazine.com/2024/10/build-static-rss-reader-fight-fomo/