back to Code

HCET Notix

Imagine a scenario where an institution wants to deliver notices, announcements or messages forthwith, to all it’s employees or scholars. What could be the best possible solution?

When I was presented with the same problem at my own college, I answered with Notix. Which is a notification delivery platform that aims to bridge the gap between the college staff and the students. Notix is basically a suite of a mission control type Website and an Android app.

The Notix Website

To create and manage the notifications, an independent website was needed that can be easily scaled up, when required. To built this sort of website, using the MVC architecture was an obvious choice. There were multiple views, data flows, and a REST API so that the mobile app can efficiently retrieve data from the server. The notification delivery is entirely handled by Google Cloud Messaging (now, Firebase Cloud Messaging). An always-on GCM instant listens to any new notifications posted by the faculty on the website and subsequently performs the tasks ahead to deliver those notifications to the Android devices of the students.

The design for this website is made of reusable CSS class components along with helper classes to quickly lay down the pages. We created several views for the faculty to easily manage the notifications and views for the Admins. To bring a consistent look and feel, the SCSS was used along with BEM methodology, which greatly streamlined the overall UI design process for the website. The components (CSS classes) were reusable which allowed us to quickly create the website.

The MVC framework we used for this website is CodeIgniter 3. It’s undoubtedly a very fast and responsive framework with very light footprint on the low-cost server instances. The overall simplicity of implementing MVC with CodeIgniter made this a very obvious choice.

Here’s the link to the website: http://hcetnotix.azurewebsites.net

The Notix App

We chose to go with a hybrid app for this project. Hybrid apps are not just platform independent, but also offer a great deal of ease in building and maintaining them; even when there’s no Native App developer in the team. So we picked up Adobe Phonegap, and began developing the next major component for the Notix project.

I used Sass and BEM again to cook the UI for the app. First, I designed the UI mockups with the help of Illustrator and Photoshop. After they were approved by the team and the mentors, it was time to start building the app. Particularly, MaterializeCSS helped here a great deal in laying out the Material Design components promptly. MaterializeCSS packs a lot of Material Design features and is definitely worth checking out if you’re creating a hybrid Android app. Then of course, you have to reference to Google’s Design docs to fine tune the UX and UI so it feels close to a native app but still, using a third party library such as MaterializeCSS can bring efficiency and consistency to your app, since Android runs on a diverse set of screen sizes.

We also used Backbone on some parts of the app, for retrieving data from the Notix website. Delivering push notifications on a Phonegap based app is not possible without the Phonegap Push Plugin. This plugin allows the app to register a background service on the device, that can listen to GCM’s pings and receive the payloads. It can even create the notification based on the payload received. So this payload has to be organized specifically on the server-side to properly create notifications on the notification panel of an Android device. You can read the plugin’s documentation on its payloads, here.

Here’s how the app turned out to be in the end:

Final Thoughts

All the programming was done by me and a friend of mine, with the design department in my hands. I was also the team lead for this project, and delivering this on time was a challenge. At last, we delivered the app successfully, well documented and coded. We also had a great time hunting bugs in just the night before the final presentation day. And as the morning sun was approaching, me and my friend both were constantly in touch on Slack, coding, fixing errors and giving finishing touches to the website and the app, both at the same time!

Anyways we learnt a ton of things about Push notifications and developing custom APIs from this project. Our experience with MVCs really came in handy for this project, and I strongly recommend following the MVC architecture to craft projects of this scale and beyond. Have a great day.