htlstp.if.scre

# Backend

---
#### Motivation

Frontends können einige Dinge nicht
* Authentifizierung

* Autorisierung

* Datenspeicherung

* API Key Verwaltung

---
#### Architektur

![](./assets/backend/full-stack.svg)

Kommunikation üblicherweise über http

---
#### HTTP
![http](./assets/REST/http.png)

<div class="fragment">URL - Uniform Resource Locator
<pre><code class="hljs http request" data-trim data-noescape>
protocol://hostname:port/path?field=value
</code></pre>
</div>
note: defaultport 80 für http, Request Parameter für GET

----
#### Request
```http request
GET http://www.htlstp.ac.at/logo
Accept: image/webp, image/apng, image/*, */*;q=0.8
```

```http request
POST http://www.htlstp.ac.at/api/teachers/
Content-Type: application/json

{
  "name": "SCRE",
  "dept": "IF"
}
```

----
#### Response
```http request
HTTP/1.1 200 OK
Server: nginx
Date: Mon, 18 May 2020 18:08:47 GMT
Content-Type: image/png
Content-Length: 4663
Connection: keep-alive
Expires: Mon, 25 May 2020 04:35:30 +0200

PNG

IHDR  
N£%É;%ÚCl³Úí:º0ºRî`Ýze++¡·1Úqõ.¥ôBëm7¹·îd%á
...
```

---
#### Request Methoden
<dl>
    <dt class="fragment">GET</dt>
    <dd class="fragment"><pre><code class="hljs http request" data-trim data-noescape>
        GET http://www.appdomain.com/users
        GET http://www.appdomain.com/users/123
        GET http://www.appdomain.com/users?size=20&page=5
    </code></pre></dd>
    <dd class="fragment">lädt die angegebene Resource</dd>
    <dd class="fragment">sollte bei jedem Aufruf dasselbe Resultat liefern</dd>
    <dt class="fragment">DELETE</dt>
    <dd class="fragment"><pre><code class="hljs http request" data-trim data-noescape>
        DELETE http://www.appdomain.com/users/123
    </code></pre></dd>
    <dd class="fragment">löscht die angegebene Resource</dd>
</dl>
note: DELETE auf Collection-Resource bei Bedarf

----
<dl>
    <dt class="fragment">POST</dt>
    <dd class="fragment"><pre><code class="hljs http" data-trim>
        POST http://www.appdomain.com/users
        Content-Type: application/json
        {resource}
    </code></pre></dd>
    <dd class="fragment">Resource im RequestBody speichern</dd>
    <dt class="fragment">PUT/PATCH</dt>
    <dd class="fragment"><pre><code class="hljs http request" data-trim>
        PUT http://www.appdomain.com/users/123
        Content-Type: application/json
        {resource}
    </code></pre></dd>
    <dd class="fragment">Resource im RequestBody <em>unter Request-URI</em> ersetzen/updaten</dd>
</dl>
note: POST auch bei Requests mit vielen Daten statt Request Parameter  
PATCH ebenfalls möglich für teilweises Updaten

----
#### Status Codes
<dl>
    <dt class="fragment fade-in-then-semi-out">200 - OK</dt>
    <dt class="fragment fade-in-then-semi-out">400 - Bad Request</dt>
        <dd class="fragment fade-in-then-semi-out">Request fehlerhaft, später sicher Fehler</dd>
        <dd class="fragment fade-in-then-semi-out">Bestellt Kebab bei McDonalds</dd>
    <dt class="fragment fade-in-then-semi-out">500 - Internal Server Error</dt>
        <dd class="fragment fade-in-then-semi-out">Request ok, Serverfehler, später vielleicht Erfolg</dd>
        <dd class="fragment fade-in-then-semi-out">Bestellt Pommes, die sind noch nicht fertig</dd>
    <dt class="fragment fade-in-then-semi-out">201 - Created</dt>
    <dt class="fragment fade-in-then-semi-out">204 - No Content</dt>
        <dd class="fragment fade-in-then-semi-out">nach DELETE</dd>
    <dt class="fragment">404 - Not Found</dt>
</dl>

---
#### node Server
```typescript
import {createServer, IncomingMessage, ServerResponse} from "http";

const port = 3000
const server = createServer(
  (request: IncomingMessage, response: ServerResponse) => {
    response.writeHead(200, {'Content-Type': 'text/html'});
    response.write(`
    <html>
        <body>Hello World</body>
    </html>
    `);
    response.end();
  }
);

server.listen(port, () => console.log(`Server listens on ${port}`))
```

```http request
GET localhost:3000 => Hello World
```

```http request
POST localhost:3000 => Hello World
```

```http request
DELETE localhost:3000/what/ever => Hello World
```

----
#### Routing
```typescript
if (request.method === 'GET' && request.url === '/hello') 
  // send hello world
if (request.method === 'GET' && request.url === '/login')
  // login
```

```typescript
if (request.method === 'POST' && request.url === '/transmit') {
  // Daten kommen nicht komplett an, sondern in chunks
  let rawData = '';
  request.on('data', chunk => {
    rawData += chunk
  });  
  request.on('end', () => {
    // use rawData
  });  
}
```

----
#### Form Data
```html
<form action='/submit' method='POST'>
  <label for='name'>Name:</label>
  <input type='text' id='name' name='name'>
  <label for='email'>Email:</label>
  <input type='email' id='email' name='email'>
</form>
```

```http request
POST /submit HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 42

name=scre&email=christoph.schreiber@htlstp.at
```

```text
name=value&name=value&name=value ...
```

---
#### CSR vs SSR
![](./assets/backend/csr-ssr.jpeg)

----
#### Content loading
<ul>
    <li class="fragment fade-in-then-semi-out">SSR ✅</li>
    <li class="fragment fade-in-then-semi-out">CSR Frontend lädt Daten dynamisch vom Backend </li>
    <li class="fragment fade-in-then-semi-out">CRUD-Application (<strong>C</strong>reate, <strong>R</strong>Read, <strong>U</strong>Update, <strong>D</strong>Delete)</li>
    <li class="fragment">Standardformat JSON(<em>Javascript Object Notation</em>)</li>
</ul>

```json
{
  "grade": 3,
  "mandatory": true,
  "teacher": "SCRE",
  "subject": {
    "title": "Web und Mobile Computing",
    "short": "WMC"
  },
  "content": [
    "Frontend",
    "Backend"
  ],
  "technologies": [
    {
      "type": "IDE",
      "title": "WebStorm"
    },
    {
      "type": "Frontend",
      "title": "Angular"
    }
  ]
}
```

----
#### Layered Architecture
![](./assets/backend/layers.svg)

---
#### Express

```
const port = 3000;
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World');
});

app.post('/transmit', (req, res) => {
  let data = req.body;
  res.status(200)
     .json({'received': data});
});

app.listen(port, () => {
  console.log(`Server listens on ${port}`);
});
```

----
#### Interfaces
```typescript
export interface Student {
  id: number,
  firstName: string,
  lastName: string
}
```

<div class="fragment">
⟹
<pre><code class="hljs json" data-trim data-noescape>
[
  {
    "id": 1, "firstName": "Alfred", "lastName": "Adler"
  },
  {
    "id": 2, "firstName": "Bernd", "lastName": "Bauer"
  }
]
</code></pre>
</div>