Aprenda como construir um aplicativo SvelteKit completo com este projeto simples de leitor de RSS.

RSS é um padrão popular para distribuição de conteúdo da web em formato estruturado. Muitas pessoas, desde entusiastas de tecnologia até professores, usam RSS para se manterem atualizados com as últimas notícias e postagens em seus blogs favoritos.

Escrever seu próprio leitor RSS é uma tarefa simples, ainda mais fácil com o SvelteKit, uma metaestrutura construída sobre o Svelte.

Configurando o projeto SvelteKit

O código utilizado neste projeto está disponível em um Repositório GitHub e é gratuito para você usar sob a licença do MIT. Se você quiser dar uma olhada em uma versão ao vivo deste projeto, você pode conferir isto demonstração.

Antes de continuar, você precisa ter o runtime Node.js instalado em sua máquina, bem como Gerenciador de Pacotes de Nó (NPM). Abra seu terminal e execute o seguinte comando:

npm create svelte
# or
yarn create svelte

Isso deve iniciar o create-svelte Interface de linha de comando (CLI)

instagram viewer
alimentado por Vite. Dê um nome ao seu projeto e defina o modelo do aplicativo como "Projeto esqueleto". Desative a verificação de tipo com TypeScript e selecione as opções adicionais desejadas. Depois disso, mude para o diretório do projeto e execute:

npm install
# or
yarn

Depois de instalar as dependências padrão, você precisa instalar dois pacotes, a saber: analisador de rss e momento. O primeiro pacote facilitará a análise dos dados XML, enquanto o segundo o ajudará a formatar as datas corretamente. No seu terminal, execute o seguinte:

npm install rss-parser
npm install moment
# or
yarn add rss-parser
yarn add moment

Agora, você pode iniciar o servidor de desenvolvimento executando o seguinte comando.

npm run dev
# or
yarn dev

Limpe o conteúdo do Aplicativo.css arquivo e modifique a estrutura do projeto de forma que se pareça com o seguinte. Crie quaisquer diretórios que ainda não existam e crie arquivos vazios para corresponder aos nomeados abaixo:

Você só precisará alterar o fonte diretório, que deve conter um biblioteca diretório e um lib/addToLocalStorage.js arquivo. Deve também conter um rotas diretório que contém um diretório filho chamado alimentar e quatro arquivos: +layout.js, +layout.svelte, +página.svelte, e +servidor.js. Dentro alimentar, crie um diretório chamado [título] com dois arquivos dentro: +página.server.js e +página.svelte.

Você pode ter dificuldade para criar o [título] diretório na linha de comando, pois muitos shells usam colchetes para correspondência de padrões. Se você receber um erro, tente citar o nome do diretório, por exemplo:

mkdir '[title]'

Criando a rota da API para verificar feeds RSS válidos

Abra o rotas/+server.js arquivo e importe o JSON utilitário. Importar também Analisador de analisador de rss pacote.

import { json } from"@sveltejs/kit";
import Parser from"rss-parser";

Agora, exporte uma função assíncrona, PEGAR, e passar url como parâmetro. Nesta função, crie duas constantes: rssLink e analisador.

A primeira constante deve conter o parâmetro de pesquisa do url passou, enquanto o segundo, analisador, deve armazenar um novo Analisador instância do objeto. A seguir, ligue para o analisarURL método ativado analisador e passar rssLink como parâmetro. Finalmente, serialize a resposta com o JSON função e devolvê-lo.

exportasyncfunctionGET({url}) {
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return json(feed);
}

Projetando a página inicial

SvelteKit usa um sistema de roteamento baseado em sistema de arquivos. Por padrão, o rotas/+página.svelte arquivo serve como página inicial do seu site.

Abra o arquivo +page.svelte e, no roteiro tag, importe o addToLocalStorage função do biblioteca diretório. Você ainda não criou isso, mas fará isso mais tarde. Após importar a função, crie duas variáveis, url e preparar, definindo o preparar variável para falso.