Category Archives: Assignment 1

Learning Points from Stickats

It has been awhile since the end of the first assignment and I have just found some time to write a little on some of the many things I’ve learnt over the short three weeks.

Git: Branching and Merging

I use Git quite a lot, even outside of this class. But I’ve never had the need to branch and merge and thus have never saw any value in it. All my projects never had any branches other than master. Working with 4 other developers, I quickly saw how useful branching can be, especially with different people working on different parts of the project.

This was how our commits looked. Bitbucket visualises all the branching and merging with some pretty nice graphics — and our team calls them MRT lines. Well, something I always wanted to learn.

Git

CSS3 Animations

While working on Stickats, our group also decided that we wanted some animations to make the merchant perks page more attractive for users. As part of our plan to introduce some element of gamification into the platform, we planned on making a rocket (or Rockat) launch upward to a certain height, depending on how many Stickats the user has for the merchant. We initially attempted to do so using only JavaScript by setting the object’s position frame by frame. We later found that a CSS3 solution would be more efficient.

CSS3 Rockat

 

Vagrant

Our group also used Vagrant and Puppet to help everyone have a consistent development environment. This was after our group spent almost one week trying to prepare each others’ development environment for this project. We had a lot of problems building the application as everyone was on different OSes with different versions of software installed. For instance, we found out that the latest version of Compass Sass did not work very well with Foundation and would result in a compilation error. With Vagrant, everyone was able to work on a virtual machine with the right build tools provisioned.

Of course, there’s much more than just these three points that I learnt. But I’ll leave the rest for another time.

Befriend Yourself on Facebook?

friend

It’s less than a week to the deadline of Assignment 1, and our team has been working hard to finish what we have started. While debugging our code, we found out something interesting.

It all started out when I was testing out the API call that retrieves a user’s list of Facebook friends. That was when I realised something strange — the JSON string returned included myself as part of the friend list! I immediately thought there was a bug in our code, and was working with Xuanyi for a good half an hour before we finally found out what the real problem was.

You could be a friend of yourself on Facebook — well, not quite actually. You can, only if you’re a special test user of a Facebook app. Facebook attempts to isolate test users from the rest of the real users, so you can’t have a test user befriending and interacting with a bunch of real users. They instead allow you to manage which other test users the a particular user should be friends of.

Facebook Test Users

And you can befriend yourself.

Stickats

Work has begun for our first assignment, with meetings and code-sprints lasting from the early evenings all the way through the night.

Our first few meetings this week were spent brainstorming for ideas as well as planning out the project. There were many important decisions we had to make — decisions that would greatly impact our project and how we would approach it.

Logo Brainstorming on Paper
Logo Brainstorming on Paper

Back-end Framework

As of now, our team has decided to go ahead with Django. The interesting thing about this decision is the fact that all of us has never ever done any development on any Python frameworks before. A few of the team has experience with Ruby on Rails, and others with PHP and NodeJS — but just not with Python. We came to this decision as we wanted to learn something new, and thought Django would be a good framework to learn.

Front-end Framework

Another decision we made as a team was to completely separate our front-end and back-end implementation. We made that decision to cater for future extensions, so should we decide to come up with a native app in future, we can build on the RESTful APIs that the server exposes.

Because of the nature of our project, we wanted a single-page webapp. Hence we chose to use AngularJS as our front-end framework.

UI Framework

We had three options — no UI framework (style everything from ground-up), Bootstrap or Foundation. We thought that having a base to start off with was a good idea, especially since we wanted to build a mobile-first responsive webapp. Both Bootstrap and Foundation provides a grid to work with, and both has all the basic components styled. While Bootstrap is good because it does a large part of the design for you, the trade-off is the loss in customisability. I realised that however much you try to customise a site built with Bootstrap, the “Bootstrap look” somehow remains with your product at the end. As such, we decided to go with Foundation for the UI framework.

My role in the team (as of now) leans more towards front-end development. As such, I haven’t really worked on any python code yet. However, working on the front-end, I have already started facing several problems.

Challenges

One problem I faced was nesting views in template files. After reading through lots of documentation, I realised that AngularJS does not actually support nested views out-of-the-box. However, they had a new project (ui-router) what would do just that. After reading some documentations (and lots of Stack Overflow answers), and many more hours of trying, I finally got nested views working properly!

Another challenge surfaced when some of my project-mates tried to clone the repo and build the project but failed. We found out that Compass Sass was producing different results probably because we had different versions of Compass installed. As of now, we’re still in the midst of figuring out why this may be the case, and our Stack Overflow question has been quiet with no responses.