Developing and maintaining the CMS Apps of BITS Hyderabad

Hyderabad Aug 17, 2020

Overview

Moodle is the Course Management System for BITS Hyderabad i.e the platform used by professors to upload course handouts, slides, announcements and anything else related to their courses. Students can access CMS through its website or the CMS App for Android and iOS. These apps were developed by Crux - The Programming and Computing Club of BITS Hyderabad to allow easy access to the CMS for students. The apps make it easy to view and enroll in courses, or to download new course material, and most importantly helps students stay up-to-date with notices. In this article, we will be writing about our experiences developing and maintaining the CMS apps of our campus.

CMS-Android

Currently maintained by Abhijeet Viswa

A Brief History

CMS-Android is a Moodle client used regularly by students of BITS Pilani, Hyderabad Campus. It was conceived in late 2016 and development began in the winter of 2016 by Harshit Agarwal and Siddhant Kumar Patel, students from the 2014 batch. Back then, the official Moodle app’s notifications weren’t all that great and students frequently missed out on notices. The development of the app also gave Harshit and Siddhant an amazing opportunity to get started with Android app development.

Improvements over the past few years

The first version of the app was released onto the Google Play Store on January 23, 2017. Since then, a number of releases have been made, constantly improving the experience of the user by fixing bugs and adding new features.

One of the biggest complaints that users had was the bland look of the app. Crux being a bunch of programmers, there was never a focus on overhauling the aesthetics of the app until recently. Major visual improvements were made starting from 2019. A Dark theme was added by Chellapilla Shri Akhil. Later on, Vaishnavi Shrivastava reworked the UI and UX, keeping in mind Material design principles.

Performance was another part people had complaints about. Jank (i.e slow rendering) was a common occurrence. Even if people grew used to it, it was never desirable to begin with. There is on going efforts to improve the overall responsiveness of the app, keeping in mind the latest Android design and performance principles.

Future Plans

Android as a whole and the ecosystem is constantly evolving. New versions of Android come out every year, vastly improving user experience. However, this also means that CMS-Android also needs to be continuously updated to ensure we don’t fall behind.

The original intention of the app was to improve notifications compared to the official Moodle app. The app used to frequently poll to find updates and notify users. However, this has been problematic recently due to the recent push by Android to adopt push notifications. This has been exacerbated by the fact that many Android OEMs intentionally prevent background processes from running to improve battery life, resulting in users missing out on important updates. We’ve been working on installing a Push Notification plugin on our Moodle server which would allow for notifications to be sent directly to the user, both on Android as well as iOS.

Students are the exclusive users of CMS-Android. We plan to add Teacher specific features so that professors too may use the app for things like adding new notices or other course content. Other quality of life improvements and features are also in the pipeline.

The CMS-Android project is nearly 4 years old and a lot of things related to Android development have changed since then. It would be an understatement to say that the project itself hasn’t kept itself up-to-date with the latest guidelines and development principles. Over the next coming months, we plan to improve the project codebase as a whole, thus allowing new Android developers to take part in contributing to the project.

CMS-iOS

Developed and maintained by Hridik Punukollu and Aryan Chaubal

Initial Development Process (Hridik)

The initial idea for the app came about in the first Crux meet for Sem 1, 19-20. I’d learnt Swift the summer before, and Crux finally had gotten the nod to apply for funding. So when I pitched the idea, they said cool, get a working prototype ready and we’ll fix up a meeting with Prof. PK Sahoo to go further. So for the next month and a half I did nothing but code the app. Initially I created what I thought should be the flow of the app using the Storyboards on Xcode. Next, I started coding up the basic layouts of the individual screens and linking the components together. I made it a point to stop using the Moodle app and use my app only, so I’d know the things that it was missing and what issues it had. One thing that the app was desperately missing, was offline data. Which meant every time I opened the app it needed to reload the data from the internet. Which is where Aryan comes in.

Induction Process (Aryan)

In my first ever semester at BPHC, in September of 2019, I applied for Crux inductions in the field of iOS App Development. Having not worked on any serious projects before, my demo apps included a Flappy Bird clone and a half-baked reminders app. Luckily though, I was asked to showcase my apps and explain my code which I had revised prior to the inductions. For the second round, I was finally tasked with the CMS App. My job was to add caching of courses and modules so that they could be viewed when a user was offline. At this point, the app was in its infancy, with only the basic features completed (like Hridik described above). Despite that, I was overwhelmed. My previous experience involved no more than making small, distinct apps, exploring different aspects of app development. I had started learning app developement in my tenth grade, but had completely lost touch because of JEE. In fact, I had downloaded the huge 8 GB Xcode IDE just one night before my inductions (BITS-WiFi had an unlimited guest account at that time). I didn’t have much experience with working with APIs and was completely unfamiliar with Git. The first thing I had to do was to understand the existing codebase. Since the app used many popular dependencies like Alamofire and SwiftyJSON that I had previous experience with, this was not much of a hassle. After a lot of research, reading documentation, answers on StackOverflow, and a ton of experimentation, I was able to complete my task. Since I was unsure and under confident about whether I was actually going to be able to finish it, I had inherently finished the allotted task much quicker than I was supposed to. Hence, I was given another job to complete before the deadline. Since many teachers uploaded similar modules in one folder, I had to add support for these. I also had to work on course search on the main Dashboard page. Thankfully, I learned a lot during the previous tasks and was able to finish these with relative ease. One interview later, I was finally inducted into Crux, where I worked further on many features in the app today.

