RESTful APIs mit Dart

Web-Technologien
Hypertext Transfer Protocol (HTTP)
Representational State Transfer (REST)
Vorlesung
Prof. Dr. rer. nat. Nane Kratzke
Praktische Informatik und betriebliche Informationssysteme
1

Prof. Dr. rer. nat.
Nane Kratzke
Praktische Informatik und
betriebliche Informationssysteme
• Raum: 17-0.10
• Tel.: 0451 300 5549
• Email: nane.kratzke@fh-luebeck.de
• Sprechzeiten: Mi. 14:00 bis 16:00
(nach Mail-Voranmeldung, oder jederzeit
mit Termin)
2

Zum Nachlesen ...
3
Chapter 5:
5.1 Deriving REST
5.2 REST Architectural Styles
5.3 REST Architectural Views

HTTP in a Nutshell ...
4
• Hypertext Transfer Protocol (HTTP) ist ein zustandsloses Protokoll
zur Übertragung von Daten auf der Anwendungsschicht.
• Es wird hauptsächlich eingesetzt, um Webseiten (HTML-
Dokumente) mit einem Webbrowser zu laden.
• Es ist jedoch nicht darauf beschränkt und kann auch als allgemeines
Datenprotokoll eingesetzt werden (siehe bspw. REST).
https://de.wikipedia.org/wiki/Hypertext_Transfer_Protocol

URI – Uniform Resource Identifier
5
Ein Uniform Resource Identifier (Abk. URI) ist ein Identifikator und besteht aus
einer Zeichenfolge, die zur Identifizierung einer Ressource (wie z.B. Webseiten,
Dateien, Webservices, E-Mail-Empfängern, etc.) dient.
Aus: Tanenbaum, van Steen; Verteilte Systeme; Pearson; Abb. 12.16 (Bsp. für URIs)

URL – Uniform Resource Locator
6
https://de.wikipedia.org/wiki/Uniform_Resource_Identifier
More
detailed
Ein Uniform Resource
Locator (Abk. URL) ist
eine spezielle Form einer
URI, die vor allem im
Webkontext gebräuchlich
ist.

Uri
https://api.dartlang.org/1.13.2/dart-core/Uri-class.html
URL – Uniform Resource Locator
7
Uri url = Uri.parse(
"http://example.com:992/animal/bird?species=seagul#wings"
);
print("Scheme: ${url.scheme}");
print("Authority: ${url.authority}");
print("Host: ${url.host}");
print("Port: ${url.port}");
print("Path: ${url.path}");
print("Query: ${url.query}");
print("Fragment: ${url.fragment}");

HTTP Request
8
GET POST HEAD PUT DELETE OPTIONS

HTTP Methoden
9
Aus: Tanenbaum, van Steen; Verteilte Systeme; Pearson; Abb. 12.11 (Von HTTP unterstützte
Operationen/Methoden; nicht vollständig, umfasst nur die häufigsten Operationen)
HTTP wurde als allgemein verwendbares Client-Server Protokoll entworfen. D.h.
Ressourcen lassen sich nicht nur lesend (GET) von einem Server anfordern (was im
Web sicherlich die am meisten verwendete Form ist, wenn man mit Webbrowsern
„surft“), sondern auch erzeugen (POST), verändern (PUT), löschen (DELETE) bzw. nur
Meta Informationen abrufen (HEAD).
Welche Methoden auf einer Ressource anwendbar sind, lässt sich mittels OPTIONS
herausfinden.

HTTPClientRequest
https://api.dartlang.org/1.13.2/dart-io/HttpClientRequest-class.html
HTTP Request
Erzeugen und Auswerten mit Dart
10
import 'dart:io';
[...]
final client = new HttpClient();
HttpClientRequest request =
await client.get('www.fh-luebeck.de', 80, '/index.html');
// Body schreiben
final body = "This is the message for the body";
request.contentLength = body.length;
request.write(body);
// Header
print("${request.method} ${request.uri}");
print(request.headers);
// Body
print("n$body");
Achtung:Wegendart:ionuralsKommandozeilenappund
nichtimBrowserlauffähig!FürBrowserbittedart:htmlund
HttpRequestnutzen.LeichtandereAPIberücksichtigen.

HTTP Request
(Ausgabe)
11
GET http://www.fh-luebeck.de/index.html
user-agent: Dart/1.13 (dart:io)
accept-encoding: gzip
content-length: 32
host: www.fh-luebeck.de
This is the message for the body
Vorherige Codezeilen würden folgende Konsolenausgabe erzeugen.

