Scopri come creare un'app SvelteKit completa con questo semplice progetto di lettore RSS.
RSS è uno standard popolare per la distribuzione di contenuti web in un formato strutturato. Molte persone, dagli appassionati di tecnologia agli insegnanti, utilizzano gli RSS per rimanere aggiornati con le ultime notizie e i post sui loro blog preferiti.
Scrivere il tuo lettore RSS è un compito semplice, reso ancora più semplice con SvelteKit, un meta framework costruito su Svelte.
Impostazione del progetto SvelteKit
Il codice utilizzato in questo progetto è disponibile in a Repositorio GitHub ed è gratuito per l'utilizzo con la licenza MIT. Se vuoi dare un'occhiata a una versione live di questo progetto, puoi dare un'occhiata a questo demo.
Prima di procedere, è necessario che sul computer sia installato anche il runtime Node.js Gestore pacchetti nodo (NPM). Apri il tuo terminale ed esegui il seguente comando:
npm create svelte
# or
yarn create svelte
Questo dovrebbe avviare il create-svelte Interfaccia della riga di comando (CLI)
fornito da Vite. Assegna un nome al progetto e imposta il modello dell'app su "Progetto Skeleton". Disabilita il controllo del tipo con TypeScript e seleziona le opzioni aggiuntive che desideri. Successivamente, passa alla directory del progetto ed esegui:npm install
# or
yarn
Dopo aver installato le dipendenze predefinite, è necessario installare due pacchetti vale a dire: rss-parser E momento. Il primo pacchetto renderà più semplice l'analisi dei dati XML, mentre il secondo ti aiuterà a formattare correttamente le date. Nel tuo terminale, esegui quanto segue:
npm install rss-parser
npm install moment
# or
yarn add rss-parser
yarn add moment
Ora puoi avviare il server di sviluppo eseguendo il comando seguente.
npm run dev
# or
yarn dev
Cancella il contenuto del App.css file e modificare la struttura del progetto in modo che assomigli a quanto segue. Crea eventuali directory che non esistono già e crea file vuoti in modo che corrispondano a quelli indicati di seguito:
Dovrai solo cambiare il file src directory, che dovrebbe contenere un file lib directory e a lib/addToLocalStorage.js file. Dovrebbe contenere anche a itinerari directory che contiene una directory figlio denominata foraggio e quattro file: +layout.js, +layout.svelte, +pagina.svelte, E +server.js. Dentro foraggio, crea una directory denominata [titolo] con due file all'interno: +pagina.server.js E +pagina.svelte.
Potresti avere difficoltà a creare il file [titolo] directory sulla riga di comando poiché molte shell utilizzano parentesi quadre per la corrispondenza dei modelli. Se ricevi un errore, prova a citare il nome della directory, ad esempio:
mkdir '[title]'Creazione del percorso API per verificare la presenza di feed RSS validi
Apri il percorsi/+server.js archiviare e importare il file json utilità. Anche importare Analizzatore dal rss-parser pacchetto.
import { json } from"@sveltejs/kit";
import Parser from"rss-parser";
Ora esporta una funzione asincrona, OTTENERE, e passare dentro URL come parametro. In questa funzione, crea due costanti: rssLink E parser.
La prima costante dovrebbe contenere il parametro di ricerca da URL passato, mentre il secondo, parser, dovrebbe memorizzare un nuovo file Analizzatore istanza dell'oggetto. Successivamente, chiama il analizzareURL metodo attivo parser e passare dentro rssLink come parametro. Infine, serializza la risposta con il file json funzione e restituirlo.
exportasyncfunctionGET({url}) {
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return json(feed);
}
Progettare la home page
SvelteKit utilizza a sistema di routing basato su file system. Per impostazione predefinita, il percorsi/+pagina.svelte Il file funge da home page per il tuo sito web.
Apri il file +page.svelte e, nel file sceneggiatura tag, importa il file addToLocalStorage funzione da lib directory. Non l'hai ancora creato, ma lo farai più tardi. Dopo aver importato la funzione, crea due variabili, URL E pronto, impostando il pronto variabile a falso.
