Créez un tracker GitHub avec des notifications push dans svelte

Dans cet article, vous apprendrez à créer un tracker GitHub qui informe les utilisateurs lorsqu'il y a un nouveau problème / PR sur un référentiel suivi en envoyant des notifications push.

GitHub envoie déjà des notifications via des e-mails si vous avez opté, mais de nombreuses études ont montré que les notifications push atteignent mieux les utilisateurs que les e-mails. Après avoir construit le Github Tracker en suivant ce tutoriel, vous aurez appris à:

• Ajouter un travailleur de service et convertir le tracker en PWA
• Abonnez-vous aux notifications push
• Utilisez l'API GitHub
• Envoyer des événements push via les fonctions de Vercel Cloud
• Répondez périodiquement de nouveaux problèmes en utilisant EasyCron

Prérequis

Il y a quelques compétences et services dont vous aurez besoin pour suivre cet article:

• node.js et npm installés
• Connaissances svelte antérieures
• un compte GitHub gratuit, car nous utilisons l'API GitHub
• Un compte d'atlas MongoDB gratuit pour utiliser MongoDB dans le cloud
• un compte Vercel gratuit pour déployer l'application et pour les fonctions cloud

Que sont les notifications push?

Jetons un coup d'œil à ce que sont ces soi-disant «notifications push».

Vous devez être familier avec les notifications régulières. Ce sont de petites bulles de texte qui apparaissent sur votre écran pour notifier vous de quelque chose. Les notifications push sont similaires, sauf qu'elles ne sont pas générées à la demande , mais elles sont générées lors de la réception des événements push . Les notifications push fonctionnent lorsqu'une application est fermée , tandis que les notifications régulières vous obligent à ouvrir l'application.

Les notifications push sont prises en charge dans les navigateurs Web modernes comme Chrome en utilisant quelque chose appelé les travailleurs de service. Les travailleurs de service sont de petits morceaux de JavaScript qui s'exécutent séparément du fil principal du navigateur et, par conséquent, peuvent s'exécuter hors ligne si votre application est installée en tant que PWA (application Web progressive).

Les notifications push sont utilisées dans les applications de chat pour informer les utilisateurs lorsqu'ils ont des messages non lus, dans les jeux, pour informer les utilisateurs des événements de jeu, sur des sites d'information, pour informer les utilisateurs de la rupture d'articles, et à de nombreuses autres fins.

Il y a quatre étapes pour afficher les notifications push dans votre application:

1. Demandez l'autorisation avec Window.Notification.requestPermission ()
2. Convertissez votre application en PWA et installez-la
3. Abonnez-vous aux événements push
4. À la réception d'un événement de poussée, envoyez la notification

Étape 1: Création du tracker

Utilisons Svelte avec Vite.js au lieu de Rollup dans cet article. Vite est, comme son nom l'indique, plus rapidement que Rollup, et fournit également une prise en charge intégrée pour les variables d'environnement. Pour créer un nouveau projet avec Svelte et Vite, exécutez cette commande:

<span>npm init vite
</span>

Sélectionnez le framework à svelte. Vous pouvez utiliser TypeScript si vous le souhaitez. J'utiliserai JavaScript ordinaire.

Ensuite, CD dans le dossier du projet et vous pouvez ajouter TailwindCSS à votre application et installer toutes les dépendances avec ces commandes:

<span>npm init vite
</span>

Enfin, ouvrez le projet dans votre éditeur de code préféré et exécutez NPM Run Dev ou Yarn Dev pour démarrer l'application sur http: // localhost: 3000.

comment le tracker fonctionnera

Nous utiliserons l'API GitHub pour obtenir une liste de problèmes et extraire les demandes d'un référentiel que l'utilisateur a suivi. Les référentiels suivis d'un utilisateur et son nom d'utilisateur seront stockés dans la base de données MongoDB.

La première étape serait d'inviter l'utilisateur pour son nom d'utilisateur. Créez SRC / LIB / USERNAMEPROMPT.SVELTE, qui sera le composant qui le fera. Voici mon interface utilisateur pour le formulaire, mais vous pouvez le concevoir comme vous le souhaitez:

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

Ajoutez ce composant dans app.svelte comme SO:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

Ensuite, ajoutons l'interface utilisateur du tracker principal. Créer un fichier src / lib / tracker.svelte et ajouter le code ci-dessous:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>import <span>UsernamePrompt</span> from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><UsernamePrompt</span> /></span>
</span>

