Projet de l'application Svelte: Créez l'application de l'information de la planète quotidienne

svelte est une nouvelle bibliothèque d'interface utilisateur JavaScript qui est similaire à bien des égards aux bibliothèques d'interface utilisateur modernes comme React. Une différence importante est qu'il n'utilise pas le concept d'un dom virtuel.

Dans ce tutoriel, nous allons présenter Svelte en construisant une application d'actualités inspirée de The Daily Planet, un journal fictif du monde Superman.

Les plats clés

• svelte est une nouvelle bibliothèque d'interface utilisateur JavaScript qui n'utilise pas de Dom virtuel, ce qui le rend plus rapide que les frameworks les plus puissants comme React, Vue et Angular. Il déplace le travail nécessaire à une phase de temps de compilation sur la machine de développement lors de la création de l'application.
• Le tutoriel fournit un guide étape par étape sur la création d'une application d'actualités inspirée de The Daily Planet, un journal fictif du monde Superman. Cela comprend l'initialisation d'un projet Svelte, l'exécution d'un serveur de développement local et la construction du bundle final.
• Le tutoriel couvre également l'utilisation de l'outil Degit pour générer des projets Svelte, récupérer les données d'un point de terminaison de l'information et créer l'interface utilisateur pour l'application.
• Après avoir développé l'application, on peut créer les faisceaux de production en exécutant la commande build dans le terminal et hébergez l'application à l'aide de Zeit maintenant, une plate-forme cloud pour les sites Web et les fonctions sans serveur.

sur svelte

svelte utilise une nouvelle approche pour créer des interfaces utilisateurs. Au lieu de faire le travail nécessaire dans le navigateur, Svelte déplace qui fonctionne vers une phase de temps de compilation qui se produit sur la machine de développement lorsque vous construisez votre application.

En un mot, c'est ainsi que fonctionne Svelte (comme indiqué dans le blog officiel):

svelte fonctionne à Build Time , convertissant vos composants en code très efficace impératif qui met à jour le DOM. En conséquence, vous êtes en mesure d'écrire des applications ambitieuses avec d'excellentes caractéristiques de performance.

svelte est plus rapide que les frameworks les plus puissants (React, Vue et Angular) car il n'utilise pas un DOM virtuel et ne met à jour que les pièces qui changent.

Nous allons apprendre les concepts de base comme les composants Svelte et comment récupérer et itérer sur les tableaux de données. Nous apprendrons également à initialiser un projet Svelte, à exécuter un serveur de développement local et à construire le bundle final.

Prérequis

Vous devez avoir quelques conditions préalables, vous pouvez donc suivre ce tutoriel confortablement, comme:

• Familiarité avec HTML, CSS et JavaScript (ES6),
• node.js et npm installés sur votre machine de développement.

Node.js peut être facilement installé à partir du site officiel ou vous pouvez également utiliser NVM pour installer et gérer facilement plusieurs versions de Node dans votre système.

Nous utiliserons une API JSON comme source de nouvelles pour notre application, vous devez donc obtenir une clé API en créant simplement un compte gratuit et en prenant note de votre clé API.

Pour commencer

Maintenant, commençons à construire notre application quotidienne de nouvelles de Planet en utilisant l'outil DEGIT pour générer des projets svelte.

Vous pouvez soit installer Degit globalement sur votre système ou utiliser l'outil NPX pour l'exécuter à partir de NPM. Ouvrez un nouveau terminal et exécutez la commande suivante:

npx degit sveltejs/template dailyplanetnews

Ensuite, naviguez dans le dossier de votre projet et exécutez le serveur de développement à l'aide des commandes suivantes:

<span>cd dailyplanetnews
</span><span>npm run dev
</span>

Votre serveur de développement écoutera à partir de l'adresse HTTP: // LocalHost: 5000. Si vous effectuez des modifications, ils seront reconstruits et relevés en direct dans votre application en cours d'exécution.

Ouvrez le fichier main.js de votre projet, et vous devriez trouver le code suivant:

<span>import <span>App</span> from './App.svelte';
</span>
<span>const app = new App({
</span>    <span>target: document.body,
</span>    <span>props: {
</span>        <span>name: 'world'
</span>    <span>}
</span><span>});
</span>
<span>export default app;
</span>

C'est là que l'application Svelte est amorcée en créant et en exportant une instance du composant racine, conventionnellement appelé application. Le composant prend un objet avec une cible et des attributs d'accessoires.

