我的第二个原始 JavaScript 项目：使用 API、承诺、类、错误处理等等！

我为什么选择建立这个项目？🤔

我想在项目中实现什么？

时间收获

选择 API

工作流程

初步规划

编码基础：HTML、CSS 和 JavaScript

测试应用程序并征求反馈

出版

经验教训

我为什么选择建立这个项目？🤔

这个项目是我最喜欢的工具之一，它让我摆脱了教程的困境👹。我也希望这个项目能成为我向潜在雇主或合作伙伴展示 JavaScript 技能的平台。

👉您可以在这里查看已完成的实时项目。👈

我想在项目中实现什么？

当我决定开始这个项目时，我刚刚学习完Promises、API和错误处理。我想编写一个项目来实现所有这些知识，并将这个项目收录到我的作品集中，并不断磨练我的设计和编程技能🤓。我通常会努力最大化投入时间的回报，所以我倾向于做那些可以实现多种用途的项目。async...await

最后，我还想继续尝试从零开始构建网站的整个过程。就像我之前的项目一样，我想积累处理用户故事、功能定义、设计阶段以及测试和部署阶段的经验。再次强调，我也想了解整个操作过程需要多少工作量（和时间）。

时间收获

和我最近参与的所有其他项目和学习活动一样，我决定使用Clockify（目前还没有得到他们的赞助 😉）。我用这个应用来计算项目各个部分需要花费的时间，这样以后就能很好地估算出新项目需要花费多少时间和精力。

该项目从开始到结束的整个工作过程大约需要45.5 小时。

分配给 API 研究的时间略多于 2.5 小时，分配给设计的时间略多于 4.5 小时，分配给 HTML 和 CSS 的时间约为 14.5 小时（主要是 CSS......这是一个坎坷的旅程😅），其余时间分配给 JavaScript。

选择 API

起初，我并不知道这个项目的主题是什么，所以我开始研究一些免费的 API，想了解一下可以做什么。我发现了一个很棒的资源，那就是GitHub 上的公共 API 列表，里面展示了从动物、动漫到视频和天气等各种主题的 API。

我找到了几个感兴趣的网站，并决定使用其中一个提供 COVID-19 最新数据的。我设想，如果能够比较不同国家在 COVID-19 疫情中的表现，并了解他们的疫苗接种活动，那一定很有趣（更多详情请参阅“用户故事”）。另外，我们所在的州刚刚进入新一轮封锁😷，所以这个主题感觉很合适。

工作流程

我遵循与之前项目相同的工作流程：

初步规划

1. 定义用户故事
2. 根据用户故事定义功能
3. 创建流程图连接各个功能
4. 定义程序的架构

设计

1. 寻找灵感
2. 定义配色方案和排版
3. 制作网站的图形设计

代码

1. 构建 HTML 结构
2. 构建所需的 CSS，将图形设计实现为实际代码
3. 构建 JavaScript 代码来实现初始规划期间定义的功能

审查和部署

1. 测试浏览器兼容性
2. 测试响应能力
3. 验证 HTML 和 CSS 代码
4. 部署项目

初步规划

这个项目的初步规划比我之前的项目要复杂一些，特别是因为它有许多活动部分，例如 API、元素的创建和删除以及需要“动态”更新的计算🪰。

用户故事

我首先将自己置于用户的立场，因此，我可以写出以下用户故事：

• 作为用户，我希望能够获取有关我国的以下 COVID-19 信息：
  • 确诊病例
  • 已治愈病例
  • 死亡人数
  • 接种疫苗
  • 部分接种疫苗的人口
  • 已完全接种疫苗的人口
• 作为用户，我希望能够添加其他国家/地区，以便比较它们之间的 COVID-19 数据。
• 作为用户，我希望能够删除国家，以便添加新的国家。

定义特征

根据之前定义的用户故事，我确定了 COVID-19 仪表盘应用将要实现的功能。此外，我还添加了一些实用功能，以提升用户体验。

• 获取用户的区域设置信息并呈现用户所在国家/地区的 COVID-19 信息。
• 提供一个搜索框，其中包含预定义的国家/地区列表，用于搜索 COVID-19 数据。
• 比较最多 4 个国家。
• 为用户提供单独或批量删除比较国家的可能性。
• 为用户提供更改比较参考国家的可能性。
• 提供美观的背景，同时也允许用户停用它，这样它就不会干扰所有将显示的信息。
• 使应用程序具有响应能力。

视觉化：制作流程图

由于应用程序相对复杂，我确实想制作一个流程图，以便清楚地了解用户如何与页面交互。

在看板上定义任务

与我之前的项目一样，我决定使用看板框架来处理已定义的功能并开始着手处理它们。这次，我使用了Notion而不是ClickUp，以测试我使用 Notion 的舒适度。不得不说，我更喜欢使用 ClickUp，因为它在这类工作中拥有更强大的功能 🤔。同样，我也可以尝试Asana、Trello或GitHub Projects。我认为，只要有看板（或者任何其他类似的框架），工具本身就没那么重要。

在板中，我包含了之前定义的功能、流程图上创建的项目以及主要的项目工作流元素。

