--- title: 打造「个人跑步主页」将 Runtastic、Nike Run Club、Strava、Garmin、Keep 的跑步数据可视化 date: 2020-10-29T07:15:10Z modified: 2020-10-29T07:15:24Z permalink: "https://www.appinn.com/running-page/" type: post status: publish excerpt: "" categories: - 在线应用 tags: - 在线应用 - twp - 健身 - 可视化 - 跑步 featured_image: "https://www.appinn.com/wp-content/uploads/2020/10/running-personal-page.jpgo_.jpg" author: 青小蛙 timestamp: 2020-10-29T07:15:24Z --- Running Page 是一个可以将个人跑步数据可视化的小项目，你只需要跑步，以及做一些微小的操作，就可以获得一个如下图一样的，漂亮的个人跑步主页。目前支持多家数据源：Strava、Nike Run Club、Runtastic(Adidas Run)、Garmin、Garmin-cn、Keep。@Appinn ![](https://static2.appinn.com/images/202010/running-personal-page.jpg) 开发者 @[yihong0618](https://twitter.com/yihong06181/status/1299625973038501889) 说： > 个人跑步数据可视化。把代码优化了下，顺滑了一些，增加了点击排序小功能。之后想办法把教程写下，把代码变得 common 一些让多些感兴趣热爱跑步的程序员也用上。欢迎来玩 [https://yihong.run/running](https://t.co/chMxodtGxi?amp=1) ### 特性如下 1. GitHub Actions 管理自动同步跑步进程及自动生成新的页面 2. Gatsby 生成的静态网页，速度快 3. 支持 Vercel(推荐) 自动部署 4. React Hooks 5. Mapbox 进行地图展示 6. Nike 及 Runtastic(Adidas Run) 以及佳明（佳明中国）及Keep, 自动备份 gpx 数据，方便备份及上传到其它软件 并且放了一段录屏： 在这个**个人跑步主页**上呢，展示了你的总跑步旅程，以及每一年的统计，当然还有很酷的地图，以及每一次跑步信息。和…很多彩蛋。 比如每一年的跑步统计热力图，就像 GitHub 一样直观的看到在这一年中，哪一天跑步了，哪一天没跑步，以及…哪一天跑的很多 ![](https://static2.appinn.com/images/202010/2020-10-29-11-12-38.jpg) 还有一个更好玩的图，集中展示了你的跑步路线（超过10公里） ![](https://static2.appinn.com/images/202010/2020-10-29-11-15-34.jpg) 注意上面两张可视化效果图需要点击左侧的 **Total 跑步旅程** 部分，才会现实出来： ![](https://static2.appinn.com/images/202010/2020-10-29-11-20-01.jpg) 而如果点击的是某一个年度，那么看到的是该年里的每一次跑步数据： ![](https://static2.appinn.com/images/202010/2020-10-29-11-21-21.jpg) 那么问题来了，如何做到这些呢？ running\_page 项目在 [GitHub](https://github.com/yihong0618/running_page) 开源，并且提供了大致的安装流程，青小蛙理了一下，可以归纳为： 1. 安装 2. 删除测试数据 3. 下载跑步数据 4. 部署 5. 设置 GitHub Actions 这一部分牵扯很多技术问题，请移步 GitHub 页面详细阅读安装指南。 然后，就可以获得一个漂亮的个人跑步页面了，目前已经有这些示例： | Runner | page | App | | --- | --- | --- | | [shaonianche](https://github.com/shaonianche) | [https://run.duangfei.org](https://run.duangfei.org/) | Nike | | [yihong0618](https://github.com/yihong0618) | [https://yihong.run/running](https://yihong.run/running) | Nike | | [superleeyom](https://github.com/superleeyom) | [https://running.leeyom.top](https://running.leeyom.top/) | Keep | | [geekplux](https://github.com/geekplux) | [https://activities.geekplux.com](https://activities.geekplux.com/) | Nike | | [guanlan](https://github.com/guanlan) | [https://grun.vercel.app/](https://grun.vercel.app/) | Strava | | [tuzimoe](https://github.com/tuzimoe) | [https://run.tuzi.moe/](https://run.tuzi.moe/) | Nike | 所以，跑个步顺便学个编程，怎么样？ ## Topics **分类目录:** [在线应用](https://www.appinn.com/category/online-tools/?output_format=md) **标签:** [twp](https://www.appinn.com/tag/twp/?output_format=md), [健身](https://www.appinn.com/tag/%e5%81%a5%e8%ba%ab/?output_format=md), [可视化](https://www.appinn.com/tag/%e5%8f%af%e8%a7%86%e5%8c%96/?output_format=md), [跑步](https://www.appinn.com/tag/%e8%b7%91%e6%ad%a5/?output_format=md)