One of the best parts of being a developer is being able to solve your own problems with code.
As someone who likes to keep up with a basic level of fitness, the most important problem I wanted to solve was to create a fitness app that was simple enough to keep me motivated.
What I wanted to solve
- Create an app that would be used primarily on mobile devices
- Enable the ablity to add exercises, with number of reps, and how many days rest until performing again
- Have a schedule for when to perform certain exercises
- Be able to mark when an exercise is completed
- Give the app a native feel
- Have all of this work without an internet connection
- Do this all in web technologies, as a web app
I also wanted to try ECMAScript 6, the latest features of javascript.
What’s really cool is that the web has come a long way, and as such, features that we’d previously consider native-only can now be done on the web. The kind of things you can do now include: offline pages, full screen web apps, local storage and push notifications.
Here’s an overview of the project:
- Mobile App - Using manifest.json, I was able to create a web app that could be added to a mobile home screen with an icon, and could be opened full screen
- Managing exercises - Using localstorage I was able to store data on the mobile device. This included adding exercises and marking them as completed
- Exercise schedule - Based on when exercises were last completed and how long the rest period is, I was able to produce a schedule for when exercises needed to be done
- Native feel - I used Google’s Material Design Lite library as a basis for the layout to make the web app feel more like an app than a website
- Offline Use - Using Service Workers I was able to cache the web page and assets so it would continue to work without an internet connection (I initially used Application Cache, however this is now deprecated for the more sophisticated Service Workers)
- ECMAScript 6 - Using Babel I was able to write the latest ES6 code, and have it transpiled to ES5 for browser support. I was able to use features such as classes in Javascript, and write modular code with ES6 imports thanks to Browserify.
You can use the app now at https://fitness.joestrong.co.uk
The code is on github here: https://github.com/joestrong/fitness