我首先输入所有任务，并将它们分配到“未开始”列。在项目期间，看板非常有用，可以跟踪需要完成的任务。以下是项目期间看板的快照：

设计

寻找灵感

在这个项目中，我知道我想在卡片上展示信息，所以我浏览了互联网，看看专业设计师是如何在作品中实现卡片的。在寻找了不少设计方案后，我决定设计一张卡片，顶部是国旗，下方是新冠肺炎疫情相关信息，底部是疫苗接种信息。

定义配色方案和字体

在定义颜色时，我尽量避免使用过于强烈或鲜艳的颜色，因为用户需要清晰轻松地读取数字。在Coolors这个很棒的网站上尝试了多种不同的组合后，最终选择了这个：🥇：

针对桌面和移动设备进行设计

工作流程的下一步是构建设计，我再次使用了Figma。我尝试了🧪很长时间，测试了不同的卡片形状和尺寸，直到找到一个我认为合适的。我还从调色板以及桌面版和移动版的设计中选取了颜色。

您可以在此处仔细查看此设计。

编码基础：HTML、CSS 和 JavaScript

构建这个项目的 HTML 代码并不太难。index.html文档就像一个容器，卡片将使用 JavaScript 代码呈现在上面。

您可以在此处仔细查看该项目的源代码。

CSS 再次疯狂

尽管设计看起来很简单，但我还是花了相当大的精力将图形设计转换为足够接近的 CSS 样式。

我尝试了backdrop-filterCSS 属性，但由于支持问题，不得不为 Chrome 以外的浏览器创建替代方案。不幸的是，我发现即使是 Chrome，在应用于backdrop-filter大图像（例如我用作背景的图像）时也会出现一些奇怪的闪烁（或伪影），所以我放弃了使用该属性的想法🤦‍♂️。最初我想使用它是因为使用该filter属性进行简单的模糊处理会在图像上留下白色的“边框”。最终我还是使用了filter它，并应用了轮廓来补偿白色边框。最终，用户几乎不会注意到白色边框的存在。

全力使用 JavaScript

当轮到处理JavaScript时，我首先测试 API 的工作方式以及它们返回的数据是什么样的。

我实现了一个 API ( https://geocode.xyz/ )，用于通过反向地理编码获取用户的国家名称。一旦获取到这些数据（我async…await之前就用过），我就利用该国家的名称触发一个新的 API 请求 ( https://restcountries.eu/ )，以获取该国的国旗。

利用第一次 API 调用的数据或者用户输入的国家名称，我触发了两个 API 请求（https://covid-api.mmediagroup.fr）来获取该国的 COVID-19 数据和该国的疫苗接种数据。

我使用提供 COVID-19 数据的 API 中的数据来构建可获取信息的国家/地区列表，以避免在请求 API 不支持的国家/地区数据时出现错误🤓。

我使用了几个async..await函数来实现所有的 API 请求，还使用了一些“旋转器”来让用户知道网站正在获取数据，从而改善用户体验。

我还利用这些async…await功能来处理 API 可能出现的任何错误，并实现了一个消息系统来将这些错误消息呈现给用户。

JavaScript 架构

在做这个项目的时候，我完全不懂MVC或 JavaScript 模块，所以我把所有代码都压缩到了一个文件中。我不会重构这段代码，因为我认为它只是我当时知识储备的一个缩影。但如果我现在用现在的知识重新构建它，我会从一开始就实现 MVC。

JavaScript 架构很简单，有一个负责为每个国家构建卡片的类，以及一组处理与用户不同交互的函数。

测试应用程序并征求反馈

和我之前的项目一样，在构建过程中，我不断测试应用程序的运行情况。这促使我多次修改 HTML 和 CSS 代码。

我请朋友和家人测试了这款应用，他们发现用于获取用户国家/地区的 API 出现了各种各样的问题。我想换一个更可靠的 API，但一直找不到。

出版

与往常一样，我使用 Git 来跟踪项目中的变化并将其发布在 GitHub 上，以便与其他人分享🕺。

由于该项目的实验性质，我使用GitHub 页面来部署和发布项目。如果我选​​择的 API 更可靠，我也可以使用Netlify或我自己的托管服务。

经验教训

一开始，这个项目看起来很简单，但很快就变得复杂了，特别是因为我要处理三个不同的 API（还有几个最终不起作用的 API）。

我在 HTML 上没花太多时间，但 CSS 又一次变得难上加难了😅。感谢这些挑战，我学习了更多 CSS 技能，也学会了如何更好地调试它。

关于 JavaScript，我本来可以从一开始就实现 MVC，所以我会在下一个项目中这么做。正如我之前所说，我不想重构这个项目，而是把它作为我当时技能的见证。

API 在大多数情况下都是可靠的🤭。我确信付费 API 的性能会更好，所以如果将来我需要在更严肃的项目中使用它们，我会深入研究哪种 API 最适合这项工作。

这个项目仍有改进空间，但我不得不在某个时候决定停止。总的来说，我认为它运行正常。

与往常一样，我愿意接受您对本文或项目本身的任何建议。