Dowiedz się, jak zbudować kompletną aplikację SvelteKit za pomocą tego prostego projektu czytnika RSS.

RSS to popularny standard dystrybucji treści internetowych w ustrukturyzowanym formacie. Wiele osób, od entuzjastów technologii po nauczycieli, korzysta z kanału RSS, aby być na bieżąco z najnowszymi wiadomościami i postami na swoich ulubionych blogach.

Napisanie własnego czytnika RSS to proste zadanie, które stało się jeszcze łatwiejsze dzięki SvelteKit, meta frameworkowi zbudowanemu na bazie Svelte.

Konfigurowanie projektu SvelteKit

Kod użyty w tym projekcie jest dostępny w formacie Repozytorium GitHuba i jest darmowy do użytku na licencji MIT. Jeśli chcesz zobaczyć wersję na żywo tego projektu, możesz to sprawdzić próbny.

Przed kontynuowaniem musisz mieć zainstalowane środowisko wykonawcze Node.js na swoim komputerze Menedżer pakietów węzłów (NPM). Otwórz terminal i uruchom następujące polecenie:

npm create svelte
# or
yarn create svelte

To powinno uruchomić create-svelte Interfejs wiersza poleceń (CLI)

instagram viewer
obsługiwane przez Vite. Nazwij swój projekt i ustaw szablon aplikacji na „Projekt szkieletu”. Wyłącz sprawdzanie typu za pomocą TypeScript i wybierz dowolne dodatkowe opcje. Następnie przejdź do katalogu projektu i uruchom:

npm install
# or
yarn

Po zainstalowaniu domyślnych zależności musisz zainstalować dwa pakiety, a mianowicie: parser rss I za chwilę. Pierwszy pakiet ułatwi analizę danych XML, natomiast drugi pomoże Ci w poprawnym sformatowaniu dat. W terminalu uruchom następujące polecenie:

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

Teraz możesz uruchomić serwer programistyczny, uruchamiając następujące polecenie.

npm run dev
# or
yarn dev

Wyczyść zawartość pliku Aplikacja.css plik i zmodyfikuj strukturę projektu tak, aby wyglądała mniej więcej tak, jak poniżej. Utwórz dowolne katalogi, które jeszcze nie istnieją i utwórz puste pliki pasujące do tych wymienionych poniżej:

Wystarczy zmienić źródło katalog, który powinien zawierać plik biblioteka katalog i a lib/addToLocalStorage.js plik. Powinien zawierać także a trasy katalog zawierający katalog podrzędny o nazwie karmić i cztery pliki: +layout.js, +układ.smukły, +strona.svelte, I +serwer.js. Wewnątrz karmić, utwórz katalog o nazwie [tytuł] z dwoma plikami w środku: +strona.serwer.js I +strona.svelte.

Możesz mieć trudności z utworzeniem pliku [tytuł] katalog w wierszu poleceń, ponieważ wiele powłok używa nawiasów kwadratowych do dopasowywania wzorców. Jeśli pojawi się błąd, spróbuj podać nazwę katalogu, np.:

mkdir '[title]'

Tworzenie trasy API w celu sprawdzenia poprawnych kanałów RSS

Otworzyć Routes/+server.js plik i zaimportuj plik json użytkowy. Importuj także Parser z parser rss pakiet.

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

Teraz wyeksportuj funkcję asynchroniczną, DOSTAWAĆi przejdź adres URL jako parametr. W tej funkcji utwórz dwie stałe: rssLink I parser.

Pierwsza stała powinna zawierać parametr wyszukiwania z pliku adres URL minęło, natomiast drugie, parser, należy zapisać nowy Parser instancja obiektu. Następnie zadzwoń do przeanalizuj adres URL metoda włączona parser i przejść rssLink jako parametr. Na koniec serializuj odpowiedź za pomocą json funkcję i zwróć ją.

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

Projektowanie strony głównej

SvelteKit używa system routingu oparty na systemie plików. Domyślnie Routes/+page.svelte plik służy jako strona główna Twojej witryny internetowej.

Otwórz plik +page.svelte i w pliku scenariusz tag, zaimportuj plik dodaj do magazynu lokalnego funkcja z biblioteka informator. Jeszcze tego nie utworzyłeś, ale zrobisz to później. Po zaimportowaniu funkcji utwórz dwie zmienne, adres URL I gotowy, ustawienie gotowy zmienna do FAŁSZ.