打造「个人跑步主页」将 Runtastic、Nike Run Club、Strava、Garmin、Keep 的跑步数据可视化

Running Page 是一个可以将个人跑步数据可视化的小项目,你只需要跑步,以及做一些微小的操作,就可以获得一个如下图一样的,漂亮的个人跑步主页。目前支持多家数据源:Strava、Nike Run Club、Runtastic(Adidas Run)、Garmin、Garmin-cn、Keep。@Appinn

打造「个人跑步主页」将 Runtastic、Nike Run Club、Strava、Garmin、Keep 的跑步数据可视化 1

开发者 @yihong0618 说:

个人跑步数据可视化。把代码优化了下,顺滑了一些,增加了点击排序小功能。之后想办法把教程写下,把代码变得 common 一些让多些感兴趣热爱跑步的程序员也用上。欢迎来玩 https://yihong.run/running

特性如下

  1. GitHub Actions 管理自动同步跑步进程及自动生成新的页面
  2. Gatsby 生成的静态网页,速度快
  3. 支持 Vercel(推荐) 自动部署
  4. React Hooks
  5. Mapbox 进行地图展示
  6. Nike 及 Runtastic(Adidas Run) 以及佳明(佳明中国)及Keep, 自动备份 gpx 数据,方便备份及上传到其它软件

并且放了一段录屏:

在这个个人跑步主页上呢,展示了你的总跑步旅程,以及每一年的统计,当然还有很酷的地图,以及每一次跑步信息。和…很多彩蛋。

比如每一年的跑步统计热力图,就像 GitHub 一样直观的看到在这一年中,哪一天跑步了,哪一天没跑步,以及…哪一天跑的很多

打造「个人跑步主页」将 Runtastic、Nike Run Club、Strava、Garmin、Keep 的跑步数据可视化 2

还有一个更好玩的图,集中展示了你的跑步路线(超过10公里)

打造「个人跑步主页」将 Runtastic、Nike Run Club、Strava、Garmin、Keep 的跑步数据可视化 3

注意上面两张可视化效果图需要点击左侧的 Total 跑步旅程 部分,才会现实出来:

打造「个人跑步主页」将 Runtastic、Nike Run Club、Strava、Garmin、Keep 的跑步数据可视化 4

而如果点击的是某一个年度,那么看到的是该年里的每一次跑步数据:

打造「个人跑步主页」将 Runtastic、Nike Run Club、Strava、Garmin、Keep 的跑步数据可视化 5

那么问题来了,如何做到这些呢?

running_page 项目在 GitHub 开源,并且提供了大致的安装流程,青小蛙理了一下,可以归纳为:

  1. 安装
  2. 删除测试数据
  3. 下载跑步数据
  4. 部署
  5. 设置 GitHub Actions

这一部分牵扯很多技术问题,请移步 GitHub 页面详细阅读安装指南。

然后,就可以获得一个漂亮的个人跑步页面了,目前已经有这些示例:

Runner page App
shaonianche https://run.duangfei.org Nike
yihong0618 https://yihong.run/running Nike
superleeyom https://running.leeyom.top Keep
geekplux https://activities.geekplux.com Nike
guanlan https://grun.vercel.app/ Strava
tuzimoe https://run.tuzi.moe/ Nike

所以,跑个步顺便学个编程,怎么样?


原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/167826.html

(0)
上一篇 2021年9月22日
下一篇 2021年9月22日

相关推荐

发表回复

登录后才能评论