Научете как да създадете пълно приложение SvelteKit с този прост проект за RSS четец.
RSS е популярен стандарт за разпространение на уеб съдържание в структуриран формат. Много хора, от технически ентусиасти до учители, използват RSS, за да бъдат в крак с последните новини и публикации в любимите си блогове.
Написването на ваш собствен RSS четец е лесна задача, улеснена още повече със SvelteKit, мета рамка, изградена върху Svelte.
Настройване на проекта SvelteKit
Кодът, използван в този проект, е наличен в a GitHub хранилище и е безплатен за използване под лиценза на MIT. Ако искате да разгледате версия на живо на този проект, можете да проверите това демонстрация.
Преди да продължите, трябва да имате инсталирана среда за изпълнение Node.js на вашата машина, както и Мениджър на пакети на възли (NPM). Отворете вашия терминал и изпълнете следната команда:
npm create svelte
# or
yarn create svelte
Това трябва да стартира create-svelte Интерфейс на командния ред (CLI) захранвано от Vite. Наименувайте проекта си и задайте шаблона на приложението на „Skeleton project“. Деактивирайте проверката на типа с TypeScript и изберете всички допълнителни опции, които искате. След това преминете към директорията на проекта и стартирайте:
npm install
# or
yarn
След като инсталирате зависимостите по подразбиране, трябва да инсталирате два пакета, а именно: rss анализатор и момент. Първият пакет ще улесни анализирането на XML данните, докато вторият ще ви помогне да форматирате датите правилно. Във вашия терминал изпълнете следното:
npm install rss-parser
npm install moment
# or
yarn add rss-parser
yarn add moment
Сега можете да стартирате сървъра за разработка, като изпълните следната команда.
npm run dev
# or
yarn dev
Изчистете съдържанието на App.css файл и модифицирайте структурата на проекта така, че да изглежда по следния начин. Създайте всички директории, които все още не съществуват, и създайте празни файлове, които да съответстват на посочените по-долу:
Ще трябва само да промените src директория, която трябва да съдържа a либ указател и a lib/addToLocalStorage.js файл. Той също така трябва да съдържа a маршрути директория, която съдържа дъщерна директория с име фураж и четири файла: +layout.js, +layout.svelte, +страница.svelte, и +server.js. Вътре фураж, създайте директория с име [заглавие] с два файла вътре: +page.server.js и +страница.svelte.
Може да се затрудните да създадете [заглавие] директория на командния ред, тъй като много обвивки използват квадратни скоби за съвпадение на шаблон. Ако получите грешка, опитайте да цитирате името на директорията, напр.:
mkdir '[title]'Създаване на API маршрут за проверка за валидни RSS канали
Отвори routes/+server.js файл и импортирайте json полезност. Също внос Анализатор от rss анализатор пакет.
import { json } from"@sveltejs/kit";
import Parser from"rss-parser";
Сега експортирайте асинхронна функция, ВЗЕМЕТЕ, и преминете URL адрес като параметър. В тази функция създайте две константи: rssLink и анализатор.
Първата константа трябва да съдържа параметъра за търсене от URL адрес премина, докато вторият, анализатор, трябва да съхранява нов Анализатор екземпляр на обект. След това се обадете на parseURL метод на анализатор и преминете rssLink като параметър. Накрая сериализирайте отговора с json функция и я върнете.
exportasyncfunctionGET({url}) {
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return json(feed);
}
Проектиране на началната страница
SvelteKit използва a система за маршрутизиране, базирана на файлова система. По подразбиране, routes/+page.svelte служи като начална страница за вашия уебсайт.
Отворете файла +page.svelte и в сценарий етикет, импортирайте addToLocalStorage функция от либ указател. Все още не сте създали това, но ще го направите по-късно. След като импортирате функцията, създайте две променливи, URL адрес и готов, настройка на готов променлива към невярно.
