Git Slides

BACK: Navigation

By Mighty Chen and Giovanni Gonzalez

Git Slides is a research project overseen by Angelo Kyrilov, to try to improve computer science education at UC Merced. Currently, there is a working platform, Compass in which students can submit and view exercises for their classes.

The goal of Git Slides is to further develop this idea and develop a platform in which students can interact more with the website. Professor Kyrilov has created a slide presentation system, using the features of Git to iteratively step through code–making comments and noting changes between each slide as you step through each slide. For the purposes of this project, we began developing software (back end and front end) for the many components that were needed for this project.

Use Case Diagram

There are three main users of the application:

  • Students: can view and submit presentations/exercises, view their grades, etc.
  • Instructors: can do the same, as well as creating, editing, or deleting the presentations or exercises.
  • Admin: can add students and register them for classes.

ER Diagram

This diagram describes the different tables we have in our MySQL database. The attributes of our table are of the following:

  • Course(id, title, semester, code, year)
  • Exercise(id, title, instructions, module-fk, total)
  • Module(id, title, course-fk)
  • Presentation(id, repo-path, file, pdf-path, module-fk)
  • Registration(id, user-fk, course-fk)
  • Slide(id, presentation_fk, code, commit)
  • Submission(id, user-fk, exercise-fk, grade)
  • User(id, first_name, last_name, email, password, type-fk)

Users are registered for several courses. Each one of those courses have several modules (think of units in a class). Within those modules are several exercises and presentations. Each exercise will have a list of submissions by that student, which will then be graded in some back-end logic. Each presentation, which corresponds to a Git repository. These presentations will have several slides, which correspond to a git commit.

Application Structure

To connect to our database, we used a Python Flask App. Flask allows us to work quickly to connect with our database and then decide what to do when we receive a POST or GET request to our Flask App server. We created several of these endpoints in order to handle request for information to our database. For example, in our /auth endpoint, the browser sends us information (username, password), which our endpoint will then run through our database to see if the inputs matched our database. If we did find a valid user, we would send back more information (in a JSON format) about that user–the classes they are in, name, etc.

As for the front end, we used a React App to build our website. React allows us to build reusable components and keep a state variable about our application as we go through different components. These components might include things like the NavBar, the Gradebook, or the BodyContent. As we continue developing the project, these reusable components will prove to be helpful to avoid rewriting the same code over and over again, keeping things clean and readable. We also used Semantic-UI and Bootstrap for some of their components to make UI creation easier.

To access our Flask App from our React App, we used Axios to handle asynchronous POST and GET requests to make the application as efficient as we could. For example, we might click C++ Basics (a module) on our SideNav in our web application. This would parse through the application state to find the user, module_id, and course_id and then send that information to the Flask App. Once we receive information back from the Flask App, we would update the state of our website–showing the list of presentations and exercises that are a part of that module.

The project is still incomplete and in progress, but this is what the main page looks like as of 12/7/2018:

Future Work

  1. Continue implementing different components that the website needs to be fully functional
    • Submission Form
    • Body Content should display code/code editor
    • Ability to create and update exercises as instructor
  2. Developing the UI and React App
    • Look into Redux for state management
    • Bug fixes, optimization

Acknowledgements

Angelo Kyrilov for overseeing this project and giving us the opportunity to work on a living and breathing software project that will be used in the future.