I finally started building Kambatz – my bills management app.

It’s a refreshing change, after weeks of just learning, by taking an online course, or going through an official tutorial. I finished the course, in case you’re curious. I plan to write my thoughts about the course once it formally ends.

The course served me well. I was able to use my submission for the final assignment as a reasonable starting point for my Kambatz app. I changed most of it, but it was useful nonetheless!

This iteration of the app doesn’t really do anything. It’s just some plumbing and layout to get me started. Read on for more about what it contains, and the new things I learned while working on it.

You can see the latest prototype at kambatz.meteor.com, and follow the code on the GitHub repository 🙂 .

A snapshot of this iteration is available at 20151213.kambatz.meteor.com, and the code for this iteration is tagged in the GitHub repository.

What’s in this iteration?

This iteration doesn’t do much, as far as functionality goes. The focus was more on the layout and plumbing. It includes:

• A responsive bootstrap-based UI.
• A top-navbar, that doesn’t do anything, but includes a neat search box.
• A sticky footer, with copyright notice, and information about the deployed iteration.
• A sign-in widget that actually works, because it’s so easy to do that in Meteor! No point in using it though, as it does not affect the functionality in any way.
• Main area with template that pulls “bills metadata” from a MongoDB collection and displays some data about them.

I borrowed from the course the idea of pushing some mock data into the collection on the server startup event, if the collection is empty. It definitely makes development easier – no need to write input interfaces to get data into the prototype. I also learned how to use Bootstrap in the course. The use of iron:router – also from the course.

As you can see, there’s no actual functionality here. Just rendering a static list of bills.

New things I learned for this iteration

One new thing I learned during this iteration is about the #with template tag.

One of my “bill types” is a “receipt”, that refers to another bill record, by its _id. To render a “receipt”, I wanted to pull the bill it refers to, and use fields from that record. I learned that the way to do that, is to use the #with template tag to set the data context to the referenced bill. You can see this in the kambatz.html template code.

I also learned that I can’t do much logic inside template conditional tags. I wanted to display different things depending on the bill type, so the natural thing was to do things like {{#if (type == 'receipt')}} in the template. That didn’t work. I could write a template helper isReceipt() that returns the result of that logic, and use {{#if isReceipt}} in the template. But I’m too lazy to write helpers every time I need a simple comparison. So I found this StackOverflow answer that taught me to register a global template helper equals that does exactly what I wanted (see here). With that, the template if looks like this – {{#if equals type 'receipt'}} (see here).

The HTML <footer> tag was also new to me.

Summary

That’s all for this first Kambatz iteration. No functionality, but some useful layout and plumbing stuff that I can build on in upcoming iterations.

I hope I will be able to keep progressing in such small iterations. It makes it manageable, and maintains a good balance between building and learning new things.

I am a little disappointed about the lack of resources about testing Meteor-powered projects. The subject of testing, not to say test-driven-development, was not mentioned at all in the learning resources I covered so far. Since I have no clue about frontend testing, and I’m at the prototyping phase, I’m opting to proceed without digging into testing at this point. I just hope that later on I will discover that Meteor have really good testing tools available…