打造个人跑步主页

简体中文 | English

GIF 展示

大家的跑步主页展示

Runner	page	App
shaonianche	https://run.duangfei.org	Nike
yihong0618	https://yihong.run/running	Nike
superleeyom	https://running.leeyom.top	Nike
geekplux	https://activities.geekplux.com	Nike
guanlan	https://grun.vercel.app	Strava
tuzimoe	https://run.tuzi.moe	Nike
ben_29	https://running.ben29.xyz	Strava
kcllf	https://running-tau.vercel.app	Garmin-cn
mq	https://running-iota.vercel.app	Keep
zhaohongxuan	https://running-page-psi.vercel.app	Keep
yvetterowe	https://run.haoluo.io	Strava
love-exercise	https://run.kai666666.top/	Keep
zstone12	https://running-page.zstone12.vercel.app	Keep
Lax	https://running-lax.vercel.app	Keep
lusuzi	https://running.lusuzi.vercel.app	Nike
wh1994	https://run4life.fun	Garmin

它是怎么工作的

特性

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

因为数据存在 gpx 和 data.db 中，理论上支持几个软件一起，你可以把之前各类 app 的数据都同步到这里（建议本地同步，之后 actions 选择正在用的 app）

缩放地图彩蛋

支持

Strava
Nike Run Club
Runtastic(Adidas Run)
Garmin
Garmin-cn
Keep
悦跑圈 (因悦跑圈限制单个设备原因，无法自动化)
咕咚 (因咕咚限制单个设备原因，无法自动化)
GPX
Nike+Strava(Using NRC Run, Strava backup data)

下载

git clone https://github.com/yihong0618/running_page.git

安装及测试

pip3 install -r requirements.txt
yarn install
yarn develop

访问 http://localhost:8000/ 查看

替换 `src/utils/const.js` 文件中的 Mapbox token

建议有能力的同学把代码中的 Mapbox token 自己的 Mapbox token

const MAPBOX_TOKEN = 'pk.eyJ1IjoieWlob25nMDYxOCIsImEiOiJja2J3M28xbG4wYzl0MzJxZm0ya2Fua2p2In0.PNKfkeQwYuyGOTT_x9BJ4Q';

如果你是海外用户请更改 `IS_CHINESE = false` in `src/utils/const.js`

一些个性化选项

左上角的头像

修改 src/utils/const.js 里的 export const AVATAR = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTtc69JxHNcmN1ETpMUX4dozAgAN6iPjWalQ&usqp=CAU'; 换成你想要的图片的链接。

右上角默认的 Blog 和 About

修改 src/utils/const.js 里的 NAVS，换成你想要的链接，如：

export const NAVS = [
  { text: 'Blog', link: 'https://yihong.run/running' },
  { text: 'About', link: 'https://github.com/yihong0618/running_page/blob/master/README-CN.md' },
];

你也可以自行添加多个链接，照葫芦画瓢即可。

页面标题与网站链接

在仓库目录下找到 gatsby-config.js，找到以下内容并修改成你自己想要的。

siteMetadata: {
  title: 'Running page',
  siteUrl: 'https://yihong.run',
  description: 'Personal site and blog',
},

下载您的 Runtastic(Adidas Run)/Nike Run Club/Strava/Garmin/Garmin-cn/Keep 数据, 别忘了在 `total` 页面生成可视化 SVG.

GPX

Make your GPX data

把其它软件生成的 gpx files 拷贝到 GPX_OUT 之后运行

python3(python) scripts/gpx_sync.py

Keep

获取您的 Keep 数据

确保自己的账号能用手机号 + 密码登陆 (不要忘记添加 secret 和更改自己的账号，在 GitHub Actions 中), 注: 海外手机号需要换成国内 +86 的手机号

python3(python) scripts/keep_sync.py ${your mobile} ${your password}

示例：

python3(python) scripts/keep_sync.py 13333xxxx example

注：我增加了 keep 可以导出 gpx 功能（因 keep 的原因，距离和速度会有一定缺失）, 执行如下命令，导出的 gpx 会加入到 GPX_OUT 中，方便上传到其它软件

python3(python) scripts/keep_sync.py ${your mobile} ${your password} --with-gpx

示例：

python3(python) scripts/keep_sync.py 13333xxxx example --with-gpx

JoyRun（悦跑圈）

获取您的悦跑圈数据

获取登陆验证码：

确保自己的账号能用手机号 + 验证码登陆

点击获取验证码, 注： 不要在手机输入验证码，拿到验证码就好，用这个验证码放到下方命令中

python3(python) scripts/joyrun_sync.py ${your mobile} ${your 验证码}

示例：

python3(python) scripts/joyrun_sync.py 13333xxxx xxxx