pour tester votre composant, temporairement Échangez le composant UsernamePRomppt pour le nouveau composant Tracker dans App.svelte:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let repo = "";
</span></span></span><span><span>  <span>function track() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span>
</span></span><span><span>  <span>function untrack(repo) {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>={track}</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>GitHub tracker<span><span></h1</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Enter the repository's URL"</span>
</span></span><span>    <span>aria-label<span>="Repository URL"</span>
</span></span><span>    <span><span>bind:value</span><span>={repo}</span>
</span></span><span>  <span>/></span>
</span>  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-2 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>    <span>></span>Track repository<span><span></button</span>
</span></span><span>  <span>></span>
</span>
  <span><span><span><h2</span> class<span>="mt-4 text-2xl"</span>></span>Tracked repositories<span><span></h2</span>></span>
</span>  <span><span><span><ul</span> class<span>="m-2 list-decimal"</span>></span>
</span>    <span><!-- We'll use a loop to automatically add repositories here later on. -->
</span>    <span><span><span><li</span> class<span>="py-1 flex items-center justify-between"</span>></span>
</span>      <span><span><span><a</span> class<span>="text-gray-500 hover:underline"</span> href<span>="https://github.com/test/test"</span>
</span></span><span>        <span>></span>https://github.com/test/test<span><span></a</span>
</span></span><span>      <span>></span>
</span>      <button  on:click={() => untrack("")}
        >Untrack<span><span><span></button</span>
</span></span><span>      <span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></form</span>></span>
</span>

Votre écran devrait maintenant ressembler à ceci:

Remarque: N'oubliez pas de restaurer App.svelte à son code précédent!

Étape 2: Configuration des fonctions de cloud

Nous devons avoir un serveur back-end pour envoyer des événements push à notre application. Cela signifie que vous devez créer un nouveau projet (peut-être) ExpressJS, puis le déployer séparément. Tout ce sera un mal de tête pour quelqu'un qui vient d'expérimenter avec des notifications push.

Vercel Cloud fonctionne à la rescousse! Les fonctions de cloud sont comme des itinéraires express. Ils peuvent exécuter du code et vous donner une réponse lorsque vous récupérez son URL. Vercel prend en charge les fonctions cloud; Il vous suffit de créer des fichiers dans le dossier API. Vous utiliserez des fonctions cloud pour interagir avec MongoDB, car exposer les secrets côté client n'est jamais une bonne chose.

Tout d'abord, assurez-vous d'avoir un cluster dans MongoDB Atlas. MongoDB a un plan gratuit ( m0 ), alors assurez-vous d'en créer un si vous ne l'avez pas déjà fait. Maintenant, accédez à l'onglet Access de la base de données dans la barre latérale de votre tableau de bord Atlas. Ajoutez un nouvel utilisateur de la base de données en cliquant sur le bouton vert sur le côté droit. Entrez dans les détails de l'utilisateur (n'oubliez pas le mot de passe) et créez l'utilisateur.

Pour vous connecter à la base de données, vous aurez besoin de la chaîne de connexion. Enregistrez le nouvel utilisateur et le mot de passe quelque part et dirigez-vous vers la vue d'ensemble de votre cluster. Cliquez sur le bouton Connecter sur le côté droit et sélectionnez Connectez votre application comme méthode de connexion. Vous devriez voir une chaîne de connexion similaire à celle ci-dessous.

Maintenant que vous avez la chaîne de connexion, vous pouvez vous connecter à votre base de données, mais d'abord, vous devez déployer l'application actuelle sur Vercel. La façon la plus simple de le faire est d'utiliser GitHub.

Créez un nouveau référentiel GitHub et poussez votre code. Ensuite, dirigez-vous vers votre tableau de bord Vercel et cliquez sur le bouton du nouveau projet. Importez votre référentiel GitHub, assurez-vous que le cadre est vite et ajoutez une variable d'environnement appelée mongodb_url. Définissez sa valeur sur la chaîne de connexion de la base de données MongoDB.

Une fois votre site Web déployé, vous devez changer votre commande de développement locale de Yarn Dev à Vercel Dev. Lors de l'exécution de la commande, si on vous demande de créer un lien vers un projet existant, cliquez sur oui.

Remarque: assurez-vous d'installer le Vercel CLI avec npm i -g vercel si vous ne l'avez pas déjà fait.

comme moi, si vous rencontrez un problème avec l'utilisation de Vite avec Vercel Dev, assurez-vous de modifier la commande de développement de votre projet vers Vite --port $ port de Vite dans le tableau de bord Vercel.

Cela nous permettra d'utiliser les fonctions de nuage avec les variables d'environnement correctes localement.

Ajoutons un fichier d'assistance qui nous permettra d'accéder à MongoDB sans ouvrir trop de connexions. Créez un fichier API / _MONGO.js et y mettez le code suivant. Un fichier dans le répertoire API qui est préfixé avec un _ sera pas être traité comme une fonction cloud. Cela nous permet d'ajouter des aides et d'autres logiques dans des fichiers séparés:

<span>npm init vite
</span>

L'exportation de la promesse de connexion au lieu du principal client lui-même nous empêchera d'avoir des connexions redondantes, car nous travaillons dans une plate-forme sans serveur.

en utilisant des communjs au lieu d'esmodules

Remarquez comment j'utilise l'exigence au lieu de l'importation? En effet,, au moment de la rédaction, Vercel Cloud Fonctions ne prend pas en charge les instructions d'importation Esmodule dans les fichiers JavaScript. Au lieu de cela, vous devez utiliser CommonJS exiger des instructions.

Il y a un problème ici. Si vous voyez le package.json de notre application, vous remarquerez qu'il a une ligne "type": "module". Cela signifie que chaque fichier JavaScript du projet est un esmodule. Ce n'est pas ce que nous voulons, afin de marquer tous les fichiers du répertoire API en tant que fichiers CommonJS, afin que nous puissions utiliser l'instruction Require, créer API / Package.json et ajouter cette ligne dedans:

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

Cela nous permettra désormais d'utiliser des instructions requises dans le répertoire API. Installez le pilote de connexion MongoDB avec cette commande:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

Étape 3: Ajout de fonctionnalités

Le tracker, pour l'instant, ne fonctionne pas vraiment, alors corrigeons cela.

Authentification

Pour l'authentification, nous devons stocker le nom d'utilisateur que l'utilisateur a une entrée dans la base de données MongoDB.

Créez un fichier /api/storeusename.js. Ce sera une fonction cloud et sera mappé à http: // localhost: 3000 / api / storeserername. Mettez le code ci-dessous:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>import <span>UsernamePrompt</span> from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><UsernamePrompt</span> /></span>
</span>

Ensuite, obtenez le client MongoDB comme ainsi:

<span>npm init vite
</span>

Extraire le nom d'utilisateur du corps de la demande:

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

Ensuite, vous devez stocker ce nom d'utilisateur dans la base de données:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

Enfin, c'est à quoi le fichier API / StoreserName.js doit être apparenté:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>import <span>UsernamePrompt</span> from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><UsernamePrompt</span> /></span>
</span>

Déployez votre application sur Vercel avec Vercel., Ou en poussant vers GitHub, et votre fonction sans serveur devrait être en direct! Vous pouvez le tester en utilisant Curl avec cette commande:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let repo = "";
</span></span></span><span><span>  <span>function track() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span>
</span></span><span><span>  <span>function untrack(repo) {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>={track}</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>GitHub tracker<span><span></h1</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Enter the repository's URL"</span>
</span></span><span>    <span>aria-label<span>="Repository URL"</span>
</span></span><span>    <span><span>bind:value</span><span>={repo}</span>
</span></span><span>  <span>/></span>
</span>  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-2 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>    <span>></span>Track repository<span><span></button</span>
</span></span><span>  <span>></span>
</span>
  <span><span><span><h2</span> class<span>="mt-4 text-2xl"</span>></span>Tracked repositories<span><span></h2</span>></span>
</span>  <span><span><span><ul</span> class<span>="m-2 list-decimal"</span>></span>
</span>    <span><!-- We'll use a loop to automatically add repositories here later on. -->
</span>    <span><span><span><li</span> class<span>="py-1 flex items-center justify-between"</span>></span>
</span>      <span><span><span><a</span> class<span>="text-gray-500 hover:underline"</span> href<span>="https://github.com/test/test"</span>
</span></span><span>        <span>></span>https://github.com/test/test<span><span></a</span>
</span></span><span>      <span>></span>
</span>      <button  on:click={() => untrack("")}
        >Untrack<span><span><span></button</span>
</span></span><span>      <span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></form</span>></span>
</span>

Cela devrait créer un nouveau document dans la collection d'utilisateurs, le champ _ID étant le nom d'utilisateur que nous venons de donner.

Maintenant, il ne reste plus que de récupérer cette fonction à l'avant. Dans SRC / LIB / USERNAMEPROMPT.Svelte, dans la fonction Soumettre, vous devez d'abord envoyer une demande à la fonction Cloud, puis mettre le nom d'utilisateur dans LocalStorage, nous savons donc que l'utilisateur est authentifié. Vous pouvez envoyer des demandes avec la fonction de récupération:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>// import UsernamePrompt from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span>  <span>import <span>Tracker</span> from "./lib/Tracker.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><!-- <UsernamePrompt /> -->
</span><span><span><span><Tracker</span> /></span>
</span>

Nous rechargeons la page, car dans app.svelte, lorsque la page est chargée, nous devons vérifier s'il y a un nom d'utilisateur dans localStorage. S'il y en a, nous pouvons ignorer l'écran UsernamePRomppt. Pour ce faire, ajoutez ce code dans la balise de script d'App.svelte:

<span>const { MongoClient } = require("mongodb");
</span>
<span>const mongo = new MongoClient(process.env.MONGODB_URL);
</span>
<span>// Export the connection promise
</span><span>export default mongo.connect();
</span>

Le code ci-dessus vérifiera le LocalStorage pour un nom d'utilisateur et définira IsloggedIn sur true s'il existe. Ensuite, tout ce que nous avons à faire est de mettre à jour le DOM. Juste sous la balise de script de App.svelte, ajoutez ceci:

<span>{
</span>  <span>"type": "commonjs"
</span><span>}
</span>

Repoilants de suivi et non-suivant

Ajoutons maintenant la fonctionnalité pour les fonctionnalités de suivi réelles du tracker. Si vous ouvrez tracker.svelte, vous remarquerez qu'il existe deux fonctions - track () et untrack (). Ces fonctions doivent suivre et déconcerter les référentiels respectivement, en les ajoutant à la base de données.

Mais avant cela, vous devez ajouter quelques fonctions de cloud supplémentaires. Un pour suivre un référentiel, un autre à se laisser tomber et un dernier pour obtenir des référentiels suivis d'un utilisateur.

Travaillons sur eux un par un.

Suivi des référentiels

Créer un fichier API / trackRepo.js. Cela sera mappé à / api / trackRepo:

<span># Don't forget to CD!
</span><span>cd api
</span><span>npm i mongodb # or use yarn
</span>

Lorsqu'un utilisateur souhaite suivre un référentiel, il enverra une demande de poste à cette fonction avec le nom du référentiel et son nom d'utilisateur dans le corps. La fonction ajoutera le nom du référentiel dans le champ TrackEdrepos de la collection d'utilisateurs. Ajoutez du code pour obtenir ces champs du corps:

<span>const mongoPromise = require("../src/lib/mongo");
</span><span>// All cloud functions must export a function that takes a req and res object.
</span><span>// These objects are similar to their express counterparts.
</span>module<span>.exports = async (req<span>, res</span>) => {
</span>  <span>// TODO
</span><span>};
</span>

Et enfin, ajoutez le code pour suivre le référentiel en l'ajoutant à la base de données:

module<span>.exports = async (req<span>, res</span>) =>
</span>  <span>// Wait for the client to connect
</span>  <span>const mongo = await mongoPromise;
</span><span>}
</span>

Et c'est à quoi devrait ressembler API / trackRepo.js:

<span>// ...
</span><span>const { username } = req.body;
</span>
<span>// Check if the username is valid
</span><span>if (typeof username !== "string" || !username.trim()) {
</span>  res<span>.status(400).json({ message: "Please send the username" });
</span>  <span>return;
</span><span>}
</span>

Il est maintenant temps d'utiliser cette fonction dans le tracker. Ouvrez Src / lib / tracker.svelte et modifiez la fonction Track () dans ceci:

<span>// Get the collection
</span><span>const usersCol = mongo.db().collection("users");
</span><span>// Check if the username already exists in the database
</span><span>if (await usersCol.findOne({ _id: username })) {
</span>  res<span>.status(400).json({ message: "User already exists!" });
</span>  <span>return;
</span><span>}
</span><span>// We want the username to be the identifier of the user
</span><span>await usersCol.insertOne({ _id: username });
</span>
<span>// Everything went well :)
</span>res<span>.status(200).json({ message: "Username recorded" });
</span>

Maintenant, lorsque vous entrez un référentiel dans l'entrée et cliquez sur Track, il doit être enregistré dans la base de données.

Référentiels non subalternes

Ajoutons une fonction cloud pour retrouver un référentiel. Créer un fichier API / untrackrepo.js. Cela sera mappé à / API / un-trackrepo:

<span>npm init vite
</span>

Le corps de demande de cette fonction cloud sera le même que celui de la fonction trackRepo - le nom d'utilisateur de l'utilisateur et le repo:

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

Ensuite, voici le code pour supprimer le référentiel du trackedrepos de l'utilisateur:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

Et c'est à quoi devrait ressembler API / Un-trackrepo.js:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>import <span>UsernamePrompt</span> from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><UsernamePrompt</span> /></span>
</span>

Il est maintenant temps d'utiliser cette fonction cloud à l'avant. Dans la fonction untrack () de src / lib / tracker.svelte, ajoutez ce code:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let repo = "";
</span></span></span><span><span>  <span>function track() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span>
</span></span><span><span>  <span>function untrack(repo) {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>={track}</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>GitHub tracker<span><span></h1</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Enter the repository's URL"</span>
</span></span><span>    <span>aria-label<span>="Repository URL"</span>
</span></span><span>    <span><span>bind:value</span><span>={repo}</span>
</span></span><span>  <span>/></span>
</span>  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-2 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>    <span>></span>Track repository<span><span></button</span>
</span></span><span>  <span>></span>
</span>
  <span><span><span><h2</span> class<span>="mt-4 text-2xl"</span>></span>Tracked repositories<span><span></h2</span>></span>
</span>  <span><span><span><ul</span> class<span>="m-2 list-decimal"</span>></span>
</span>    <span><!-- We'll use a loop to automatically add repositories here later on. -->
</span>    <span><span><span><li</span> class<span>="py-1 flex items-center justify-between"</span>></span>
</span>      <span><span><span><a</span> class<span>="text-gray-500 hover:underline"</span> href<span>="https://github.com/test/test"</span>
</span></span><span>        <span>></span>https://github.com/test/test<span><span></a</span>
</span></span><span>      <span>></span>
</span>      <button  on:click={() => untrack("")}
        >Untrack<span><span><span></button</span>
</span></span><span>      <span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></form</span>></span>
</span>

Vous remarquerez que c'est très similaire à la fonction Track (), car c'est littéralement la même; L'URL a été mise à jour. Vous ne pouvez pas vraiment tester cela pour l'instant, car nous n'affichons pas une liste des référentiels suivis, alors corrigeons cela.

Lister les référentiels suivis

Cette partie est assez simple. Il vous suffit de récupérer les référentiels suivis de l'utilisateur à partir de la base de données et de l'afficher à l'avant. Créez une API de fonction Cloud / Listropos.js et ajoutez-y le code suivant:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>// import UsernamePrompt from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span>  <span>import <span>Tracker</span> from "./lib/Tracker.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><!-- <UsernamePrompt /> -->
</span><span><span><span><Tracker</span> /></span>
</span>

Étant donné que la fonction Cloud sera appelée à l'aide d'une demande HTTP GET, vous ne pouvez pas y mettre un corps, nous utilisons donc la chaîne de requête pour passer le nom d'utilisateur; Et comme user.trackedrepos peut être nul, nous nous assurons de retourner un tableau. Ensuite, il est temps d'utiliser cette fonction cloud à l'avant! Créez une fonction asynchrone appelée fetchrepos dans le fichier src / lib / tracker.svelte. Cette fonction sera chargée de récupérer les référentiels suivis de l'utilisateur à partir de la base de données à l'aide de la fonction cloud que nous venons de créer:

<span>const { MongoClient } = require("mongodb");
</span>
<span>const mongo = new MongoClient(process.env.MONGODB_URL);
</span>
<span>// Export the connection promise
</span><span>export default mongo.connect();
</span>

Nous devons récupérer cette fonction lorsque le composant est monté. Cela peut être fait en utilisant le crochet OnMount à Svelte. Lorsque le composant est monté, je souhaite définir la valeur renvoyée de la fonction ci-dessus à une variable appelée trackedrepos, afin que nous puissions l'utiliser dans le dom:

<span>{
</span>  <span>"type": "commonjs"
</span><span>}
</span>

Maintenant que nous avons accès aux référentiels suivis de l'utilisateur, mettons à jour le modèle HTML dans tracker.svelte pour afficher une liste précise de référentiels suivis:

<span># Don't forget to CD!
</span><span>cd api
</span><span>npm i mongodb # or use yarn
</span>

Nous devons encore recharger la page pour voir les modifications. Corrigeons cela en mettant à jour le DOM chaque fois que les boutons de piste ou de non-suivi sont cliqués:

<span>const mongoPromise = require("../src/lib/mongo");
</span><span>// All cloud functions must export a function that takes a req and res object.
</span><span>// These objects are similar to their express counterparts.
</span>module<span>.exports = async (req<span>, res</span>) => {
</span>  <span>// TODO
</span><span>};
</span>

Et voici à quoi devrait ressembler Tracker.Svelte:

module<span>.exports = async (req<span>, res</span>) =>
</span>  <span>// Wait for the client to connect
</span>  <span>const mongo = await mongoPromise;
</span><span>}
</span>

Et voici une capture d'écran de la façon dont l'application devrait maintenant apparaître.

Étape 4: Rendre l'application Installable

Les notifications push ne sont prises en charge que sur les applications installées . Oui, vous pouvez installer des applications Web en tant qu'applications régulières en utilisant Browsers pris en charge - à savoir le chrome et d'autres navigateurs basés sur le chrome.

Pour rendre une application installable, vous devez la convertir en une application Web progressive. Ceci est un processus en trois étapes:

1. Ajouter un travailleur de service
2. Rendez votre application hors ligne
3. Ajouter un fichier manifeste.json

Si les trois étapes sont terminées, un bouton d'installation apparaît sur la barre d'adresse lorsque vous visitez l'application.

ajout d'un employé de service

Les travailleurs du service sont des fichiers JavaScript qui peuvent s'exécuter en arrière-plan, hors du thread principal du navigateur. Cela leur permet de faire des choses comme l'exécution hors ligne, l'exécution en arrière-plan et télécharger des fichiers volumineux. Ils sont principalement utilisés pour la mise en cache et pour l'écoute d'événements, ce que nous ferons.

Pour ajouter un travailleur de service, vous devez ajouter un fichier JavaScript qui est accessible au public, comme tous les fichiers CSS. Le nom n'a pas vraiment d'importance, mais il est généralement nommé service-travail.js ou sw.js. Ce fichier doit être publiquement servi comme votre CSS, alors mettez-le dans le répertoire public.

Les travailleurs du service travaillent en écoutant des événements. Pour la mise en cache de fichiers, donc votre application fonctionne hors ligne, vous écouterez les événements d'installation, d'activation et de récupération. L'événement d'installation est appelé lorsque le travailleur des services est installé. L'événement Activate est appelé lorsque le travailleur du service est en cours d'exécution et l'événement Fetch est appelé chaque fois qu'une demande de réseau est effectuée. Les écouteurs d'événements peuvent être ajoutés à l'aide de self.addeventListener (). Créons un fichier public / service-worker.js et ajoutons-y le code suivant:

<span>npm init vite
</span>

Il ne reste plus qu'à enregistrer ce travailleur de service. Nous le ferons dans la fonction OnMount de App.svelte. Ajoutez ce code à la fin du rappel à l'intérieur de l'onmount:

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

Le code ci-dessus vérifie d'abord le support des travailleurs de service dans le navigateur, puis enregistre notre travailleur de service. Il faut noter que le chemin du chemin de la fonction Register () est le chemin par rapport à votre domaine , pas au dossier du projet - ce qui signifie que le travailleur de service doit être accessible à Http : // localhost: 3000 / service-worker.js, ce qu'il est, car c'est dans le répertoire public.

Maintenant, si vous recharger la page et ouvrez la console, vous devriez voir les messages ci-dessus.

Faire fonctionner notre application hors ligne

Pour que une application fonctionne hors ligne, vous devez mettre en cache son contenu à l'aide d'un travailleur de service. Étant donné que notre application fait des demandes de fonctions cloud, elle ne peut pas vraiment faire grand-chose lorsqu'il n'y a pas de réseau. Donc, au lieu d'afficher une version en cache et sans fonction de l'application, affichons une page qui indique que nous sommes hors ligne. Créez un fichier public / offline.html et y mettre le code suivant:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

N'hésitez pas à personnaliser cette page comme vous le souhaitez. Vous devez maintenant mettre en cache cette page. La mise en cache est également un processus en trois étapes qui utilise les trois événements des travailleurs de service ci-dessus que nous avons écoutés. Voici comment cela fonctionne:

1. Le cache est ouvert et les routes souhaitées sont ajoutées au cache à l'aide de cache.add. Cela se produit pendant l'installation.

2. L'ancien cache est supprimé, donc seul le dernier est enregistré sur l'ordinateur de l'utilisateur. Cela utilise moins de stockage. Cela se produit pendant l'activation.

3. Nous interceptons toutes les demandes de réseau et vérifions si ces demandes sont Navigations de page - c'est-à-dire modifier les itinéraires. Si la demande réussit, tout va bien, mais si la demande échoue, nous livrons la page Offline.html à afficher à l'utilisateur. Cela se produit pendant la récupération.

Implémentez la première étape. Ouvrez le fichier du travailleur des services et modifiez le gestionnaire de l'événement d'installation comme SO:

<span>npm init vite
</span>

event.Waituntil () est une fonction similaire au mot clé Await. Les rappels d'AdveventListener ne peuvent pas être asynchrones, donc pour mettre en œuvre cette fonctionnalité, nous devons utiliser l'événement.waituLtil () et lui faire une promesse afin que la promesse soit attendue.

self.skipwaiting () dit au navigateur que nous avons terminé avec le processus d'installation, alors activez le travailleur des services. En parlant d'activer, ajoutons maintenant le code pour supprimer tous les anciens caches:

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

Et avec cela, la page Offline.html doit être mise en cache. Pour revérifier, ouvrez les outils du développeur en appuyant sur f12 et sélectionnez l'onglet Application. Dans la barre latérale, il devrait y avoir un onglet de stockage de cache. Cliquez dessus et vous devez remarquer /offline.html.

Maintenant, il ne reste plus qu'à servir ce fichier lorsqu'il n'y a pas de réseau:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

La fonction Event.RespondWith () répondra à la demande de récupération du réseau avec n'importe quel objet de réponse qui lui est transmis. Dans ce cas, nous récupérons la demande en premier, et si la demande échoue, ce qui sera très probablement dû à un problème Internet, nous envoyons la page hors ligne.html, qui a été mise en cache par le travailleur des services.

Actualisez maintenant la page et éteignez votre Wi-Fi ou Ethernet. Vous devriez maintenant voir notre page hors ligne au lieu de la page chromée «pas de réseau» par défaut lorsque vous actualisez. Cette page hors ligne n'a malheureusement pas le jeu des dinosaures, mais il nous permet d'installer l'application en tant que PWA.

Voici à quoi devrait ressembler le travailleur des services:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>import <span>UsernamePrompt</span> from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><UsernamePrompt</span> /></span>
</span>

ajoutant le fichier manifeste.json

Le manifeste.json, ou manifeste Web, contient des informations utiles sur votre application - des choses comme le nom de l'application, sa couleur de thème, une description, ses icônes et bien plus encore. Ce fichier est généralement appelé manifeste.json et doit être lié ​​ à votre site Web à l'aide de la balise dans le HTML, comme la façon dont vous liez les fichiers CSS. Ajoutons un manifeste pour notre application. N'hésitez pas à utiliser un générateur pour celui-ci:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let repo = "";
</span></span></span><span><span>  <span>function track() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span>
</span></span><span><span>  <span>function untrack(repo) {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>={track}</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>GitHub tracker<span><span></h1</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Enter the repository's URL"</span>
</span></span><span>    <span>aria-label<span>="Repository URL"</span>
</span></span><span>    <span><span>bind:value</span><span>={repo}</span>
</span></span><span>  <span>/></span>
</span>  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-2 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>    <span>></span>Track repository<span><span></button</span>
</span></span><span>  <span>></span>
</span>
  <span><span><span><h2</span> class<span>="mt-4 text-2xl"</span>></span>Tracked repositories<span><span></h2</span>></span>
</span>  <span><span><span><ul</span> class<span>="m-2 list-decimal"</span>></span>
</span>    <span><!-- We'll use a loop to automatically add repositories here later on. -->
</span>    <span><span><span><li</span> class<span>="py-1 flex items-center justify-between"</span>></span>
</span>      <span><span><span><a</span> class<span>="text-gray-500 hover:underline"</span> href<span>="https://github.com/test/test"</span>
</span></span><span>        <span>></span>https://github.com/test/test<span><span></a</span>
</span></span><span>      <span>></span>
</span>      <button  on:click={() => untrack("")}
        >Untrack<span><span><span></button</span>
</span></span><span>      <span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></form</span>></span>
</span>

Vous devez télécharger un tas d'icônes pour l'application. Ces icônes sont de différentes tailles et sont utilisées par différents systèmes d'exploitation. Vous pouvez les télécharger à partir du référentiel de code source ou en utilisant ce lien. Assurez-vous d'extraire le fichier zip en public / icônes.

Ensuite, vous devez ajouter le manifeste et les icônes dans le fichier index.html. Vous pouvez le faire en y mettant le code suivant:

<span>npm init vite
</span>

Ouvrir les outils de développeur Chrome en appuyant sur f12 et dirigez-vous vers l'onglet Lighthouse et créez un nouvel audit. Vous devriez désormais obtenir un score «installable» sur la section PWA. Cela signifie que vous avez réussi à convertir votre site Web en un webApp, et vous pouvez maintenant l'installer en cliquant sur le bouton dans la barre d'adresse.

Étape 5: Abonnement aux notifications push

Avant de pouvoir envoyer des notifications push, nous devons obtenir la permission de l'utilisateur. Vous pouvez utiliser la méthode notification.requestPermission () pour le faire. Cette méthode est asynchrone et renvoie une chaîne qui peut être égale à la valeur par défaut, refusée et accorde. Ceux-ci sont renvoyés lorsque l'utilisateur appuie sur le X, appuie sur Deny ou appuie sur l'invite de notification, respectivement. Nous utiliserons le crochet OnMount dans app.svelte pour appeler cette fonction:

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

Vous devriez maintenant obtenir une fenêtre contextuelle vous demandant d'autoriser les notifications dans l'application. Maintenant que nous avons la permission d'envoyer des notifications, utilisons le travailleur du service pour vous abonner aux événements push. Cela peut être fait en utilisant la fonction PushManager.Subscribe () du travailleur de service. Vous pouvez soit le faire dans le travailleur des services lui-même, soit après avoir enregistré le travailleur des services dans App.svelte. J'irai avec ce dernier, donc si vous voulez faire de même, remplacez simplement la fonction Navigator.ServiceWorker.Register dans OnMount par le code ci-dessous:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

Si vous ouvrez la console, vous remarquerez une erreur disant que l'applicationserverkey est manquante. Les notifications push ont besoin de serveurs pour leur envoyer des messages push, et ces serveurs sont authentifiés avec des clés vapaides. Ces clés identifient le serveur et permettent au navigateur de savoir que le message push est valide. Nous utiliserons les fonctions Vercel Cloud pour envoyer des messages push, nous devons donc le configurer.

Création d'un serveur de messages push

Nous utiliserons le package NPM Web-Push pour nous aider à générer des clés et à envoyer des événements push. Pour l'installer, CD dans le dossier de l'API et exécutez ce qui suit:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>import <span>UsernamePrompt</span> from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><UsernamePrompt</span> /></span>
</span>

N'oubliez pas de CD dans le dossier API, car sinon le package Web-Push sera installé dans l'application Svelte.

Pour envoyer des notifications push, vous devrez générer une paire de clés VAPID publique et privée. Pour ce faire, ouvrez le nœud REPL à l'aide de la commande Node et exécutez les commandes suivantes:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let repo = "";
</span></span></span><span><span>  <span>function track() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span>
</span></span><span><span>  <span>function untrack(repo) {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>={track}</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>GitHub tracker<span><span></h1</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Enter the repository's URL"</span>
</span></span><span>    <span>aria-label<span>="Repository URL"</span>
</span></span><span>    <span><span>bind:value</span><span>={repo}</span>
</span></span><span>  <span>/></span>
</span>  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-2 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>    <span>></span>Track repository<span><span></button</span>
</span></span><span>  <span>></span>
</span>
  <span><span><span><h2</span> class<span>="mt-4 text-2xl"</span>></span>Tracked repositories<span><span></h2</span>></span>
</span>  <span><span><span><ul</span> class<span>="m-2 list-decimal"</span>></span>
</span>    <span><!-- We'll use a loop to automatically add repositories here later on. -->
</span>    <span><span><span><li</span> class<span>="py-1 flex items-center justify-between"</span>></span>
</span>      <span><span><span><a</span> class<span>="text-gray-500 hover:underline"</span> href<span>="https://github.com/test/test"</span>
</span></span><span>        <span>></span>https://github.com/test/test<span><span></a</span>
</span></span><span>      <span>></span>
</span>      <button  on:click={() => untrack("")}
        >Untrack<span><span><span></button</span>
</span></span><span>      <span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></form</span>></span>
</span>

Copiez ces deux clés et stockez-les sous forme de variables d'environnement sur Vercel. Assurez-vous de les appeler quelque chose de mémorable comme vapid_private_key et vapid_public_key.

Maintenant, nous pouvons commencer à travailler sur la fonction cloud. Créer un fichier API / vapidkeys.js. Ce fichier sera responsable de l'envoi de la clé public VAPID au client. Vous devriez jamais Partagez la clé privée. Dans API / VAPIDKEYS.js, nous devons d'abord initialiser le web-push:

<span>npm init vite
</span>

Assurez-vous de remplacer votre_vercel_domain par le domaine de votre application Vercel. Ensuite, exportons une fonction pour retourner simplement la touche publique VAPID au demandeur:

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

avec cela fait, vous pouvez désormais mettre à jour la fonction OnMount dans App.svelte pour d'abord récupérer la fonction cloud pour obtenir la clé publique, puis utiliser la clé publique dans la fonction d'abonnement:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

Remarquez comment nous ne venons que les clés vapaides Si , nous n'avons pas abonné aux notifications push. Si vous ouvrez la console, vous devriez voir l'abonnement connecté à la console.

Le point final fourni est très important pour nous. Ce point de terminaison nous permettra d'informer cet utilisateur à l'aide de web-push. Créons une fonction cloud pour stocker ce point de terminaison dans la base de données. Créer un fichier API / STOREENDPoint.js:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>import <span>UsernamePrompt</span> from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><UsernamePrompt</span> /></span>
</span>

Saisissons l'abonnement et le nom d'utilisateur du corps:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let repo = "";
</span></span></span><span><span>  <span>function track() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span>
</span></span><span><span>  <span>function untrack(repo) {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>={track}</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>GitHub tracker<span><span></h1</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Enter the repository's URL"</span>
</span></span><span>    <span>aria-label<span>="Repository URL"</span>
</span></span><span>    <span><span>bind:value</span><span>={repo}</span>
</span></span><span>  <span>/></span>
</span>  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-2 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>    <span>></span>Track repository<span><span></button</span>
</span></span><span>  <span>></span>
</span>
  <span><span><span><h2</span> class<span>="mt-4 text-2xl"</span>></span>Tracked repositories<span><span></h2</span>></span>
</span>  <span><span><span><ul</span> class<span>="m-2 list-decimal"</span>></span>
</span>    <span><!-- We'll use a loop to automatically add repositories here later on. -->
</span>    <span><span><span><li</span> class<span>="py-1 flex items-center justify-between"</span>></span>
</span>      <span><span><span><a</span> class<span>="text-gray-500 hover:underline"</span> href<span>="https://github.com/test/test"</span>
</span></span><span>        <span>></span>https://github.com/test/test<span><span></a</span>
</span></span><span>      <span>></span>
</span>      <button  on:click={() => untrack("")}
        >Untrack<span><span><span></button</span>
</span></span><span>      <span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></form</span>></span>
</span>

et ajoutons-le à la base de données:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>// import UsernamePrompt from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span>  <span>import <span>Tracker</span> from "./lib/Tracker.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><!-- <UsernamePrompt /> -->
</span><span><span><span><Tracker</span> /></span>
</span>

Et voici à quoi devrait ressembler la fonction cloud finale:

<span>const { MongoClient } = require("mongodb");
</span>
<span>const mongo = new MongoClient(process.env.MONGODB_URL);
</span>
<span>// Export the connection promise
</span><span>export default mongo.connect();
</span>

Cette fonction doit être appelée chaque fois que nous souscrivons aux notifications push. Utilisons un bloc réactif svelte pour appeler cette fonction cloud chaque fois que la sous-variable a une valeur et La variable isloggedin est vraie. Ajoutez ce code juste avant la fin de la balise dans app.svelte:

<span>{
</span>  <span>"type": "commonjs"
</span><span>}
</span>

Actualiser la page, et vous devriez voir que le point de terminaison push du navigateur actuel et les clés sont stockés dans la base de données MongoDB dans l'objet d'abonnement.

Tout ce que vous avez à faire est de gérer l'événement push dans le travailleur du service et de créer une fonction cloud pour vérifier GitHub pour les nouveaux problèmes et les PRS.

faisons d'abord ce dernier. Créez une nouvelle API de fonction Cloud / Fetchgh.js. Cette fonction sera responsable de la vérification de GitHub et de l'envoi de notifications push:

<span># Don't forget to CD!
</span><span>cd api
</span><span>npm i mongodb # or use yarn
</span>

obtenons tous les utilisateurs de la base de données, afin que nous sachions quels repos récupérer:

<span>const mongoPromise = require("../src/lib/mongo");
</span><span>// All cloud functions must export a function that takes a req and res object.
</span><span>// These objects are similar to their express counterparts.
</span>module<span>.exports = async (req<span>, res</span>) => {
</span>  <span>// TODO
</span><span>};
</span>

Ensuite, créez deux variables pour stocker les référentiels actuellement récupérés et les référentiels avec de nouveaux problèmes ou PRS:

<span>npm init vite
</span>

Pour chaque utilisateur, vérifions ses référentiels suivis pour tout nouveau problème. Pour nous assurer qu'un référentiel n'est vérifié qu'une seule fois, nous ajouterons le référentiel à déjà FetchEDedrepos, et nous ajouterons tous les référentiels qui ont de nouveaux problèmes à Repossus. Pour ce faire, nous devons faire une touche sur tous les utilisateurs du tableau des utilisateurs et obtenir une liste de référentiels à récupérer. Cela se fera en vérifiant leur trackEdrepos pour tout doublons. Une fois cela fait, nous appellerons la fonction FetchRepo pour chaque référentiel. FetchRepo renverra un booléen - vrai s'il y a de nouveaux problèmes, faux sinon:

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

Étant donné que FetchRepo sera asynchrone, j'ai utilisé MAP pour retourner les promesses à chaque fois et les attendons tous en utilisant la promesse. Cela fonctionne parce que la boucle pour est asynchrone. Si les promesses ne sont pas attendues, les variables peuvent être indéfinies, alors assurez-vous d'attendre les promesses!

maintenant pour la fonction fetchrepo. Cette fonction obtiendra la dernière fois que nous avons vérifié l'API GitHub à partir de la base de données. Il s'agit uniquement des derniers problèmes de GitHub. Il récupère ensuite l'API GitHub pour tout nouveau problème, et renvoie une valeur booléenne s'il y en a:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

Une fois cela fait, nous devons envoyer des notifications push à tout utilisateur qui a suivi un référentiel qui a de nouveaux problèmes. Cela peut être fait à l'aide de push Web. Ajoutez ces lignes de code à la fin de la fonction exportée:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>import <span>UsernamePrompt</span> from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><UsernamePrompt</span> /></span>
</span>

Tout d'abord, nous devons vérifier si l'un des référentiels suivis de l'utilisateur a de nouveaux problèmes. Cela peut être fait avec la méthode Array. Array.some () détermine si la fonction de rappel spécifiée renvoie vrai pour tout élément d'un tableau, nous pouvons donc facilement l'utiliser pour vérifier:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let repo = "";
</span></span></span><span><span>  <span>function track() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span>
</span></span><span><span>  <span>function untrack(repo) {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>={track}</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>GitHub tracker<span><span></h1</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Enter the repository's URL"</span>
</span></span><span>    <span>aria-label<span>="Repository URL"</span>
</span></span><span>    <span><span>bind:value</span><span>={repo}</span>
</span></span><span>  <span>/></span>
</span>  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-2 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>    <span>></span>Track repository<span><span></button</span>
</span></span><span>  <span>></span>
</span>
  <span><span><span><h2</span> class<span>="mt-4 text-2xl"</span>></span>Tracked repositories<span><span></h2</span>></span>
</span>  <span><span><span><ul</span> class<span>="m-2 list-decimal"</span>></span>
</span>    <span><!-- We'll use a loop to automatically add repositories here later on. -->
</span>    <span><span><span><li</span> class<span>="py-1 flex items-center justify-between"</span>></span>
</span>      <span><span><span><a</span> class<span>="text-gray-500 hover:underline"</span> href<span>="https://github.com/test/test"</span>
</span></span><span>        <span>></span>https://github.com/test/test<span><span></a</span>
</span></span><span>      <span>></span>
</span>      <button  on:click={() => untrack("")}
        >Untrack<span><span><span></button</span>
</span></span><span>      <span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></form</span>></span>
</span>

Et enfin, nous envoyons la notification:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>// import UsernamePrompt from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span>  <span>import <span>Tracker</span> from "./lib/Tracker.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><!-- <UsernamePrompt /> -->
</span><span><span><span><Tracker</span> /></span>
</span>

Et voici à quoi devrait ressembler la fonction cloud:

<span>const { MongoClient } = require("mongodb");
</span>
<span>const mongo = new MongoClient(process.env.MONGODB_URL);
</span>
<span>// Export the connection promise
</span><span>export default mongo.connect();
</span>

écouter les événements push

Il ne reste plus qu'à écouter les événements de push dans le travailleur des services. Ouvrez le travailleur du service et ajoutez le code ci-dessous:

<span>{
</span>  <span>"type": "commonjs"
</span><span>}
</span>

Lorsque vous appelez la fonction Cloud, en utilisant peut-être Curl, vous devriez voir un nouveau problème connecté dans la console du navigateur. Ce n'est pas vraiment très utile, alors faisons-le envoyer une notification:

<span># Don't forget to CD!
</span><span>cd api
</span><span>npm i mongodb # or use yarn
</span>

Supprimez la collection récupérée de MongoDB et appelez à nouveau la fonction Cloud. Vous devriez maintenant recevoir une notification du navigateur Web.

Déployez l'application à l'aide de Vercel. ou en poussant vers GitHub, installez l'application en tant que PWA et exécutez la fonction Cloud en allant sur https: // your_vercel_app / api / fetchgh et vous devriez recevoir une notification, même si vous n'avez pas ouvert l'application!

Si vous ne recevez pas la notification, ou si vous obtenez une erreur 410 à partir de Web Push, assurez-vous d'autoriser les notifications pour toujours dans l'invite lorsque vous êtes demandé.

Étape 6: Création d'un travail cron

Le tracker n'est pas vraiment un tracker si nous devons appeler manuellement la fonction cloud, non? Utilisons EasyCron pour appeler automatiquement la fonction cloud toutes les heures.

Dirigez-vous vers votre tableau de bord EasyCron et créez un nouveau travail Cron. Pour l'URL, entrez https: // votre_vercel_domain / api / fetchgh, et choisissez un intervalle. J'irai avec toutes les heures, mais n'hésitez pas à le personnaliser comme vous le souhaitez.

Conclusion

Et avec cela, vous devriez recevoir des notifications à chaque fois qu'il y a un nouveau problème / PR dans l'un de vos référentiels suivis. N'hésitez pas à consulter le code source ou la version en direct si vous êtes resté coincé n'importe où.

Questions fréquemment posées (FAQ) sur la création d'un tracker GitHub avec des notifications push dans svelte

Qu'est-ce que Svelte et pourquoi dois-je l'utiliser pour créer un tracker GitHub?

Svelte est un compilateur JavaScript moderne qui vous permet d'écrire du code JavaScript facile à comprendre qui est ensuite compilé à un code très efficace Cela fonctionne directement dans le navigateur. Il offre un modèle de programmation plus simple et plus intuitif que les autres frameworks JavaScript comme React ou Vue, et entraîne des temps de chargement plus rapides et de meilleures performances. Lors de la création d'un tracker GitHub, l'utilisation de Svelte peut rendre votre code plus propre, plus facile à entretenir et plus efficace.

Comment fonctionnent les notifications push dans Svelte?

Les notifications push dans Svelte en utilisant le fonctionnement de la Système de réactivité intégré. Ce système vous permet de définir des instructions réactives qui mettent automatiquement à jour chaque fois que l'état de votre application change. Lorsqu'un changement se produit, comme un nouvel engagement qui est poussé vers un référentiel GitHub, une instruction réactive peut déclencher une notification push pour informer l'utilisateur du changement.

Puis-je utiliser Svelte pour suivre plusieurs référentiels GitHub?

Oui, vous pouvez utiliser Svelte pour suivre plusieurs référentiels GitHub. Vous devez créer une instance distincte du tracker GitHub pour chaque référentiel que vous souhaitez suivre. Chaque instance aurait ses propres déclarations d'état et réactives, lui permettant de suivre indépendamment les modifications et d'envoyer des notifications push.

Comment puis-je personnaliser l'apparence des notifications push dans svelte?

L'apparence de push Les notifications dans Svelte peuvent être personnalisées à l'aide de CSS. Svelte vous permet d'écrire des CSS dans des lunettes qui s'appliquent uniquement aux composants où il est défini. Cela signifie que vous pouvez créer des styles uniques pour vos notifications push sans affecter le reste de votre application.

Puis-je utiliser Svelte avec d'autres frameworks ou bibliothèques JavaScript?

Oui, Svelte peut être utilisé aux côtés d'autres Frameworks ou bibliothèques JavaScript. Cependant, l'un des principaux avantages de Svelte est sa simplicité et son efficacité, donc l'utiliser avec d'autres cadres ou bibliothèques pourrait annuler certains de ces avantages. Il est préférable d'utiliser Svelte seul si possible.

Comment gérer les erreurs lors de la création d'un tracker GitHub dans svelte?

La gestion des erreurs dans Svelte peut être effectuée à l'aide de blocs Try / Catch dans votre code JavaScript. Si une erreur se produit lors de la récupération des données de l'API GitHub, par exemple, vous pouvez attraper l'erreur et afficher un message utile à l'utilisateur.

Puis-je utiliser Svelte pour créer un tracker GitHub pour les référentiels privés?

Oui, vous pouvez utiliser Svelte pour créer un tracker GitHub pour les référentiels privés. Vous devrez vous authentifier avec l'API GitHub à l'aide d'un jeton d'accès personnel, qui peut être généré à partir des paramètres de votre compte GitHub.

Comment tester mon tracker GitHub dans svelte?

Test dans Svelte Peut être effectué en utilisant diverses bibliothèques de tests JavaScript, telles que Jest ou Mocha. Ces bibliothèques vous permettent d'écrire des tests pour vos composants et vos instructions réactives pour vous assurer qu'elles fonctionnent correctement.

Puis-je déployer mon tracker GitHub Svelte sur un serveur?

Oui, vous pouvez déployer votre svelte svelte GitHub Tracker sur un serveur. Svelte compile votre code en JavaScript, CSS et HTML, qui peuvent être desservis par n'importe quel serveur de fichiers statique.

Comment mettre à jour mon tracker GitHub lorsque Svelte ou l'API GitHub change?

Lorsque Svelte ou l'API GitHub change, vous devrez mettre à jour votre tracker GitHub en conséquence. Cela peut impliquer la mise à jour de votre code svelte pour utiliser de nouvelles fonctionnalités ou syntaxes, ou la mise à jour de vos appels API pour faire correspondre les modifications de l'API GitHub. Il est important de vérifier régulièrement les mises à jour pour garantir que votre tracker GitHub continue de fonctionner correctement.

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!