Erfahren Sie, wie Sie mit diesem einfachen RSS-Reader-Projekt eine vollständige SvelteKit-App erstellen.
RSS ist ein beliebter Standard zur Verbreitung von Webinhalten in einem strukturierten Format. Viele Menschen, vom Technikbegeisterten bis zum Lehrer, nutzen RSS, um über die neuesten Nachrichten und Beiträge in ihren Lieblingsblogs auf dem Laufenden zu bleiben.
Das Schreiben eines eigenen RSS-Readers ist eine unkomplizierte Aufgabe, die mit SvelteKit, einem auf Svelte basierenden Meta-Framework, noch einfacher wird.
Einrichten des SvelteKit-Projekts
Der in diesem Projekt verwendete Code ist in a verfügbar GitHub-Repository Die Nutzung steht Ihnen unter der MIT-Lizenz kostenlos zur Verfügung. Wenn Sie sich eine Live-Version dieses Projekts ansehen möchten, können Sie sich dies hier ansehen Demo.
Bevor Sie fortfahren, müssen Sie die Node.js-Laufzeitumgebung auf Ihrem Computer installiert haben Knotenpaketmanager (NPM). Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus:
npm create svelte
# or
yarn create svelte
Dies sollte das Create-Svelte starten Befehlszeilenschnittstelle (CLI) Unterstützt von Vite. Benennen Sie Ihr Projekt und stellen Sie die App-Vorlage auf „Skeleton-Projekt“ ein. Deaktivieren Sie die Typprüfung mit TypeScript und wählen Sie die gewünschten zusätzlichen Optionen aus. Wechseln Sie danach in das Projektverzeichnis und führen Sie Folgendes aus:
npm install
# or
yarn
Nach der Installation der Standardabhängigkeiten müssen Sie zwei Pakete installieren, nämlich: RSS-Parser Und Moment. Das erste Paket erleichtert das Parsen der XML-Daten, während das zweite Paket Ihnen dabei hilft, Datumsangaben korrekt zu formatieren. Führen Sie in Ihrem Terminal Folgendes aus:
npm install rss-parser
npm install moment
# or
yarn add rss-parser
yarn add moment
Jetzt können Sie den Entwicklungsserver starten, indem Sie den folgenden Befehl ausführen.
npm run dev
# or
yarn dev
Löschen Sie den Inhalt des App.css Datei und ändern Sie die Projektstruktur so, dass sie etwa wie folgt aussieht. Erstellen Sie alle Verzeichnisse, die noch nicht vorhanden sind, und erstellen Sie leere Dateien, die den unten genannten entsprechen:
Sie müssen nur die ändern src Verzeichnis, das Folgendes enthalten sollte: lib Verzeichnis und a lib/addToLocalStorage.js Datei. Es sollte auch Folgendes enthalten: Routen Verzeichnis, das ein untergeordnetes Verzeichnis mit dem Namen enthält füttern und vier Dateien: +layout.js, +layout.svelte, +page.svelte, Und +server.js. Innen füttern, erstellen Sie ein Verzeichnis mit dem Namen [Titel] mit zwei Dateien darin: +page.server.js Und +page.svelte.
Möglicherweise fällt es Ihnen schwer, das zu erstellen [Titel] Verzeichnis in der Befehlszeile, da viele Shells eckige Klammern für den Mustervergleich verwenden. Wenn Sie eine Fehlermeldung erhalten, versuchen Sie, den Verzeichnisnamen in Anführungszeichen zu setzen, z. B.:
mkdir '[title]'Erstellen der API-Route zur Prüfung auf gültige RSS-Feeds
Öffne das Routen/+server.js Datei und importieren Sie die json Dienstprogramm. Auch importieren Parser von dem RSS-Parser Paket.
import { json } from"@sveltejs/kit";
import Parser from"rss-parser";
Exportieren Sie nun eine asynchrone Funktion. ERHALTEN, und gehe hinein URL als Parameter. Erstellen Sie in dieser Funktion zwei Konstanten: rssLink Und Parser.
Die erste Konstante sollte den Suchparameter von enthalten URL verging, während der zweite, Parser, sollte ein neues speichern Parser Objektinstanz. Rufen Sie als Nächstes die an parseURL Methode auf Parser und hineingehen rssLink als Parameter. Serialisieren Sie abschließend die Antwort mit dem json Funktion und geben Sie sie zurück.
exportasyncfunctionGET({url}) {
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return json(feed);
}
Gestaltung der Homepage
SvelteKit verwendet a Dateisystembasiertes Routingsystem. Standardmäßig ist die Routen/+Seite.svelte Die Datei dient als Startseite für Ihre Website.
Öffnen Sie die Datei +page.svelte und in der Skript Tag, importieren Sie die addToLocalStorage Funktion aus dem lib Verzeichnis. Sie haben dies noch nicht erstellt, werden dies aber später tun. Erstellen Sie nach dem Importieren der Funktion zwei Variablen: URL Und bereit, Einstellen der bereit variabel zu FALSCH.