HTTP Request (Header Fields)
12
https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html
Aus:Tanenbaum,vanSteen;VerteilteSysteme;Pearson;Abb.12.13
(EinigeHTTP-Nachrichtenköpfe)
Über eine Reihe von
Headern kann der Client
dem Server mitteilen,
welche Arten von
Antworten er verarbeiten
kann.
Umgekehrt, kann der
Server dem Client über
Header mitteilen, welche
Art von Dokument
ausgeliefert wurde.

HTTP Response
13

Content Types
14
Aus: Tanenbaum, van Steen; Verteilte Systeme; Pearson; Abb. 12.2 (Sechs MIME-Typen der
allgemeinen Ebene und einige verbreitete Untertypen, es fehlt allerdings bspw.
application/json)
MIME =
Multipurpose
Internet Mail
Exchange
Ursprünglich für
Mail Protokolle
gedacht, wird aber
auch für Content-
Types bei HTTP
genutzt, um die Art
des Dokumentes in
der HTTP Response
anzugeben.

HTTPClientResponse
https://api.dartlang.org/1.13.2/dart-io/HttpClientResponse-class.html
HTTP Response
Erzeugen und Auswerten mit Dart
15
import 'dart:io';
import 'dart:convert‘;
[...]
final client = new HttpClient();
HttpClientRequest req =
await client.get('www.fh-luebeck.de', 80, '/index.html');
HttpClientResponse resp = await request.close();
// Response Header
print(
"${req.method} ${req.uri} ${resp.statusCode} ${resp.reasonPhrase}“
);
print("${resp.headers}");
print("");
// Response Body
final body = await resp.transform(UTF8.decoder).join("n");
print(body);
Achtung:Wegendart:ionuralsKommandozeilenappundnichtim
Browserlauffähig!FürBrowserbittedart:htmlundHttpRequest
nutzen.LeichtandereAPIberücksichtigen.

HTTP Response
(Ausgabe)
16
GET http://www.fh-luebeck.de/index.html 200 OK
x-powered-by: PHP/5.4.45-0+deb7u2
cache-control: max-age=0
date: Mon, 25 Jan 2016 08:20:36 GMT
vary: Accept-Encoding
content-encoding: gzip
content-length: 8572
content-type: text/html; charset=utf-8
server: Apache
expires: Mon, 25 Jan 2016 08:20:36 GMT
<!DOCTYPE html>
<html lang="de">
<head>
[...]
Vorherige Codezeilen, würden folgende Konsolenausgabe erzeugen.

HTTP Statuscodes
17
• 1xx Informationen
• 2xx Erfolgreiche Operation
• 3xx Umleitung (Redirect)
• 4xx Client Fehler (z.B. Bad
Request, Not Found)
• 5xx Server Fehler
Gute Übersicht gebräuchlicher HTTP
Statuscodes:
http://www.restapitutorial.com/httpstatuscodes.html

Zum Nachlesen ...
18
Chapter 5:
5.1 Deriving REST
5.2 REST Architectural Styles
5.3 REST Architectural Views

REST in a Nutshell ...
19
• Representational State Transfer (REST) ist ein Architekturstil für
verteilte Systeme auf Basis von HTTP
• REST APIs dienen primär der Maschine-Maschine-Kommunikation
• REST ist eine Alternative zu ähnlichen Ansätzen wie SOAP oder RPC
• REST Requests arbeiten auf Ressourcen (anders als bspw. RPC)
• Client und Server können in anderen Sprachen realisiert sein (language
agnostic)
• REST Responses nutzen daher gerne sprachunabhängige
Serialisierungsformate wie bspw. JSON oder XML
• Die für REST nötige Infrastruktur und Protokolle sind im WWW bereits
vorhanden
• Da das WWW (horizontal) skalierbar ist, sind es REST-basierte Systeme
zumeist auch (wenn man ein paar Dinge beachtet)
https://de.wikipedia.org/wiki/Representational_State_Transfer

Für REST benötigte HTTP Methoden
20
Methode Bedeutung Idempotent Sicher CRUD
POST Fügt eine neue
Ressource hinzu
create
GET Fordert eine
Ressource an
x x read
PUT Ändert eine
Ressource
x update
DELETE Löscht eine
Ressource
x delete
Sicher (safe): Eine Operation ändert nicht den Zustand
(nebeneffektsfreie Operation)
Idempotent: Wird eine Operation zweimal hintereinander ausgeführt,
ist die zweite Operation sicher (d.h. ändert nichts mehr am Zustand)

