写在前面
本次给大家带来的是一个开源前端项目的分享，项目作者、GitHub 等信息展示在下面。写这篇文章的目的是给大家分享一个优雅酷炫的跑步数据统计页，向大家展示一下它是如何自动化地辅助我的跑步锻炼，同时分享一些 iOS 端可以配合跑步的软件。
- 项目作者：yihong
PS：关注 yihong 大佬很久了，大佬在 GitHub 记录的 blog 也对我很有启发，大家不妨关注一下大佬的 GitHub
- 项目地址：running_page GitHub
- 我的展示页代码仓库：running_page-2
- 我的跑步数据 展示页
本篇文章写给所有热爱跑步、想要将自己跑步数据整理收集起来的跑者。不论你有没有代码基础，我相信结合项目的文档和我的介绍，你应该可以很快的上手搭建你自己的 running_page。
如果你对这个内容感兴趣就接着往下看叭！
跑步的数据统计需求
跑步是我这半年来最为青睐的运动项目。跑步是一项门槛低、成本低的运动项目，我十分享受在完成了一天劳累的学习过后，吹着晚风沿着学校的环湖跑道跑几圈（由于我太菜了，到现在也最多跑 5 圈也就是 5KM）。
当然，漫无目的地瞎跑显然不那么吸引我，也不太能够给予我反馈来支撑我坚持跑步，所以我选择用手机 app 来记录我跑步的相关数据，以此来提高、校正我的跑步节奏等；与此同时，我也是一个喜欢捣腾手机 app 的人，每当我看到了一款新的跑步 app 我就忍不住去尝试。这种习惯导致我的跑步数据七零八落的，这一个月的数据在 Keep 上、下一个月的数据又在 Strava 上，很不舒服。
偶然之间，我发现了在一些跑步 app（如 Zepp）上可以以 GPX 格式导出自己的跑步数据，这就让我想到了是不是可以借用这些公开的接口来对自己的数据做一个统计。在 GitHub 和各大论坛进行了一番检索后，我找到了这个完全符合我需求的开源项目——running_page。
running_page 是一款跑步数据统计展示的网页，在 GitHub Action 的加持下可以实现对跑步数据的自动同步以及网页端的自动更新。通过 Mapbox 也可以将我们的跑步轨迹展示在网页中，十分酷炫！目前该项目已经支持了市面上绝大多数常用的跑步 app，如 Nike Run Club、Strava、Keep 等。
running_page 可以做什么
目前市面上已存的绝大部分跑步类app中都拥有数据统计、跑步轨迹展示等功能，但是他们存在的问题是这些 app 间的数据往往并不相通。虽然在部分 app 中我们可以通过导出 svg 的方式来手动给他们同步，但是这样的方式并不足够优雅。
running_page 恰好就解决了这样的痛点。它具有以下特点：
- running_page 支持绝大多数跑步类 app，可以作为数据汇总页收集整理你在各类 app 上的跑步数据
- running_page 采用 GitHub Action 管理自动同步跑步进程及自动生成新的页面
- running_page 支持 vercel 和 GitHub Page 的自动部署；当然你也可以把它部署在你的博客中
- running_page 采用 Mapbox 展示地图以及跑步轨迹、生成的静态网页速度快且足够酷炫；当然你也可以对前端部分进行修改，自定义你的跑步页
在数据统计部分，你可以看到以年为单位的跑步数据统计，包括你今年的总跑步历程、跑步次数、平均心率和配速等等，相信坚持跑步的你在看到了这些数据之后一定会成就感满满。你也可以将网页分享给你的家人、朋友，相信在有人监督、有人赞美的情况下，你一定能够持之以恒地坚持，让跑步成为你生活中不可或缺的一部分。
如何进行项目搭建
项目环境要求：
- python >= 3.6
- 12 <= node <= 14，
我本地的环境为：python 3.7.0、node 12.18.4，最后将静态网页搭建在 Vercel 上。想省事的朋友可以直接抄作业。
这部分我给大家分享两个文档，相信大家通过这两个文档就能够完成项目的搭建、Github Action的设置以及数据的上传同步。
这个博客图文并茂的将项目搭建的全过程展示给我们，不过由于该教程过于亲民，对于一些关键参数的解释不够详细。本着「知其然知其所以然」的态度，我建议大家结合博客多读读源码，结合作者在代码中的注释就能够理解项目中参数设置的作用等，这样日后我们对网页修改进行个性化设置的时候才能更加得心应手！
作者在 running_page 的 GitHub 仓库中设置了十分完整中英文文档，同时对于各种 app 的数据同步方法作者也做了详细的阐述，相信结合作者的文档你能够对整个项目有更加深刻的理解。
我的使用方法
在这个部分我将介绍一下我平日里用到的辅助跑步的设备、app 以及我是如何使用这些设备协同工作的。
我的设备：
- iPhone 12（由于我购买的手表不是 Pro 版本，所以没办法满足跑步时听歌的需求，所以我还是跑步时带着手机的）
- Amazfit GTR3（四颗卫星定位系统+心率检测）
- AirPods Pro（听歌设备，校园里不好意思外放但是跑步时没音乐怎么能行）
我的 app：
- Strava（借助 Strava 的开放接口来将跑步数据抓取到我的 running_page）
- Zepp（手表适配的 app，可以通过该 app 的第三方接口实现和 Strava 的数据同步）
在平日里，我一般是带着手机、手表和耳机去跑步。手表用于跑步轨迹的记录、跑步数据的记录以及心率检测提醒等，由于我跑步的一大需求是减脂，所以我需要通过手表的心率提醒功能来动态调控我的圈速等。
跑步时怎么能没有音乐呢？所以我不得不带着我的手机去跑步。这里算是我购买设备的一个失误，Amazfit GTR3 Pro 是拥有歌曲存储、蓝牙设备连接的功能的，当时要是买了 Pro 版本就能抛弃手机了（穷学生被预算支配的无奈）。
注意，由于 Strava 对大陆地区支持的问题，想要使用 Zepp 第三方接口来同步数据到 Strava 的话，必须使用海外的帐号登录 Zepp 并绑定手表（我是使用 Apple ID 注册登录并选择地区为香港，亲测用微信登陆的第三方接口中没有 Strava 的选项）。
不过这种方式带来的问题就是无法享受手表的门禁卡、NFC 交通卡等功能（对海外地区这些功能不支持），我也跟客服反映过这方面问题不过我觉得解决的希望不大。对于我而言，用 iPhone 当公交卡也不麻烦，所以我就抛弃了这些功能让手表好好的辅助我跑步数据记录。
通过这样的体系，在每次跑完步之后，我实现了数据由手表到 Zepp、Zepp 同步 Strava、Strava 抓取到网页并展示的工作数据流，且整个过程完全自动化，十分优雅！
总结
基于各大平台对于接口的开放，我们借助 python 爬取数据可以很轻松的实现各种数据的自动化收集展示，这些内容也有很多大佬制作并且开源供我们使用。我相信这些内容即便非计算机专业的朋友们也能够很快上手完成搭建，让他们更好的辅助我们的生活。
这也是技术不断发展的意义吧，我也愿意不断地去探索、用这些魔法般的技术让我的生活更加智能化、更加优雅，从而也更加的热爱我的生活！
第一次写有关技术的文章，由于该项目已经有完备的文档所以就没有在本文中写过多教程。我更多的希望通过这篇文章分享一个很大程度上便利我生活的项目，并且展示它在我生活中运转方式，希望这篇文章能够带给大家一些新意或是一些灵感。我也会尽我所能在日后由分享别人的项目转变为开发自己的项目并分享给少数派的大家！欢迎朋友们在评论区交流和分享你的想法~