La cible contient l'élément DOM où le composant sera monté, et les accessoires contient les propriétés que nous voulons transmettre au composant de l'application. Dans ce cas, c'est juste un nom avec la valeur world .

Ouvrez le fichier app.svelte, et vous devriez trouver le code suivant:

<span><span><span><script</span>></span><span>
</span></span><span><span>    <span>export let name;
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span>h1 {
</span></span></span><span><span>        <span>color: purple;
</span></span></span><span><span>    <span>}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>
<span><span><span><h1</span>></span>Hello {name}!<span><span></h1</span>></span>
</span>

Il s'agit du composant racine de notre application. Tous les autres composants seront les enfants de l'application.

Les composants de Svelte utilisent l'extension .svelte pour les fichiers source, qui contiennent tous les javascript, styles et balisage pour un composant.

L'exportation let le nom; La syntaxe crée un accessoire composant appelé nom. Nous utilisons l'interpolation variable - {...} - pour afficher la valeur réalisée via le nom Prop.

Vous pouvez simplement utiliser un vieux JavaScript, CSS et HTML simples que vous connaissez pour créer des composants Svelte. Svelte ajoute également une syntaxe de modèle à HTML pour l'interpolation et la boucle variables via des listes de données, etc.

Puisqu'il s'agit d'une petite application, nous pouvons simplement implémenter les fonctionnalités requises dans le composant de l'application.

Dans la balise <script>, importez la méthode onMount () de "svelte" et définissez l'API_KEY, les articles et les variables URL qui contiendront la clé de l'API de nouvelles, les articles de presse récupérés et le point final qui fournit des données: </script>

<span><script>
</span>    <span>export let name;
</span>
    <span>import <span>{ onMount }</span> from "svelte";
</span>
    <span>const API_KEY = "<YOUR_API_KEY_HERE>";
</span>    <span>const URL = <span>`https://newsapi.org/v2/everything?q=comics&sortBy=publishedAt&apiKey=<span>${API_KEY}</span>`</span>;
</span>    <span>let articles = [];
</span>
<span></script>
</span>

OnMount est une méthode de cycle de vie. Voici ce que le tutoriel officiel en dit:

Chaque composant a un cycle de vie qui commence lorsqu'il est créé et se termine lorsqu'il est détruit. Il existe une poignée de fonctions qui vous permettent d'exécuter du code aux moments clés de ce cycle de vie. Celui que vous utiliserez le plus souvent sur le point, qui s'exécute après que le composant soit rendu pour la première fois au dom.

Ensuite, utilisons l'API Fetch pour récupérer les données du point de terminaison de l'information et stockons les articles de la variable d'articles lorsque le composant est monté dans le dom:

npx degit sveltejs/template dailyplanetnews

Étant donné que la méthode fetch () renvoie une promesse JavaScript, nous pouvons utiliser la syntaxe asynchrone / attendre pour rendre le code synchrone et éliminer les rappels.

Ensuite, ajoutons le balisage HTML suivant pour créer l'interface utilisateur de notre application et afficher les données d'actualités:

<span>cd dailyplanetnews
</span><span>npm run dev
</span>

Nous utilisons le bloc de chaque bloc pour boucler les articles de presse et nous affichons le titre, la description, l'URL et l'URLTOIM de chaque article.

Le logo Daily Planet et le titre sont empruntés à cette organisation de nouvelles à but non lucratif inspirée par DC Comics.

Nous utiliserons Kalam, une police manuscrite disponible à partir de polices Google, alors ouvrez le fichier public / index.html et ajoutez la balise suivante:

<span>import <span>App</span> from './App.svelte';
</span>
<span>const app = new App({
</span>    <span>target: document.body,
</span>    <span>props: {
</span>        <span>name: 'world'
</span>    <span>}
</span><span>});
</span>
<span>export default app;
</span>

Ensuite, revenez au fichier app.svelte et ajoutez les styles suivants:

<span><span><span><script</span>></span><span>
</span></span><span><span>    <span>export let name;
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span>h1 {
</span></span></span><span><span>        <span>color: purple;
</span></span></span><span><span>    <span>}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>
<span><span><span><h1</span>></span>Hello {name}!<span><span></h1</span>></span>
</span>

Il s'agit d'une capture d'écran de notre application quotidienne de nouvelles:

Bâtiment pour la production

Après avoir développé votre application, vous pouvez créer les faisceaux de production en exécutant la commande build dans votre terminal:

<span><script>
</span>    <span>export let name;
</span>
    <span>import <span>{ onMount }</span> from "svelte";
</span>
    <span>const API_KEY = "<YOUR_API_KEY_HERE>";
</span>    <span>const URL = <span>`https://newsapi.org/v2/everything?q=comics&sortBy=publishedAt&apiKey=<span>${API_KEY}</span>`</span>;
</span>    <span>let articles = [];
</span>
<span></script>
</span>

La commande produira un bundle minifié et prêt pour la production que vous pouvez héberger sur votre serveur d'hébergement préféré.

hébergeons maintenant l'application en utilisant Zeit maintenant.

Zeit est désormais une plate-forme cloud pour les sites Web et les fonctions sans serveur que vous pouvez utiliser pour déployer vos projets sur un domaine .now.sh ou personnel.

Revenez à votre terminal et exécutez la commande suivante pour installer maintenant CLI:

<span><script>
</span>    <span>// [...]
</span>
    <span>onMount(async function() {
</span>        <span>const response = await fetch(URL);
</span>        <span>const json = await response.json();
</span>        articles <span>= json["articles"];
</span>    <span>});
</span><span></script>    
</span>

Ensuite, accédez au dossier public et exécutez la commande maintenant:

<span><span><span><h1</span>></span>
</span>    <span><span><span><img</span> src<span>="https://dailyplanetdc.files.wordpress.com/2018/12/cropped-daily-planet-logo.jpg?w=656&h=146"</span> /></span>
</span>    <span><span><span><p</span> class<span>="about"</span>></span>
</span>            The Daily Planet is where heroes are born and the story continues. We are proud to report on the planet, daily.
    <span><span><span></p</span>></span>
</span><span><span><span></h1</span>></span>
</span>
<span><span><span><div</span> class<span>="container"</span>></span>
</span>
        {#each articles as article}
            <span><span><span><div</span> class<span>="card"</span>></span>
</span>                <span><span><span><img</span> src<span>="{article.urlToImage}"</span>></span>
</span>                <span><span><span><div</span> class<span>="card-body"</span>></span>
</span>                    <span><span><span><h3</span>></span>{article.title}<span><span></h3</span>></span>
</span>                    <span><span><span><p</span>></span> {article.description} <span><span></p</span>></span>
</span>                    <span><span><span><a</span> href<span>="{article.url}"</span>></span>Read story<span><span></a</span>></span>
</span>                <span><span><span></div</span>></span>
</span>            <span><span><span></div</span>></span>
</span>        {/each}

<span><span><span></div</span>></span>
</span>

c'est tout! Votre application sera déployée dans le cloud. Dans notre cas, il est disponible auprès de public-kyqab3g5j.now.sh.

Vous pouvez trouver le code source de cette application à partir de ce référentiel GitHub.

Conclusion

Dans ce tutoriel, nous avons construit une application de nouvelles simple à l'aide de Svelte. Nous avons également vu ce qu'est Svelte et comment créer un projet Svelte en utilisant l'outil Degit de NPM.

Vous pouvez vous référer aux documents officiels pour un tutoriel détaillé pour en savoir plus sur chaque fonctionnalité svelte.

Les questions fréquemment posées (FAQ) sur la création d'une application d'actualité avec Svelte

Quels sont les principaux avantages de l'utilisation de Svelte pour créer une application d'actualités?

svelte est un compilateur JavaScript moderne qui vous permet d'écrire du code JavaScript facile à comprendre qui est ensuite compilé à un code impératif très efficace qui manipule directement le dom. Lors de la création d'une application d'actualités, Svelte offre plusieurs avantages. Premièrement, il fournit un code plus simple et plus propre, ce qui permet aux développeurs de comprendre et de maintenir le code. Deuxièmement, les applications Svelte sont très performantes. Étant donné que Svelte s'exécute au moment de la construction, il convertit les composants de l'application en code impératif très efficace qui met à jour le DOM. Il en résulte des temps de chargement plus rapides et une expérience utilisateur plus fluide. Enfin, Svelte est basé sur des composants, tout comme React et Vue, ce qui facilite la création d'interfaces utilisateur complexes.

Comment puis-je ajouter un nouvel article à l'application d'actualité construite avec Svelte?

L'ajout d'un nouvel article à votre application Svelte News consiste à créer un nouveau composant pour l'article, puis à l'importer dans le composant parent pertinent. Dans le nouveau composant, vous pouvez définir le contenu de l'article et toutes les métadonnées associées comme l'auteur et la date publiée. Une fois le composant créé, vous pouvez l'importer dans le composant parent à l'aide de l'instruction IMPORT. Ensuite, vous pouvez l'ajouter à la méthode de rendu du composant parent où vous souhaitez que l'article apparaisse.

Comment puis-je implémenter une fonctionnalité de recherche dans mon application Svelte News?

Implémentation d'une fonction de recherche dans Une application Svelte News implique la création d'un composant de recherche et l'ajout de la gestion de l'État pour suivre l'entrée de recherche. Vous pouvez utiliser les fonctionnalités de réactivité intégrées de Svelte pour mettre à jour les articles affichés en fonction de l'entrée de recherche. Lorsque l'entrée de recherche change, vous pouvez filtrer la liste des articles pour inclure uniquement ceux qui correspondent à l'entrée de recherche.

Comment puis-je classer les articles de presse dans mon application svelte?

Catégoriser les articles de presse dans Une application Svelte peut être réalisée en ajoutant une propriété de catégorie à chaque article. Cette propriété peut ensuite être utilisée pour filtrer les articles en fonction de la catégorie sélectionnée. Vous pouvez créer un composant de catégories qui affiche une liste de catégories. Lorsqu'une catégorie est sélectionnée, vous pouvez mettre à jour les articles affichés pour n'inclure que ceux de la catégorie sélectionnée.

Comment puis-je ajouter l'authentification de l'utilisateur à mon application de nouvelles svelte?

Ajout d'authentification utilisateur à un L'application Svelte News peut être effectuée en utilisant diverses méthodes, telles que l'utilisation du service d'authentification Firebase ou un serveur backend avec JWT (JSON Web Tokens). Vous devez créer un composant d'authentification où les utilisateurs peuvent saisir leurs informations d'identification de connexion. Lors de la soumission du formulaire, ces informations d'identification sont envoyées au service d'authentification ou au serveur backend pour vérification. Si les informations d'identification sont valides, l'utilisateur est authentifié et a accordé l'accès à l'application.

Comment puis-je rendre mon application Svelte Responsive?

Rendre une application Svelte Responsive implique l'utilisation de requêtes multimédias CSS pour ajuster la disposition de l'application en fonction de la taille de l'écran. Svelte vous permet d'écrire du code CSS dans le même fichier que votre code JavaScript et HTML, ce qui facilite le style de vos composants. Vous pouvez définir différents styles pour différentes tailles d'écran pour vous assurer que votre application est bonne sur tous les appareils.

Comment puis-je ajouter des notifications push à mon application de nouvelles svelte?

Ajout de notifications push à une nouvelle Svelte L'application peut être effectuée à l'aide d'un service comme la messagerie Cloud Firebase. Vous devrez enregistrer votre application auprès du service, puis ajouter le code nécessaire à votre application pour gérer les notifications push. Cela implique généralement d'ajouter un travailleur de service à votre application qui écoute les événements push et affiche la notification lors de la reçue.

Comment puis-je ajouter une section de commentaire à mon application de nouvelles svelte?

Ajout de Une section de commentaires à une application Svelte News consiste à créer un composant de commentaires et à ajouter la gestion de l'État pour suivre les commentaires. Vous pouvez utiliser les fonctionnalités de réactivité intégrées de Svelte pour mettre à jour les commentaires en fonction de l'entrée utilisateur. Lorsqu'un utilisateur soumet un commentaire, vous pouvez l'ajouter à la liste des commentaires et mettre à jour les commentaires affichés.

Comment puis-je optimiser les performances de mon application Svelte News?

Optimisation des performances de Une application Svelte News peut impliquer plusieurs stratégies. Premièrement, vous pouvez utiliser les outils intégrés de Svelte pour le fractionnement du code et le chargement paresseux pour charger uniquement le code nécessaire pour la vue actuelle. Deuxièmement, vous pouvez optimiser vos images et autres actifs statiques pour réduire la taille de leur fichier. Enfin, vous pouvez utiliser un travailleur de service pour mettre en cache les actifs de votre application et les servir à partir du cache, réduisant le temps de chargement.

Comment puis-je déployer mon application de nouvelles svelte?

Déployer A Svelte News L'application peut être effectuée en utilisant diverses méthodes, telles que l'utilisation d'un service d'hébergement de site statique comme Netlify ou Vercel, ou une plate-forme cloud comme Google Cloud ou AWS. Vous devez créer votre application pour la production à l'aide de la commande NPM Run build, qui crée un dossier public avec votre application compilée. Ce dossier peut ensuite être téléchargé sur votre service d'hébergement ou votre plate-forme cloud.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!