Aflați cum să creați o aplicație SvelteKit completă cu acest proiect simplu de cititor RSS.

RSS este un standard popular pentru distribuirea conținutului web într-un format structurat. Mulți oameni, de la pasionați de tehnologie la profesori, folosesc RSS pentru a fi la curent cu cele mai recente știri și postări de pe blogurile lor preferate.

Scrierea propriului cititor RSS este o sarcină simplă, făcută și mai ușoară cu SvelteKit, un meta framework construit pe Svelte.

Configurarea proiectului SvelteKit

Codul folosit în acest proiect este disponibil în a Depozitul GitHub și este gratuit pentru utilizare sub licența MIT. Dacă doriți să aruncați o privire la o versiune live a acestui proiect, puteți verifica aceasta demonstrație.

Înainte de a continua, trebuie să aveți runtime-ul Node.js instalat pe mașina dvs., precum și Node Package Manager (NPM). Deschideți terminalul și rulați următoarea comandă:

npm create svelte
# or
yarn create svelte

Acest lucru ar trebui să pornească crea-svelte Interfață de linie de comandă (CLI)

instagram viewer
alimentat de Vite. Denumiți-vă proiectul și setați șablonul de aplicație la „Proiect schelet”. Dezactivați verificarea tipului cu TypeScript și selectați orice opțiuni suplimentare dorite. După aceea, treceți la directorul proiectului și rulați:

npm install
# or
yarn

După instalarea dependențelor implicite, trebuie să instalați două pachete și anume: rss-parser și moment. Primul pachet va ușura analizarea datelor XML, în timp ce al doilea vă va ajuta să formatați datele corect. În terminalul dvs., rulați următoarele:

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

Acum, puteți porni serverul de dezvoltare rulând următoarea comandă.

npm run dev
# or
yarn dev

Ștergeți conținutul App.css fișier și modificați structura proiectului astfel încât să arate ceva ca următorul. Creați directoare care nu există deja și creați fișiere goale care să se potrivească cu cele numite mai jos:

Va trebui doar să schimbați src director, care ar trebui să conțină a lib director și a lib/addToLocalStorage.js fişier. Ar trebui să conțină și a trasee director care conține un director copil numit a hrani și patru fișiere: +layout.js, +aspect.svelte, +page.svelte, și +server.js. Interior a hrani, creați un director numit [titlu] cu două fișiere înăuntru: +page.server.js și +page.svelte.

S-ar putea să vă străduiți să creați [titlu] director pe linia de comandă, deoarece multe shell-uri folosesc paranteze pătrate pentru potrivirea modelelor. Dacă primiți o eroare, încercați să citați numele directorului, de exemplu:

mkdir '[title]'

Crearea rutei API pentru a verifica dacă există fluxuri RSS valide

Deschide rute/+server.js fișier și importați fișierul json utilitate. De asemenea, import Analizator de la rss-parser pachet.

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

Acum, exportați o funcție asincronă, OBȚINE, și trece înăuntru url ca parametru. În această funcție, creați două constante: rssLink și analizator.

Prima constantă ar trebui să dețină parametrul de căutare din url a trecut, în timp ce al doilea, analizator, ar trebui să stocheze un nou Analizator instanță obiect. Apoi, sunați la parseURL metoda pe analizator și treci înăuntru rssLink ca parametru. În cele din urmă, serializați răspunsul cu json funcția și returnați-o.

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

Proiectarea paginii de pornire

SvelteKit folosește un sistem de rutare bazat pe sistemul de fișiere. În mod implicit, trasee/+pag.svelte fișierul servește ca pagină de pornire pentru site-ul dvs.

Deschideți fișierul +page.svelte și, în fișierul scenariu etichetați, importați addToLocalStorage funcția de la lib director. Încă nu ați creat acest lucru, dar o veți face mai târziu. După importarea funcției, creați două variabile, url și gata, setarea gata variabilă la fals.