Meeting up since LiftOff

With what I thought was effectively a 50% complete prototype, I decided that I have to meet up with Jon on the weekend to catch up on the project and get some more things ironed out together.

To give more breadth to the things Jon covered in the previous post, I’ll touch on more detail to the best of my memory.

We started off by reviewing the code that has been committed over the week, and discovered some interesting things about what JSHint finds error-prone in the existing scripts, such as naming conventions, as well as blank parameters.

‘My Polls’ page

Our initial focus was to also complete and sign off on the app-polls.html page, which is the page where the user views all the polls listed under his/her user ID. We revamped the poll page to just display actionable icons, which provided a more simple user interface and experience, and got rid of the confirm() prompt when activating/deactivating the polls (turns out JSHint does not like them either).

‘Get Link’ page + Short Links

We then went on to look into the ‘Get Link’ page, whereby we have previously decided on providing a short link to anyone to access the poll questions and answer interface.

The poll id as stored in the database is MongoDB’s ObjectId, a 24-byte hexadecimal string. This would be extremely inconvenient for typing out, especially on small mobile devices.

Initially, the decision was to interface with Google’s url shorterner (goo.gl) API to generate our short links for us. The other alternative was to use bit.ly. However, upon more deliberation, we realised that implementing our own custom short link would be more effective and would serve as a better learning point on how they work.

We also tried using ShortId and Hashids to come up with the short link, but eventually generated it randomly.

 Math.random().toString(36).substring(2, 8)

What this gives us is a 36 character range with digits 0-9 mixed into a set of lowercase alphabetical letters.

‘View Results’ page

It was the second last actionable item that we have left to resolve (the last being the ‘Delete Poll’ action, which didn’t require a view page)

From experience gained in creating a new poll and the capturing of answers in the database schema. There was a better understanding of how to create the API for the results view. We set them up following the general steps of creating the respective API sections on the client side as well as the server (Express) side.

Quickly, we managed to also hack up a view for displaying the answers, and decided to use Google Charts as data visualisation. Initially the thought was to implement our own data visualisation diagrams, but figured that it would be much easier and more practical to simply employ Google Charts. The challenge however is making this page responsive, and to cater for a larger view of the charts on the desktop. Also, we are looking at the possibility of allowing users to choose between Pie charts, Line charts, and Bar graphs to suit their fancies.

Delete Poll

With some hands on, I was looking into implementing the deletion of a poll from the database. Having secured the API and set up of the respective client and server end requirements for allowing a DELETE request to be posted, I found myself going through a very tedious testing process of manually using the Mongo shell to test for three scenarios that might occur:

  • Deleting a poll but not deleting the answers
  • Deleting a poll that does not belong to the user
  • Failure to deleting a poll and end up deleting its the answers

Fortunately, with appropriate chaining of the callbacks, we managed to sort through securing the API to prevent the above scenarios from occuring, which leaves me with finding out how to implement a Bootstrap Modal through Angular to act as a confirm prompt (better UX) so as to delete the poll from the system. Reflecting the change immediately after deletion is also something to consider.