Back then, it was the first time SAIS was going to be used for our enrollment process. Most students weren’t really en-thusiastic with this change from SystemOne; the new system is clunky, slow, and ugly. Its user interface looks straight-from-the-2000s. Of course we, spoiled with the modern interfaces of Face-book, Twitter and the likes, disliked this system because of its interface, usability, and many other factors like the politics behind it. The hashtag #JunkSAIS became a trending topic on Twitter.

So came the first day of being able to add subjects to our shopping cart. It’s not yet the actual enrollment day, just the times we’re able to add subjects that we’re soon going to take on the enrollment day. Adding subjects to cart is easy - you just have to enter the class number of the class you’re going to take! But to get the class number, first you have to search your sub-ject that will take you a lot of clicks before you get to see what you need. After that, you get to see your subject in a tabular fashion.

After adding a few subjects I figured out, what does my schedule look life so far? Surely, we can’t imagine the whole picture based from typed schedules right? In SystemOne we have this visual repre-sentation of your schedule. But here in SAIS, you can’t.

Simply put, it is appalling in terms of user experience. It’s not user friendly, it’s not enjoyably usable, and most of all, very different from what we are used to. I mean, I could go on a ranting spree on Twitter and join the bandwagon in hating SAIS (which I actually did, haha), but that’s not gonna magically summon a visual repre-sentation of my schedule from the SAIS team. We screamed our voices, but that’s not enough. We need actions to fix this mess.

I was undergoing my internship at a software company during those time. I did thought of creating a Chrome extension or a Web application that would wrap the system’s interface into something better looking, but still using SAIS’s backend behind the scenes. But I don’t have the luxury of time to do that, so maybe I should just start something small instead.

So that night I thought, what if I made a Chrome extension that places a button somewhere in the Add to Cart page and displays a timetable similar to SystemOne? At this point I was just thinking how can I make my own experience better. Because I’m a lazy person, I’ll find an easy way to do something. And if there exists no easy solutions, I’ll make one. I consulted my orgmates about this idea and they think it’s gonna be cool project. Then I fell asleep.

Next day I went on my usual internship duties. I worked until 7PM, ate dinner, and started researching for this project. I fig-ured out how to create extensions and they use technologies that I’m already familiar with (JavaScript). And so I started planning. It was relatively easy: Someone who has used SystemOne would be familiar with the looks of Scheda. It’s responsible for rendering that timetable that we download, save on our phones, and set as our wallpaper for the first weeks of a semester. Since people are already familiar with it, why not use it as well for this project. People might get that old SystemOne feeling again.

1. On page load, scrape the data from the HTML elements 2. Save these data into a more organized data structure 3. Use these data to generate a timetable from Scheda.js

Scraping the data from SAIS was not easy. They used randomized characters as ids for their HTML elements (I assume this was automatically generated), they use nested tables for layouts, and they used iframes for that “Single Page Application” experience. I have to figure out what IDs to select using jQuery and traverse down their complicated forest of DOM. I then used my knowledge in regular expressions to figure out what in the table is the time, the subject, and the venue.

After a few hours I was able to scrape the data from my test cases, now comes the easier part. I saved the subjects (as a JavaScript object) into an array, and used that data to generate the timetable itself from Scheda.js. And what was once a mess of a schedule now looks like this:

It didn’t actually look like that on its first release. It used to have a little plus anchor tag, and no way to download your schedule yet. Also, colors are randomly generated so your lecture and recitation sections on the same subject might have different colors. But at the time, it sufficed my needs. The code was also a complete mess, it was already night time and I was tired from my internship work. So I cared a little about my code elegance (don’t take this as an excuse to write sloppy code on your works, haha). Anyway, I had my orgmates test the extension and probably have them use for their needs as well. For some it worked, for some, no. After a few fixes, it now works for all of my orgmates.

Now, they are suggesting to publish it on the chrome webstore and publicize it for eve-ryone’s use. I didn’t think about that at first, as mentioned before, I thought of making it for my own needs. But then I realized that some people’s needs are similar to mine, so sure, why not publish it then? It would be great helping people anyway.

But for me to publish an extension to the webstore I need to pay a $5 developer free to Google. But that didn’t stop me, I did pay the fee to publish the extension. After all, I had salary that time so it’s fine for me. The next night I publicized the exten-sion on my Facebook and Twitter account. It quickly spread in a short time, and I kept getting notifications nonstop about people sharing/retweeting my post. Soon enough I was receiving messages - it’s either people thanking me for developing or, or people telling me the extension does not work on them. So after asking a few questions on people where my extension didn’t work, I figured out that my regular expressions couldn’t catch all the schedule cases and subject names. After a few revisions and some republishing, I believe it works for most now. Both the UPLB and the UP Manila community were using it. I wasn’t actually prepared for such exposure.

But that wasn’t the best part. Some-one was interested in helping me in the extension as well. It didn’t have the down-load feature and the matching colors of the recit and lecture sections. He was kind enough to offer his help in developing that feature as I was too busy fixing bugs and in OJT to develop it. Now people are work-ing with each other, to help each other. How cool is that?

Being able to read people’s reactions and feedback on this extension is truly heartwarming. It feels an honor being able to serve people, a very UP-like value. This mess of a system actually made way for people to help each other, as I was not the only one developing a solution for its prob-lems. Computer Science students develop-ing awesome things for others sure is a wonderful sight.

As of this writing, the extension has 6,250 current users. It is used often every enrollment season. Sometimes I see ran-dom posts of strangers sharing their schedule on social media and it was down-loaded from my extension. Sometimes when I unconsciously look at other’s phones in the jeepney I see their wallpaper as their schedule downloaded from my extension. Up to this day I still feel the significance of my work and it feels fulfilling for someone who wants a profession in web development. This timetable might be a minor convenience for most in their daily lives, but for me, a major milestone in my life.

My extension is open sourced, you can check out the link below if you want to see the code for yourself. I warned you, it’s messy. :)

https://github.com/megatricycle/sais-timetable