Zot Class Mobile

A mobile app which allows you to take ZotCourse where ever you go! You don't need to use your computer or a website, but it is now conveniently on your mobile device!

Comment 1

Inspiration

We got our inspiration from ZotCourse, which is a popular class scheduler for students at UCI. We wanted create an application that is able to show class information for students. When a student tries to search up their classes in ZotCourse or WebReg on their mobile browser, the interface feels scrunched and uncomfortable. With Zot Class Mobile, students do not have to go into a browser and look up their classes from there. Instead, they can just have an app on their phone that just shows the class information.

What it does

What Zot Class Mobile does is allow the user access to information from ZotCourse on their mobile devices. You can look up classes based on the term, department, course code, and course title and Zot Class Mobile will return which classes fit the requirements the user inputs. Zot Class Mobile will also return other important information on the classes you select such as term, department, course code, course title, the days of the week the class is happening, the starting and ending times, and the amount of units the class gives.

How we built it

Frontend: We implemented the front end using Flutter. First, we divided the user interface of the two screens by having one page focus on the search inputs and the and dropdown menus, and then the other page focusing on displaying the searched courses through a scrollable list view. After creating the basic functionality for the front end, we implemented the back end using get requests to filter data from the back end API and display it properly. After getting most of the functionality and displaying the correct data within the given amount of time, we did our best to work on UX/UI design.

Backend: We started off communicating with the frontend on what we wanted to build, and we decided on making a mobile app that used information from the PeterPortal API. The backend started out with a flask and we used it as a framework to make API routes. We assigned these API routes to certain functions that accessed certain structures of information. Based on what the frontend imputed to us, we would find what information fit the requirements for that input and return all the information associated with it. After we were able to organize the information based on certain requirements, we then had to sort the information we wanted from the information we didn’t want. We utilized for loops to access nested structures in order to find the information inside each object and we returned what we found back inside the function we used to send to the front end. We also utilized gunicorn and git to deploy the code on Heroku so that our code was accessible outside our single laptop.

Challenges we ran into

Mason: One challenge that I had was figuring out how to set the parameters the user inputs in order to find certain classes and the data associated with those classes. Approaching this problem, my mentor really helped me to understand that I didn't have to know everything, I just had to know how to utilize my resources. Looking online, I searched up functions and algorithms that were implementable for me in the situation. Through this challenge I really learned how to go about solving problems I run into while in a new coding environment by utilizing my resources and persevere through trial and error.

Alyssa: A challenge that I ran into was thinking of the most efficient way to display the information needed, or basically thinking of the user interface design. I did not realize how tedious it is to think of how we want our user to interact with the program. It really made me think whether implementing some object here or there would make the whole program feel more natural or awkward. Another challenge I had was trying to figure out how my code would work with my teammates code. I really had to communicate with my teammates to make sure the data we are sending and getting from each other are in the correct formats or if we are getting and sending everything we need.

Isabel: The main challenge I faced was having no prior experience with Flutter. Learning a language while on a time crunch to create a viable product with me made work faster than I thought possible and made me get creative with my approaches to problems when data structures I was familiar with were not available or certain functionality had to be implemented completely different to the languages I knew. It's humbling to be 2 hours into a hackathon and having to google how to declare an array in the language you're using, but also incredibly gratifying when you have an end result that works.

Austin: The main challenges that I faced was having the proper structure for for-loops and manipulating the data from the nested structures. The structure for for-loops were difficult as I had to change my variables which would lead to either syntax or indentation errors. This made the code messy and more difficult as errors would occur in other areas. The other problem with manipulating the data from nested structures is also similar to the first challenge as it caused errors - being relatively new to coding caused difficulty in appending lists with dictionaries to produce the output. However, Dylan (mentor for our group) helped throughout the process by guiding and challenging me which really motivated me to complete the code. He taught me to strengthen my foundations and know where to find my errors.

Accomplishments that we're proud of

Mason: An accomplishment that I am proud of is that I was able to deploy the code onto a public onto Heroku. I was really proud of this because it was my first step into making my project available and accessible to everyone in the world and not just on my computer. I was also really proud of this because I really struggled getting it to deploy and it taught me a lot about how to debug an error.

Alyssa: One thing I am proud of is being able to learn how to use Flutter and create a usable UI within the given amount of time. Basically, just learning a new language is a great enough accomplishment. I am also proud of writing code that is usable for my other teammates and being able to use my other teammates in my code as well.

Isa: Something I am proud of is being able to connect the back and front end. I had used APIs a couple of times before in javascript but the formatting for Flutter get request were very different and the documentation was not amazing. I had to frantically research different methods when the previous one I tried failed, but when I finally got it working it was very gratifying.

Austin: An accomplishment that I am proud of was to get out of my comfort zone and grow - as a new coder I was anxious about not being able to contribute much but I thoroughly enjoyed the whole journey. I was also able to use new techniques for my code and it worked so I was proud of myself for that.

What we learned

Mason: I was able to learn how to access data from a public API (Peter Portal). Using different modules such as Flask and Requests were new modules that I didn't know how to use before Zothacks. It was challenging learning how my code worked with Flask, especially testing it with local web servers. I also learned how to organize data from API in a way that makes it possible for users to access data based on certain parameters. More specifically, I learned how to use app routes in order to specify which functions were being called which helped a lot with the organization of the project. I also learned how to upload the code onto Heroku, making the code accessible to everyone and not just on my computer.

Alyssa: I was able to learn how to use Flutter and learn how to code in Dart. It was challenging trying to learn how to learn a whole new language and then building a mobile app that has an interacting frontend and backend in a short amount of time. This was really my first time doing a frontend like this, so I learned what widgets are and how to implement them into a UI. I also learned that we really need to plan what UI looks like first, so we know how to implement that into code.

Isa: I was able to become fairly familiar with Flutter in a very quick time when I had never used it before and got more comfortable with using get requests. I also learned a lot specifically about the widget functionality in Flutter and how to use them to more easily create buttons, or drop down menus, or field text and take those inputs and pass it to another screen. Overall it was really cool to play with a UI interface that I was completely inexperienced with and having the countdown push me to learn faster than I though I could.

Austin: I was able to gain an abundant amount of experience working with a group setting. Learning how to separate work and connecting the code together to produce an output was an important and useful experience. It taught me the significance in collaborative work - being taught by others and applying it really helped in finishing my code. I also learned how to use different modules and different methods to code. Before Zot Hacks, I have only learned about python so being able to experience and learn other modules is useful to me. It was a good first experience and it will prepare me well for future events.

What's next for Zot Class Mobile

Frontend: In the front end, we want to include features that allow users to search classes by their individual course code and course name. Right now, it only searches successfully with a term and department. We also want to implement more information about each class that shows where the class is located, how many students are enrolled, and whether the class is open or waitlisted. Lastly, we want to improve the user interface so the app looks and feels more appealing and smooth to the user. Unfortunately, we weren't able to deploy it because we did not want to pay for the apple licensing fee to deploy it to the AppStore.

Backend: For the backend, we want to be able to implement more search terms that the user is able to include to further narrow their search. Due to the lack of time, we were forced to determine for ourselves the most important search terms for classes and did the best we could. If we had more search items in our database, we better utilize nested structures and ultimately a more effective and efficient search process for the user.

Built With

Share this project:

Updates