Naučite kako izraditi potpunu SvelteKit aplikaciju s ovim jednostavnim projektom RSS čitača.
RSS je popularan standard za distribuciju web sadržaja u strukturiranom formatu. Mnogi ljudi, od tehnoloških entuzijasta do učitelja, koriste RSS kako bi bili u tijeku s najnovijim vijestima i objavama na svojim omiljenim blogovima.
Pisanje vlastitog RSS čitača jednostavan je zadatak, koji je još lakši uz SvelteKit, meta framework izgrađen na Svelteu.
Postavljanje projekta SvelteKit
Kod korišten u ovom projektu dostupan je u a GitHub spremište i besplatan je za korištenje pod MIT licencom. Ako želite pogledati verziju ovog projekta uživo, pogledajte ovo demo.
Prije nego što nastavite, trebate imati instalirano Node.js runtime na vašem računalu Node Package Manager (NPM). Otvorite svoj terminal i pokrenite sljedeću naredbu:
npm create svelte
# or
yarn create svelte
Ovo bi trebalo pokrenuti create-svelte Sučelje naredbenog retka (CLI) powered by Vite. Imenujte svoj projekt i postavite predložak aplikacije na "Skeleton project". Onemogućite provjeru tipa pomoću TypeScripta i odaberite dodatne opcije koje želite. Nakon toga prebacite se u direktorij projekta i pokrenite:
npm install
# or
yarn
Nakon instaliranja zadanih ovisnosti, trebate instalirati dva paketa, naime: rss-parser i trenutak. Prvi paket će vam olakšati analizu XML podataka, dok će vam drugi pomoći da pravilno formatirate datume. U svom terminalu pokrenite sljedeće:
npm install rss-parser
npm install moment
# or
yarn add rss-parser
yarn add moment
Sada možete pokrenuti razvojni poslužitelj izvođenjem sljedeće naredbe.
npm run dev
# or
yarn dev
Obrišite sadržaj App.css datoteku i izmijenite strukturu projekta tako da izgleda otprilike ovako. Napravite sve direktorije koji već ne postoje i stvorite prazne datoteke koje odgovaraju onima navedenima u nastavku:
Samo ćete morati promijeniti src imenik, koji bi trebao sadržavati a lib imenik i a lib/addToLocalStorage.js datoteka. Također treba sadržavati a rute direktorij koji sadrži podređeni direktorij pod nazivom hraniti se i četiri datoteke: +izgled.js, +izgled.svelte, +stranica.svelte, i +server.js. Iznutra hraniti se, stvorite imenik pod nazivom [titula] sa dvije datoteke unutra: +stranica.poslužitelj.js i +stranica.svelte.
Možda ćete imati problema sa stvaranjem [titula] direktorij u naredbenom retku jer mnoge ljuske koriste uglate zagrade za podudaranje uzoraka. Ako dobijete pogrešku, pokušajte citirati ime direktorija, npr.:
mkdir '[title]'Stvaranje API rute za provjeru valjanih RSS izvora
Otvori rute/+server.js datoteku i uvoz json uslužni. Također uvoz Parser od rss-parser paket.
import { json } from"@sveltejs/kit";
import Parser from"rss-parser";
Sada izvezite asinkronu funkciju, DOBITI, i uđite url kao parametar. U ovoj funkciji stvorite dvije konstante: rssLink i parser.
Prva konstanta treba sadržavati parametar pretraživanja iz url prošao, dok je drugi, parser, treba pohraniti novi Parser instanca objekta. Zatim nazovite analizirajURL metoda na parser i uđi unutra rssLink kao parametar. Na kraju, serijalizirajte odgovor s json funkciju i vratiti je.
exportasyncfunctionGET({url}) {
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return json(feed);
}
Dizajn početne stranice
SvelteKit koristi a sustav usmjeravanja temeljen na datotečnom sustavu. Prema zadanim postavkama, rute/+stranica.svelte datoteka služi kao početna stranica za vašu web stranicu.
Otvorite datoteku +page.svelte i u skripta oznaku, uvezite addToLocalStorage funkcija iz lib imenik. Ovo još niste izradili, ali ćete to učiniti kasnije. Nakon uvoza funkcije, kreirajte dvije varijable, url i spreman, postavljanje spreman varijabla za lažno.
