Hi there,
It’s again time for another app; this time on the JavaScript app development platform Meteor. Since I don’t want to trash the experiences gathered when implementing WeightWatch App for ConnectIQ, I decided to implement a similar app running in a web browser, with a responsive GUI, and fancy visualizations, but the app will be built incrementally, starting with the basic data, authentication etc.
In order to keep this blog as learning opportunity for myself, I attempt to document more and more things I’m doing when developing sample apps. By writing I can hopefully express my thoughts in a more comprehensible manner, and also get a documentation of what I have done.
Intro to Meteor
As I have previously reported about in the post about Sneakerbuddy, an app for bookkeeping of run mileage on various shoes, I have gathered small experiences of Meteor, a JavaScript app framework. Thanks to many existing components some boring or even demanding tasks are available almost out-of-the-box, such as the basic authentication, manipulation of NoSQL DB items etc. Meteor is freely available and the development occurs openly in Github. The installation is simple, in Windows a simple installer is provided and for *nix based platforms there’s an installation script.
Create a new app
The website of Meteor includes many tutorials, and I don’t want to repeat everything here. Basic workflow is to initialize a new application by
> meteor create <appname>
The modular structure of Meteor enables adding new Meteor packages easily by providing in the app directory the simple command
> meteor add <packagename>
Basically the developer gets a wide range of functionalities thanks to this. The actual packages and required dependencies are fetched as soon as the developer types
> meteor npm install
Finally the basic app can be started by the command
> meteor
and is as of default reachable at http://localhost:3000.
Weight Watch app
I have already created a basic app skeleton and shared the code in Github. Basically the target is to accomplish a reactive and responsive application running on any modern web browser. In addition to the basic content included in every Meteor app, I have made a few additions: added support for MaterializeCSS, a responsive front-end framework by Google. During the past few years I have mostly had to do with Twitter Bootstrap based apps, so I wanted to have a look at how it does look like with the competition. Secondly I have added a dependency to ChartJS which offers responsive charts, and which I for that reason plan to use for the visualizations.
To try out the app, simple clone by Git, run meteor npm install and meteor in the app directory to start the app on the Meteor server, and then hit the target address with your browser. The result of the current development status can be seen below: a basic app with header containing a logo, a materializeCSS style in use and a set of sample cards on the page with one example of ChartJS.
In the following post I will present the app structure more specifically. See you!