Web Application Engineering Assignment 3 -- Group 04

Technology Stack

• Angular for our frontend
• Django for our backend
• Database: sqlite3

We chose this specific stack because all of our team members have previously worked with this combination of Angular/Django and there is a lot of documentation for it online. We chose sqlite3 as persistence layer because it comes out of the box with django. Django also provides a built-in ORM mapper. Our db schema is very simple, sqlite3 handles it well.

Linting

We use the ng lint command to lint our frontend. For this to work, angular-cli must be installed. After that run the following in the frontend folder:

$ ng lint

Setup

Our project can be run with a simple docker-compose up from the project's root folder. By default it will pull the required images from docker hub. To instead build the images locally, comment out the build keys inside the docker-compose.yml file.

The docker-compose.yml file builds the images by calling the Dockerfiles in the folders frontend and backend. The frontend is served via nginx on port 4200. The backend is served via gunicorn on port 8000.

The container's database folder is mounted to ./container_db of the host's docker-compose folder. Therefore, the database is persisted at the client's filesystem.

The docker images are available at:

• waecm-2021-group-04-bsp2-fe
  • sha256 digest: 68278575a559e2c28f3f68646985175c268c47a7401da2a3fac67d7a5e994727
• waecm-2021-group-04-bsp2-be
  • sha256 digest: 90befdf477d700c7c25efde38192cff2cf457207b27c01141c466444fc03e2e3

CI

Look at git-lab project https://gitlab.com/Pfingstfrosch/waecm-g4-CI for CI execution. This repository is mirrored to the CI repo, where the pipeline is executed.

Cookie Banner Custom Element

For evaluation purposes the original code (angular project) for the custom element is presented in this repo in this branch. The custom element was developed in angular because it was convenient to set up a new project, develop the component (with all the benefits of angular), and export it. Our Custom Element has additional optional attributes [statistik]=(bool) and [marketing]=(bool) to initialize the checkboxes (e.g. if one wants to show the user what he selected earlier). The Element is implemented in our Landing Component (that contains the angular routing component), therefore the banner is controlled at a single point in the app. A Angular Service makes the Banner Selection available within the whole app if necessary.

Location of Tests

The first tested component is our feed creation component in frontend/src/app/component/einstellungen/editieren/. The file with the tests is in the same folder under the name editieren.component.spec.ts.

The second component is in the folder frontend/src/app/component/tweets and the tests in tweets.component.spec.ts.