Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- talit:web:webapps:apis [2025-02-03 13:12] – [HTTP] hof
+++ talit:web:webapps:apis [2025-02-16 16:29] (aktuell) – [JSON] hof
@@ Zeile 40: / 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 56: / Zeile 55: @@
 <code javascript>
-  async fetchUpdateFromServer() {
+  async function fetchUpdateFromServer() {
     try {
       const response = await fetch('/game/0');
@@ Zeile 76: / 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 108: / 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: