Ahora hay cientos de nuevos rastreadores de epidemias de corona en Internet. Primero quiero saber dónde ponen los datos. Después de la investigación, se identificaron rápidamente dos fuentes principales. Inicialmente usé uno de ellos. Esa es la Universidad Johns Hopkins. Publicaron algunos archivos csv útiles en GitHub. Sin embargo, los datos solo se actualizan una vez al día, así que comencé a buscar algunos servicios en tiempo real. Encontré TheVirusTracker. Terminé usando su API. Tienen un resumen de cada país, pero también tienen un horario. Esto es más interesante para mí. No encontré ninguna información sobre los límites de solicitud, y parece que no hay información de límite.
Estructura
TheVirusTracker admite solicitudes CORS, por lo que la aplicación se puede construir como una página estática que funciona completamente en el navegador. Sin embargo, fui por el otro lado. Como se mencionó anteriormente, originalmente usé datos de la Universidad Hopkins, que se encuentra en GitHub. Entonces necesito sacarlo de allí. El método más confiable es usar el punto final de contenido de GitHub. La tasa de todos sus puntos finales está limitada a 60 solicitudes por hora, para aumentar el número de solicitudes, debe usar un token de acceso personal. Tales tokens no deben compartirse públicamente. Así que tuve que escribir un código de fondo.
Mi código de cliente está haciendo una solicitud al proceso Node.js. El proceso obtendrá los datos, luego los normalizará y volverá. Más tarde, cambié la fuente de datos, pero decidí mantener este proceso por tres razones:
Tengo una capa bastante buena para estandarizar y almacenar en caché los datos. Casi siempre existe la necesidad de convertir datos. En cualquier caso, tendré este código, así que ¿por qué no ponerlo en el back-end y dejar que el cliente lo use? La API remota es pública y gratuita, por lo que no debería volver a solicitar la solicitud. Para proporcionar mucho tráfico, necesito una capa de caché. La forma más básica de resolver este requisito es implementar una memoria caché simple. Sin un servidor, esto es imposible.
He pasado tiempo escribiendo un servidor y no quiero renunciar a este trabajo.
Hasta ahora, mi código expone tres puntos finales. Quiero compartir este contenido con otros desarrolladores y dejar que otros usen la normalización y el almacenamiento en caché.
Después de unas horas, la estructura de mi proyecto se convirtió en
Frontend
Una razón para hacer este proyecto es mejorar mis habilidades de React y TypeScript. He creado algunos proyectos con estas dos excelentes técnicas, y ha surgido un modo de instalación. En algún momento, agrupé la configuración necesaria en un paquete llamado inicio (puede leer más sobre "Paquete de inicio Webpack / TypeScript / React a partir de 2020" aquí). Por lo tanto, creé una carpeta vacía y ejecuté:
npx begin && yarn.
Copie el código. Esto crea una aplicación React simple con soporte TypeScript.
La
aplicación React en el ecosistema React en sí no es nada especial. Debido a que este es un proyecto pequeño, no necesito ninguna administración estatal. Todo es solo un componente con varios ganchos.
Yo uso gráficos creados por recharts. Usó sus componentes:
La mayoría de los rastreadores de brotes no pueden filtrar datos por país. Por lo general, estas aplicaciones generan una gran cantidad de datos, lo que obviamente es difícil de filtrar información. Quiero que mi rastreador tenga esta función de filtrado. Usé react-tag-autocomplete, otro paquete de software popular. Proporciona campos de entrada para administrar etiquetas. La etiqueta aquí es el nombre del país.
Exportar la función predeterminada Generador ({países, datos}: BuilderProps) {
const [etiquetas, setTags] = useState <Etiqueta []> (getTags (países, datos));
const [sugerencias, setSuggestions] = useState (getSuggestions (países)) ;
función handleDelete (i: número) {
const t = tags.slice (0);
t.splice (i, 1);
setTags (t);
}
function handleAddition (etiqueta: etiqueta) {
setTags ([… etiquetas, etiqueta]);
}
return (
<>
{tags.length> 0 && (
<Link href = { https://c19stats.now.sh?countries=${tags.map(t => t.name).join(',')}}>
Haga clic aquí para ver las estadísticas de {tags.map (t => t.name)}
)}
</>
);
}
Copie el código por simplicidad En aras de la claridad, decidí generar un enlace en lugar de realizar inmediatamente una nueva solicitud a la API. De esta manera, el usuario tendrá una URL para compartir.
El resto de la aplicación son algunos componentes con estilo habilitado, algunos contenidos de entrada y una pequeña capa de datos para solicitar el backend. Todo el código se publica en github.com/krasimir/co ...
Backend
Primero, quiero decir que Zeit es tan agradable como plataforma. Todo salió muy bien. Después de unos minutos, el trabajo de mi página web en la web es impulsado por el backend de Node.js.
Comienzo con el siguiente archivo now.json:
{
“versión”: 2,
“compilaciones”: [
{“src”: “public / . ”, “Use”: “@ now / static”},
{“src”: “ api / .js ",“ use ”:“ @ now / node ”}
],
“ routes ”: [
{“ src ”:“ / api / países ”,“ dest ”:“ /api/countries.js ”},
{ "del src": "/ API", "destino": "/api/index.js"},
{ "del src": "(/. )", "destino": "/ / $ 1 pública."}
]
}
copia La carpeta pública de código contiene algunos archivos estáticos, como mi index.html y el paquete JavaScript generado. Todo en el directorio api es una función lambda. Por ejemplo, después de c19stats.now.sh/api/countri ..., tengo
países const = require ('./ países.json')
función JSONResponse (res, data, status = 200) {
res.setHeader ('Content-Type', 'application / json');
res.setHeader ('Access-Control-Allow-Origin', '*');
res.statusCode = estado;
res.end (JSON.stringify (datos));
}
module.exports = función asíncrona (req, res) {
JSONResponse (res, países);
};
Copie el código Para acceder al servidor remoto de TheVirusTracker, utilicé superagent. Esto no es nada inusual, pero me permite pegar fácilmente mi lógica de caché "sorprendente":
const memCache = {
lastUpdate: null,
data: null,
};
const CACHE_TTL = 20;
función 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);
}
}
// normalización de los datos
}
Código de copia Primero verificamos si hay un caché. El campo de datos del objeto memCache contiene la versión normalizada de los datos, por lo que puede devolverse directamente (tenga en cuenta la llamada Promise.resolve). En segundo lugar, si hay datos en caché, verificaremos la cantidad de minutos desde la última actualización. Aquí, debemos aclarar que todo el contenido retenido en el alcance global del archivo será retenido. Por supuesto, si implemento una nueva versión de lambda o reinicio el proceso por algún motivo, se borrará la memoria caché. Pero estoy completamente satisfecho con esto. El propósito de esto es evitar el envío continuo de solicitudes al otro extremo. Para ser honesto, funciona bien. c19stats.now.sh/ a veces lleva más tiempo cargar los datos, pero la página de resultados se actualiza rápidamente.
Cree su propio nuevo rastreador de brotes de corona
Siempre puede usar ciertos puntos finales en c19stats.now.sh/.
¿Obtener datos para países / regiones específicos / api? Países = EE. UU., Italia, Noruega
Obtener datos
para todos los países / regiones- / api? Países = todosObtener lista de todos los países / regiones
O bien, puede usar directamente la API de thevirustracker.com/api. Pero si necesita almacenar en caché los datos, debe implementarlos usted mismo. El resto depende de ti. Todo el código de c19stats.now.sh/ es de código abierto y está disponible en github.com/krasimir/co ... .
