Naučte se, jak vytvořit kompletní aplikaci SvelteKit pomocí tohoto jednoduchého projektu RSS čtečky.
RSS je populární standard pro distribuci webového obsahu ve strukturovaném formátu. Mnoho lidí, od technických nadšenců po učitele, používá RSS, aby byli informováni o nejnovějších zprávách a příspěvcích na svých oblíbených blozích.
Psaní vlastní RSS čtečky je přímočarý úkol, který je ještě jednodušší díky SvelteKit, metarámci postavenému na Svelte.
Nastavení projektu SvelteKit
Kód použitý v tomto projektu je k dispozici v a úložiště GitHub a můžete jej používat zdarma pod licencí MIT. Pokud se chcete podívat na živou verzi tohoto projektu, můžete se podívat na toto demo.
Než budete pokračovat, musíte mít na svém počítači nainstalovaný runtime Node.js Správce balíčků uzlů (NPM). Otevřete terminál a spusťte následující příkaz:
npm create svelte
# or
yarn create svelte
To by mělo spustit create-svelte Rozhraní příkazového řádku (CLI) poháněn Vite. Pojmenujte svůj projekt a nastavte šablonu aplikace na „Projekt kostry“. Vypněte kontrolu typu pomocí TypeScript a vyberte další požadované možnosti. Poté se přepněte do adresáře projektu a spusťte:
npm install
# or
yarn
Po instalaci výchozích závislostí musíte nainstalovat dva balíčky, a to: rss-parser a moment. První balíček usnadní analýzu dat XML, zatímco druhý vám pomůže správně formátovat data. Ve svém terminálu spusťte následující:
npm install rss-parser
npm install moment
# or
yarn add rss-parser
yarn add moment
Nyní můžete spustit vývojový server spuštěním následujícího příkazu.
npm run dev
# or
yarn dev
Vymažte obsah App.css soubor a upravte strukturu projektu tak, aby vypadala asi takto. Vytvořte libovolné adresáře, které ještě neexistují, a vytvořte prázdné soubory, které budou odpovídat níže uvedeným:
Budete muset změnit pouze src adresář, který by měl obsahovat a lib adresář a a lib/addToLocalStorage.js soubor. Měl by také obsahovat a trasy adresář, který obsahuje podřízený adresář s názvem krmit a čtyři soubory: +layout.js, +layout.svelte, +stránka.velká, a +server.js. Uvnitř krmit, vytvořte adresář s názvem [titul] se dvěma soubory uvnitř: +page.server.js a +stránka.velká.
Můžete mít potíže s vytvořením [titul] adresář na příkazovém řádku, protože mnoho shellů používá pro porovnávání vzorů hranaté závorky. Pokud se zobrazí chyba, zkuste uvést název adresáře, např.:
mkdir '[title]'Vytvoření trasy API pro kontrolu platných kanálů RSS
Otevři routes/+server.js soubor a importujte json užitečnost. Také import Analyzátor z rss-parser balík.
import { json } from"@sveltejs/kit";
import Parser from"rss-parser";
Nyní exportujte asynchronní funkci, DOSTATa projít dovnitř url jako parametr. V této funkci vytvořte dvě konstanty: rssLink a analyzátor.
První konstanta by měla obsahovat parametr vyhledávání z url prošel, zatímco druhý, analyzátor, by měl uložit nový Analyzátor instance objektu. Dále zavolejte na parseURL metoda zapnuta analyzátor a projít dovnitř rssLink jako parametr. Nakonec serializujte odpověď pomocí json funkci a vrátit ji.
exportasyncfunctionGET({url}) {
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return json(feed);
}
Návrh domovské stránky
SvelteKit používá a směrovací systém založený na souborovém systému. Ve výchozím nastavení je trasy/+stránka.svelte soubor slouží jako domovská stránka vašeho webu.
Otevřete soubor +page.svelte a v skript tag, importujte addToLocalStorage funkce z lib adresář. Toto jste ještě nevytvořili, ale uděláte tak později. Po importu funkce vytvořte dvě proměnné, url a připraven, nastavení připraven variabilní k Nepravdivé.
