כיצד ליצור קורא RSS פשוט עם SvelteKit

RSS הוא תקן פופולרי להפצת תוכן אינטרנט בפורמט מובנה. אנשים רבים, מחובבי טכנולוגיה ועד מורים, משתמשים ב-RSS כדי להישאר מעודכנים בחדשות ובפוסטים האחרונים בבלוגים האהובים עליהם.

כתיבת קורא RSS משלך היא משימה פשוטה, שהייתה קלה עוד יותר עם SvelteKit, מסגרת מטא הבנויה על גבי Svelte.

הגדרת פרויקט SvelteKit

לפני שתמשיך, עליך להתקין את זמן הריצה של Node.js גם במחשב שלך מנהל חבילות צומת (NPM). פתח את הטרמינל שלך והפעל את הפקודה הבאה:

npm create svelte
# or
yarn create svelte

זה אמור להפעיל את ה-create-svelte ממשק שורת פקודה (CLI) מופעל על ידי Vite. תן שם לפרויקט שלך והגדר את תבנית האפליקציה ל"פרויקט שלד". השבת את בדיקת הטיפוסים באמצעות TypeScript, ובחר את כל האפשרויות הנוספות שתרצה. לאחר מכן, עבור לספריית הפרויקט והפעל:

npm install
# or
yarn

לאחר התקנת ברירת המחדל של התלות, עליך להתקין שתי חבילות, כלומר:

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 ספרייה וא lib/addToLocalStorage.js קוֹבֶץ. זה צריך להכיל גם א מסלולים ספרייה המכילה ספריית ילד בשם הזנה וארבעה קבצים: +layout.js, +layout.svelte, +page.svelte, ו +server.js. בְּתוֹך הזנה, צור ספרייה בשם [כותרת] עם שני קבצים בפנים: +page.server.js ו +page.svelte.

mkdir '[title]'

יצירת נתיב API לבדיקת עדכוני RSS חוקיים

פתח את ה routes/+server.js קובץ וייבא את json שירות. גם ייבוא מנתח מ ה rss-parser חֲבִילָה.

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

כעת, ייצא פונקציה אסינכרונית, לקבל, ולעבור פנימה כתובת אתר כפרמטר. בפונקציה זו, צור שני קבועים: rssLink ו מנתח.

הקבוע הראשון צריך להחזיק את פרמטר החיפוש מה- כתובת אתר עבר, ואילו השני, מנתח, צריך לאחסן חדש מנתח מופע אובייקט. לאחר מכן, התקשר ל- parseURL שיטה על מנתח ולעבור פנימה rssLink כפרמטר. לבסוף, הסדר את התגובה עם ה- json לתפקד ולהחזיר אותו.

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

עיצוב דף הבית

SvelteKit משתמש ב-a מערכת ניתוב מבוססת מערכת קבצים. כברירת מחדל, ה routes/+page.svelte הקובץ משמש כדף הבית של האתר שלך.

פתח את הקובץ +page.svelte וב- תַסרִיט תג, ייבא את addToLocalStorage פונקציה מה lib מַדרִיך. עדיין לא יצרת את זה, אבל תעשה זאת מאוחר יותר. לאחר ייבוא ​​הפונקציה, צור שני משתנים, כתובת אתר ו מוּכָן, הגדרת ה מוּכָן משתנה ל שֶׁקֶר.