Atualmente, existem centenas de novos rastreadores de epidemias da coroa na Internet. Primeiro, quero saber onde eles colocam os dados. Após a pesquisa, duas fontes principais foram rapidamente identificadas. Eu inicialmente usei um deles. Essa é a Universidade Johns Hopkins. Eles publicaram alguns arquivos csv úteis no GitHub. No entanto, os dados são atualizados apenas uma vez por dia, então comecei a procurar alguns serviços em tempo real. Encontrei TheVirusTracker. Acabei usando a API deles. Eles têm um resumo de cada país, mas também têm um cronograma. Isso é mais interessante para mim. Não encontrei nenhuma informação sobre os limites de solicitação e parece não haver informações de limite.
Estrutura O
TheVirusTracker suporta solicitações CORS, para que o aplicativo possa ser construído como uma página estática que funcione inteiramente no navegador. No entanto, eu fui para o outro lado. Como mencionado acima, originalmente usei dados da Universidade Hopkins, localizada no GitHub. Então eu preciso puxar de lá. O método mais confiável é usar o ponto de extremidade de conteúdo do GitHub. A taxa de todos os seus pontos de extremidade é limitada a 60 solicitações por hora. Para aumentar o número de solicitações, você precisa usar um token de acesso pessoal. Esses tokens não devem ser compartilhados publicamente. Então eu tive que escrever um código de back-end.
Meu código de cliente está fazendo uma solicitação para o processo Node.js. O processo obterá os dados, normalizará e retornará. Mais tarde, mudei a fonte de dados, mas decidi manter esse processo por três razões:
Eu tenho uma camada muito boa para padronizar e armazenar dados em cache. Quase sempre é necessário converter dados. De qualquer forma, vou ter esse código, então por que não colocá-lo no back-end e deixar que o cliente o use. A API remota é pública e gratuita, portanto, não devo solicitar novamente a solicitação. Para fornecer alto tráfego, preciso de uma camada de cache. A maneira mais básica de resolver esse requisito é implementar um cache de memória simples. Sem um servidor, isso é impossível.
Passei um tempo escrevendo um servidor e não quero desistir deste trabalho.
Até agora, meu código expõe três pontos de extremidade. Quero compartilhar esse conteúdo com outros desenvolvedores e permitir que outros usem normalização e cache.
Depois de algumas horas, minha estrutura de projeto tornou-se
Front-end
Uma razão para fazer este projeto é melhorar minhas habilidades em React e TypeScript. Criei alguns projetos com essas duas excelentes técnicas e um modo de instalação surgiu. Em algum momento, agrupei a configuração necessária em um pacote chamado partida (você pode ler mais sobre "Webpack / TypeScript / React starter kit a partir de 2020" aqui). Portanto, criei uma pasta vazia e executei:
npx begin && yarn.
Copie o código. Isso cria um aplicativo React simples com suporte ao TypeScript.
A
aplicação React no próprio ecossistema React não é nada de especial. Por ser um projeto pequeno, não preciso de nenhum gerenciamento de estado. Tudo é apenas um componente com vários ganchos.
Eu uso gráficos construídos por recargas. Utilizou seus componentes:
A maioria dos rastreadores de surtos não pode filtrar dados por país. Geralmente, esses aplicativos processam uma grande quantidade de dados, o que é obviamente difícil de filtrar informações. Quero que meu rastreador tenha essa função de filtragem. Eu usei o react-tag-autocomplete, outro pacote de software popular. Ele fornece campos de entrada para gerenciar tags. O rótulo aqui é o nome do país.
função padrão de exportação Builder ({países, dados}: BuilderProps) {
const [tags, setTags] = useState <Tag []> (getTags (países, dados));
const [sugestões, setSuggestions] = useState (getSuggestions (países)) ;
função handleDelete (i: número) {
const t = tags.slice (0);
t.splice (i, 1);
setTags (t);
}
função handleAddition (tag: Tag) {
setTags ([… tags, tag]);
}
return (
<>
{tags.length> 0 && (
<Link href = { https://c19stats.now.sh?countries=${tags.map(t => t.name).join(',')}}>
Clique aqui para ver estatísticas para {tags.map (t => t.name)}
)}
</>
);
}
Copie o código para simplificar Por uma questão de clareza, decidi gerar um link em vez de fazer imediatamente uma nova solicitação para a API. Dessa forma, o usuário terá um URL compartilhável.
O restante do aplicativo são alguns componentes habilitados para estilo, algum conteúdo de entrada e uma pequena camada de dados para solicitar o back-end. Todo o código é publicado em github.com/krasimir/co ...
Back-end
Primeiro, quero dizer que o Zeit é tão divertido quanto uma plataforma. Tudo correu tão bem. Após alguns minutos, o trabalho da minha página na web é conduzido pelo back-end do Node.js.
Começo com o seguinte arquivo now.json:
{
"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."}
]
}
cópia A pasta pública de código contém alguns arquivos estáticos, como meu index.html e o pacote JavaScript gerado. Tudo no diretório api é uma função lambda. Por exemplo, depois de c19stats.now.sh/api/countri ..., eu tenho
const const = require ('./ countries.json');
função JSONResponse (res, dados, status = 200) {
res.setHeader ('Content-Type', 'application / json');
res.setHeader ('Controle de acesso-permitir-origem', '*');
res.statusCode = status;
res.end (JSON.stringify (dados));
}
module.exports = função assíncrona (req, res) {
JSONResponse (res, países);
};
Copie o código Para acessar o servidor remoto do TheVirusTracker, usei superagent. Isso não é nada incomum, mas permite colar facilmente minha lógica "incrível" de cache:
const memCache = {
lastUpdate: null,
data: null,
};
const CACHE_TTL = 20;
função getData (noCache) {
if (memCache.data && memCache.lastUpdate && typeof noCache === 'indefinido') {
const now = new Date ();
const diff = (now.getTime () -memCache.lastUpdate) / 1000 / 60;
if (diff <CACHE_TTL) {
return Promise.resolve (memCache.data);
}
}
// normalização dos dados
}
Copiar código Primeiro, verificamos se há um cache. O campo de dados do objeto memCache mantém a versão normalizada dos dados, para que eles possam ser retornados diretamente (observe a chamada Promise.resolve). Segundo, se houver dados em cache, verificaremos o número de minutos desde a última atualização. Aqui, devemos esclarecer que todo o conteúdo retido no escopo global do arquivo será retido. Obviamente, se eu implantar uma nova versão do lambda ou reiniciar o processo por algum motivo, o cache será limpo. Mas estou completamente satisfeito com isso. O objetivo disso é evitar o envio contínuo de solicitações para o outro extremo. Para ser sincero, funciona bem. Às vezes, o c19stats.now.sh/ leva mais tempo para carregar os dados, mas a página de resultados é atualizada rapidamente.
Crie seu próprio novo rastreador de surtos de coroas
Você sempre pode usar determinados pontos de extremidade em c19stats.now.sh/.
Obter dados para países / regiões específicos / api? Países = EUA, Itália, Noruega
Obter dados
para todos os países / regiões- / api? Países = todosObtenha lista de todos os países / regiões / / api / países
Ou você pode usar diretamente a API do thevirustracker.com/api. Mas se você precisar armazenar dados em cache, deverá implementá-los. O resto é com você. Todo o código de c19stats.now.sh/ é de código aberto e está disponível em github.com/krasimir/co ... .
