如何在 JavaScript 中构建 COVID-19 跟踪器

如何在 JavaScript 中构建 COVID-19 跟踪器插图亿华云

渴望一个新项目来磨练你的 JS 技能?试试这个使用 JavaScript 创建 COVID-19 跟踪器的教程。

正在寻找一个快速项目来练习您的 Web 开发技能?在整个新冠大流行期间,您可能已经看到了许多不同的 COVID 追踪器和图表——以下是如何以最少的努力制作自己的追踪器。

您将学习 JavaScript 中的一些有用技术,包括如何从 API 获取远程数据以及如何使用图表库来显示它。让我们开始吧。你将要建造什么

本指南将帮助演示使用 JavaScript 使用 API 的基础知识。您将学习如何从远程源获取数据。您还将看到如何使用图表库来显示获取的数据。

本文中使用的所有代码都可以在Github存储库中找到。

探索数据源

为了获得与 COVID 相关的最新数据,我们将使用disease.sh,它自称为“开放疾病数据 API”。

这个 API 非常棒,因为:

它有许多不同的数据源,每一个都提供略有不同的格式它有据可查,没有示例,但有很多关于每个disease.sh端点如何工作的详细信息它返回 JSON,这很容易在 JavaScript 中使用它完全开放且免费使用,无需身份验证

最后一点特别重要:许多 API 要求您通过复杂的 OpenAuth 过程,或者根本不适用于在浏览器中运行的 JavaScript。

在本教程中,我们将使用来自 disease.sh 的美国纽约时报数据。该端点包括大流行期间(自 2020 年 1 月 21 日起)的数据,格式易于使用。看看我们将使用的disease.sh 平台的一些数据:

如何在 JavaScript 中构建 COVID-19 跟踪器插图1亿华云

如果您习惯于处理 JSON,则可以毫无问题地阅读它。这是更易读的布局中的一小段摘录:

[{

"date":"2020-01-21",

"cases":1,

"deaths":0,

"updated":1643386814538

},{

"date":"2020-01-22",

"cases":1,

"deaths":0,

"updated":1643386814538

}]

API 返回一个简单的对象数组,每个对象代表一个带有日期、案例等的数据点。

设置 HTML

现在,我们将设置一些非常简单的骨架 HTML。最终,您需要包含一些外部资源,但这足以开始:

Covid Tracker

Covid cases, US

THE END
Copyright © 2024 亿华云