Same-Origin-Policy
21
Quelle: https://de.wikipedia.org/wiki/Same-Origin-Policy
Die Same-Origin-Policy (SOP) ist ein Sicherheitskonzept,
das clientseitigen Skriptsprachen untersagt, auf
Ressourcen zuzugreifen, deren Speicherort nicht
dem Origin entspricht. Sie stellt ein Sicherheitselement in
modernen Browsern zum Schutz vor Angriffen dar.
Hintergrund: Skriptsprachen im Browser haben Zugriff auf
Kommunikation zwischen Browser und Web-Server. Dies
beinhaltet sowohl das Auslesen, die Manipulation, das
Empfangen und Senden von Daten.
Daraus ergibt sich die Sicherheitsanforderung, dass
keine Daten aus einem Kontext (zum Beispiel der
Verbindung des Browsers zu der Seite einer Bank) von
einem Skript aus einem anderen Kontext zugreifbar oder
manipulierbar sein darf. Um dies zu erreichen, wird beim
Zugriff eines Skriptes auf eine Ressource die Herkunft
(origin) von beiden verglichen. Der Zugriff wird nur
erlaubt, wenn Skript und angeforderte Ressource
dieselbe Herkunft (origin) haben (vom selben Server
stammen).

Same Origin Definition
22
http://www.example.com/dir/page.html
Die Same-Origin-Policy (SOP) ist erfüllt, wenn bei zwei Ressourcen deren
URL-Anteile Scheme, Host und Port übereinstimmen.
Scheme Host Port Origin

SOP und REST vertragen sich nicht immer
23
Die Same-Origin-Policy (SOP) ist dann ggf. hinderlich, wenn von einem Server eine
Webapplikation geladen wird, die mit einem zweiten (nicht notwendig identischem)
Server eine z.B. REST-basierte Kommunikation aufbauen muss.
In solchen Fällen kann der HTTP Server, der follow up requests bearbeitet, seine
Responses mittels CORS Headers (Cross Origin Resource Sharing) kennzeichnen.
Der HTTP Client verzichtet dann auf eine Same Origin Prüfung.

CORS
Ermöglichen mit Dart
24
/**
* Sets CORS headers for HTTP responses.
*/
void enableCors(HttpResponse response) {
response.headers.add(
"Access-Control-Allow-Origin",
"*"
);
"Access-Control-Allow-Methods",
"POST, GET, DELETE, PUT, OPTIONS"
);
"Access-Control-Allow-Headers",
"Origin, Content-Type, Accept, Charset"
);
}
Cross-Origin Resource Sharing (CORS) ist ein Mechanismus, der Webclients Cross-
Origin-Requests ermöglicht. Die Einschränkungen, die durch die SOP auferlegt sind,
können vom Server aufgehoben werden. Der Server kann den Zugriff durch setzen
entsprechender Access-Control-Allow-* Response Header erlauben/einschränken.

Ein einfacher REST-basierter Hello World
Service
25
Methode Resource CRUD Beschreibung Beispiel
POST /greet/:lang Create Erzeugt einen neuen Gruß POST /greet/deutsch
greet=hallo%20welt
GET /greet/:lang Read Liest einen Gruß für Sprache :lang GET /greet/deutsch
PUT /greet/:lang Update Ändert einen Gruß für Sprache :lang PUT /greet/deutsch
Greet=Hallo%20Welt
DELETE /greet/:lang Delete Löscht den Gruß der Sprache :lang DELETE /greet/deutsch
GET /greets List Listet alle im Service gespeicherten
Grüße (Antwort als JSON Map)
GET /greets
Das REST-Prinzip soll exemplarisch an einem kleinen
Hello World Service demonstriert werden, der
mehrsprachige Gruß Ressourcen („Hello World“
Flosklen) verwaltet. Der Service soll um Grüße in
fremden Sprachen ergänzt werden, einen Gruß in einer
spezifischen Sprache ausgeben, Grüße bestehender
Sprachen ändern und löschen können. Ferner soll er
einen Überblick über alle hinterlegten Sprachen und
zugeordneten Grüße liefern können.

Ein einfacher REST Server in Dart
26
// A simple REST based Hello World service.
class Server {
// Service state. Default languages and greets (UTF-8 encoded!).
var greets = {
"dutch" : "Hello wereld",
"english" : "Hello world",
"french" : "Bonjour monde",
"german" : "Hallo Welt",
"italian" : "Ciao mondo",
"portuguese" : "Olá mundo",
"spanish" : "Hola mundo"
};
// Internally used for JSON pretty printing in JSON responses.
final json = new JsonEncoder.withIndent(' ');
// Resource Path definitions.
final greetUrl = new UrlPattern(r'/greet/(w+)'); // /greet/:lang
final greetsUrl = new UrlPattern(r'/greets'); // /greets
[...]
}

