72 lines
3.1 KiB
Markdown
72 lines
3.1 KiB
Markdown
# 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:
|
|
|
|
```bash
|
|
$ 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](https://hub.docker.com). 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](https://hub.docker.com/r/pfingstfrosch/waecm-2021-group-04-bsp-3-fe)
|
|
* sha256 digest: 68278575a559e2c28f3f68646985175c268c47a7401da2a3fac67d7a5e994727
|
|
* [waecm-2021-group-04-bsp2-be](https://hub.docker.com/r/pfingstfrosch/waecm-2021-group-04-bsp-3-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](https://student.inso.tuwien.ac.at/01527193/waecm-g4/-/tree/custom-cookie-banner/frontend)
|
|
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`.
|