From Desks to Palms: The MM Android App Story
As Monday Morning celebrates its ten years of being, it has conquered yet another frontier with the launch of its very own and independent Android app. The Monday Morning news app commemorates the country’s first news app by a student media body.
An app, short for application is a software designed to run on mobile devices to perform a specific function directly for the user or, in some cases, for another application program. Opening a website and checking out news is often a cumbersome procedure. In order to bring the news from around the campus to the NITR junta just in just a swipe, Monday Morning came up with an app to make its users stay updated with the recent happenings of NITR in an easier, faster and user-friendly way.
In this tell-all, we take you on an excursion leading to the development of the India’s first news app by a student body.
1. It provides a simple yet effective experience to the user, with the option to add 'Favourites' so that the user can easily search it later.
2. One can comment just by going to the article and swiping from the right.
3. The app has two layers of tabs, which are usually not recommended by Android.
4. The app offers the option of saving mobile data by restricting the images in the app.
5. The app offers almost every feature available in the website barring a few which will also be incorporated soon enough.
The following sections are a detailed description of the decisions taken, the technology used and the challenges faced in the making of our app. It has been added in order to help other budding app developers so that they can learn from our experiences.
In 2013, Team MM rolled out its Windows 8 MM application, making its first breakthrough into the world of application development. The website, back then, was Joomla-based because our requirements were very content specific, and Joomla gave a decent CMS (Content Management System) platform for uploading articles, images etc. The app used RSS (Rich Site Summary often called Really Simple Syndication) feeds to fetch articles from the server and display the articles on the computer screen, without having to open the browser. However, the app did not really take off, with a lot of people facing issues with app crashes, setup issues, but mostly with the changed interface of the Windows 8 platform itself. Hence this ambitious plan did not achieve the success it deserved, but it did mark the foray of MM in the field of app making.
The Joomla based MM website was definitely decent and easy to manage, but the loading time was very high, inside the institute, and more so outside the institute. Furthermore, with the world leaning towards a more mobile-based internet browsing, the website needed to be very responsive. The technical team and the then Chief Coordinators of MM fully recognized the problem, and subsequently, in the spring semester of 2015, MM tied up with Microsoft Campus Club in order to build the custom website and CMS for Monday Morning. The following semester, the new and responsive MM website was launched, with a very professional new look and feel. It helped bring down the loading time by a huge extent.
Why Android App?
We asked this important question to ourselves several times. We had a responsive website in hand, and it could be used decently on a mobile device. However, the experience of the user while changing multiple tabs Monday Morning publishes around 15-20 articles. Without proper user engagement, it wasn’t possible for users on the mobile devices to skim through all the articles, and hence they were likely to miss certain articles that they may have been interested in. Furthermore, once the foundation of a mobile app-based platform was setup, the possibilities of relevant features that one can add to the application were endless. Majority of our users were android based, and hence the android platform was the way to go.
The Initial Roadmap
The work on the MM android app began in the summer of 2016. The goal was to get a beta version ready for launch by the time of Innovision, the technical fest of NIT Rourkela held in the first weekend of November every year. With 6 months’ time in hand, Abhay Kumar Das of Microsoft Campus Club and the technical team of Monday Morning led by Astitva Srivastava and final year mentor Sushovan Das began brainstorming and drafting initial wireframes.
Laying the Groundwork
The first step in developing any product is to get a proper understanding of the targeted users and the goals that the product is made for. This was relatively easy since Monday Morning has been around for over 10 years now, and the reader base is pretty well defined. The following are the targeted user factions of the MM android application:
- Current students of NIT Rourkela (B Tech, B Arch, M Tech, PhD, MBA – across all years)
- Faculty of various departments in NIT Rourkela
- Administration staff (Wardens, Assistant Wardens, Faculty advisors of various clubs, Deans, Registrars etc.)
- Alumni base of NIT Rourkela
The next step was to identify which sections of MM gained readership from which factions of our user base, and which were the sections that consistently get good readership. We took into account the number of unique hits as well as the comments on the articles and social media shares in order to evaluate the engagement. Furthermore, we conducted a small internal survey among the current and former members of MM content team to get the views of them and their peers who read MM. We found out that –
- The Director’s Desk almost consistently gets very high readership, from all the factions.
- The Chief Warden’s Column and the Hall of Residences articles gain significant readership engagement from the student faction and to some extent the alumni.
- The alumni and the final year students (both B Tech and M Tech) engage with the Placement section and the second and third-year students use the Internship section a lot.
- Some articles like SAC review, fest preparation and review are popular with the students who take an active interest in extra-curricular activities and the associated faculty.
- Final year interviews, CGPA (Cool and Glamorous Professors’ Adda) and other informal interviews are popular among the student, faculty and alumni faction.
- The cartoon strip (named Witsdom) is popular among all factions.
The placement statistics section is accessible to the people inside NIT Rourkela via the local network only and not from anywhere outside the institute. Funnily enough, the Access Denied page, which opens when someone outside the NIT network tries to access the placement stats section, has repeatedly topped as the most frequently opened page on the MM website. This indicates that the alumni faction is interested in gaining access to current placement stats of their alma mater.
Deciding the Architecture
Since we already had a website, and people have used the website for a really long time now, giving them a totally new experience was not something we were looking forward to. We wanted the users to get a similar experience, but with additional features that could be implemented on an app, but not on a website. The MM website contains multiple tabs for various categories of articles, and each category contains various other sub categories. We had to replicate the similar distribution in the app as well. We decided to omit certain features like ‘Know the Team’ as we believed that not a lot of mobile phone users will be interested in knowing the details.
Assembling the Team
Towards the end of the August, 2016 Microsoft Campus Club (MCC) agreed to tie up with Monday Morning again to develop an Android app. Abhay Kumar Das, a senior member of MCC, would act as a project lead along with the MM technical team led by Astitva Srivastava. A fellow app developer Surya Prakash Sahu was brought in too. We set ourselves a tentative deadline of Innovision 2k16. Throughout the development period, all our final year mentors and current postholders oversaw, scrutinized and gave continuous feedback about the app. Sushovan Das and Dilip Raj Baral were responsible for the final UI touches.
Designing the Prototypes
We decided to use InvisionApp (www.invisionapp.com) for prototyping, because it provides a great framework for prototyping and helps designers and developers interact very easily. It was the perfect place for simulation as we started working on the possible designs and themes for the app. We decided to retain the basic structure of the website in our architecture to give the readers the same feel as the website. We went across the apps of a number of news providing websites while we worked upon creating the best possible design.
The featured articles occupy a major portion of the home page of the website and since articles on MM are updated only on a weekly basis, there had to be a category, which highlighted the articles and other features like Top Articles of the week. We grouped all such articles under a This Week category. It was further subdivided into multiple sub categories, which was present on the layer below the root category of This Week. Similarly, all the articles since the last 2 years were grouped under another tab, called the Topics, which provided the user with the option to choose from a slew of categories. There was another tab called the events tab, which was supposed to contain the Student Pulse, Pic of the Week, Events of the week, etc.
The Initial Prototype
After making this prototype, we ran a review session among the developers and core team members, and realized that having 3 tabs on the root will make the app very cumbersome, and hence degrade the UX. Hence, we discarded this prototype and built a new one, which had 2 tabs, with the events tab getting merged under the This Week category. In addition, the Topics tab was renamed to Categories, and unlike before, it had a stream of articles under the default subcategory. Each subcategory also had several sub-subcategories, and they could be accessed via a floating button at the bottom right hand side of the screen.
The Modified Prototype
The Technology and the Coding Phase
The app started out with the default colour scheme. Later we coded it to the current theme of blue and white with Dilip providing the final touches.The app was coded using Android Studio with GitHub collaboration. The team maintained their workflow using GitHub as they shared their resources and progress using the repository, nicknamed Project Vibranium. We used Java for the logic part and XML for the design part. The working of the app was simple - access news articles directly from the MM server and display it on the android device. For this purpose, we built an API (Application Programming Interface) using PHP, which generates a response in JSON format. We decided to introduce caching at the client side device to increase the speed of the app. The app was supposed to be multi layered unlike the traditional single layer android apps. We introduced two tabs in the app along with the floating button to access the nested tabs to accommodate the sub categories of every sections.
The GitHub Workflow Of the Developer Team
Third party libraries were to be kept at a minimum, leaving us to do a lot of coding by ourselves. We used a few libraries though which have been mentioned below for your reference.
1. Volley: An HTTP library makes networking for Android apps easier and most importantly, faster.
2. Glide: Loading an image from internet is pretty easier using Volley library. However, here is a much better solution than volley, i.e, Glide image library. When compared to Volley, Glide wins in lot of scenarios in terms of performance and usability.
3. AChartEngine: Helps in implementing charts and graphs.
4. GSON: Google's Gson library provides a powerful framework for converting between JSON strings and Java objects. This library helps to avoid needing to write boilerplate code to parse JSON responses yourself.
5. HTMLTextView: HtmlTextView is an extended TextView component for Android, which can load HTML and converts it into Spannable for displaying it. It is a replacement for usage of the WebView component, which behaves strange on some Android versions, flickers while loading, etc.
6. Android TagView: Simple android view to display collection of colorful tags efficiently. You can edit the tag's style, and set listener of selecting or deleting tag.
The primary difficulty lay in coding to adjust the two tabs in the app. Abhay had never worked on one such app before and that was probably the hardest part of all. We encountered a typo, which made the app crash in android versions lower than 5.0 (Lollipop). The functions used to call vector images which were not compatible with android versions lower than 5.0 was assessed as the main reason for the crash. In the initial phases of coding, we did not use cache, which on one instance crashed the MM server owing to multiple requests from the app. We tried making the pie chart on our own for the poll analysis but ultimately ended up using a third party library. The pinch movement synchronization for zooming the pictures was also one of the most time-consuming aspects of designing of the app. Surya was the one who finally cracked the code but not without expending a significant amount of his time and intellect. The API integration was not a walk in the park either since android recognized only basic HTML codes and nothing more. Compounding all our problems was a deadline, we just had to meet.
After considerable delays, overshot deadlines and multiple version testing, finally 0.6 beta version of the app was launched on Google Playstore on the 5th of February, 2017 during ‘Maktub’ on the occasion of Nitrutsav 2017. An update (0.7-beta) was rolled out after few days to fix the crash issues on devices with android version below 5.0. The 0.7 beta version is the current version of the app on Playstore.
The Road Ahead
The next feature will be enabling notifications from the app. We would also be implementing a local database so as to enable offline availability of the articles. These additions will stabilise the current 0.7 version and we would be launching the 1.0 version in Google Playstore. Another key challenge is a way to figure out how LAN restricted articles can be made available on the app. We also plan to integrate other features from the website like the ‘LIVE’ section. However implementing any such additional feature will require new APIs, so we are taking one-step at a time to accommodate all of them. There are indeed startling plans in the pipeline which we will incorporate in the app considering time and technology involved.
Nothing short of an exhilarating and exulting journey, the app has been the acme of MM’s achievements in the last decade. We hope to continue our services through the years to come while evolving technically and improving qualitatively at the same time.
To report bugs or provide any suggestions kindly use the ‘Report a Bug’ feature in the application or mention it in the comments below.
To access the ‘Report Bug’ section, swipe from left to open the Navigation Drawer menu, scroll down and tap on the ‘Report Bug’ option.
To download the app, (if you haven’t already) click here.