Μάθετε πώς να δημιουργήσετε μια ολοκληρωμένη εφαρμογή SvelteKit με αυτό το απλό έργο ανάγνωσης RSS.
Το RSS είναι ένα δημοφιλές πρότυπο για τη διανομή περιεχομένου ιστού σε δομημένη μορφή. Πολλοί άνθρωποι, από λάτρεις της τεχνολογίας μέχρι καθηγητές, χρησιμοποιούν RSS για να παραμένουν ενημερωμένοι με τα τελευταία νέα και τις δημοσιεύσεις στα αγαπημένα τους ιστολόγια.
Η σύνταξη του δικού σας προγράμματος ανάγνωσης RSS είναι μια απλή εργασία, η οποία γίνεται ακόμα πιο εύκολη με το SvelteKit, ένα μετα-πλαίσιο χτισμένο πάνω από το Svelte.
Ρύθμιση του έργου SvelteKit
Ο κώδικας που χρησιμοποιείται σε αυτό το έργο είναι διαθέσιμος στο α Αποθετήριο GitHub και είναι δωρεάν για χρήση βάσει της άδειας MIT. Αν θέλετε να ρίξετε μια ματιά σε μια ζωντανή έκδοση αυτού του έργου, μπορείτε να το ελέγξετε διαδήλωση.
Πριν συνεχίσετε, πρέπει να έχετε εγκαταστήσει το χρόνο εκτέλεσης Node.js και στον υπολογιστή σας Node Package Manager (NPM). Ανοίξτε το τερματικό σας και εκτελέστε την ακόλουθη εντολή:
npm create svelte
# or
yarn create svelte
Αυτό θα πρέπει να ξεκινήσει το create-svelte Διεπαφή γραμμής εντολών (CLI) powered by Vite. Ονομάστε το έργο σας και ορίστε το πρότυπο εφαρμογής σε "Skeleton project". Απενεργοποιήστε τον έλεγχο τύπου με το TypeScript και επιλέξτε όποιες πρόσθετες επιλογές θέλετε. Μετά από αυτό, μεταβείτε στον κατάλογο του έργου και εκτελέστε:
npm install
# or
yarn
Αφού εγκαταστήσετε τις προεπιλεγμένες εξαρτήσεις, πρέπει να εγκαταστήσετε δύο πακέτα και συγκεκριμένα: rss-parser και στιγμή. Το πρώτο πακέτο θα διευκολύνει την ανάλυση των δεδομένων XML, ενώ το δεύτερο θα σας βοηθήσει να μορφοποιήσετε σωστά τις ημερομηνίες. Στο τερματικό σας, εκτελέστε τα εξής:
npm install rss-parser
npm install moment
# or
yarn add rss-parser
yarn add moment
Τώρα, μπορείτε να ξεκινήσετε τον διακομιστή ανάπτυξης εκτελώντας την ακόλουθη εντολή.
npm run dev
# or
yarn dev
Διαγράψτε τα περιεχόμενα του App.css αρχείο και τροποποιήστε τη δομή του έργου έτσι ώστε να μοιάζει με το παρακάτω. Δημιουργήστε τυχόν καταλόγους που δεν υπάρχουν ήδη και δημιουργήστε κενά αρχεία για να ταιριάζουν με αυτά που αναφέρονται παρακάτω:
Θα χρειαστεί μόνο να αλλάξετε το src κατάλογο, ο οποίος πρέπει να περιέχει α lib κατάλογο και α lib/addToLocalStorage.js αρχείο. Θα πρέπει επίσης να περιέχει α διαδρομές κατάλογο που περιέχει έναν θυγατρικό κατάλογο με το όνομα ταίζω και τέσσερα αρχεία: +layout.js, +διάταξη.σβέλτος, +σελίδα.σβέλτος, και +server.js. Μέσα ταίζω, δημιουργήστε έναν κατάλογο με το όνομα [τίτλος] με δύο αρχεία μέσα: +page.server.js και +σελίδα.σβέλτος.
Μπορεί να δυσκολευτείτε να δημιουργήσετε το [τίτλος] κατάλογο στη γραμμή εντολών, καθώς πολλά κελύφη χρησιμοποιούν αγκύλες για αντιστοίχιση μοτίβων. Εάν εμφανιστεί σφάλμα, δοκιμάστε να αναφέρετε το όνομα του καταλόγου, π.χ.
mkdir '[title]'Δημιουργία της διαδρομής API για έλεγχο έγκυρων ροών RSS
Ανοιξε το routes/+server.js αρχείο και εισαγωγή του json χρησιμότητα. Επίσης εισαγωγή Αναλυτής από το rss-parser πακέτο.
import { json } from"@sveltejs/kit";
import Parser from"rss-parser";
Τώρα, εξάγετε μια ασύγχρονη συνάρτηση, ΠΑΙΡΝΩ, και περάστε μέσα url ως παράμετρος. Σε αυτή τη συνάρτηση, δημιουργήστε δύο σταθερές: rssLink και αναλυτής.
Η πρώτη σταθερά θα πρέπει να κρατά την παράμετρο αναζήτησης από το url πέρασε, ενώ το δεύτερο, αναλυτής, θα πρέπει να αποθηκεύσει ένα νέο Αναλυτής παράδειγμα αντικειμένου. Στη συνέχεια, καλέστε το parseURL μέθοδος για αναλυτής και περάστε μέσα rssLink ως παράμετρος. Τέλος, σειριοποιήστε την απάντηση με το json λειτουργία και επιστρέψτε το.
exportasyncfunctionGET({url}) {
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return json(feed);
}
Σχεδιασμός της αρχικής σελίδας
Το SvelteKit χρησιμοποιεί α σύστημα δρομολόγησης που βασίζεται σε σύστημα αρχείων. Από προεπιλογή, το διαδρομές/+σελίδα.σβέλτος αρχείο χρησιμεύει ως η αρχική σελίδα για τον ιστότοπό σας.
Ανοίξτε το αρχείο +page.svelte και, στο γραφή ετικέτα, εισαγωγή το addToLocalStorage λειτουργία από το lib Ευρετήριο. Δεν το έχετε δημιουργήσει ακόμα, αλλά θα το κάνετε αργότερα. Μετά την εισαγωγή της συνάρτησης, δημιουργήστε δύο μεταβλητές, url και έτοιμος, ρυθμίζοντας το έτοιμος μεταβλητή σε ψευδής.
