Skip to content

Latest commit

 

History

History
680 lines (466 loc) · 22.6 KB

README-CN.md

File metadata and controls

680 lines (466 loc) · 22.6 KB

running_page

R.I.P. 希望大家都能健康顺利的跑过终点,逝者安息。

English | 简体中文 | Wiki

GIF 展示

running_page

Runner page App
zhubao315 https://zhubao315.github.io/running Strava
shaonianche https://run.duanfei.org Strava
yihong0618 https://yihong.run 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://lax.github.io/running Keep
lusuzi https://running.lusuzi.vercel.app Nike
wh1994 https://run4life.fun Garmin
liuyihui https://run.foolishfox.cn Keep
sunyunxian https://sunyunxian.github.io/running_page Strava
AhianZhang https://running.ahianzhang.com Nike
L1cardo https://run.licardo.cn Nike
luckylele666 https://0000928.xyz Strava
MFYDev https://mfydev.run Garmin-cn
tianheg https://run.tianheg.xyz/ Keep
Oysmart https://run.ouyang.wang Garmin-cn
Eished https://run.iknow.fun Keep
Liuxin https://liuxin.run Nike
loucx https://loucx.github.io/running Nike
winf42 https://winf42.github.io Garmin-cn
sun0225SUN https://run.sunguoqi.com Nike
Zhan https://run.zlog.in Nike
Dennis https://run.domon.cn Garmin-cn
hanpei https://running.nexts.top
liugezhou https://run.liugezhou.online Strava
zhubao315 https://zhubao315.github.io/running Strava
Jason Tan https://jason-cqtan.github.io/running_page Nike

它是怎么工作的

image

特性

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

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

注:如果你不想公开数据,可以选择 strava 的模糊处理,或 private 仓库。

缩放地图彩蛋

image

支持

下载

git clone https://github.com/yihong0618/running_page.git --depth=1

安装及测试 (node >= 12 and <= 14 python >= 3.7)

pip3 install -r requirements.txt
yarn install
yarn develop

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

Docker

#构建
# NRC
docker build -t running_page:latest . --build-arg app=NRC --build-arg nike_refresh_token=""
# Garmin
docker build -t running_page:latest . --build-arg app=Garmin --build-arg email=""  --build-arg password="" 
# Garmin-CN
docker build -t running_page:latest . --build-arg app=Garmin-CN --build-arg email=""  --build-arg password="" 
# Strava
docker build -t running_page:latest . --build-arg app=Strava --build-arg client_id=""  --build-arg client_secret=""  --build-arg refresch_token="" 
#Nike_to_Strava
docker build -t running_page:latest . --build-arg app=Nike_to_Strava  --build-arg nike_refresh_token="" --build-arg client_id=""  --build-arg client_secret=""  --build-arg refresch_token="" 

#启动
docker run -itd -p 80:80   running_page:latest

#访问
访问 ip:80 查看

替换 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

一些个性化选项

  • 在仓库目录下找到 gatsby-config.js,找到以下内容并修改成你自己想要的。
siteMetadata: {
  siteTitle: 'Running Page', #网站标题
  siteUrl: 'https://yihong.run', #网站域名
  logo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTtc69JxHNcmN1ETpMUX4dozAgAN6iPjWalQ&usqp=CAU', #左上角LOGO
  description: 'Personal site and blog',
  navLinks: [
    {
      name: 'Blog', #右上角导航名称
      url: 'https://yihong.run/running', #右上角导航链接
    },
    {
      name: 'About',
      url: 'https://github.com/yihong0618/running_page/blob/master/README-CN.md',
    },
  ],
},
  • 修改 src/utils/const.js 文件中的样式:
// styling: 关闭虚线:设置为 `false`
const USE_DASH_LINE = true;
// styling: 透明度:[0, 1]
const LINE_OPACITY = 0.4;

下载您的 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

TCX

Make your TCX data

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

python3(python) scripts/tcx_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(悦跑圈)

获取您的悦跑圈数据

获取登陆验证码:

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

点击获取验证码

注:不要在手机输入验证码,拿到验证码就好,用这个验证码放到下方命令中

image

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 在您登陆过程中会在控制台打印出来

