PedF CUNI - User-friendly Recognition of Completion of Courses

2020/08
logo

Background

In the last year of high school, every student has to build a website, a seminary work, an application according to some chosen assignment - and I randomly picked this one. The assignment was to build a web application with the following functions:

  • Login and registration for users
  • Use publicly available data from the Faculty of education at Charles University
  • Let the user search and pick only classes/subject that can be picked for his field and department
  • Fill the data into the official PDF form and make it printer-friendly While having the option to write everything in PHP and be done in 3 hours, I decided to make this work "portfolio friendly". I already have some experience with React, but I wanted to try something new, so I chose Angular. Combined with smooth SPA project generation (Angular + WebApi) and some previous experience, NetCore was my choice for the back-end.

Development - source code

Structure

Whole project can be divided into following parts:

  • Back-end
    • KarolinkaUznani.Api - Api containing only controllers and connection to RabbitMQ
    • KarolinkaUznani.Services - Services themselves
      • ... .Auth - Everything related to users - sign up, login, ...
      • ... .Data - Fetching data related to Karolinka only from the database
  • Front-end
    • KarolinkaUznani.Api/ClientApp - Whole front-end client with styles and everything around
  • Database
    • Database/*.sql - SQL scripts to create and seed the database from
    • KarolinkaUznani.Database - contains only stored procedures
  • Tools
    • DockerDeploy - script for one-click deployment of the whole project
    • KarolinkaToSQL - script parsing Karolinka into one huge SQL insert

Front-End

There isn't much to say, the development was (obviously) very similar to React. The only thing I would like to mention which I'm proud of is one ugly workaround. The form that has to be filled with the final data is an Excel spreadsheet with some custom-ish styling. It's huge and spending hours making it look same, but as a responsive table in HTML would be painful, so I tried multiple ways of converting such file into HTML. Some results were awful, some were better, but none of them was good enough - most of the time, thanks to the inability to scale properly for printing. Then someone very bright (I think it was me) had a great idea of converting it to SVG. That thankfully worked great and with some CSS scaled perfectly.

Server

To make everything fresh and cool I wanted to meet these requirements for no real reason (remember, this is 3 hours project in PHP and some JavaScript):

  • Microservices
  • Docker
  • Deploy script Having already one project built with NetCore and microservices around RabbitMq the start was pretty easy, then I designed the database - MySQL - and implemented it - wrote some SQL procedures.

Tools

While developing this project, I created a few tools:

  • KarolinkaToSQL - scrapper and parser for Karolinka, one huge ugly-ish Python script
  • DockerDeploy - shell script that builds the whole project, deploy it in docker and fill the database with new data

None of them is really fancy, but to this point, they work ~~perfectly~~ good enough.

Technologies

General

  • Docker - for simple project deployment across other systems
  • RabbitMQ - messaging queue for communication between API and Services
  • MySQL - platform on which is the whole database based around

Docker A great tool to eliminate "it works on my machine" phrase. Simple to setup with docker-compose and sounds great as a buzzword. RabbitMQ Since RabbitMQ is the most used solution of its type, combined with RawRabbit (.Net framework for communication with RabbitMQ server) and since it's also used at my workplace, the choice was simple. MySQL To make everything sound even cooler my first choice was MongoDB, but since the relational database is a better choice for this project, I stuck to MySQL which I already have more experience with. However, the whole structure of this project takes in mind possible usage of other types of databases.

Back-End

  • C# DotNet Core - framework the whole project is based on C# DotNet Core With my love for modern C#, its usage at my workplace, simple one-click creation of SPA (Single Page Application) web project and an already solid amount of experience, the choice was simple.

Front-End

  • Angular 7 - front-end TypeScript based web framework
  • SCSS - CSS extension language

Angular 7 With already some experience with React, I wanted to try something new, its also used at my workplace and with its popularity in other job listings, it was a simple choice over VueJS. TypeScripts SCSS Pure CSS makes me ~~sucidal~~ unhappy to work with, especially on bigger projects, so LESS or SCSS was an obvious choice. For my purposes, both would do the job just fine, but SCSS was easier for me to integrate with Angular.

Tools

Python 3 With a solid amount of libraries, Python was the perfect choice for something like a script parsing HTML from a website.

Screenshots

What would I do differently

The microservices design isn't ideal (as before) - Remote Procedure Call isn't the smartest way, maybe I bodged some things too much (KarolinkaToSQL is truly ugly), but in the end, I'm pretty happy with the result.

Installation and requirements

Rquirements:

  • Debian
    • tested on Linux Mint 18.04 but should work on any common distro
  • DotNet Core SDK
    • rested with version 2.2.0
  • Docker
    • tested with version 18.09.4
  • Python 3
    • with following libraries: uuid, urllib, lxml
  • MySQL client
    • testesd with version 14.14
  • Networking:
    • api.local redirected to 127.0.0.1 (testeds using hosts file)
    • Ports:
      • Web: 8080 - application itself, 5000, 5050, 5051 - running api and services
      • RabbitMQ: 5672 - messaging queue itself, 15672 - RabbitMQ management
      • Database: 30006 - MySQL database port

Installation

# requirements already satisfied
git clone https://github.com/antoninkriz/KrizikPedFUznaniPredmetu.git
cd KrizikPedfUznaniPredmetu/Tools/DockerDeploy
sudo ./netcore-publish.sh