Elevate

<h1 align="center"> <img src="./resources/elevate_logo.svg" alt="Markdownify" width="300"> </h1> <h4 align="center">✨ A sport app to "Elevate" your training experience and goals! Track your fitness and progressions over time. Analyse deeper your activities. And more...</h4> <p align="center"> <a href="#screenshots-and-features">Screenshots</a> • <a href="#desktop-app">Desktop App</a> • <a href="#web-extension">Web Extension (For Strava)</a> • <a href="#development">Development</a </p> <p align="center"> <img src="./.screenshots/fitness-chart.png" alt="fitness-chart" /> </p> <!-- toc -->

• Screenshots And Features
• Install
  • Desktop App
    • Download & Install
    • Build from sources
  • Web extension
    • Download for Chrome, Chromium, Edge (from 2020), Brave, Opera, Vivaldi, Yandex, ...
    • From the sources
• Star History
• Development
  • Global solution structure
    • App-core project
    • Desktop project
    • Web-extension project
  • Environments setup
    • Install requirements
    • Clone the git-flow based project
    • Desktop development environment
    • Web extension development environment
  • Build with docker
    • Desktop app
    • Web extension
• Appendix
  • Add a new desktop migration for a next release
  • Sign application
    • Self-sign with OpenSSL for windows build
  • Publish to github releases
  • Use custom browser for unit-testing (web-extension only)
  • Desktop: Debug the calculated watts against real power

<!-- tocstop -->

Screenshots And Features

<p align="center"> <img src="./.screenshots/fitness-chart.png" alt="fitness-chart" /> <br> <em>Track your long-term fitness trend and performance improvements visually.</em> </p> <p align="center"> <img src="./.screenshots/activities.png" alt="activities" /> <br> <em>Browse and filter your recorded rides with summary statistics for each activity.</em> </p> <p align="center"> <img src="./.screenshots/activity-main.png" alt="activity-main" /> <br> <em>Review in-depth ride details including map and core metrics for every session.</em> </p> <p align="center"> <img src="./.screenshots/activity-stats.png" alt="activity-stats" /> <br> <em>View essential ride stats including averages and highlight metrics for each activity.</em> </p> <p align="center"> <img src="./.screenshots/activity-peaks.png" alt="activity-peaks" /> <br> <em>See peak values for power, heart rate, speed, and cadence across your ride.</em> </p> <p align="center"> <img src="./.screenshots/activity-zones.png" alt="activity-zones" /> <br> <em>Explore how much time was spent in various heart rate, power, and cadence zones during a ride.</em> </p> <p align="center"> <img src="./.screenshots/activity-splits.png" alt="activity-splits" /> <br> <em>Analyze best splits and key segment statistics like fastest speeds and highest cadence.</em> </p> <p align="center"> <img src="./.screenshots/year-progress-ytd.png" alt="year-progress-ytd" /> <br> <em>Monitor your yearly progression with cumulative activity and training volume charts.</em> </p> <p align="center"> <img src="./.screenshots/year-progress-rolling-volume.png" alt="year-progress-rolling-volume" /> <br> <em>Visualize rolling training volume and track period-over-period improvements.</em> </p> <p align="center"> <img src="./.screenshots/athlete-settings.png" alt="athlete-settings" /> <br> <em>Adjust personal data, physical metrics, and measurement preferences over time.</em> </p> <p align="center"> <img src="./.screenshots/zones-settings-hr.png" alt="zones-settings-hr" /> <br> <em>Customize your training zones for heart rate, power, and cadence.</em> </p> <p align="center"> <img src="./.screenshots/connectors.png" alt="connectors" /> <br> <em>Manage integrations with external services and sync activities easily.</em> </p>

Install

Desktop App

Download & Install

• For Windows
• For macOS
• For Linux: not shipped yet

Build from sources

Go to chapter Environment setup.

Web extension

Download for Chrome, Chromium, Edge (from 2020), Brave, Opera, Vivaldi, Yandex, ...

Go to Chrome Web Store

From the sources

Go to chapter Environment setup.

Star History

<p align="center"> <img src="https://api.star-history.com/svg?repos=thomaschampagne/elevate&type=Date)](https://www.star-history.com/#thomaschampagne/elevate&Date" alt="Star History" /> </p>

Development

This section covers the environment setup to develop and build both desktop app and web extension.

Global solution structure

The solution is cut in 3 folders/projects: the appcore, the desktop & webextension

App-core project

Contains the Elevate App shared and loaded by both desktop and webextensionprojects. Appcore contains core features like fitness trend, year progressions, athlete settings...

The Appcore main technology stack is:

• Typescript as programming language.
• Angular as frontend (build with @angular/cli).
• Angular Material for material designed components.
• Metrics Graphics, Plotly & D3 for charting.
• LokiJS as in-memory NoSQL database persisted in IndexedDB.
• Jest as Javascript test runner (instead of "stock" karma one).

Desktop project

Holds the container behaviour to provide a cross-platform desktop app under Windows, Linux & MacOS. It contains desktop specific features like connectors synchronization (to fetch athlete activities from external).

The Desktop main technology stack is:

• Typescript as programming language.
• Jest as Javascript test runner.
• Electron as cross-platform desktop container.
• Electron-builder to build, sign and publish installers per platform. Also handle app updates process (via electron-updater).
• Rollup.js to load & bundle modules.
• Vue.js for splash-screen update window.

Web-extension project

Contains the web extension behaviour that acts directly on strava.com website. This includes extended stats on activities & segments efforts, best splits, etc...

Environments setup

Install requirements

You will need to install NodeJS (v15+) to build both desktop and chrome web extension.

Clone the git-flow based project

git clone https://github.com/thomaschampagne/elevate.git

or

git clone git@github.com:thomaschampagne/elevate.git

The new mono-repo including the desktop app and the web extension is on develop-new branch at the moment. So checkout/track this branch to build the desktop app:

cd ./elevate
git checkout --track origin/develop-new

Then install npm dependencies:

npm install

Run solution tests (appcore + desktop + webextension):

npm test

(Should be executed with success for any pull request submission).

Desktop development environment

All commands displayed in this section will be executed in ./desktop/ folder. So:

cd ./desktop/

• Run in development:

npm start

This npm task will create a ./desktop/dist output folder and re-compile both appcore and desktop projects on any code changes

To open the desktop app, open another terminal, then run:

npm run launch:dev:app

• Run unit tests:

npm test

• Generate production installers and publish them per platforms:

First switch to desktop directory with cd desktop/

• Build Windows x64 .exe:

  npm run build:publish:windows
  

• Build Linux x64 .deb:

  npm run build:publish:linux
  

• Build MacOS x64 .dmg :

  npm run build:publish:macos
  

Output installers will be located in ./desktop/package/ The build targets are defined in ./desktop/package.json (build key section). See https://www.electron.build for more info.

• (Optional) To sign the production installers read the how to sign appendix

• (Optional) To publish the production installers on github read the how to publish on github appendix

• Clean outputs:

npm run clean

Web extension development environment

_To develop the web extension, you need a Chrome based browser such as Chrome, Chromium, Edge (from 2020