Journey over the next 3 months

The first thing I did as soon as I got inducted was the addition of Dark Mode. Luckily, this had been made extremely easy with native support in iOS 13. We then began adding icons for different types of modules (PDFs, DOCs, links, etc.), making sure they worked on both dark and light mode. We began changing the user interface, and refining small details to make our app unique. Next, we worked on notifications for new modules and announcements. I would like to elaborate on some of these features in the upcoming sections.

Design Evolution

Our app started out as a simple list of courses. Over time, we started developing a more complex user interface involving colors, custom cells, and a more bubble-like look and feel while making sure that we stick to the Apple Human Interface Guidelines. We tried to incorporate our own design, take inspiration from other beautiful apps and websites, being careful not to drift too far away from the native iOS design language. We decided to show you screenshots of the Dashboard page from the earliest version of the app, so, you can see how far we have come.

1 2 3 4 5
1 2 3 4 5
  1. This was the original design of the app. It did not include any custom elements and consisted of the default table view with large title.
  2. We finally added a custom table view cell. This one included the course name and course progress in the cell having a slight corner radius and shadow.
  3. We finally began embracing the bubble-like user interface we are using today. Other than that, we decided to change the progress bar color to the app accent color-orange.
  4. We decided to ditch the progress bar, since no one uses course progress on CMS anyways. We also separated the course code from the course name, taking inspiration from another design we found here. This was the design used in our early TestFlight builds.
  5. This is the final UI we came up with. With a simple design and no wasted space, we decided to go with this. Other than a few sizing and alignment differences, this is the version in use today.

Notifications

One of the biggest challenges we faced while developing this app is notifications. Right up until the week we developed it, we had no idea how we were going to do it. I started looking into Background App Refresh. It is used to update the app's content when the app is in the background, so that users do not have to wait for new content when the app is launched next. I could't find any documented cases of an iOS app that sent notifications through Background App Refresh online, so, I was unsure whether it would even work. Luckily for us, we could send notifications from Background Fetch. If you are interested, I have given a detailed explanation of how it works below.

When the app is in the background, iOS may sometimes grant it permission to refresh its contents, letting us poll the Moodle server for new data. If any new modules and announcements are detected, a notification is sent to the user, letting them know about the new content. We have to make sure that the entire process takes place within 30 seconds, or, iOS may not give background access to the app in the future. This is dependent on various factors, like the user’s battery status, cellular signal, internet speed, etc. Since we cannot control when the system decides to execute background fetch for the app, notifications may not appear for large amounts of time. There is also no chance the app will get time for fetching content if it has been previously terminated.

A solution to this would be to have a middleware server do all the heavy lifting and notify the device when new course content is discovered. Since the server has nothing else to do, it can keep polling Moodle for new content every fixed interval of time. This can even be done with a simple python script using an SQLite database, you can find a demo example I created here.

Teacher Announcements and getting Funds (Hridik)

When we finally pitched the idea to Prof. PK Sahoo, he said everything was great but he wanted to be able to make announcements from his side too, as opposed to having to open his laptop every time. He said he’d speak to the concerned authorities once we showed this to him. He gave me 3 weeks to do it, but it was quite an easy process so I had it done in the next 10 hours. We then met with him again, and he initiated the process to obtain funding.

Finally, when the funding came through, we paid for the developer license, and waited for quite a while for them to verify our details and actually provide us with the account. Pushing to TestFlight came after this.

TestFlight and App Rejections

Once the app had reached a point where we thought it was time to give it to a few people to see crash statistics and such, we pushed to TestFlight and waited for a few days for it to get verified. We actually got rejected once before we were actually able to upload it to Apple. It was because we didn’t give them the credentials required to be able to actually log in to the app. Once it got the clear, we gave the link for the build to a few of our friends and were able to see the spots where it crashed and fixed said bugs in subsequent builds. We also took input from our friends for UI and for things that might not have been as user friendly for people. All of these things were fixed in subsequent builds.

Upcoming Features

During the lockdown, we have been hard at work fixing bugs and adding some new features. While most of the bug and crash fixes are minor, some more exciting features include a rewritten notification system. This will fix most of the bugs related to notifications in the app and make the notification fetch process much faster. We have some great new features on the Dashboard too! You can also search for courses, modules, and announcements now, right through the Dashboard itself. You can now also search for and open courses directly through system Spotlight Search. We have also redesigned the Extras page to include more options and also show your profile. Look for a new update to the app in the App Store soon.

Future Plans

We have huge plans for the app in the future. We would like to have some iOS 14 specific features like Widgets out soon. We are also planning a redesign for the course contents and site news page and more customization options like changing course color theme, app icon, and accent colors.

As mentioned in the CMS-Android section, efforts are being put into installing a plugin on our Moodle server which would allow for sending Push Notifications. This means users will receive notifications for new modules and announcements as soon as they are posted by the professor. We are also planning to create more interactive and rich notifications with more details about the new content uploaded, where you will be able to open a file by clicking a notification or mark it as read without even opening the app.

About Us

You can view/contribute to the CMS Android App here and the iOS App here.
This article was written by the members of Crux BPHC.
Like us on Facebook
Check out our website
See our projects on GitHub

Written by:

Tags

CRUx

Among with Abhijeet Viswa, Aryan Chaubal, Hridik Punukollu

CRUx is the Programming and Computing club for BITS Hyderabad. We aim to better the programming culture of the students and strive to make things on campus easier and convenient via the means of code.

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.