愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者流的话。能做事的做事，能发声的发声，有一分热，发一份光，就令萤火虫一般，也可以在黑暗里发一点光，不必等候炬火。此后如竟没有炬火，我便是唯一的光。
上面这个网站就是我们发布的疫情地图，我是这个项目的开发者。开发时忙到飞起，发布后狠狠休息了几天，今天终于缓过来，决定把这一段难忘经历好好写一写。
结缘公益
今天是2020年4月9日，距离我们发布全球疫情地图已经过去了3周。昨天凌晨，武汉解封，这意味着国内疫情战争的胜利，虽然防范仍然不能松懈，但是紧张的疫情终于告一段落！与国内形成鲜明对比的，是欧美各国日益严峻的 COVID-19 感染和死亡情况。这是今天的全球数据：美国以40多万确诊数高居第一，中国已经降到第六。
而3个月前，1月23日，武汉宣布封城。微博，公众号，b站，百度等各大社交、新闻媒体都密集地推送着新冠肺炎的新闻、事态、故事、和求助。
1月27日我在知乎发表了一篇「《新型冠状病毒肺炎预防手册》电子书」的文章，把有幸从湘雅医学院老师那获取到的一份从学术角度分析的实用科普手册，分享了出去，短时间内就有几千人阅读。在原帖的基础上，我不时地把我收集到的小tip更新上去，希望为新冠肺炎防护知识的普及作出一点微小的贡献。
本以为，我对抗击疫情的能做的事就仅限于此了。
直到，1月30日，我在浏览知乎的时候，无意看到一篇关于新冠疫情志愿者组织的文章，通过里面贴出的二维码，我加入了其中一个组织——nCoV疫情地图项目组。
负责开发
很快有相关人找到了我。简单沟通后，我开始着手开发。
用了不到2天时间，我搭建好框架并做了一版仿丁香园的 Demo，发了过去。
2月1日，组织方表示，将在我的代码基础上进行开发，我也顺理成章成为了这个志愿者项目的前端负责人。
之后，不断有新的志愿者加入进来，群成员不断壮大，我同时担起了分配任务的职责。还好我搭的框架够健壮，分配的任务都可以很有逻辑地在框架中找到位置。我们的代码开源托管在 GitHub 上，为了在 GitHub 上更好地多人协作，我不得不马上制定了 GitHub 协作规范，约定分支管理、pr 和代码审核流程。事实证明效果非常好，大家开始有意识地通过 pr 来贡献代码。
一切都进展的如火如荼，一片欣欣向荣的景象。
然而这场顺利的场景没有持续多久。
首先是年假结束，参与开发的人陆续开始上班，逐渐退出。然后是我们在2月中旬遭受了一个非常大的组织动荡，让前一秒还在贡献代码的我们有些措手不及。。。由于影响较大，志愿者们的积极性受到了很大的打击，而此时，我们的项目还只开发了不到三分之一。。。
舍弃旧版
消沉了几天，不忍看到项目就此夭折，我决定尝试独自奋战，完成它。
我做了这些事情：
1. 精简需求
首先，我砍掉了之前产品组提出的需求中的非核心的功能，将业务聚焦到实时地图和数据播放着两个核心功能上。
2. 重新设计交互
然后，我舍弃了之前设计组提供的半成品设计稿，以自己的设计经验（我曾是一名设计师），重新设计了交互和视觉。
最大化地图的视野，突出重点信息，尽可能地做到简洁和体验友好。
地图控制栏：
疫情时间轴，可以自动播放、手动上一天下一天，也可以直接点击查看某一天的数据：
全球 COVID-19 病例累计dashboard：
全球感染国家的确诊、死亡、治愈统计表，可以按不同维度排序，点击国家地图联动定位到该区域：
3. 重构代码
之前由于人多手杂，又追求快，地图业务逻辑代码交织耦和在一块，非常不利于复用、扩展和维护。于是我花了一些时间，重构了一把。
4. 增强功能
在开发的过程中我随手给网站加上了一些增强的功能：
支持换肤
支持多语言
支持移动端友好
这些做完，几乎是推翻了所有原有的功能和设计，完成了一版全新的疫情地图！
现在，距离一个可用产品，还差数据接口和部署两步。
搞定后台
疫情数据和数据接口本应由后端开发组提供，但是始终没有动静，估计是无法等到了。不等了，我自己来吧！
1. 解决数据问题
造数据库已来不及，只能爬数据。通过对丁香园、百度疫情地图、新浪等公开的网站的数据结构分析，锁定MapBox官网上的疫情地图网页，上面的数据非常符合我的需求。
研究了它的网站接口后，我用 nodejs + express 成功爬取到了我需要的疫情数据。
随着将其封装为数据API接口、在 nodejs 服务端配置 cors 解决完跨域的问题，数据接口服务搞定！
2.解决部署
在自己购买的阿里云服务器上，我将80端口交给了 nginx ，便于以后做集群和负载均衡。
用 nodejs + express + pm2 部署了好了一个支持 history 前端路由的静态资源服务器。
然后通过 nginx 将两个服务（数据 api 接口服务器和网站静态资源服务器）进行反向代理。
最后将前端打包后的资源文件往public目录一放。
部署也搞定了！
3.性能优化
目前，打开网站，基本上5秒内首屏即可加载完毕（当然，还需要继续优化），这个速度已经是我做了性能优化的结果，有兴趣可以看我之前的这篇文章「一次网上优化全记录」，详细记录了我将首屏加载由1分钟优化到5秒的过程。
发布
做完所有我认为可以做的事情之后，3月16日，我将在自己的服务器部署的最终版 coronovirus-map 地址，发给了组织方(当时来不及买域名，给的裸的ip地址)。
组织群里惊喜不已，沉寂好久的群也开始变得热闹起来，接下来的事情，我就轻松了。负责宣传的志愿者们张罗着在组织的新公众号「地图学人」上发表了文章：「关于疫情，这是独一份的热图——nCoV疫情地图（PC端）发布」，隆重地官宣了一番。
当天，地图就有美国、加拿大、澳大利亚等境外的用户在访问了。
另外，我居然收到了加入的另一个自愿者组织——武汉2020发送的公益志愿者证书，我在那个组织只是冒泡咨询，远没有在这个组织做的事情多，然而却发给了我这么有仪式感的证书，感觉逼格比我们高得多啊🤪
3月19日，由组织发起人的推荐，我接受了中国日报 China Daily 新闻记者的采访。
4月1日，ChinaDaily 在 Youth 板块刊登了对我们的报道。
写在后面
covid-19 疫情在世界范围内还没有结束，通过这份地图，我们可以很直观地看到整个疫情在世界范围内一路演变的历程。美国和欧洲感染率一度以指数级在增长。希望疫苗能早日研发出来。在那之前，这份地图将持续承担展示全球疫情态势的任务，为用户提供疫情数据可视化的服务。
感谢当初没有无视那些二维码的自己，才能有这样一个契机，用自己擅长的的专业能力为抗击疫情做了微小的贡献。
感谢这些自愿者组织的发起人们，让我们一群互不相识的人聚在了一起，用善意为疫情做了有意义的事情（虽然过程中也有波折）。
一直以来我都很想尝试做一次完整的全栈，说起来，也要感谢这次公益项目，给了我实践的机会。
不要小看自己所做的事，哪怕是非常微小的帮助，也是很有价值的。
很喜欢鲁迅先生在他的杂文集《热风》中说过的一段话：
愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者流的话。能做事的做事，能发声的发声，有一分热，发一份光，就令萤火虫一般，也可以在黑暗里发一点光，不必等候炬火。此后如竟没有炬火，我便是唯一的光。
愿这个世界越来越好！
—
附上我们的疫情地图地址：
http://map.champyin.com/situation
文章同时发表于公众号「前端手札」，喜欢的话可以关注一下哦。
