[ Die Schritte 1a bis 2c können übersprungen werden, wenn du diese bereits einmal durchlaufen hast.]

1. Git clonen
   a. Terminal öffnen: WINDOWS-Taste / "cmd" eingeben
   b. Zum Pfad navigieren, wo Git-Repository abgelegt werden soll
   c. git clone https://github.com/tlau10/OR-WebSS21.git
   

2. Konfigurationen für Vuetify
   a.Nodejs LTS installieren: https://nodejs.org/en/
   b.vue cli installieren (cmd als Admin ausführen): npm install -g @vue/cli
   c.Dependencies installieren (im Projektverzeichnis ausführen): npm install
   

3. Lokalen Server starten
   a. Projekt öffnen in IDE (z.B. Visual Studio Code)
   b. Terminal in IDE öffnen (in Visual Studio Code mittels Shortcut: Strg+ Shift + ö)
   c. Befehl cd frontend ausführen, sodass man sich dann im Ordner ...\OR-WebSS21\frontend befindet
   d. Applikation auf lokalen Server starten: npm run serve
   e. zweites Terminal in IDE öffnen (in Visual Studio Code mittels Shortcut: Strg+ Shift + ö)
   f. Befehl cd backend ausführen, sodass man sich dann im Ordner ...\OR-WebSS21\backend befindet
   g. Um das Backend zu starten, den Befehl mvn spring-boot:run im zweiten Terminal ausführen
   

1. Im Ordner views/Methods ein File namens .vue anlegen. Darin kann der HTML-Code eingepflegt werden.
2. Route in index.js sowie in App.vue eintragen

 {
    path: '/<Methodenname>',
    name: '<Methodenname>',
    component: () => import(/* webpackChunkName: "about" */ '../views/Methods/<Methodenname>.vue')
  },

3. Im Methodenuebersicht.vue das method[]-Array ergänzen mit
   

  {
        name: "<Methodenname>",
        Kategorie: "<Kategorie_der_Methode>",	   //nach der Kategorie werden die Daten gruppiert 
        start: "<Methodenname>", 	           //Verlinkungsdaten für Aufruf der vue-Seite
        download: "DownloadCenter#<Methodenname>", //Verlinkungsdaten für Aufruf des DownloadCenter.vue (#<Methodenname> verweist auf `:id`-property im DownloadCenter.vue)
      },

4. Auch im DownloadCenter das item[]-Array ergänzen mit
   

      {
        name: "<Methodenname>",
        Art: "Methoden",                                                                //nach der Art werden die Daten gruppiert 
        Kategorie: "<Kategorie_der_Methode>",	   
        start: "<Methodenname>", 				                        //Verlinkungsdaten für Aufruf der vue-Seite
        dokumentation: "Methods/<MethodennameVersionsNr>_Dokumentation.[pdf|zip]",	//Technische Dokumentation
        handbuch: "Methods//<MethodennameVersionsNr>_Benutzerhandbuch.[pdf|zip]",	//Benutzerhandbuch
        download: "Methods/<MethodennameVersionsNr>_Programm.zip", 			//Programm
      },

5. Im Ordner public/Methods werden die Dateien für diese Methode, die später zum Download zur Verfügung stehen sollen, eingepflegt. Dabei sollte die folgende Namenskonvention beachtet werden.

1. Im Ordner views/Solver ein File namens .vue anlegen. Darin kann der HTML-Code eingepflegt werden.
2. Route in index.js sowie in App.vue eintragen

 {
    path: '/<Solvername>',
    name: '<Solvername>',
    component: () => import(/* webpackChunkName: "about" */ '../views/Solver/<Solvername>.vue')
  },

3. Im Solveruebersicht.vue das solver[]-Array ergänzen mit

  {
        name: "<Solvername>",
        Kategorie: "<Kategorie_des_Solvers>",	   //nach der Kategorie werden die Daten gruppiert 
        start: "<Solvername>", 			   //Verlinkungsdaten für Aufruf der vue-Seite
        download: "DownloadCenter#<Solvername>",   //Verlinkungsdaten für Aufruf des DownloadCenter.vue (#<Solvername> verweist auf `:id`-property im DownloadCenter.vue)
      },

4. Auch im DownloadCenter das Array ergänzen mit

      {
        name: "<Solvername>",
        Art: "Solver", //nach der Art werden die Daten gruppiert 
        Kategorie: "<Kategorie_des_Solvers>",	   
        start: "<Solvername>", 				   	                        //Verlinkungsdaten für Aufruf der vue-Seite
        dokumentation: "Methods/<SolvernameVersionsNr>_Dokumentation.[pdf|zip]",	//Technische Dokumentation
        handbuch: "Methods//<SolvernameVersionsNr>_Benutzerhandbuch.[pdf|zip]",		//Benutzerhandbuch
        download: "Methods/<SolvernameVersionsNr>_Programm.zip", 			//Programm
      },

5. Im Ordner public/Solver werden die Dateien für diese Methode, die später zum Download zur Verfügung stehen sollen, eingepflegt. Dabei sollte die folgende Namenskonvention beachtet werden.

1. Neue Vue <name>Execute.vue erstellen
   
2. Vue muss folgende JS Methoden und Variablen enthalten:
   a. function socket()
   

function socket() {
  let wsUri = "ws://localhost:8080/web-socket";
  let message = createMessage();
  let websocket = new WebSocket(wsUri);
  //onopen-Funktion wird erst ausgeführt, sobald eine WebSocket Verbindung verfügbar ist
  websocket.onopen = function () {
    websocket.send(message);
  };
  websocket.onmessage = function (responseMsg) {
    writeToScreen(responseMsg);
  };
 websocket.onclose = function () {
    websocket.close();
  };
}

b. function createMessage()
Methode soll Benutzereingabe zu einem String zusammensetzen. Genauer Inhalt abhängig von Methode/Solver

c. function writeToScreen()
Methode soll die Antwort des Backend verarbeiten und im Frontend darstellen. Genauer Inhalt abhängig von Methode/Solver

d. Globale Konstante const methodenID oder const solverID
Nocht nicht vergebene, eindeutige ID. Um im Backend unterscheiden zu können, an welchen Thread Anfrage weitergeleitet werden muss. methodenID/solverID; an Anfang der Message anhängen

1. In backend\src\main\java\com\orweb\main\Threads neuen Thread <name>Thread.java anlegen
   
2. Bereits existierende Java Klassen von Methode/Solver übernehmen
   a. Für Methode in backend\src\main\java\com\orweb\main\logic\Methods <name>.java anlegen
   b. Für Solver in backend\src\main\java\com\orweb\main\logic\Solver <name>.java anlegen
   
3. In backend\src\main\java\com\orweb\main\Handler\WebSocketHandler.java switch-case erweitern