Il existe maintenant des centaines de nouveaux outils de suivi des épidémies de couronnes sur Internet. Je veux d'abord savoir où ils ont mis les données. Après la recherche, deux sources principales ont été rapidement identifiées. J'ai d'abord utilisé l'un d'eux. C'est l'Université Johns Hopkins. Ils ont publié des fichiers csv utiles sur GitHub. Cependant, les données ne sont mises à jour qu'une fois par jour, j'ai donc commencé à rechercher des services en temps réel. J'ai trouvé TheVirusTracker. J'ai fini par utiliser leur API. Ils ont un résumé de chaque pays, mais ils ont aussi un calendrier. C'est plus intéressant pour moi. Je n'ai trouvé aucune information sur les limites de demande et il ne semble pas y avoir d'informations sur les limites.
Structure
TheVirusTracker prend en charge les demandes CORS, de sorte que l'application peut être construite comme une page statique qui fonctionne entièrement dans le navigateur. Cependant, je suis allé dans l'autre sens. Comme mentionné ci-dessus, j'ai utilisé à l'origine des données de l'Université Hopkins, qui se trouve sur GitHub. Je dois donc le retirer de là. La méthode la plus fiable consiste à utiliser le point de terminaison de contenu de GitHub. Le taux de tous leurs points de terminaison est limité à 60 demandes par heure, afin d'augmenter le nombre de demandes, vous devez utiliser un jeton d'accès personnel. Ces jetons ne doivent pas être partagés publiquement. J'ai donc dû écrire du code back-end.
Mon code client fait une demande au processus Node.js. Le processus récupérera les données, puis les normalisera et les renverra. Plus tard, j'ai changé la source de données, mais j'ai décidé de conserver ce processus pour trois raisons:
J'ai une assez bonne couche pour normaliser et mettre en cache les données. Il est presque toujours nécessaire de convertir des données. Dans tous les cas, j'aurai ce code, alors pourquoi ne pas le mettre sur le back-end et laisser le client l'utiliser. L'API distante est publique et gratuite, donc je ne devrais pas demander à nouveau la demande. Afin de fournir un trafic élevé, j'ai besoin d'une couche de cache. La façon la plus simple de résoudre cette exigence est d'implémenter un cache mémoire simple. Sans serveur, c'est impossible.
J'ai passé du temps à écrire sur un serveur et je ne veux pas abandonner ce travail.
Jusqu'à présent, mon code expose trois points de terminaison. Je souhaite partager ce contenu avec d'autres développeurs et laisser les autres utiliser la normalisation et la mise en cache.
Après quelques heures, la structure de mon projet est devenue
Frontend
L'une des raisons de ce projet est d'améliorer mes compétences React et TypeScript. J'ai créé quelques projets avec ces deux excellentes techniques, et un mode d'installation est apparu. À un moment donné, j'ai regroupé la configuration nécessaire dans un package appelé Starting (vous pouvez en savoir plus sur "Webpack / TypeScript / React Starter Kit à partir de 2020" ici). Par conséquent, j'ai créé un dossier vide et
j'ai exécuté: npx commençant par && yarn.
Copiez le code. Cela crée une application React simple avec prise en charge de TypeScript.
L'
application React dans l' écosystème React lui-même n'a rien de spécial. Parce que c'est un petit projet, je n'ai besoin d'aucune gestion d'état. Tout n'est qu'un composant avec plusieurs crochets.
J'utilise des graphiques construits par recharts. Utilisé ses composants:
La plupart des suiveurs d'épidémie ne peuvent pas filtrer les données par pays. Habituellement, ces applications rendent une grande quantité de données, ce qui est évidemment difficile à filtrer les informations. Je veux que mon tracker ait cette fonction de filtrage. J'ai utilisé react-tag-autocomplete, un autre progiciel populaire. Il fournit des champs de saisie pour la gestion des balises. L'étiquette ici est le nom du pays.
exporter la fonction par défaut Builder ({countries, data}: BuilderProps) {
const [tags, setTags] = useState <Tag []> (getTags (countries, data));
const [suggestions, setSuggestions] = useState (getSuggestions (countries)) ;
function handleDelete (i: number) {
const t = tags.slice (0);
t. épissure (i, 1);
setTags (t);
}
fonction handleAddition (tag: Tag) {
setTags ([… tags, tag]);
}
return (
<>
{tags.length> 0 && (
<Link href = { https://c19stats.now.sh?countries=${tags.map(t => t.name).join(',')}}>
Cliquez ici pour voir les statistiques de {tags.map (t => t.name)}
)}
</>
);
}
Copiez le code pour plus de simplicité Par souci de clarté, j'ai décidé de générer un lien au lieu de faire immédiatement une nouvelle demande à l'API. De cette façon, l'utilisateur aura une URL partageable.
Le reste de l'application est composé de quelques composants de style, de certains contenus d'entrée et d'une petite couche de données pour demander le backend. Tout le code est publié sur github.com/krasimir/co ...
Backend
Tout d'abord, je tiens à dire que Zeit est si agréable en tant que plate-forme. Tout s'est si bien passé. Après quelques minutes, le travail de ma page web sur le web est piloté par le backend Node.js.
Je commence par le fichier now.json suivant:
{
"version": 2,
"builds": [
{"src": "public / . ", "Use": "@ now / static"},
{"src": " api / .js "," use ":" @ now / node "}
],
" routes ": [
{" src ":" / api / countries "," dest ":" /api/countries.js "},
{ "src": "/ API", "dest": "/api/index.js"},
{ "src": "(/. )", "dest": "/ public / $ 1."}
]
}
copie Le dossier public de code contient certains fichiers statiques, tels que mon index.html et le bundle JavaScript généré. Tout dans le répertoire api est une fonction lambda. Par exemple, après c19stats.now.sh/api/countri ..., j'ai
const countries = require ('./ countries.json');
function JSONResponse (res, data, status = 200) {
res.setHeader ('Content-Type', 'application / json');
res.setHeader ('Access-Control-Allow-Origin', '*');
res.statusCode = status;
res.end (JSON.stringify (données));
}
module.exports = fonction async (req, res) {
JSONResponse (res, countries);
};
Copier le code Pour accéder au serveur distant de TheVirusTracker, j'ai utilisé superagent. Ce n'est pas inhabituel, mais cela me permet de coller facilement ma logique de cache "incroyable":
const memCache = {
lastUpdate: null,
data: null,
};
const CACHE_TTL = 20;
fonction getData (noCache) {
if (memCache.data && memCache.lastUpdate && typeof noCache === 'undefined') {
const now = new Date ();
const diff = (now.getTime () -memCache.lastUpdate) / 1000 / 60;
if (diff <CACHE_TTL) {
return Promise.resolve (memCache.data);
}
}
// normalisation des données
}
Copier le code Nous vérifions d'abord s'il existe un cache. Le champ de données de l'objet memCache contient la version normalisée des données, elle peut donc être retournée directement (notez l'appel Promise.resolve). Deuxièmement, s'il y a des données en cache, nous vérifierons le nombre de minutes depuis la dernière mise à jour. Ici, nous devons préciser que tout le contenu conservé dans la portée globale du fichier sera conservé. Bien sûr, si je déploie une nouvelle version de lambda ou redémarre le processus pour une raison quelconque, le cache sera effacé. Mais j'en suis totalement satisfait. Le but de ceci est d'éviter d'envoyer continuellement des demandes à l'extrémité distante. Pour être honnête, cela fonctionne bien. c19stats.now.sh/ prend parfois plus de temps pour charger les données, mais la page de résultats s'actualise rapidement.
Créez votre propre traqueur d'épidémie de couronne
Vous pouvez toujours utiliser certains points d'extrémité sur c19stats.now.sh/.
Obtenir des données pour des pays / régions spécifiques / api? Pays = États-Unis, Italie, Norvège
Obtenir des données
pour tous les pays / régions- / api? Pays = tousObtenir la liste de tous les pays / régions / / api / pays
Ou, vous pouvez directement utiliser l'API de thevirustracker.com/api. Mais si vous devez mettre en cache des données, vous devez les implémenter vous-même. Le reste dépend de vous. Tout le code de c19stats.now.sh/ est open source et disponible sur github.com/krasimir/co ... .
