Bu basit RSS okuyucu projesiyle eksiksiz bir SvelteKit uygulamasını nasıl oluşturacağınızı öğrenin.

RSS, web içeriğini yapılandırılmış bir biçimde dağıtmak için popüler bir standarttır. Teknoloji meraklılarından öğretmenlere kadar pek çok kişi, en son haberler ve favori bloglarındaki gönderilerden haberdar olmak için RSS'yi kullanıyor.

Kendi RSS okuyucunuzu yazmak basit bir iştir ve Svelte üzerine kurulu bir meta çerçeve olan SvelteKit ile daha da kolaylaşmıştır.

SvelteKit Projesini Kurma

Bu projede kullanılan kod şu şekilde mevcuttur: GitHub deposu ve MIT lisansı kapsamında kullanımınız ücretsizdir. Bu projenin canlı versiyonuna göz atmak istiyorsanız, buna göz atabilirsiniz. demo.

Devam etmeden önce makinenizde Node.js çalışma zamanının kurulu olması gerekir. Düğüm Paketi Yöneticisi (NPM). Terminalinizi açın ve aşağıdaki komutu çalıştırın:

npm create svelte
# or
yarn create svelte

Bu, yaratım-svelte'i başlatmalı Komut Satırı Arayüzü (CLI) Vite tarafından desteklenmektedir. Projenize bir ad verin ve uygulama şablonunu "İskelet projesi" olarak ayarlayın. TypeScript ile tür denetimini devre dışı bırakın ve istediğiniz ek seçenekleri seçin. Bundan sonra proje dizinine geçin ve şunu çalıştırın:

instagram viewer 

npm install
# or
yarn

Varsayılan bağımlılıkları yükledikten sonra iki paketi yüklemeniz gerekir: rss ayrıştırıcı Ve an. İlk paket XML verilerini ayrıştırmayı kolaylaştıracak, ikincisi ise tarihleri ​​doğru şekilde biçimlendirmenize yardımcı olacak. Terminalinizde aşağıdakileri çalıştırın:

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

Artık aşağıdaki komutu çalıştırarak geliştirme sunucusunu başlatabilirsiniz.

npm run dev
# or
yarn dev

İçeriğini temizle Uygulama.css proje yapısını aşağıdaki gibi görünecek şekilde dosyalayın ve değiştirin. Henüz mevcut olmayan dizinleri oluşturun ve aşağıda belirtilenlerle eşleşecek boş dosyalar oluşturun:

Yalnızca değiştirmeniz gerekecek kaynak içermesi gereken dizin kitap dizin ve bir lib/addToLocalStorage.js dosya. Ayrıca şunları içermelidir: rotalar adlı bir alt dizini içeren dizin beslemek ve dört dosya: +layout.js, +düzen.svelte, +sayfa.svelte, Ve +server.js. İçeri beslemekadında bir dizin oluşturun [başlık] içinde iki dosya bulunan: +sayfa.sunucu.js Ve +sayfa.svelte.

oluşturmak için mücadele edebilirsiniz. [başlık] Birçok kabuk, desen eşleştirme için köşeli parantezler kullandığından komut satırındaki dizin. Bir hata alırsanız dizin adını belirtmeyi deneyin, örneğin:

mkdir '[title]'

Geçerli RSS Akışlarını Kontrol Etmek için API Rotası Oluşturma

Aç rotalar/+server.js dosyalayın ve içe aktarın json kullanışlı. Ayrıca içe aktar Ayrıştırıcı itibaren rss ayrıştırıcı paket.

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

Şimdi eşzamansız bir işlevi dışa aktarın, ELDE ETMEKve içeri girin URL parametre olarak. Bu fonksiyonda iki sabit oluşturun: rssLink Ve ayrıştırıcı.

İlk sabit, arama parametresini URL geçti, ikincisi ise ayrıştırıcı, yeni bir tane saklamalı Ayrıştırıcı nesne örneği. Daha sonra şu numarayı arayın: URL'yi ayrıştır yöntem ayrıştırıcı ve içeri gir rssLink parametre olarak. Son olarak, yanıtı şu şekilde serileştirin: json işlevini yerine getirin ve geri döndürün.

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

Ana Sayfanın Tasarlanması

SvelteKit şunu kullanır: dosya sistemi tabanlı yönlendirme sistemi. Varsayılan olarak, rotalar/+page.svelte Dosya web sitenizin ana sayfası olarak hizmet eder.

+page.svelte dosyasını açın ve senaryo etiketleyin, içe aktarın addToLocalStorage işlevi kitap dizin. Bunu henüz oluşturmadınız, ancak daha sonra oluşturacaksınız. Fonksiyonu içe aktardıktan sonra iki değişken oluşturun, URL Ve hazır, ayarlamak hazır değişken YANLIŞ.