image

示例:

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 在您登陆过程中会在控制台打印出来

image

示例:

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

Garmin

获取您的 Garmin 数据
如果你只想同步跑步数据增加命令 --only-run 如果你想同步 `tcx` 格式,增加命令 --tcx
python3(python) scripts/garmin_sync.py ${your email} ${your password}

示例:

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

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

获取您的 Garmin-CN 数据

如果你只想同步跑步数据请增加 --only-run

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

示例:

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

仅同步跑步数据:

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

Nike Run Club

获取 Nike Run Club 数据

请注意:当您选择将 running_page 部署在自己的服务器上时,由于 Nike 已经封禁了一部分 IDC 的服务器 IP 段,您的服务器可能不能正常同步 Nike Run Club 的数据并显示 403 error ,这时您将不得不选择其他的托管方式。

获取 Nike 的 refresh_token

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

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

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

示例:

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

example img

Strava

获取 Strava 数据
  1. 注册/登陆 Strava 账号

  2. 登陆成功后打开 Strava Developers -> Create & Manage Your App

  3. 创建 My API Application 输入下列信息: My API Application 创建成功:

  4. 使用以下链接请求所有权限 将 ${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

get_all_permissions

  1. 提取授权后返回链接中的 code 值 例如:
http://localhost/exchange_token?state=&code=1dab37edd9970971fb502c9efdd087f4f3471e6e&scope=read,activity:write,activity:read_all,profile:write,profile:read_all,read_all

code 数值为:

1dab37edd9970971fb502c9efdd087f4f3471e6

get_code 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

get_refresch_token

  1. 同步数据至 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

TCX_to_Strava

Upload all tcx files to strava
  1. 完成 strava 的步骤
  2. 在项目根目录下执行:
python3(python) scripts/tcx_to_strava_sync.py ${client_id} ${client_secret} ${strava_refresch_token}

示例:

python3(python) scripts/tcx_to_strava_sync.py xxx xxx xxx

Nike+Strava

Get your Nike Run Club data and upload to strava
  1. 完成 nike 和 strava 的步骤
  2. 在项目根目录下执行:
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

Garmin+Strava

Get your Garmin data and upload to strava
  1. 完成 garmin 和 strava 的步骤
  2. 在项目根目录下执行:
python3(python) scripts/garmin_to_strava_sync.py  ${client_id} ${client_secret} ${strava_refresch_token} ${garmin_email} ${garmin_password} --is-cn

示例:

python3(python) scripts/garmin_to_strava_sync.py  xxx xxx xxx xx xxx

Total Data Analysis

生成数据展示

注:感兴趣的同学可以改下方参数 (--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 部署
  1. vercel 连接你的 GitHub repo

image

  1. import repo

image

  1. 等待部署完毕
  2. 访问
使用 Cloudflare 部署
  1. Pages 中点击 Create a project 以连接到你的仓库

  2. 点击 Begin setup 后,修改项目的 Build settings

  3. Framework preset 中选择 Gatsby 框架。

  4. 向下滚动,点击 Environment variables 修改变量如下:

    Variable name = PYTHON_VERSION, Value = 3.7

  5. 点击 Save and Deploy,完成部署。

部署到 GitHub Pages
  1. 配置 GitHub Action。如需使用自定义域名,可以修改 .github/workflows/gh-pages.yml 中的 fqdn(默认已注释掉)

  2. 修改 gatsby-config.js,更新 pathPrefix。【如果使用自定义域名,可跳过这一步】

  3. 在项目的 Actions -> Workflows -> All Workflows 中选择 Publish GitHub Pages,点击 Run workflow

  4. 在项目的 Settings -> GitHub Pages -> Source 部分,选择 Branch: gh-pages 并点击 Save

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

修改 GitHub Actions Token

Actions 源码 需要做如下步骤

  1. 更改成你的 app type 及 info image
  2. 在 repo Settings > Secrets 中增加你的 secret (只添加你需要的即可) image 我的 secret 如下 image

TODO

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

参与项目

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

提交 PR 前:

  • 使用 black 对 Python 代码进行格式化。(black .)

特别感谢

推荐的 Forks

赞赏

谢谢就够了