Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- ef_informatik:web_app [2021-08-26 07:39] – hof
+++ ef_informatik:web_app [2021-12-15 13:41] (aktuell) – [Async Functions] hof
@@ Zeile 72: / Zeile 72: @@
 # Javascript
-Die meisten Browser können Javascript (oder ECMAScript) ausführen, um Webseiten dynamisch zu gestalten. Die Syntax ist ähnlich wie C++, C# oder Java, am bestem am Beispiel:
+Die meisten Browser können Javascript (oder ECMAScript) ausführen, um Webseiten dynamisch zu gestalten. Die Syntax ist ähnlich wie `C++`, C# oder Java, am bestem am Beispiel:
 <file ecmascript connect_four.js>
@@ Zeile 178: / Zeile 178: @@
   * Hinweis: [[https://developer.mozilla.org/de/docs/Learn/JavaScript/Objects/JSON|JSON Referenz]]
+## Musterlösung 2
+Wie immer gilt: es gibt unendlich viele korrekte Lösungen. {{ :ef_informatik:ksr_ef_viergewinnt-js_game.zip |}}
 # HTTP
@@ Zeile 185: / Zeile 188: @@
 ## Request & Response
 {{ :ef_informatik:http_404.jpg?nolink&500|}}
-Jeder Request verlangt eine bestimmte //Ressource// mit einer bestimmten //Method//. Die //Method// beschreibt die Aktion, typischerweise //GET//, um eine Ressource zu holen, //PUT// um eine Ressource auf dem Server zu verändern.
+Jeder Request verlangt eine bestimmte //Ressource// mit einer bestimmten //Method//. Die //Method// beschreibt die Aktion, typischerweise //GET//, um eine Ressource zu holen, //POST// um eine Ressource auf dem Server zu verändern.
 Der Request enthält eine Anzahl zusätzlicher Informationen als //Headers//, insbesondere:
@@ Zeile 218: / Zeile 221: @@
 Um diese Problem zu lösen, werden wir die App auf einen Web-Server verschieben.
   * Install Flask mit ''pip3 install flask''.
-  * Move static files to ''/static''.
+  * Use the [[https://flask.palletsprojects.com/en/2.0.x/quickstart/|quick start guide]] to help you with the following tasks.
+  * Transfer existing code to web app:
+    * Move static files to ''/static''.
+    * Create ''app.py'' in root folder to create the simple-most web app.
+<code python app.py>
+from flask import Flask
+app = Flask(__name__)
+@app.route("/")
+def hello_world():
+    return "<p>Hello, World!</p>"
+</code>
   * Turn HTML into a Jinja2 template.
-  * Add JSON endpoints
+  * Create a connect-four game model in python.
+  * Our App will communicate with the Server through JSON endpoints
+    * see an [[https://de.wikipedia.org/wiki/Representational_State_Transfer#Beispiel|example of a REST endpoint]]
+    * we need endpoints for
+      * fetching gamestate
+      * inserting a piece
+      * tricky part: identify the user using [[https://flask.palletsprojects.com/en/2.0.x/quickstart/#sessions|sessions]]
+  * Instead of holding game state on the client side, fetch it from the server.
+Weitere Ideen:
+  * Long polling für den Game-State
+  * Websockets (nicht direkt unterstützt in Flask, aber in [[https://flask-socketio.readthedocs.io/|Flask-SocketIO]] oder [[https://pgjones.gitlab.io/quart/|Quart]])
 # Javascript 2
@@ Zeile 305: / Zeile 331: @@
   * [[https://web.dev/promises/|more on Promises]]
+{{ :ef_informatik:javascript_async_fetch_promises.png?nolink&600 | }}