Standort Hagen Fachbereich Technische Betriebswirtschaft Webtechnologie Die Lehre von den Techniken des World Wide Web und von ihren Auswirkungen auf Wirtschaft und Gesellschaft — Teil II: Fortgeschrittene Webtechniken und digitale Ökonomie — Vorlesungsskript für das sechste Semester Wirtschaftsinformatik Andreas de Vries Version: 21. September 2021 Dieses Skript unterliegt der Creative Commons License CC BY 4.0 (http://creativecommons.org/licenses/by/4.0/deed.de) Inhaltsverzeichnis IV Fortgeschrittene Webtechniken und Konzepte 6 17 jQuery 7 17.1 Entstehungsgeschichte, Lizenz, Dokumentation . .7 17.2 Einbindung der Bibliothek . .8 17.3 Syntax . .8 17.4 DOM-Manipulation mit jQuery . .9 17.5 CSS-Formatierungen . 11 17.6 AJAX mit jQuery . 12 17.7 jQuery Mobile . 13 18 AngularJS 16 18.1 Grundlegende Konzepte . 16 18.2 Erste Beispiele: HTML wird (fast) eine Programmiersprache . 20 18.3 Grundelemente von AngularJS . 22 18.4 Erste Datenbankzugriffe mit AngularJS . 23 18.5 Single Page App mit Components und Datenbankzugriffen . 25 18.6 Angular . 30 18.7 Bewertung und Ausblick . 30 19 WebSockets 32 19.1 Das WebSocket Protokoll . 33 19.2 Die WebSocket API . 34 19.3 Programmierung eines WebSocket-Clients . 35 19.4 Anwendungsfälle . 38 19.5 Webkonferenzen mit WebRTC . 40 20 Webservices versus REST 44 20.1 SOA: automatisierte Dienste . 44 20.2 REST . 53 21 NoSQL: Big Data und verteilte Datenbanken 57 21.1 Das CAP-Theorem . 59 21.2 Typen von NoSQL-Datenbanken . 62 21.3 MapReduce . 63 21.4 Konsistentes Hashing . 66 21.5 Vektoruhren . 67 2 Webtechnologie 3 V Digitale Ökonomie 72 22 Die digitale Revolution 73 22.1 Drei Entwicklungen . 74 22.2 Kurze Wirtschaftsgeschichte . 75 22.3 Ökonomische Mechanik: Das Coase’sche Gesetz . 77 22.4 Web 2.0, vernetzte Mobilität und Big Data . 78 22.5 Die Generation Y . 80 22.6 Begriffsdefinition Digitale Ökonomie ...................... 81 22.7 Geschäftsmodelle . 82 23 Google und seine Kerntechnologien 85 23.1 Wirtschaftliche Kennzahlen . 85 23.2 Suchmaschinen . 87 23.3 Der PageRank-Algorithmus . 87 23.4 Googleware und Cloud Computing . 91 23.5 Maschinelles Lernen mit TensorFlow . 95 24 Facebook 97 24.1 Geschäftsmodell . 98 24.2 WhatsApp und die Internet.org Vision . 99 24.3 Wirtschaftliche Kennzahlen . 101 24.4 Informationstechnik . 101 25 Mathematik sozialer Netzwerke 103 25.1 Definition elektronischer sozialer Netzwerke . 103 25.2 Netzwerkstrukturen . 104 25.3 Wachstum von Netzen . 111 25.4 Netzwerkeffekte . 112 25.5 Systemische Risiken in Netzen . 120 25.6 * Ramsey-Zahlen . 124 26 Künstliche Intelligenz 129 26.1 Überblick, Einordnung und Begriffe . 130 26.2 Was ist Intelligenz? . 130 26.3 Rechenleistung von Mensch und Computer . 133 26.4 IBMs Ansatz mit Daten und Algorithmen . 135 26.5 Neuronale Netze und Deep Learning . 137 26.6 Sind KI-Systeme intelligent? . 142 26.7 Die Singularität . 144 26.8 Big Data: Korrelationen statt Kausalität . 144 26.9 Kybernetik: Messen, Steuern und Regeln von Verhalten . 145 26.10Ethik künstlicher intelligenter Systeme . 146 26.11Was müssen wir tun? . 149 27 Digitales Geld 151 27.1 Definition und Geschichte des Geldes . 151 27.2 Geld als Währung . 156 27.3 Spezifische Eigenschaften digitalen Geldes . 160 27.4 Bitcoin . 161 4 Andreas de Vries 28 Computer und Finanzmärkte 167 28.1 Geschichte . 167 28.2 Algorithmischer Handel . 172 Literatur 184 Index 185 Vorwort Das vorliegende Skript führt das Skript Webtechnologie 1 – Grundlagen fort. Es werden zunächst fortgeschrittene Webtechniken behandelt, bevor Begriffe und Konzepte zum Grundverständnis der digitalen Ökonomie untersucht werden. Einen Schwerpunkt der fortgeschrittenen Webtechniken bilden die sogenannten Webframe- works, also Programmbibliotheken, die die Programmierung von Webanwendungen auf Server- und Clientseite vereinfachen, aber auch CSS-Bibliotheken. Es hat sich in den letzten Jahren ein wahrer „Zoo“ solcher Bibliotheken gebildet, basierend auf ganz verschiedenen Programmier- sprachen wie JavaScript, PHP, Java, ASP oder C++. Eine aktuelle Liste der meist verbreiteten findet man unter https://de.wikipedia.org/wiki/Liste_von_Webframeworks. In diesem Skript werden z.B. den wichtigen JavaScript-Bibliotheken jQuery und Angular jeweils ein Kapitel gewidmet. Die hier behandelten Themen sind Teil der in letzter Zeit aktuell gewordenen „Fullstack- Entwicklung“, die genau die integrative Sicht auf die verschiedenen Techniken zur Erstellung von Webauftritten teilt wie das vorliegende Skript. Als deutschsprachiges Darstellung dazu ist Ackermann (2021) sehr zu empfehlen. Hagen, im September 2021 Andreas de Vries 5 Teil IV Fortgeschrittene Webtechniken und Konzepte 6 17 jQuery Kapitelübersicht 17.1 Entstehungsgeschichte, Lizenz, Dokumentation . .7 17.2 Einbindung der Bibliothek . .8 17.3 Syntax . .8 17.4 DOM-Manipulation mit jQuery . .9 17.5 CSS-Formatierungen . 11 17.6 AJAX mit jQuery . 12 17.7 jQuery Mobile . 13 JavaScript spielt in der professionellen Webprogrammierung eine ganz zentrale Rolle, insbe- sondere aufgrund seiner Fähigkeiten, DOM-Manipulationen und asynchrone HTTP-Requests dynamisch auszulösen. Da allerdings die dazu notwendigen Anweisungen in JavaScript recht aufwendig sind — mit Funktionen wie getElementById zur DOM-Manipulation oder dem im we- sentlichen immer gleichen Dreischritt zur Implementierung eines asynchronen HTTP-Requests — wurden immer wieder spezielle JavaScript-Bibliotheken entwickelt, um die Programmie- rung zu vereinfachen. Eine der wichtigsten und verbreitesten dieser Bibliotheken ist jQue- ry, das zu einem De-Facto-Standard der Webprogrammierung geworden ist: Nach W3Techs (http://w3techs.com/) wird jQuery auf fast 70 % aller Webauftritte eingesetzt. 17.1 Entstehungsgeschichte, Lizenz, Dokumentation jQuery wurde 2006 von John Resig veröffentlicht und ist seit April 2013 in der Version 2 verfügbar. Da diese Version nur noch mit modernen Browserversionen kompatibel ist (also insbesondere nicht mit dem Internet Explorer bis einschließlich Version 8), wird die Ver- sion 1 parallel weitergeführt. jQuery ist als freie Software unter der MIT-Lizenz (https: //tldrlegal.com/license/mit-license) verfügbar, darf also auch für kommerzielle Zwecke verwendet werden, wobei jede Kopie ihr Copyright beinhalten muss. Die API-Dokumentation von jQuery ist unter http://api.jquery.com/ verfügbar, ein sehr gutes Tutorial unter http://www.w3schools.com/jquery/. 7 8 Andreas de Vries: Webtechnologie 17.2 Einbindung der Bibliothek Da jQuery eine JavaScript-Bibliothek ist, benötigt man zur dessen Verwendung keine beson- dere Installation, sondern bindet es per Hyperlink in das HTML-Dokument ein. Die aktuellste Variante findet man unter http://code.jquery.com/ Dort ist jede Version in einer „unkomprimierten“ und einer „minifizierten“ Fassung verfügbar. Die erste ist kommentiert und formatiert und somit gut lesbar, die andere ist unformatiert und ohne Kommentare, aber mit deutlich weniger Speicherbedarf. Die minifizierte Fassung eignet sich also zur reinen Nutzung besser als die unkomprimierte. Man kann nun die gewünschte Version der Bibliothek einfach auf den eigenen Server herunterladen und sie dann per Link einbinden, man kann aber auch die Originalbibliothek einfach verlinken. Die minifizierte Version 3.3.1 beispielsweise kann man im Head des HTML-Dokuments mit <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> einbinden. Empfohlen ist die Einbindung mit einer Überbrüfung der „Subresource Integrity“ des W3C: <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" ></script> 17.3 Syntax Basis einer jQuery-Anweisung ist der Aufruf der Funktion $, oder synonym jQuery, mit einem Selektor und einer Aktion: $(Selektor).Aktion(...); oder synonym jQuery(Selektor).Aktion(...); (Gebräuchlicher ist die Verwendung von $.) Der Selektor ist hierbei ein CSS-Selektor zur Auswahl eines oder mehrerer HTML-Elemente, die Aktion ist eine auszuführende Funktion aus der jQuery-Bibliothek. Für den Selektor gibt es im Wesentlichen vier Varianten, beispielhaft mit der Aktion hide() aufgelistet, die die ausgewählten HTML-Elemente per CSS verstecken lässt: $("#test").hide() versteckt alle HTML-Elemente mit der ID "test". $(".test").hide() versteckt alle HTML-Elemente der Klasse "test". $("p").hide() versteckt alle <p>-Elemente. $(this).hide() versteckt das aktuelle Element (funktioniert normaler- weise nur innerhalb eines selektierten Elements); Diese Anweisungen müssen in eine anonyme Funktion (auch „Callback-Funktion“ oder „Lambda- Ausdruck“ genannt) eingepackt werden: $(function(){ $(document).ready(function(){ ... oder äquivalent ... }); }); §17 jQuery 9 und sollten im <head> des HTML-Dokuments programmiert (bzw. als externe JS-Datei dort eingelesen) werden. Auf diese Weise wird garantiert, dass das gesamte Dokument vollständig geladen ist, bevor jQuery-Code ausgeführt wird. Ein Aufruf dieser Art entspricht dem in JavaS- cript oft verwendeten Programmiermuster IIFE (immediatley invoked function expression). Neben diesen „Selektor-Aktion“-Anweisungen kann man in jQuery auch direkt vordefinierte Nutzfunktionen durch $.Nutzfunktion(...); oder synonym jQuery.Nutzfunktion(...); aufrufen. In der API-Dokumention (http://api.jquery.com/) sind die vorhandenen Nutzfunk- tionen mit jQuery.Nutzfunktion (...) aufgeführt. Die auf selektierte Elemente möglichen Aktionen sind dagegen einfach mit .Aktion (...) beschrieben. 17.4 DOM-Manipulation mit jQuery Als erstes Programmbeispiel mit jQuery betrachten wir eine Version des Programms aus Kapitel 16 (Listing 16.2), das