Opi rakentamaan täydellinen SvelteKit-sovellus tällä yksinkertaisella RSS-lukijaprojektilla.
RSS on suosittu standardi verkkosisällön jakamiseen jäsennellyssä muodossa. Monet ihmiset tekniikan harrastajista opettajiin käyttävät RSS: ää pysyäkseen ajan tasalla suosikkiblogiensa viimeisimmistä uutisista ja viesteistä.
Oman RSS-lukijan kirjoittaminen on yksinkertaista, ja sitä helpottaa SvelteKit, Svelten päälle rakennettu metakehys.
SvelteKit-projektin perustaminen
Tässä projektissa käytetty koodi on saatavilla a GitHub-arkisto ja sen käyttö on ilmaista MIT-lisenssin alaisena. Jos haluat katsoa tämän projektin live-versiota, voit katsoa tämän demo.
Ennen kuin jatkat, sinun on oltava asennettuna koneellesi Node.js-ajoaika Node Package Manager (NPM). Avaa terminaali ja suorita seuraava komento:
npm create svelte
# or
yarn create svelte
Tämän pitäisi käynnistää Create-svelte Command Line Interface (CLI) voimanlähteenä Vite. Nimeä projekti ja aseta sovellusmalliksi "Skeleton project". Poista TypeScriptin tyyppitarkistus käytöstä ja valitse haluamasi lisäasetukset. Vaihda sen jälkeen projektihakemistoon ja suorita:
npm install
# or
yarn
Oletusriippuvuuksien asentamisen jälkeen sinun on asennettava kaksi pakettia: rss-parser ja hetki. Ensimmäinen paketti helpottaa XML-tietojen jäsentämistä, kun taas toinen auttaa sinua muotoilemaan päivämäärät oikein. Suorita terminaalissasi seuraava:
npm install rss-parser
npm install moment
# or
yarn add rss-parser
yarn add moment
Nyt voit käynnistää kehityspalvelimen suorittamalla seuraavan komennon.
npm run dev
# or
yarn dev
Tyhjennä sisältö App.css tiedosto ja muokkaa projektin rakennetta siten, että se näyttää seuraavanlaiselta. Luo hakemistoja, joita ei vielä ole, ja luo tyhjiä tiedostoja vastaamaan alla nimettyjä tiedostoja:
Sinun tarvitsee vain muuttaa src hakemisto, jonka tulee sisältää a lib hakemisto ja a lib/addToLocalStorage.js tiedosto. Sen tulee sisältää myös a reitit hakemisto, joka sisältää alihakemiston nimeltä syöttää ja neljä tiedostoa: +layout.js, +layout.homea, +sivu.hopea, ja +palvelin.js. Sisällä syöttää, luo hakemisto nimeltä [title] jossa kaksi tiedostoa sisällä: +sivu.palvelin.js ja +sivu.hopea.
Saatat kamppailla luodaksesi [title] hakemistoon komentorivillä, koska monet komentotulkit käyttävät hakasulkeita kuvioiden sovittamiseen. Jos saat virheilmoituksen, kokeile lainata hakemiston nimeä, esim.
mkdir '[title]'API-reitin luominen kelvollisten RSS-syötteiden tarkistamiseksi
Avaa routes/+server.js tiedosto ja tuo json hyödyllinen. Myös tuonti Jäsentäjä alkaen rss-parser paketti.
import { json } from"@sveltejs/kit";
import Parser from"rss-parser";
Vie nyt asynkroninen funktio, SAADA, ja mene sisään url parametrina. Luo tässä funktiossa kaksi vakiota: rssLink ja jäsentäjä.
Ensimmäisen vakion tulee sisältää hakuparametri kohteesta url ohi, kun taas toinen, jäsentäjä, pitäisi säilyttää uusi Jäsentäjä objektiinstanssi. Soita seuraavaksi parseURL menetelmä päällä jäsentäjä ja kulkea sisään rssLink parametrina. Sarjaa vastaus lopuksi json toiminto ja palauta se.
exportasyncfunctionGET({url}) {
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return json(feed);
}
Kotisivun suunnittelu
SvelteKit käyttää a tiedostojärjestelmäpohjainen reititysjärjestelmä. Oletuksena routes/+page.svelte tiedosto toimii verkkosivustosi kotisivuna.
Avaa +page.svelte-tiedosto ja käsikirjoitus tag, tuo addToLocalStorage toiminto alkaen lib hakemistosta. Et ole vielä luonut tätä, mutta teet sen myöhemmin. Kun olet tuonut funktion, luo kaksi muuttujaa, url ja valmis, asettamalla valmis muuttuja väärä.
