Aprenda a crear una aplicación SvelteKit completa con este sencillo proyecto de lector de RSS.
RSS es un estándar popular para distribuir contenido web en un formato estructurado. Muchas personas, desde entusiastas de la tecnología hasta profesores, utilizan RSS para mantenerse actualizados con las últimas noticias y publicaciones en sus blogs favoritos.
Escribir su propio lector de RSS es una tarea sencilla, que se hace aún más fácil con SvelteKit, un metamarco construido sobre Svelte.
Configurando el proyecto SvelteKit
El código utilizado en este proyecto está disponible en un repositorio de GitHub y su uso es gratuito bajo la licencia MIT. Si desea ver una versión en vivo de este proyecto, puede consultar esto manifestación.
Antes de continuar, debe tener instalado el tiempo de ejecución de Node.js en su máquina, así como Administrador de paquetes de nodos (NPM). Abra su terminal y ejecute el siguiente comando:
npm create svelte
# or
yarn create svelte
Esto debería iniciar el create-svelte.
Interfaz de línea de comando (CLI) impulsado por Vite. Asigne un nombre a su proyecto y configure la plantilla de la aplicación como "Proyecto esqueleto". Deshabilite la verificación de tipos con TypeScript y seleccione las opciones adicionales que desee. Después de eso, cambie al directorio del proyecto y ejecute:npm install
# or
yarn
Después de instalar las dependencias predeterminadas, necesita instalar dos paquetes, a saber: analizador-rss y momento. El primer paquete facilitará el análisis de los datos XML, mientras que el segundo le ayudará a formatear las fechas correctamente. En tu terminal ejecuta lo siguiente:
npm install rss-parser
npm install moment
# or
yarn add rss-parser
yarn add moment
Ahora, puede iniciar el servidor de desarrollo ejecutando el siguiente comando.
npm run dev
# or
yarn dev
Borrar el contenido del aplicación.css y modifique la estructura del proyecto para que se parezca a lo siguiente. Cree cualquier directorio que aún no exista y cree archivos vacíos que coincidan con los que se mencionan a continuación:
Sólo necesitarás cambiar el src directorio, que debe contener un biblioteca directorio y un lib/addToLocalStorage.js archivo. También debe contener un rutas directorio que contiene un directorio secundario llamado alimentar y cuatro archivos: +diseño.js, +diseño.esbelto, +página.esbelta, y +servidor.js. Adentro alimentar, cree un directorio llamado [título] con dos archivos dentro: +página.servidor.js y +página.esbelta.
Puede que tengas dificultades para crear el [título] directorio en la línea de comando ya que muchos shells usan corchetes para la coincidencia de patrones. Si recibe un error, intente citar el nombre del directorio, por ejemplo:
mkdir '[title]'Creación de la ruta API para comprobar si hay fuentes RSS válidas
Abre el rutas/+servidor.js archivar e importar el json utilidad. También importar analizador desde el analizador-rss paquete.
import { json } from"@sveltejs/kit";
import Parser from"rss-parser";
Ahora, exporte una función asincrónica, CONSEGUIR, y pasar URL como parámetro. En esta función, cree dos constantes: rssEnlace y analizador.
La primera constante debe contener el parámetro de búsqueda del URL pasó, mientras que el segundo, analizador, debe almacenar un nuevo analizador instancia de objeto. A continuación, llame al analizarURL método en analizador y pasar rssEnlace como parámetro. Finalmente, serialice la respuesta con el json funcionar y devolverlo.
exportasyncfunctionGET({url}) {
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return json(feed);
}
Diseñar la página de inicio
SvelteKit utiliza un sistema de enrutamiento basado en sistema de archivos. Por defecto, el rutas/+página.esvelte El archivo sirve como página de inicio de su sitio web.
Abra el archivo +page.svelte y, en el guion etiqueta, importar el agregar al almacenamiento local función de la biblioteca directorio. Aún no lo has creado, pero lo harás más tarde. Después de importar la función, cree dos variables, URL y listo, estableciendo el listo variable a FALSO.
