將個(gè)人運(yùn)動(dòng)數(shù)據(jù)制作成一個(gè)人人可訪問的網(wǎng)頁 | running_page 項(xiàng)目
時(shí)間：2023-09-03 15:18:01 | 來源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-09-03 15:18:01 來源：網(wǎng)站運(yùn)營(yíng)
將個(gè)人運(yùn)動(dòng)數(shù)據(jù)制作成一個(gè)人人可訪問的網(wǎng)頁 | running_page 項(xiàng)目：Hello 各位早上好。
今天想和大家分享一件
在我看來非?？?/b>的事情，如下圖，將自己過去 4 年的跑步數(shù)據(jù)放到一個(gè)網(wǎng)站上，數(shù)據(jù)來自 Keep App，由于在跑步的時(shí)候開啟了 GPS 定位，因此右側(cè)的地圖還會(huì)顯示我們跑過的路徑。
我的運(yùn)動(dòng)記錄 Running Page：
https://running-page-three.vercel.app/
順提一提，之前有一段時(shí)間我用的是 Apple Watch 的「健身記錄」來記錄跑步數(shù)據(jù)，有不少數(shù)據(jù)無法同步到 Keep 中，導(dǎo)致網(wǎng)站上顯示的 2021 年運(yùn)動(dòng)記錄只有 28 次。
蘋果推出的 App 都比較封閉，目前暫時(shí)無法從「健身」或「健康」App 中導(dǎo)出數(shù)據(jù)，如果你也要想要制作上面的跑步網(wǎng)站，你平時(shí)使用的記錄跑步數(shù)據(jù)的 App，最好是下面這些：
- Keep
- 悅跑圈
- 咕咚
- Garmin
- Garmin-CN
- Nike Run Club
- Strava
- GPX
- Nike+Strava(Using NRC Run, Strava backup data)
- Strava_to_Garmin(Using Strava Run, Garmin backup data)
之所以推薦這些 App，是因?yàn)橹谱骶W(wǎng)站所用到的 GitHub 項(xiàng)目「running_page」，目前也只支持這些 App。
GitHub 項(xiàng)目「running_page」地址：
https://github.com/yihong0618/running_page
這個(gè)開源項(xiàng)目的作者是 @yihong 老師，在這個(gè)時(shí)間點(diǎn)介紹這個(gè)項(xiàng)目也比較巧，最近剛好是這個(gè)項(xiàng)目開源一周年的節(jié)點(diǎn)。
作者 @yihong 老師為了讓更多的人可以通過這個(gè)項(xiàng)目、制作出屬于自己的跑步頁面，他在 GitHub 的 README 文檔中也提供了比較詳細(xì)的使用說明。
使用之前的說明
在正式使用這個(gè)項(xiàng)目之前，你的電腦最好先安裝下面這些軟件：
- Python3
- Git
- VS Code：代碼編輯器，不是必須的，但為了后面更好地編輯項(xiàng)目中的一些代碼，推薦安裝
下載/克隆所有代碼文件
會(huì)使用 Git 命令的朋友，可以通過 Git 將遠(yuǎn)端的代碼文件克隆到電腦本地：
git clone https://github.com/yihong0618/running_page.git如果你不會(huì)使用 Git 命令，可以通過倉(cāng)庫(kù)右上角的 Download 按鈕下載所有文件的壓縮包，記得要對(duì)文件進(jìn)行解壓。
安裝及測(cè)試
下載文件之后，我們要終端（Windows 上稱為 cmd 或者 Powershell）中逐行運(yùn)行下面的命令。
pip3 install -r requirements.txtyarn installyarn develop運(yùn)行之前，請(qǐng)確保你當(dāng)前所在的路徑，是代碼文件夾所在的位置。
以我為例，我將下載的代碼文件夾 running_page 放在了電腦的 workspace/running_page路徑下。
因此，在運(yùn)行前面的 3 個(gè)命令之前，我需要先使用 cd 命令，進(jìn)入到對(duì)應(yīng)的路徑下方。
cd workspace/running_page/running_page
進(jìn)到正確的路徑下，再逐次運(yùn)行前面的 3 個(gè)命令。
不過，由于不同電腦的環(huán)境配置存在著差異，在運(yùn)行那 3 個(gè)命令的過程中，你可能也會(huì)像我一樣，遇到命令運(yùn)行后提示錯(cuò)誤的情況。
這里給出我在運(yùn)行這 3 個(gè)命令的過程中，遇到的 3 個(gè)問題及相應(yīng)的解決方法：
查看網(wǎng)頁的雛形
前面 3 個(gè)命令運(yùn)行無誤的話，最后可以在終端中看到下圖的提示：在瀏覽器中打開網(wǎng)頁 http://localhost:8000/，就可以看到網(wǎng)站的雛形。
網(wǎng)站雛形的數(shù)據(jù)來自項(xiàng)目的原作者，為了得到我們自己專屬的網(wǎng)站，還需要修改和刪除一些文件。
修改代碼文件
修改代碼文件時(shí)，可以使用電腦自帶的記事本打開代碼文件，也可以使用前面提到的 VS Code。
首先打開 .github/workflows 下的 run_data_sync.yml 文件，定位到第 22 行代碼的位置。
RUN_TYPE填入你平時(shí)在用的運(yùn)動(dòng) App，例如 keep，下面的 ATHLETE、TITLE、GITHUB_NAME、GITHUB_EMAIL，分別更改為自己的昵稱、最終呈現(xiàn)在網(wǎng)站的熱力圖的標(biāo)題、GitHub ID 和郵箱。
例如我將 TITLE 設(shè)置為 Phh95 Running，最終就會(huì)呈現(xiàn)為熱力圖頂部的標(biāo)題。
接著定位到代碼的 117 行，這里需要修改一下變量的名稱，將 secrets 后面的 GITHUB_TOKEN 修改為 G_T。
這里之所以要修改變量的名稱，是因?yàn)?GitHub 不允許以 GITHUB 為開頭來命名密鑰。
打開 gatsby-config.js 文件，修改下圖框選出來的部分參數(shù)：
- siteTitle：跑步網(wǎng)站的標(biāo)題，默認(rèn)是 Running Page
- siteUrl：跑步網(wǎng)站的網(wǎng)址，這里先不填，后續(xù)我們通過 vercel 部署得到網(wǎng)址之后，再來填寫
- logo：網(wǎng)站 logo 的圖床鏈接
- navLinks：網(wǎng)站右上角的兩個(gè)鏈接，一個(gè)是 Blog，一個(gè)是 About。如果你有個(gè)人博客的話，可以將 Blog 的 url 替換成自己的博客網(wǎng)站。
接著來到 assets 文件夾，只保留其中的 3 個(gè)文件：start.svg、end.svg、grid.svg，將其余的 svg 文件刪除。
接著來到 scripts 文件夾，刪除其中的 data.db 文件。
來到 src/static 文件夾，刪除其中的 activities.json 文件。
導(dǎo)出運(yùn)動(dòng)數(shù)據(jù)
前面刪除的文件中，包含了作者原先的運(yùn)動(dòng)數(shù)據(jù)，為了最后可以在網(wǎng)站上看到自己的運(yùn)動(dòng)數(shù)據(jù)，我們還需要從運(yùn)動(dòng) App 中導(dǎo)出我們的運(yùn)動(dòng)數(shù)據(jù)。
作者在 README 文檔中，對(duì)不同運(yùn)動(dòng) App 如何導(dǎo)出數(shù)據(jù)，也進(jìn)行了相關(guān)的說明。
以 keep App 為例，在終端中運(yùn)行下方的命令，就會(huì)在代碼文件夾中的相應(yīng)位置，生成我們需要的運(yùn)動(dòng)數(shù)據(jù)，具體體現(xiàn)為文件夾中新增了兩個(gè)文件，分別是 activities.json 和 data.db 文件。
python3 scripts/keep_sync.py 注冊(cè)keep賬號(hào)的手機(jī)號(hào) keep賬號(hào)的密碼
到這里，我們就算是完成了代碼的修改，接著就是通過 Git，將本地的代碼文件夾，上傳到遠(yuǎn)端的 GitHub 倉(cāng)庫(kù)。
這個(gè)過程具體如何操作，可以查看我之前的一篇文章或者參考網(wǎng)上別人寫的文章：
將本地文件/文章上傳到 GitHub 的流程
GitHub 倉(cāng)庫(kù)配置密鑰和 Token
項(xiàng)目作者在代碼中用到了 GitHub 自帶的自動(dòng)化功能 Actions，每天會(huì)自動(dòng)運(yùn)行一次 Run Data Sync，可以及時(shí)地將我們的運(yùn)動(dòng)數(shù)據(jù)更新到網(wǎng)站上。
為了讓 Actions 可以自動(dòng)更新數(shù)據(jù)，我們也要對(duì) GitHub 倉(cāng)庫(kù)進(jìn)行配置：配置密鑰和 Token。
配置密鑰，我們要按照下圖進(jìn)行操作，打開倉(cāng)庫(kù)的 Settings 頁面，左側(cè)切換到 Secrets 選項(xiàng)卡，點(diǎn)擊右上角的 New repository secret，需要我們填入密鑰名稱 Name 和值 Value。
這里的密鑰名稱取決于你目前正在使用的運(yùn)動(dòng) App，不同 App 的密鑰名稱存在著區(qū)別，查看密鑰名稱需要打開 .github/workflows/run_data_sync.yml 文件。
以我在用的 Keep 為例，它的兩個(gè)密鑰名稱分別為 KEEP_MOBILE 和 KEEP_PASSWORD，它們的 Value 值其實(shí)分別對(duì)應(yīng)——注冊(cè) Keep 賬號(hào)的手機(jī)號(hào)和密碼。
配好密鑰后，我們還需要配置 Token，首先打開網(wǎng)頁 https://github.com/settings/tokens，點(diǎn)擊右上角的 Generate new token，生成一個(gè)新的 Token。
生成 Token 時(shí)，有兩個(gè)注意點(diǎn)，將 Token 的有效期 Expiration 設(shè)置為 No expiration(長(zhǎng)期有效)，勾選下面的所有復(fù)選框，將所有權(quán)限都打開。
生成的 Token，是一長(zhǎng)串英文和數(shù)字混合的字符串，點(diǎn)擊右側(cè)的復(fù)制按鈕，復(fù)制到剪貼板，接著再回到前面的 Secret 頁面，添加一個(gè)新的密鑰，密鑰名稱為 G_T，這個(gè)名稱是我們?cè)谇懊嫘薷拇a的過程中手動(dòng)改過的，因此這個(gè)密鑰名稱是固定了的，不要再更改了。
G_T 的 Value 值就是我們剛生成的 Token，粘貼到對(duì)應(yīng)位置即可。
配好密鑰和 Token 之后，打開倉(cāng)庫(kù)的 Actions 頁面，我們來手動(dòng)運(yùn)行一次 Actions，看看它能否正常工作。
左側(cè)切換到 Run Data Sync，接著點(diǎn)擊右側(cè)的 Run workflow，稍等一會(huì)，等待程序運(yùn)行之后給我們返回的結(jié)果。
程序可以正常工作的話，Run Data Sync 左側(cè)應(yīng)該會(huì)有一個(gè)綠色的?圖標(biāo)，如下圖標(biāo)注的數(shù)字 4 的位置。
Vercel 部署得到自己的跑步網(wǎng)站
完成前面的所有操作之后，我們所有的準(zhǔn)備工作就算完成了，就差最后的臨門一腳了，將 GitHub 倉(cāng)庫(kù)部署到服務(wù)器上，就能得到人人都可以訪問的網(wǎng)站了。
項(xiàng)目的作者提供了 3 種部署的方案，如下圖，這里最推薦使用 Vercel 部署，因?yàn)樽顬楹?jiǎn)單，不需要過多折騰。
關(guān)于如何 Vercel 部署，可以查看作者寫的說明文檔，因?yàn)楸容^簡(jiǎn)單，這里就不過多介紹了：
https://github.com/yihong0618/running_page/blob/master/README-CN.md
通過 Vercel 部署，它會(huì)自動(dòng)返回一個(gè)網(wǎng)站鏈接 ，點(diǎn)擊下圖的 DOMAINS 下方的鏈接，就可以看到自己專屬的跑步網(wǎng)站啦。
寫在最后
為了弄出這個(gè)網(wǎng)站，懂技術(shù)的人可能花 20 多分鐘就搞定了，不懂技術(shù)的我，用了 20 多分鐘幾倍的時(shí)間才勉強(qiáng)弄出來，中間還向項(xiàng)目的原作者問了好幾個(gè)問題，在此要感謝作者的耐心解答??。
整個(gè)過程下來，我游走于 想放棄 與 不放棄 之間，做一會(huì)停一會(huì)，就像玩自己不擅長(zhǎng)的游戲那樣，很有挫敗感，也總在懷疑自己是不是太辣雞了。。。不適合搞這個(gè)，害。
以上，就是本次想和你分享的內(nèi)容。
如果對(duì)你也有幫助的話，別忘了點(diǎn)擊下方的點(diǎn)贊、在看和分享按鈕，你的小小支持，是我持續(xù)更新的最大動(dòng)力，我們下次再見。
關(guān)鍵詞：項(xiàng)目,訪問,數(shù)據(jù),運(yùn)動(dòng),作成
在線咨詢
