Lär dig hur du bygger en komplett SvelteKit-app med detta enkla RSS-läsarprojekt.
RSS är en populär standard för att distribuera webbinnehåll i ett strukturerat format. Många människor, från teknikentusiaster till lärare, använder RSS för att hålla sig uppdaterade med de senaste nyheterna och inläggen på sina favoritbloggar.
Att skriva din egen RSS-läsare är en enkel uppgift, ännu enklare med SvelteKit, ett meta-ramverk byggt ovanpå Svelte.
Konfigurera SvelteKit-projektet
Koden som används i detta projekt är tillgänglig i en GitHub-förråd och är gratis för dig att använda under MIT-licensen. Om du vill ta en titt på en liveversion av det här projektet kan du kolla in det här demo.
Innan du fortsätter måste du ha Node.js runtime installerad på din dator också Nod Package Manager (NPM). Öppna din terminal och kör följande kommando:
npm create svelte
# or
yarn create svelte
Detta bör starta skapa-svelte Kommandoradsgränssnitt (CLI) drivs av Vite. Namnge ditt projekt och ställ in appmallen till "Skeleton project". Inaktivera typkontroll med TypeScript och välj eventuella ytterligare alternativ du vill ha. Efter det byter du till projektkatalogen och kör:
npm install
# or
yarn
När du har installerat standardberoenden måste du installera två paket nämligen: rss-parser och ögonblick. Det första paketet kommer att göra det lättare att analysera XML-data, medan det andra hjälper dig att formatera datum korrekt. Kör följande i din terminal:
npm install rss-parser
npm install moment
# or
yarn add rss-parser
yarn add moment
Nu kan du starta utvecklingsservern genom att köra följande kommando.
npm run dev
# or
yarn dev
Rensa innehållet i App.css fil och ändra projektstrukturen så att den ser ut ungefär som följande. Skapa alla kataloger som inte redan finns och skapa tomma filer som matchar de som nämns nedan:
Du behöver bara ändra src katalog, som bör innehålla en lib katalog och en lib/addToLocalStorage.js fil. Den bör också innehålla en rutter katalog som innehåller en underordnad katalog med namnet utfodra och fyra filer: +layout.js, +layout.svelte, +page.svelte, och +server.js. Inuti utfodra, skapa en katalog med namnet [titel] med två filer inuti: +page.server.js och +page.svelte.
Du kan kämpa för att skapa [titel] katalogen på kommandoraden eftersom många skal använder hakparenteser för mönstermatchning. Om du får ett fel, försök att citera katalognamnet, t.ex.:
mkdir '[title]'Skapa API-rutten för att söka efter giltiga RSS-flöden
Öppna routes/+server.js fil och importera json nytta. Importera också Parser från rss-parser paket.
import { json } from"@sveltejs/kit";
import Parser from"rss-parser";
Exportera nu en asynkron funktion, SKAFFA SIG, och gå in url som en parameter. I den här funktionen skapar du två konstanter: rssLänk och parser.
Den första konstanten ska hålla sökparametern från url passerade, medan den andra, parser, bör lagra en ny Parser objektinstans. Ring sedan till parseURL metod på parser och passera in rssLänk som en parameter. Serialisera slutligen svaret med json funktion och returnera den.
exportasyncfunctionGET({url}) {
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return json(feed);
}
Designa hemsidan
SvelteKit använder en filsystembaserat routingsystem. Som standard är routes/+page.svelte filen fungerar som startsidan för din webbplats.
Öppna filen +page.svelte och i manus tag, importera addToLocalStorage funktion från lib katalog. Du har inte skapat det här ännu, men du kommer att göra det senare. När du har importerat funktionen skapar du två variabler, url och redo, ställa in redo variabel till falsk.
