Innovating for Cork Innovates
Recently StudioForty9 built a real-time mapping and data aggregation web app using Angular JS on a MEAN stack. Here’s the who, how, what and why:
Cork Innovates aims to support entepeneurs, and they held the InBusinessInCork event at the Cork City Hall on November 14th this year to engage with the Cork entrepreneurial and business community and encourage the sharing of knowledge and services of Cork business people.
We sponsored the competition’s final prize and set up a stand to showcase our talents and prowess in all things web .
In keeping with the spirit of the day, we wanted to show the attendees our innovative side. Ger and Z were spear-heading our involvement in the event and they wanted to give people a better way to understand the businesses attending Cork Innovates.
We decided to set up a computer and ask attendees to enter their company details at our stand. We then mapped each business to Google Maps in real-time on a separate computer connected to a large screen display and finally we graphed some interesting statistics based on the data provided.
Specifically, we were interested in the following:
- Do you have a website?
- Do you have a Facebook page or a Twitter account for your business?
- Do you sell online?
- What is your business model? (B2B, B2C, Franchise)
- What is your market type? (Local, National, International)
- How many employees are at your company? (10 or below, 10 – 50, 50 – 500, 500 and above)
Lastly, we divided the businesses into the following categories:
- IT & Communication
- Research & Development
- Engineering & Construction
- Retail / Trades
- Business Services
- Food Industry
- Healthcare Industry
- Media & Creative Industry
As a web development company with a flair for beautiful interfaces, we were excited to start on this project. I had been looking into Node.js and real-time communication over the weekend and decided our Cork Innovates project would be the first benefactor of what I had learned. For the first time ever at StudioForty9 we moved away from the traditional LAMP development environment to the new kid on the block, MEAN. The MEAN stack consists of MongoDB, ExpressJS, AngularJS and Node.js.
The User Experience
With our idea cemented and our server technology decided, I set about building out the interactive map. Anyone who has looked up their address with Google Maps will know that Goolge don’t always get it right. We needed to allow for this. During the data entry process, after entering their address, attendees were allowed to pinpoint their exact location on the map and then commit their data to be saved to the database.
In Real Time
Once a company had been added to the database we wanted to inform anybody currently looking at the map. Using Node.js and web sockets we were able to achieve this with ease. When a company is added we send a signal to Node.js to broadcast the data to anyone with our application currently open. The data is then received and the company is dropped on to the map. We also pop up a little message in the corner to tell you who it is. Take a look at this in action.
When you need to graph statistics, making them understandable is essential and making them look beautiful is difficult. We decided to colour code each category and also align each map marker to each category colour. We’re lucky at StudioForty9 in that we have talented individuals to call on in a bind. With only 3 days to build our maps application, I enlisted the help of my colleague Alder to adorn the categories panel UI and prepare some icons for the map, one for each company size and 11 different colours for the category types.
The Final Product
The final application can be found at https://corkinnovates-studioforty9.rhcloud.com. We’ve disabled data entry for now to keep the data provided on the day pristine. We chose to host our little application with OpenShift by RedHat, a cloud hosted application platform with a fantastic free plan.
Given a chance to do it all again, I would have used MySQL rather than MongoDB for database storage, as crunching the data in MongoDB was unfamiliar territory. Also, we chose ChartJS for our graphs, which turned out to be missing some of the features we wanted, so a bit of customisation was needed.
On the day, we really should have had an elbow-height table to allow attendees to enter their data while standing. Asking them to sit down at the computer proved awkward. Also, some people had never used a Mac before and had some trouble with the trackpad. Using a PC with Windows and a mouse would probably have suited people better.
On the whole though the feedback was fantastic and the app showcased our innovative side.