Pelajari cara membuat aplikasi SvelteKit lengkap dengan proyek pembaca RSS sederhana ini.
RSS adalah standar populer untuk mendistribusikan konten web dalam format terstruktur. Banyak orang, mulai dari penggemar teknologi hingga guru, menggunakan RSS untuk tetap mendapatkan berita dan postingan terkini di blog favorit mereka.
Menulis pembaca RSS Anda sendiri adalah tugas yang mudah, menjadi lebih mudah dengan SvelteKit, kerangka kerja meta yang dibangun di atas Svelte.
Menyiapkan Proyek SvelteKit
Kode yang digunakan dalam proyek ini tersedia dalam a Repositori GitHub dan gratis untuk Anda gunakan di bawah lisensi MIT. Jika Anda ingin melihat versi langsung proyek ini, Anda dapat memeriksanya demo.
Sebelum melanjutkan, Anda juga harus menginstal runtime Node.js di mesin Anda Manajer Paket Node (NPM). Buka terminal Anda dan jalankan perintah berikut:
npm create svelte
# or
yarn create svelte
Ini harus memulai pembuatan langsing Antarmuka Baris Perintah (CLI) didukung oleh Vite. Beri nama proyek Anda dan setel template aplikasi ke "Proyek kerangka". Nonaktifkan pemeriksaan tipe dengan TypeScript, dan pilih opsi tambahan apa pun yang Anda inginkan. Setelah itu, beralih ke direktori proyek dan jalankan:
npm install
# or
yarn
Setelah menginstal dependensi default, Anda perlu menginstal dua paket yaitu: rss-parser Dan momen. Paket pertama akan mempermudah penguraian data XML, sedangkan paket kedua akan membantu Anda memformat tanggal dengan benar. Di terminal Anda, jalankan perintah berikut:
npm install rss-parser
npm install moment
# or
yarn add rss-parser
yarn add moment
Sekarang, Anda dapat memulai server pengembangan dengan menjalankan perintah berikut.
npm run dev
# or
yarn dev
Hapus isi dari Aplikasi.css file dan ubah struktur proyek sehingga terlihat seperti berikut. Buat direktori apa pun yang belum ada dan buat file kosong untuk mencocokkan dengan nama di bawah ini:
Anda hanya perlu mengubah src direktori, yang harus berisi a lib direktori dan a lib/addToLocalStorage.js mengajukan. Itu juga harus mengandung a rute direktori yang berisi direktori anak bernama memberi makan dan empat file: +tata letak.js, +tata letak.langsing, +halaman.langsing, Dan +server.js. Di dalam memberi makan, buat direktori bernama [judul] dengan dua file di dalamnya: +halaman.server.js Dan +halaman.langsing.
Anda mungkin kesulitan untuk membuatnya [judul] direktori pada baris perintah karena banyak shell menggunakan tanda kurung siku untuk pencocokan pola. Jika Anda mendapatkan kesalahan, coba kutip nama direktori, misalnya:
mkdir '[title]'Membuat Rute API untuk Memeriksa Umpan RSS yang Valid
Buka rute/+server.js file dan impor json utilitas. Juga impor pengurai dari rss-parser kemasan.
import { json } from"@sveltejs/kit";
import Parser from"rss-parser";
Sekarang, ekspor fungsi asinkron, MENDAPATKAN, dan masuk url sebagai parameter. Dalam fungsi ini, buat dua konstanta: rssLink Dan pengurai.
Konstanta pertama harus menampung parameter pencarian dari url berlalu, sedangkan yang kedua, pengurai, harus menyimpan yang baru pengurai contoh objek. Selanjutnya, hubungi parseURL metode aktif pengurai dan masuk rssLink sebagai parameter. Terakhir, buat serial respons dengan json berfungsi dan mengembalikannya.
exportasyncfunctionGET({url}) {
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return json(feed);
}
Mendesain Halaman Beranda
SvelteKit menggunakan a sistem perutean berbasis sistem file. Secara default, rute/+halaman.svelte file berfungsi sebagai halaman beranda situs web Anda.
Buka file +page.svelte dan, di naskah tag, impor tambahkanToLocalStorage fungsi dari lib direktori. Anda belum membuatnya, namun Anda akan melakukannya nanti. Setelah mengimpor fungsi, buat dua variabel, url Dan siap, mengatur siap variabel ke PALSU.
