Create your own Covid-19 data tracker

数据

现在,网络上有数百个新冠疫情跟踪器。首先我想知道他们把数据放在了哪里。经过研究,很快确定了两个主要来源。我最初使用了其中的一个。那就是约翰·霍普金斯大学。他们在 GitHub上发布了一些有用的csv文件。但是,那里的数据每天仅更新一次,所以我开始寻找一些实时服务。我找到了 TheVirusTracker。我最终使用了他们的API。他们有每个国家的摘要,但还有时间表。这对我来说更有趣。我没有找到有关请求限制的任何信息,而且似乎没有任何限制信息。

结构

TheVirusTracker 支持 CORS 请求,因此可以将应用构建为完全在浏览器中工作的静态页面。但是,我走了另一条路。如上所述,我最初用的是霍普金斯大学的数据,该数据位于 GitHub上。所以我需要从那里拉取它。最可靠的方法是使用 GitHub 的 contents 端点。他们所有端点的速率限制为每小时 60 个请求,为了增加请求数量,需要使用个人访问 token。此类 token 不应被公开共享。所以我不得不写一些后端代码。

新冠疫情数据跟踪器

我的客户端代码正在向 Node.js 进程发出请求。该过程将会获取数据,然后对其进行规范化并返回。后来我更改了数据源,但出于以下三个原因决定保留这个处理流程:

  • 我有一个相当不错的用于标准化和缓存数据的层。几乎总是有需要转换数据的需求。无论如何,我都会有这样的代码,所以为什么不将其放在后端,让客户端去使用呢。远程 API 是公共的和免费的,因此,我不应对请求进行重新请求。为了提供高流量,我需要一个缓存层。解决此要求的最基本的方法是实现一个简单的内存缓存。没有服务器,这是不可能的。
  • 我已经花费时间编写了一个服务器,不想放弃这项工作。
  • 到目前为止,我的代码公开了三个端点。我想与其他开发人员共享这些内容,并让其他人使用规范化和缓存。

几个小时后,我的项目结构变为

新冠疫情数据跟踪器

前端

做这个项目的一个原因是提高我的 React 和 TypeScript 技能。我已经用这两种出色的技术创建了一些项目,并且出现了一种安装模式。在某个时候,我将必要的配置分组到一个名为 beginning 的程序包中(你可以在这里阅读更多信息 “Webpack/TypeScript/React starter kit as of 2020” )。因此,我创建了一个空文件夹并运行:

npx beginning && yarn

这就创建了一个带有 TypeScript 支持的简单 React 应用。

React 生态系统

React 应用本身并不是什么特别的东西。因为这是一个小项目,所以我不需要任何状态管理。一切都只是一个带有几个 hook 的 <App> 组件。

我用 recharts 构建的图表。使用了它的 <LineChart> 组件:

<LineChart width={900} height={400} data={graphData}>
  <XAxis dataKey="date" interval="preserveStartEnd" />
  <YAxis />
  <CartesianGrid />
  <Tooltip />
  <Legend formatter={(item, entry, idx) => data[idx as number].country} />
    <Line
      key={key}
      dot={false}
      type="monotone"
      dataKey={key}
      strokeWidth={3}
      stroke={color}
      activeDot={{ r: 5 }}
      legendType="circle"
    />
</LineChart>

结果如下:

用图表制作的新冠疫情数据跟踪图

大部分疫情跟踪器都无法按国家/地区过滤数据。通常,此类应用会渲染一大片数据,显然很难过滤信息。我希望自己的跟踪器具有这种过滤功能。我用了另一个流行的软件包 react-tag-autocomplete。它提供了用于管理标签的输入字段。这里的标签是国家名称。

export default function 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.splice(i, 1);
    setTags(t);
  }
  function handleAddition(tag: Tag) {
    setTags([...tags, tag]);
  }

  return (
    <>
      <ReactTags
        tags={tags}
        suggestions={suggestions}
        handleDelete={handleDelete}
        handleAddition={handleAddition}
        placeholder="Add a country"
      />
      {tags.length > 0 && (
        <Link href={`https://c19stats.now.sh?countries=${tags.map(t => t.name).join(',')}`}>
          Click here to see stats for {tags.map(t => t.name)}
        </Link>
      )}
    </>
  );
}

为了简化起见,我决定生成一个链接,而不是立即向 API 发出新请求。这样,用户将拥有一个可共享的 URL。

用react-tag-autocomplete制作的新冠疫情数据跟踪器

该应用的其余部分是几个支持样式的组件,一些输入内容和一个用于请求后端的小型数据层。所有代码都发布在了 github.com/krasimir/covid-19-stats 上。

后端

首先,我想说 Zeit 作为平台是如此的令人愉快。一切都进行得如此顺利。几分钟后,我的网页在 Web 上的工作由Node.js 后端驱动。

我从以下 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" }
  ]
}

public 文件夹包含一些静态文件,例如我的 index.html 和生成的 JavaScript bundle。 api 目录下的所有内容都是 lambda 函数。例如,在 https://c19stats.now.sh/api/countries 后面,我有

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(data));
}

module.exports = async function(req, res) {
  JSONResponse(res, countries);
};

为了访问 TheVirusTracker 的远程服务器,我使用了 superagent。这没有什么不寻常的地方,但能让我方便的粘贴我“惊人”的缓存逻辑:

const memCache = {
  lastUpdate: null,
  data: null,
};

const CACHE_TTL = 20;

function 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);
    }
  }
  // normalization of the data
}

我们首先检查是否存在缓存。 memCache 对象的 data 字段保存数据的规范化版本,因此可以直接将其返回(注意 Promise.resolve 调用)。其次,如果有缓存的数据,我们将检查自上次更新以来的分钟数。在这里,我们必须澄清文件的全局作用域中保留的所有内容都将保留。当然,如果我部署了新版本的 lambda 或出于某种原因重新启动了该进程,则缓存将被清除。但是我对此完全满意。这样做的目的是避免不断向远端发出请求。说实话,它的效果很好。 https://c19stats.now.sh/ 有时会花费更多时间来加载数据,但是结果页面刷新很快。

创建你自己的新冠疫情追踪器

你可以随时使用 https://c19stats.now.sh/ 上的某些端点。

或者,你可以直接使用 thevirustracker.com/api 的 API。不过如果需要缓存数据的话,则必须自己实现。其余的全由你自己决定。 https://c19stats.now.sh/ 的所有代码都是开源的,可在 github.com/krasimir/covid-19-stats 获得。 。

😷带上口罩,保证安全的编码! 😷