Ein einfacher REST Server in Dart
27
import 'dart:io';
import 'package:route/server.dart';
[...]
/**
* Starts the REST API server.
*/
Future<Router> serve({ip: '0.0.0.0', port: 4040}) async {
final server = await HttpServer.bind(ip, port);
final router = new Router(server)
..serve(greetUrl, method: 'OPTIONS').listen(optionsGreet)
..serve(greetUrl, method: 'POST' ).listen(createGreet)
..serve(greetUrl, method: 'GET' ).listen(readGreet)
..serve(greetUrl, method: 'PUT' ).listen(updateGreet)
..serve(greetUrl, method: 'DELETE' ).listen(deleteGreet)
..serve(greetsUrl, method: 'GET' ).listen(listGreets);
return new Future.value(router);
}

OPTIONS /greet/:lang
28
/**
* Handles OPTIONS /greet/:lang requests
* (used by the dart:html HttpRequest class).
* This is necessary to handle HTTP client behaviors
* (often an OPTIONS call is launched to determine
* whether a POST, DELETE, PUT call is allowed).
*/
void optionsGreet(HttpRequest req) {
HttpResponse res = req.response;
enableCors(res);
res.write("POST, GET, DELETE, PUT, OPTIONS");
res.close();
}
Es gibt diverse HTTP Client
Libraries, die bei POST,
DELETE und PUT vorher
per OPTIONS anfragen, was
für Methoden auf einer
Ressource überhaupt
zulässig sind.
Es macht für diese Fälle
Sinn für jede Ressource
einen entsprechenden
OPTIONS Handler
vorzusehen, ansonsten
scheitert ein Request bereits
beim BITTE BITTE sagen.

POST /greet/:lang
29
/**
* Handles POST /greet/:lang requests to create a new language specific greet.
* Params: greet (greet in language :lang)
*/
void createGreet(HttpRequest req) {
HttpResponse res = req.response; // To be created response
enableCors(res); // set CORS headers
final lang = greetUrl.parse(req.uri.path).first; // Language part of path
req.transform(UTF8.decoder).join("n").then((body) { // req is stream (body)
final params = Uri.parse("?$body").queryParameters; // body contains params
if (greets.containsKey(lang)) { // lang already existing
res.statusCode = HttpStatus.CONFLICT; // 409
res.reasonPhrase = "Already existing";
res.close(); // Send response (error)
return;
}
if (!params.containsKey('greet')) { // no greet parameter
res.statusCode = HttpStatus.BAD_REQUEST; // 400
res.reasonPhrase = "Missing parameter";
return;
}
greets[lang] = params['greet']; // Change server state
res.statusCode = HttpStatus.CREATED; // 201
res.close(); // Send response (succes)
});
}
greet=Hallo%20Welt

GET /greet/:lang
30
/**
* Handles GET /greet/:lang requests to read
* a language specific greet.
*/
void readGreet(HttpRequest req) {
enableCors(res);
final lang = greetUrl.parse(req.uri.path).first;
if (!greets.containsKey(lang)) {
res.statusCode = HttpStatus.NOT_FOUND; // 404
res.reasonPhrase = "Not Found";
res.write("Not Found");
return;
}
res.write(greets[lang]); // Read Status
res.close(); // Send response (success)
}

DELETE /greet/:lang
31
/**
* Handles DELETE /greet/:lang requests to delete
* a language specific greet.
*/
void deleteGreet(HttpRequest req) {
enableCors(res);
final lang = greetUrl.parse(req.uri.path).first;
greets.remove(lang); // Löschoperation
res.close();
}
Eine DELETE Operation ist
idempotent. D.h.
wiederholte Löschung (bzw.
das löschen nicht existenter
Ressourcen) sollten nicht in
einem Fehler enden.

GET /greets
32
/**
* Handles GET /greets requests to list all
* language specific greets (JSON).
*/
void listGreets(HttpRequest req) {
enableCors(res);
res.headers.contentType = new ContentType(
"application", "json", charset: 'UTF-8‘
);
res.write(json.convert(greets));
res.close();
}
Liefert alle greets
Ressourcen.

Zusammenfassung
• HTTP
• Uniform Resource Identifiers (URI) und Locators (URL)
• HTTP Request (Client) und Response (Server)
• HTTP Methoden
• HTTP Header
• HTTP Content Types (MIME)
• HTTP Status Codes
• Dart Libraries für HTTP
• Same Origin Policy (SOP) und Cross Origin Resource
Sharing (CORS)
• REST
• CRUD und HTTP Methoden
• Sichere und idempotente Operationen
• REST am Bsp. eines Hello World Service
• Dart Libraries für REST
33

RESTful APIs mit Dart

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch (20)

Ähnlich wie RESTful APIs mit Dart (20)

Mehr von Nane Kratzke (19)

RESTful APIs mit Dart