注：我增加了 joyrun 可以导出 gpx 功能, 执行如下命令，导出的 gpx 会加入到 GPX_OUT 中，方便上传到其它软件

python3(python) scripts/joyrun_sync.py ${your mobile} ${your 验证码} --with-gpx

示例：

python3(python) scripts/joyrun_sync.py 13333xxxx example --with-gpx

注：因为验证码有过期时间，我增加了 cookie uid sid 登陆的方式， uid 及 sid 在您登陆过程中会在控制台打印出来

示例：

python3(python) scripts/joyrun_sync.py 1393xx30xxxx 97e5fe4997d20f9b1007xxxxx --from-uid-sid --with-gpx

Codoon（咕咚）

获取您的咕咚数据

python3(python) scripts/codoon_sync.py ${your mobile or email} ${your password}

示例：

python3(python) scripts/codoon_sync.py 13333xxxx xxxx

注：我增加了 Codoon 可以导出 gpx 功能, 执行如下命令，导出的 gpx 会加入到 GPX_OUT 中，方便上传到其它软件

python3(python) scripts/codoon_sync.py ${your mobile or email} ${your password} --with-gpx

示例：

python3(python) scripts/codoon_sync.py 13333xxxx xxxx --with-gpx

注：因为登录token有过期时间限制，我增加了 refresh_token&user_id 登陆的方式， refresh_token 及 user_id 在您登陆过程中会在控制台打印出来

示例：

python3(python) scripts/codoon_sync.py 54bxxxxxxx fefxxxxx-xxxx-xxxx --from-auth-token

Garmin

获取您的 Garmin 数据

python3(python) scripts/garmin_sync.py ${your email} ${your password}

示例：

python3(python) scripts/garmin_sync.py example@gmail.com example

Garmin-CN (大陆用户请用这个)

获取您的 Garmin-CN 数据

python3(python) scripts/garmin_sync.py ${your email} ${your password} --is-cn

示例：

python3(python) scripts/garmin_sync.py example@gmail.com example --is-cn

Runtastic(Adidas Run)

获取您的 Runtastic(Adidas Run) 数据

python3(python) scripts/runtastic_sync.py ${your email} ${your password}

示例：

python3(python) scripts/runtastic_sync.py example@gmail.com example

Nike Run Club

获取 Nike Run Club 数据

获取 Nike 的 refresh_token

登录 Nike 官网
In Developer -> Application-> Storage -> https:unite.nike.com 中找到 refresh_token

3. 在项目根目录下执行:

python3(python) scripts/nike_sync.py ${nike refresh_token}

示例：

python3(python) scripts/nike_sync.py eyJhbGciThiMTItNGIw******

Strava

获取 Strava 数据

注册/登陆 Strava 账号
登陆成功后打开 Strava Developers -> Create & Manage Your App
创建 My API Application
输入下列信息：创建成功：
使用以下链接请求所有权限
将 ${your_id} 替换为 My API Application 中的 Client ID 后访问完整链接

https://www.strava.com/oauth/authorize?client_id=${your_id}&response_type=code&redirect_uri=http://localhost/exchange_token&approval_prompt=force&scope=read_all,profile:read_all,activity:read_all,profile:write,activity:write

5. 提取授权后返回链接中的 code 值
例如：

http://localhost/exchange_token?state=&code=1dab37edd9970971fb502c9efdd087f4f3471e6e&scope=read,activity:write,activity:read_all,profile:write,profile:read_all,read_all

code 数值为：

1dab37edd9970971fb502c9efdd087f4f3471e6

6. 使用 Client_id、Client_secret、Code 请求 refresch_token
在 终端/iTerm 中执行：

curl -X POST https://www.strava.com/oauth/token \
-F client_id=${Your Client ID} \
-F client_secret=${Your Client Secret} \
-F code=${Your Code} \
-F grant_type=authorization_code

示例：

curl -X POST https://www.strava.com/oauth/token \
-F client_id=12345 \
-F client_secret=b21******d0bfb377998ed1ac3b0 \
-F code=d09******b58abface48003 \
-F grant_type=authorization_code

同步数据至 Strava
在项目根目录执行：

python3(python) scripts/strava_sync.py ${client_id} ${client_secret} ${refresch_token}

其他资料参见
https://developers.strava.com/docs/getting-started
https://github.com/barrald/strava-uploader
https://github.com/strava/go.strava

Nike+Strava

Get your Nike Run Club data and upload to strava

完成 nike 和 strava 的步骤
在项目根目录下执行::

python3(python) scripts/nike_to_strava_sync.py ${nike_refresh_token} ${client_id} ${client_secret} ${strava_refresch_token}

示例：

python3(python) scripts/nike_to_strava_sync.py eyJhbGciThiMTItNGIw******  xxx xxx xxx

Total Data Analysis

生成数据展示

生成数据展示 SVG
展示效果：点击查看、点击查看

