Apprenez à créer une application SvelteKit complète avec ce simple projet de lecteur RSS.
RSS est une norme populaire pour distribuer du contenu Web dans un format structuré. De nombreuses personnes, des passionnés de technologie aux enseignants, utilisent RSS pour se tenir au courant des dernières nouvelles et publications sur leurs blogs préférés.
Écrire votre propre lecteur RSS est une tâche simple, rendue encore plus facile avec SvelteKit, un méta-cadre construit sur Svelte.
Configuration du projet SvelteKit
Le code utilisé dans ce projet est disponible dans un Dépôt GitHub et son utilisation est gratuite sous la licence MIT. Si vous souhaitez jeter un œil à une version live de ce projet, vous pouvez consulter ceci démo.
Avant de continuer, vous devez avoir installé le runtime Node.js sur votre machine ainsi que Gestionnaire de packages de nœuds (NPM). Ouvrez votre terminal et exécutez la commande suivante :
npm create svelte
# or
yarn create svelte
Cela devrait démarrer le create-svelte
Interface de ligne de commande (CLI) alimenté par Vite. Nommez votre projet et définissez le modèle d'application sur "Projet squelette". Désactivez la vérification du type avec TypeScript et sélectionnez les options supplémentaires souhaitées. Après cela, passez au répertoire du projet et exécutez :npm install
# or
yarn
Après avoir installé les dépendances par défaut, vous devez installer deux packages à savoir: analyseur RSS et moment. Le premier package facilitera l'analyse des données XML, tandis que le second vous aidera à formater correctement les dates. Dans votre terminal, exécutez ce qui suit :
npm install rss-parser
npm install moment
# or
yarn add rss-parser
yarn add moment
Maintenant, vous pouvez démarrer le serveur de développement en exécutant la commande suivante.
npm run dev
# or
yarn dev
Effacer le contenu du App.css fichier et modifiez la structure du projet de telle sorte qu'elle ressemble à ce qui suit. Créez tous les répertoires qui n'existent pas déjà et créez des fichiers vides correspondant à ceux nommés ci-dessous :
Il vous suffira de changer le src répertoire, qui doit contenir un lib répertoire et un lib/addToLocalStorage.js déposer. Il devrait également contenir un itinéraires répertoire qui contient un répertoire enfant nommé alimentation et quatre fichiers: +layout.js, +layout.svelte, +page.svelte, et +serveur.js. À l'intérieur alimentation, créez un répertoire nommé [titre] avec deux fichiers à l'intérieur: +page.server.js et +page.svelte.
Vous pourriez avoir du mal à créer le [titre] répertoire sur la ligne de commande car de nombreux shells utilisent des crochets pour la correspondance de modèles. Si vous obtenez une erreur, essayez de citer le nom du répertoire, par exemple :
mkdir '[title]'Création de la route API pour vérifier les flux RSS valides
Ouvrez le routes/+server.js fichier et importer le json utilitaire. Importez également Analyseur du analyseur RSS emballer.
import { json } from"@sveltejs/kit";
import Parser from"rss-parser";
Maintenant, exportez une fonction asynchrone, OBTENIR, et passe URL comme paramètre. Dans cette fonction, créez deux constantes: Lien RSS et analyseur.
La première constante doit contenir le paramètre de recherche du URL passé, tandis que le second, analyseur, devrait stocker un nouveau Analyseur instance d'objet. Ensuite, appelez le analyserURL méthode sur analyseur et passer Lien RSS comme paramètre. Enfin, sérialisez la réponse avec le json fonction et retournez-la.
exportasyncfunctionGET({url}) {
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return json(feed);
}
Conception de la page d'accueil
SvelteKit utilise un système de routage basé sur un système de fichiers. Par défaut, le routes/+page.svelte Le fichier sert de page d’accueil à votre site Web.
Ouvrez le fichier +page.svelte et, dans le scénario balise, importez le addToLocalStorage fonction à partir du lib annuaire. Vous ne l’avez pas encore créé, mais vous le ferez plus tard. Après avoir importé la fonction, créez deux variables, URL et prêt, en définissant le prêt variable à FAUX.