Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- talit:web:webapps:apis [2025-02-02 14:29] – angelegt hof
+++ talit:web:webapps:apis [2025-02-16 16:29] (aktuell) – [JSON] hof
@@ Zeile 1: / Zeile 1: @@
 ## Web-APIs und JSON
-Bisher spielt sich alles Wesentliche auf dem _Client_ (im Browser) ab. Die TicTacToe-App kann zwar [[https://tkilla77.github.io/ksr_tictactoe/static/tictactoe.html|übers Internet]] ausgeliefert werden, aber nach der Übertragung der drei Dateien (HTML, CSS & JS) fliessen keine Daten mehr zwischen Browser und Server.
+Bisher spielt sich alles Wesentliche auf dem _Client_ (im Browser) ab. Die Vier-Gewinnt-App kann zwar [[https://tkilla77.github.io/ksr_talit_connect4/static/connect4.html|übers Internet]] ausgeliefert werden, aber nach der Übertragung der drei Dateien (HTML, CSS & JS) fliessen keine Daten mehr zwischen Browser und Server.
 Insbesondere ist es auch nicht möglich, übers Netz gegeneinander zu spielen. Dafür müsste die Spiel-Logik nicht in Browser (also im Client) ausgeführt werden, sondern in einem Programm, das auf dem Server läuft. Die beiden Spieler:innen verbinden sich mit dem Server und rufen bestimmte Internetseiten auf, um den Zustand des Spiels zu verändern.
@@ Zeile 8: / Zeile 8: @@
 Wir trennen also die Darstellung (HTML & CSS) von der Spiellogik ab. Die Logik soll auf dem Server ausgeführt werden, die Browser rufen lediglich geeignete Schnittstellen (en. _Application Programming Interface_ oder API) auf. Bei einer Web-App erfolgt der Aufruf der Schnittstelle über eine HTTP-Anfrage.
 ### HTTP
-Das HyperText Transfer Protocol dient der Übertragung von Informationen zwischen Server und Client (Browser). Bisher haben wir ausschliesslich ganze Dateien (`tictactoe.html`, `tictactoe.css`, `tictactoe.js`) übertragen, aber HTTP kann noch mehr. Wir schauen uns an, was passiert, wenn wir auf unsere Webapp zugreifen. In den DevTools zeigen wir den ''Network'' Tab, wo die Folge der HTTP Requests angezeigt werden.
+Das HyperText Transfer Protocol dient der Übertragung von Informationen zwischen Server und Client (Browser). Bisher haben wir ausschliesslich ganze Dateien (`connect4.html`, `connect4.css`, `connect4.js`) übertragen, aber HTTP kann noch mehr. Wir schauen uns an, was passiert, wenn wir auf unsere Webapp zugreifen. In den DevTools zeigen wir den ''Network'' Tab, wo die Folge der HTTP Requests angezeigt werden.
 #### Request & Response
@@ Zeile 41: / Zeile 40: @@
 Wir werden diese Technik verwenden, um den Spielstand auf dem Server nachzuladen, wenn der andere Spieler gespielt hat, und um Spielzüge auszuführen.
 #### Asynchronous code
-Eine Herausforderung in Javascript (und nicht nur dort) ist der Umgang mit längeren Aufgaben. Reagiert unser Code ja auf einen Event (z.B. einen Klick) und führt dann eine kurze Aufgabe (z.B. den Game-State ändern) aus, ist das kein Problem. Wollen wir eine potentiell längere Aufgabe (insbesondere: Network-Traffic über ''fetch()'', oder eine Animation) ausführen, reklamiert der Browser, weil wir damit den Event-Thread blockieren. Das heisst, dass andere Events nicht richtig ausgeliefert werden können, und die App "eingefroren" ist.
+Eine Herausforderung in Javascript (und nicht nur dort) ist der Umgang mit längeren Aufgaben. Reagiert unser Code lokal auf einen Event (z.B. einen Klick) und führt dann eine kurze Aufgabe (z.B. den Game-State ändern) aus, ist das kein Problem. Wollen wir eine potentiell längere Aufgabe (insbesondere: Network-Traffic über ''fetch()'', oder eine Animation) ausführen, reklamiert der Browser, weil wir damit den Event-Thread blockieren. Das heisst, dass andere Events nicht richtig ausgeliefert werden können, und die App "eingefroren" ist.
 Wir wollen längere Aufgaben //asynchron// oder //nebenläufig// ausführen können. Modernes Javascript unterstützt die Programmierung von asynchronem Code mit zwei Konstrukten: ''Promises'' und den ''async'' / ''await'' Keywords, die auf ''Promise'' aufbauen.
@@ Zeile 57: / Zeile 55: @@
 <code javascript>
-  async fetchUpdateFromServer() {
+  async function fetchUpdateFromServer() {
     try {
       const response = await fetch('/game/0');
@@ Zeile 77: / Zeile 75: @@
 {{ :ef_informatik:javascript_async_fetch_promises.png?nolink&600 | }}
 ### JSON
-Sollen nicht ganze Dateien, sondern nur kleine Informationsschnipsel übertragen werden, wird dafür die JavaScript Object Notation (_JSON_) verwendet. JSON sieht so aus:
+Sollen nicht ganze Dateien, sondern nur kleine Informationsschnipsel übertragen werden, wird dafür die JavaScript Object Notation (_JSON_) verwendet. Unser Spielzustands-Objekt ist bereits JSON:
 <code javascript>
-{
+game = {
-  "id": 0,
+  "state": "playing",  // or "waiting" or "won" or "tie"
-  "state": "ended",
+  "board": [           // game board, 0 for empty cells, 1 or 2 for filled cells.
-  "grid": [
+, 0, 0, 0, 0, 0, 0,
-    "X",
+, 0, 0, 0, 0, 0, 0,
-    " ",
+, 0, 0, 0, 0, 0, 0,
-    " ",
+, 0, 0, 0, 0, 0, 0,
-    "X",
+, 0, 0, 0, 0, 0, 0,
-    "O",
+, 0, 0, 0, 0, 0, 0,
-    " ",
-    "X",
-    "O",
-    " "
   ],
-  "winner": "X",
+  "next": 1,  // 1 or 2, the player whose turn it is, the winner if state is "won"
-  "player": "X",
+}
-  "next": "O"
+</code>
-}</code>
 Merke:
@@ Zeile 109: / Zeile 102: @@
     * wieder ein Objekt.
   * Mehrere Einträge sind durch Komma getrennt.
 ### Web-API Beispiel
-Bevor wir ein eigenes Web-API für TicTacToe schreiben, werden wir ein frei verfügbares Web-API verwenden, um eine dynamische Webseite zu erstellen.
+Bevor wir ein eigenes Web-API für Vier Gewinnt schreiben, werden wir ein frei verfügbares Web-API verwenden, um eine dynamische Webseite zu erstellen.
 Die Seite https://wiewarm.ch stellt neben der Webseite auch ein JSON-Web-API bereit, das die Wassertemperaturen von vielen Badeanstalten in der Schweiz rapportiert. Wichtig ist die Unterscheidung: