Aufgabe 2, Service

In dieser Aufgabe erweiterst du die Aufgabe 1 mit einem Service, um die Daten von dort zu holen.

Backend erstellen

Das Backend kann auf unterschiedliche Versionen erstellt werden. Hier habe ich mal zwei Möglichkeiten aufgeführt.

Version node-red

Wir fahren eine node-red instanz hoch und auf dieser Instanz importieren wir dann den Workflow.

Erstelle die Folder Struktur:

mkdir docker/nodered

Lege dort die Datei docker-compose.yml an und kopiere folgenden Inhalt:

version: "3.9"

services:
   nodered:
    image: nodered/node-red:latest
    restart: always
    ports:
      - "1880:1880"
    user: root
    environment:
      - NODE_TLS_REJECT_UNAUTHORIZED=0      
    volumes:
      - nodered_data:/data

volumes:
  nodered_data:
    driver: local

Starte jetzt dieses compose file im Verzeichnis mit:

docker compose up -d

Verbinde dich mit dem nodered auf: node-red{target=_blank}

import flow

über das Import Menü kann jetzt der folgende json Inhalt eingefügt werden und aktualisier werden.

Testen{target=_blank}

[
    {
        "id": "cdcf41738a21f785",
        "type": "tab",
        "label": "Matches-Sample",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "a1e8b1227c84b642",
        "type": "http in",
        "z": "cdcf41738a21f785",
        "name": "",
        "url": "/matches",
        "method": "get",
        "upload": false,
        "swaggerDoc": "",
        "x": 270,
        "y": 420,
        "wires": [
            [
                "531409ccaafe8f5d"
            ]
        ]
    },
    {
        "id": "04a581314801b8e7",
        "type": "http response",
        "z": "cdcf41738a21f785",
        "name": "",
        "statusCode": "",
        "headers": {},
        "x": 1090,
        "y": 420,
        "wires": []
    },
    {
        "id": "531409ccaafe8f5d",
        "type": "function",
        "z": "cdcf41738a21f785",
        "name": "function 2",
        "func": "msg.payload = [\n    {\n        id: 1,\n        matchNo: 1,\n        teamA: 'Manchester City',\n        teamB: 'Real Madrid',\n        goals: [\n            {\n                time: '14:33',\n                player: 'a player name',\n                special: undefined,\n                scoreA: 1,\n                scoreB: 0,\n            },\n            {\n                time: '48:04',\n                player: 'another player name',\n                special: 'penalty',\n                scoreA: 1,\n                scoreB: 1,\n            },\n        ],\n        state: 'finished',\n    },\n    {\n        id: 123,\n        matchNo: 2,\n        teamA: 'Real Madrid',\n        teamB: 'Manchester City',\n        goals: [\n            {\n                time: '12:33',\n                player: 'a player name',\n                special: undefined,\n                scoreA: 1,\n                scoreB: 0,\n            },\n            {\n                time: '75:04',\n                player: 'another player name',\n                special: 'penalty',\n                scoreA: 1,\n                scoreB: 1,\n            },\n            {\n                time: '93:53',\n                player: 'a player name',\n                special: undefined,\n                scoreA: 1,\n                scoreB: 2,\n            },\n        ],\n        state: 'running',\n    },\n    {\n        id: 153,\n        matchNo: 22,\n        teamA: 'Real Madrid',\n        teamB: 'Manchester United',\n        goals: [],\n        state: 'coming',\n    }\n];\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 640,
        "y": 420,
        "wires": [
            [
                "04a581314801b8e7"
            ]
        ]
    }
]

version mit nodejs/nestjs

Auch das geht natürlich einfach.

Erst mal etwas zusätzliches installieren und wir machen es absichtlich im dev block.

npm i --save-dev express cors

Lege einen Ordner server an

mkdir server

erstelle eine Datei matches.json und kopiere den folgenden Inhalt:

[
  {
    "id": 1,
    "matchNo": 1,
    "teamA": "Manchester City",
    "teamB": "Real Madrid",
    "goals": [
      {
        "time": "14:33",
        "player": "a player name",
        "scoreA": 1,
        "scoreB": 0
      },
      {
        "time": "48:04",
        "player": "another player name",
        "special": "penalty",
        "scoreA": 1,
        "scoreB": 1
      }
    ],
    "state": "finished"
  },
  {
    "id": 123,
    "matchNo": 2,
    "teamA": "Real Madrid",
    "teamB": "Manchester City",
    "goals": [
      {
        "time": "12:33",
        "player": "a player name",
        "scoreA": 1,
        "scoreB": 0
      },
      {
        "time": "75:04",
        "player": "another player name",
        "special": "penalty",
        "scoreA": 1,
        "scoreB": 1
      },
      {
        "time": "93:53",
        "player": "a player name",
        "scoreA": 1,
        "scoreB": 2
      }
    ],
    "state": "running"
  },
  {
    "id": 153,
    "matchNo": 22,
    "teamA": "Real Madrid",
    "teamB": "Manchester United",
    "goals": [],
    "state": "coming"
  }
]

Lege dort die Datei server.js an mit dem folgenden Inhalt:

const fs = require('fs');
const express = require('express')
const cors = require('cors')
const app = express()
const port = 3000

const filename = __dirname + '/matches.json';
const txt = fs.readFileSync(filename, { encoding: 'UTF-8' });
const matchData = JSON.parse(txt);

app.use(cors())

app.get('/matches', (req, res) => {
  res.json(matchData)
});

app.listen(port, () => {
  console.log(`Matches sample app listening on port ${port}. http://localhost:${port}/matches`);
})

Ergänze dein package.json mit einen neuen Eintrag unter scripts mit:

"server": "node server/server.js"

Testen{target=_blank}

Service erstellen

Erstelle jetzt einen Service, welcher von einem der beiden Backends seine Daten bezieht.

Tip

Du kannst gerne auch beide Versionen implementieren. z.B. nodered für die Tabelle und deinen lokalen Server für den div Teil.