Lær hvordan du bygger en komplett SvelteKit-app med dette enkle RSS-leserprosjektet.
RSS er en populær standard for distribusjon av webinnhold i et strukturert format. Mange mennesker, fra teknologientusiaster til lærere, bruker RSS for å holde seg oppdatert med siste nytt og innlegg på favorittbloggene deres.
Å skrive din egen RSS-leser er en enkel oppgave, gjort enda enklere med SvelteKit, et meta-rammeverk bygget på toppen av Svelte.
Sette opp SvelteKit-prosjektet
Koden som brukes i dette prosjektet er tilgjengelig i en GitHub-depot og er gratis for deg å bruke under MIT-lisensen. Hvis du vil ta en titt på en live-versjon av dette prosjektet, kan du sjekke ut denne demo.
Før du fortsetter, må du ha Node.js runtime installert på maskinen din også Node Package Manager (NPM). Åpne terminalen og kjør følgende kommando:
npm create svelte
# or
yarn create svelte
Dette bør starte opprette-svelte Kommandolinjegrensesnitt (CLI) drevet av Vite. Gi prosjektet et navn og sett appmalen til "Skeleton project". Deaktiver typekontroll med TypeScript, og velg eventuelle tilleggsalternativer du ønsker. Etter det, bytt til prosjektkatalogen og kjør:
npm install
# or
yarn
Etter å ha installert standardavhengighetene, må du installere to pakker, nemlig: rss-parser og øyeblikk. Den første pakken vil gjøre det lettere å analysere XML-dataene, mens den andre vil hjelpe deg med å formatere datoer riktig. Kjør følgende i terminalen din:
npm install rss-parser
npm install moment
# or
yarn add rss-parser
yarn add moment
Nå kan du starte utviklingsserveren ved å kjøre følgende kommando.
npm run dev
# or
yarn dev
Fjern innholdet i App.css fil og endre prosjektstrukturen slik at den ser omtrent slik ut som følgende. Opprett eventuelle kataloger som ikke allerede eksisterer, og lag tomme filer som samsvarer med de som er navngitt nedenfor:
Du trenger bare å endre src katalog, som skal inneholde en lib katalog og en lib/addToLocalStorage.js fil. Den skal også inneholde en ruter katalog som inneholder en underordnet katalog med navn mate og fire filer: +layout.js, +layout.svelte, +side.svelte, og +server.js. Innsiden mate, opprett en katalog som heter [tittel] med to filer inni: +side.server.js og +side.svelte.
Du kan slite med å lage [tittel] katalogen på kommandolinjen siden mange skjell bruker firkantede parenteser for mønstertilpasning. Hvis du får en feilmelding, prøv å oppgi katalognavnet, f.eks.:
mkdir '[title]'Opprette API-ruten for å se etter gyldige RSS-feeder
Åpne routes/+server.js fil og importer json nytte. Importer også Parser fra rss-parser pakke.
import { json } from"@sveltejs/kit";
import Parser from"rss-parser";
Eksporter nå en asynkron funksjon, FÅ, og gå inn url som en parameter. I denne funksjonen lager du to konstanter: rssLink og parser.
Den første konstanten skal inneholde søkeparameteren fra url passerte, mens den andre, parser, bør lagre en ny Parser objektforekomst. Deretter ringer du parseURL metode på parser og gå inn rssLink som en parameter. Til slutt, serialiser svaret med json funksjon og returner den.
exportasyncfunctionGET({url}) {
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return json(feed);
}
Design av hjemmesiden
SvelteKit bruker en filsystembasert rutingsystem. Som standard er ruter/+side.svelte filen fungerer som hjemmesiden for nettstedet ditt.
Åpne +page.svelte-filen og i manus tag, importer addToLocalStorage funksjon fra lib katalog. Du har ikke opprettet dette ennå, men du vil gjøre det senere. Etter å ha importert funksjonen, lag to variabler, url og klar, innstilling av klar variabel til falsk.
