كيفية إنشاء قارئ RSS بسيط باستخدام SvelteKit

يعد RSS معيارًا شائعًا لتوزيع محتوى الويب بتنسيق منظم. يستخدم العديد من الأشخاص، بدءًا من المتحمسين للتكنولوجيا وحتى المعلمين، خدمة RSS للبقاء على اطلاع بأحدث الأخبار والمشاركات على مدوناتهم المفضلة.

تعد كتابة قارئ RSS الخاص بك مهمة واضحة، وقد أصبحت أسهل باستخدام SvelteKit، وهو إطار تعريفي مبني على Svelte.

إعداد مشروع SvelteKit

قبل المتابعة، يجب أن يكون لديك وقت تشغيل Node.js مثبتًا على جهازك أيضًا مدير حزمة العقدة (NPM). افتح المحطة الطرفية الخاصة بك وقم بتشغيل الأمر التالي:

npm create svelte
# or
yarn create svelte

يجب أن يبدأ هذا في إنشاء svelte واجهة سطر الأوامر (CLI) مدعوم من فيت. قم بتسمية مشروعك وقم بتعيين قالب التطبيق على "Skeleton project". قم بتعطيل التحقق من النوع باستخدام TypeScript، وحدد أي خيارات إضافية تريدها. بعد ذلك، انتقل إلى دليل المشروع وقم بتشغيل:

npm install
# or
yarn

بعد تثبيت التبعيات الافتراضية، تحتاج إلى تثبيت حزمتين وهما: محلل آر إس إس و لحظة. ستسهل الحزمة الأولى تحليل بيانات XML، بينما ستساعدك الحزمة الثانية على تنسيق التواريخ بشكل صحيح. في المحطة الطرفية الخاصة بك، قم بتشغيل ما يلي:

npm install rss-parser
npm install moment
# or
yarn add rss-parser
yarn add moment

الآن، يمكنك بدء تشغيل خادم التطوير عن طريق تشغيل الأمر التالي.

npm run dev
# or
yarn dev

مسح محتويات App.css قم بملف وتعديل بنية المشروع بحيث تبدو كما يلي. قم بإنشاء أي أدلة غير موجودة بالفعل وقم بإنشاء ملفات فارغة لمطابقة تلك المذكورة أدناه:

سوف تحتاج فقط إلى تغيير src الدليل، والذي يجب أن يحتوي على ملف ليب الدليل و أ lib/addToLocalStorage.js ملف. ويجب أن يحتوي أيضًا على أ الطرق الدليل الذي يحتوي على دليل فرعي اسمه يٌطعم وأربعة ملفات: +layout.js, +layout.svelte, +page.svelte، و +server.js. داخل يٌطعم، قم بإنشاء دليل باسم [عنوان] مع ملفين في الداخل: +page.server.js و +page.svelte.

mkdir '[title]'

إنشاء مسار واجهة برمجة التطبيقات (API) للتحقق من وجود خلاصات RSS صالحة

افتح ال الطرق/+server.js ملف واستيراد json فائدة. استيراد أيضا محلل من محلل آر إس إس طَرد.

import { json } from"@sveltejs/kit";
import Parser from"rss-parser";

الآن، قم بتصدير دالة غير متزامنة، يحصل، وادخل عنوان URL كمعلمة. في هذه الدالة، قم بإنشاء ثابتين: رابط آر إس إس و محلل.

يجب أن يحمل الثابت الأول معلمة البحث من ملف عنوان URL مرت بينما الثانية محلل، يجب تخزين جديد محلل مثيل الكائن. التالي، اتصل ب parseURL طريقة على محلل وتمرير رابط آر إس إس كمعلمة. وأخيرا، تسلسل الاستجابة مع json الوظيفة وإعادتها.

exportasyncfunctionGET({url}) {
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return json(feed);
}

تصميم الصفحة الرئيسية

يستخدم SvelteKit ملف نظام التوجيه القائم على نظام الملفات. بشكل افتراضي، الطرق/+page.svelte الملف بمثابة الصفحة الرئيسية لموقع الويب الخاص بك.

افتح الملف +page.svelte وفي ملف النصي العلامة، استيراد addToLocalStorage وظيفة من ليب الدليل. لم تقم بإنشاء هذا بعد، ولكنك ستفعل ذلك لاحقًا. بعد استيراد الدالة، قم بإنشاء متغيرين، عنوان URL و مستعد، وضع مستعد متغير ل خطأ شنيع.