Caesar

http://people.inf.elte.hu/hapcy/jstech.php

Javascript technológiák beadandó A feladat egy szerver- és egy kliensoldali alkalmazás elkészítése lesz, tetszőleges Javascriptes technológiák felhasználásával. Akár az órán látott (express + react-redux), vagy egészen más (pl.: koa + angular2) technológiák is használhatók.

Feladat

A Caesar-kódolás megvalósítása lesz a feladat a következő módon:

• Egy kliensnek meg kell adnia egy kulcsot (tetszőleges string).
• A kulcsot elküldi a szervernek, majd a szerver válaszol, hogy az adott kulcshoz milyen eltolás tartozik.
• Az eltolás ismeretében a kliens oldali alkalmazás képes elkódolni/visszafejteni egy szöveget.
• A kódolandó/dekódolandó szövegben az angol ábécé betűi, illetve szóközök szerepelhetnek. Az ábécé betűit a kódolásnak megfelelően kódoljuk, a szóközt hagyjuk helyben.

A megvalósítás részletei

Néhány architektúrális, illetve működési követelményt is támasztunk az alkalmazás egyes részeivel szemben.

Kliens-oldal

• A kliens-oldali alkalmazást single page application-ként valósítsuk meg, azaz a szerverrel legfeljebb ajax útján kommunikáljon.
• Az alkalmazás két képernyőből álljon. Egy a kulcs beírásához, egy pedig a kódoláshoz.

Szerver-oldal

• Az alkalmazás a kulcsokat csak memóriában tárolja. Az egyetlen végpontját egy JSON-t visszaadó tetszőleges végpontként valósítsuk meg.
• Minden kulcshoz tároljunk egy számot, hogy egy újabb lekéréskor ugyanazt adjuk vissza.
• Egy még nem ismert kulcs beérkezése esetén generáljunk egy eltolást, amit aztán mentsünk le.
• Az alkalmazás akár teljesen állapotmentesen is megvalósítható. Ekkor az eltolást egy "tiszta" stringből számot képező függvény segítségével tudjuk megkeresni.

Példa

Józsi és Sanyi szeretnének titkosítva beszélgetni, ehhez ezt az alkalmazást használják. Megbeszélik, hogy a kulcsuk az 'almafa' szöveg lesz. Mindketten beírják az alkalmazás felületének első oldalán, hogy 'almafa', majd továbbnavigálnak a következő képernyőre. Ott Józsi beírja az elküldendő üzenetet, majd megkapja az elkódolt üzenetet. Az elkódolt üzenetet elküldi Sanyinak, amit Sanyi bemásol, és megkapja a dekódolt üzenetet. Majd ezt fordítva, ameddig így szeretnének beszélgetni. (A megkapja rész történhet automatikusan, kattintással, vagy tetszőleges módon.)

Building

Compiling and running this is straightforward and only needs Java to be installed, however if you want to jump straight to running the server head over to releases and grab the newest one. It's a background process so I recommend you starting it in a console if you want to shut it down easily.

java -jar caesar.jar

Security

The backend security solution is based on this article and a few tweaks here and there to support my use case.

The frontend uses the JWTModule to inject the bearer token into the headers of each call heading towards the API.

An interceptor refreshes the token on each http request so it never expires while in the application is in use.

User Groups

• Admin
• User

If you're not running this project from a recommended environment (IntelliJ or VS Code) You can still run it using the command line:

./mvnw spring-boot:run

If you want to use hot reload (and your JVM is capable) just pass the -P dev profile parameter and it will use the necessary JVM arguments.

./mvnw -P dev spring-boot:run

Technologies

Angular 7

Frontend framework

Spring Boot

Backend framework

JWT

Token based authentication and authorization

H2

In-memory database for development

NPM

Package manager for JS projects

Node 10

JS Runtime featuring V8 from chromium

Maven

Build tool for the whole project. Can build and package the frontend too for static hosting

Sass

CSS extension

Dragula

Drag and drop made really easy

Ag-Grid

Datatable, the best

FontAwesome

Icons, awesome ones

Recommendations

IntelliJ IDEA

Java IDE for the backend of this project

Visual Studio Code

IDE for mainly the frontend but can be used for both. Settings

SonarLint

Linting in IDEA for java Install this plugin if you're using IntelliJ

DCENV

Hot Reload capable alternative JVM

Download the latest release of DCENV Light binary, run it with administrator privileges and install it as an alternative JVM

java -jar DCEVM-8u181-installer.jar

This also needs a Hot Swap Agent. Download the latest and place it somewhere in your computer. I already provided one in the .hotswap folder of this repository.

To be able to use the newly installed alternative VM you have to provide the necessary VM arguments. You also need to provide the newly downloaded agent aswell. If you use IntelliJ to start the Spring-Boot application you can do this by opening up the 'Environment' panel and putting this in the VM Options field.

-XXaltjvm=dcevm -javaagent:./.hotswap/hotswap-agent-1.3.0.jar=autoHotswap=true

Postman

REST endpoint testing

Fira Code

Font with ligatures

LiveReload

Reload the Page for Chrome when the server changes

JWT Debugger

Inspect tokens in chrome to check the payload of your token stored in the local storage

Lombok

Compile time magic before compile time Install this plugin if you're using IntelliJ

Chocolately

Package Manager for Windows

Travis CLI

Command Line Tools for Travis

You need ruby to use the Travis CLI

Windows:

choco install ruby

then follow the instructions on the link given

BFG Repo Cleaner

Clean big files from the git history

Services

GitHub

Git repository

Travis

Continuous Integration solution

To setup automatic deployment to Heroku through travis you either enable the Travis app on Github and then enable CI on Heroku or you tell Travis to deploy to Heroku in the configuration file of Travis. The Travis CLI has a wizard for setting up this entry. You need both Travis and Heroku CLI's installed.

travis setup heroku

Heroku

Deployment Platform

Codacy

Code review tool

Code Climate

Code review tool for maintainability

Shields

Badges to look cool