I’ve spent last week and this week building a single page “dashboard” application as my first project here at Cogility. The following is a recap of how it went:
Day (-1) – September 6th – Friday
I got my laptop the previous Tuesday, and spent about a day getting my development environment up, and the rest of the week getting Cogility’s rather elaborate environment configured. At the close of this day I still hadn’t gotten my laptop completely ready to move forward (thanks to an Oracle version issue). I did meet with a colleague to go over the requirements for the application, sketching it out on a whiteboard about what info is expected where.
Day 0 – September 9th – Monday
After spending nearly the whole of the previous week on setting up my development environment, I finally got that squared-away in the morning. In the afternoon I initialized my Rails app and got it talking to all the services it needs. I browsed over similar applications that have been built here for a decent idea of how to work in their specific set-up (we don’t have traditional models, per se, data calls are made through web services via a server application that hosts the database).
Day 1 – September 10th – Tuesday
Using Bootstrap, I laid out the basic format of the app. Its basically three columns with two tables, vertically arranged in the first column, and a single table in each of the second and third columns. The web service calls I needed for the data were not built yet, so I used the Faker gem to populate the tables so I could continue to work on the UI.
Day 2 – September 11th – Wednesday
Getting the basic layout down, I implemented collapse-ability of the data tables, using Bootstrap’s collapse.js functionality. I sent a rough version of the app to my colleague, specifying my “ideal” data calls (faking them out was a really good way to find out exactly how I’d like the data to be delivered). It looked like this:
Day 3 – September 12th – Thursday
A variable refresh rate was a key feature that needed to be implemented with this app. It turned out to be a good deal trickier than I originally planned. Through no less than three different attempts, I finally found the right combination of functions, callbacks, AJAX and jQuery to get the job done.
Day 4 – September 13th – Friday
I needed to change some of the styling to get the app to blend in with the overall application suite it was going to eventually be a part of. I implemented sorting, another key feature, with the tablesorter.js library, which wasn’t without it’s hiccups due to the dynamic nature of the table’s content. By the end of the day the app looked something like:
Day 5 – September 16th – Monday
Using jQuery, I made the refresh rate options capable of being hidden with a nice animation. I had a scattering of odd bugs to address, and made some slight enhancements here and there.
Day 6 – September 17th – Tuesday
The web services were built, allowing me to hook up the tables to real data. With a small bit of server-side processing the data rolled out smoothly. I had to make a few adjustments to the app, take care of situations were no data was available, and polish out a few of the odd bugs introduced. We’ve tested the application with new data uploads and the app seems to be working as specified in my colleague and I’s meeting the Friday before last. I will demo the app tomorrow for the engineering team, hoping it goes well.