I made the SAIS Timetable extension and here’s my experience (2024)

Hello. I’m Peter Bernard M. Rupa, developer of the SAIS Timetable. I want to share my experience in the development of this extension.

Back then, it was the first time the Student Academic Information System (SAIS) was going to be used for our enrollment process. Most students weren’t excited with this change from our previous student registration system, SystemOne, to SAIS — it’s clunky, slow, and ugly. Its user interface looks straight from the 2000s. Of course, we, spoiled with the modern interfaces of sites such as Facebook and Twitter, disliked this system because of its interface, usability, and more. The hashtag #JunkSAIS became a trend 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, you have to search your subject 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 thought, what does my schedule look like so far? Surely, we can’t imagine the whole picture based from text-based schedules right? In SystemOne we have this visual representation of your schedule. But here in SAIS, you can’t.

SAIS sucks. Seriously. Poor UX, clunky dull interface, and most of all, very different from what we’re used to. I could go on a ranting spree on Twitter and join the bandwagon in hating SAIS (actually I did), but that’s not gonna magically summon a visual representation of my schedule from the SAIS team. We screamed our voices, but that’s not enough. Maybe we have to fix this ourselves.

So 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 friends about this idea and they think it’s gonna be cool project.

The next day, I went on my usual internship duties. I worked until 7PM, ate dinner, and started researching for this project. I figured out how to create extensions and they used technologies that I’m already familiar with (JavaScript). And so I started planning. It was easy:

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

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.

First, we have to scrape our schedule data. Scraping is basically extracting information from a web page. Since our subjects, the schedules and time slots are available on the SAIS page, we can scrape these, save it to a variable then do anything we want. In this case, use that data to generate a timetable. But scraping the data from SAIS was not easy. They used randomized characters as ids for their HTML elements. They use nested tables for layouts, and they used iframes, an HTML document embedded inside another HTML document, 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 laboratory/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 little about my code elegance (however, do not take this as an excuse to write sloppy code on your works). Anyway, I had my friends 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 them.

They suggested to publish it on the Chrome webstore and publicize it for everyone’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 to publish an extension to the webstore, I need to pay a $5 developer fee 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 extension 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.

It feels an honor being able to serve people, a value that UP takes pride into.

But that wasn’t the best part. Someone was interested in helping me develop the extension as well. It didn’t have the download 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 working 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 value that UP takes pride into. 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 problems. Computer Science students developing awesome things for others sure is a wonderful sight.

As of this writing, the extension has 6,972 current users. It is used often every enrollment season. Sometimes I see random posts of strangers sharing their schedule on social media and it was 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 source, you can check out this link if you want to see the code for yourself. I warned you, it’s messy, and definitely not a role model for what a good code looks like.

Check out the extension here.

—

Peter Bernard Rupa was the Deputy Executive Officer for the Young Software Engineers’ Society for the term 2016–2017. He is a software engineer and now works for Seanjaikim Bookgear, Inc. He’s working on applications that will bring Philippine education system to the 21st century.