chendongcse / running_page

Make your own running page

Home Page:https://running-page.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

打造个人跑步主页

简体中文 | English

特性

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

支持

  • Strava
  • Nike Run Club
  • Runtastic(Adidas Run)
  • Garmin
  • Garmin-cn
  • Keep

下载

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

安装及测试

```
pip3 install -r requirements.txt
yarn install
yarn develop
```

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

本地数据同步

删除项目中的测试数据,在根目录下执行

rm scripts/data.db GPX_OUT/* activities/*

或者

rm scripts/data.db
rm GPX_OUT/*
rm activities/*

下载您的 Runtastic(Adidas Run)/Nike Run Club/Strava/Garmin/Garmin-cn/Keep 数据

Keep

确保自己的账号能用手机号 + 密码登陆 (不要忘记添加secret和更改自己的账号,在 GitHub Actions中)

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

示例:

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

Garmin

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

示例:

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

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)

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

示例:

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

Nike Run Club

获取 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

  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

  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
    

    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

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

Total Data Analysis

  • 生成数据展示 SVG

  • 展示效果:点击查看点击查看

    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
    

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

server(recommend vercel)

  1. vercel 连接你的 GitHub repo image
  2. import repo image
  3. 等待部署完毕
  4. 访问

GitHub Actions

Actions 源码 需要做如下步骤

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

我的展示

image

TODO

  • 完善这个文档
  • 支持佳明,佳明**
  • 支持 keep
  • 支持悦跑圈
  • 支持 nike+strava, runtastic+strava
  • 尝试支持咕咚,小米运动
  • 支持英语
  • 完善代码
  • 添加新功能
  • i18n

特别感谢

@flopp

About

Make your own running page

https://running-page.vercel.app

License:MIT License


Languages

Language:Python 62.7%Language:JavaScript 34.0%Language:SCSS 3.4%