注: 感兴趣的同学可以改下方参数 (--special-distance 10 --special-distance2 20, 10km~20km 展示为 special-color1 20km 以上展示为 special-color2, --min-distance 10.0用来筛选 10km 以上的)

python3(python) scripts/gen_svg.py --from-db --title "${{ env.TITLE }}" --type github --athlete "${{ env.ATHLETE }}" --special-distance 10 --special-distance2 20 --special-color yellow --special-color2 red --output assets/github.svg --use-localtime --min-distance 0.5

python3(python) scripts/gen_svg.py --from-db --title "${{ env.TITLE_GRID }}" --type grid --athlete "${{ env.ATHLETE }}"  --output assets/grid.svg --min-distance 10.0 --special-color yellow --special-color2 red --special-distance 20 --special-distance2 40 --use-localtime

生成年度环形数据

python3(python) scripts/gen_svg.py --from-db --type circular --use-localtime

更多展示效果参见：
https://github.com/flopp/GpxTrackPoster

server(recommend vercel)

使用 vercel 部署

vercel 连接你的 GitHub repo

import repo

等待部署完毕
访问

GitHub Actions (Fork 的同学请一定不要忘了把 GitHub Token 改成自己的，否则会 push 到我的 repo 中，谢谢大家。)

修改 GitHub Actions Token

Actions 源码需要做如下步骤

更改成你的 app type 及info
在 repo Settings > Secrets 中增加你的 secret (只添加你需要的即可) 我的 secret 如下
添加你的 GitHub secret并和项目中的 GitHub secret 同名

TODO

完善这个文档
支持佳明，佳明中国
支持 keep
支持苹果自带运动
支持 nike + strava
支持咕咚
尝试支持小米运动
支持英语
完善代码
清理整个项目
完善前端代码
better actions
支持不同的运动类型

参与项目

任何 Issues PR 均欢迎。
可以提交 PR share 自己的 Running page 在 README 中。

提交PR前:

使用 black 对 Python 代码进行格式化。

特别感谢

@flopp 特别棒的项目 GpxTrackPoster
@shaonianche icon 设计及文档
@geekplux 帮助及鼓励, 重构了前端代码，学到了不少~
@ben-29 搞定了咕咚，和我一起搞定了悦跑圈，太厉害了。

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README-CN.md

README-CN.md

打造个人跑步主页

大家的跑步主页展示

它是怎么工作的

特性

支持

下载

安装及测试

替换 `src/utils/const.js` 文件中的 Mapbox token

如果你是海外用户请更改 `IS_CHINESE = false` in `src/utils/const.js`

一些个性化选项

左上角的头像

右上角默认的 Blog 和 About

页面标题与网站链接

下载您的 Runtastic(Adidas Run)/Nike Run Club/Strava/Garmin/Garmin-cn/Keep 数据, 别忘了在 `total` 页面生成可视化 SVG.

GPX

Keep

JoyRun（悦跑圈）

Codoon（咕咚）

Garmin

Garmin-CN (大陆用户请用这个)

Runtastic(Adidas Run)

Nike Run Club

Strava

Nike+Strava

Total Data Analysis

server(recommend vercel)

GitHub Actions (Fork 的同学请一定不要忘了把 GitHub Token 改成自己的，否则会 push 到我的 repo 中，谢谢大家。)

TODO

参与项目

特别感谢

Files

README-CN.md

Latest commit

History

README-CN.md

File metadata and controls

打造个人跑步主页

大家的跑步主页展示

它是怎么工作的

特性

支持

下载

安装及测试

替换 src/utils/const.js 文件中的 Mapbox token

如果你是海外用户请更改 IS_CHINESE = false in src/utils/const.js

一些个性化选项

左上角的头像

右上角默认的 Blog 和 About

页面标题与网站链接

下载您的 Runtastic(Adidas Run)/Nike Run Club/Strava/Garmin/Garmin-cn/Keep 数据, 别忘了在 total 页面生成可视化 SVG.

GPX

Keep

JoyRun（悦跑圈）

Codoon（咕咚）

Garmin

Garmin-CN (大陆用户请用这个)

Runtastic(Adidas Run)

Nike Run Club

Strava

Nike+Strava

Total Data Analysis

server(recommend vercel)

GitHub Actions (Fork 的同学请一定不要忘了把 GitHub Token 改成自己的，否则会 push 到我的 repo 中，谢谢大家。)

TODO

参与项目

特别感谢

替换 `src/utils/const.js` 文件中的 Mapbox token

如果你是海外用户请更改 `IS_CHINESE = false` in `src/utils/const.js`

下载您的 Runtastic(Adidas Run)/Nike Run Club/Strava/Garmin/Garmin-cn/Keep 数据, 别忘了在 `total` 页面生成可视化 SVG.