Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- ef_informatik:web_app [2021-08-31 14:38] – [Web-App mit Flask] 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
+## Musterlösung 2
 Wie immer gilt: es gibt unendlich viele korrekte Lösungen. {{ :ef_informatik:ksr_ef_viergewinnt-js_game.zip |}}
@@ Zeile 188: / 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 222: / Zeile 222: @@
   * Install Flask mit ''pip3 install flask''.
   * Use the [[https://flask.palletsprojects.com/en/2.0.x/quickstart/|quick start guide]] to help you with the following tasks.
-  * Move static files to ''/static''.
+  * 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.
   * Create a connect-four game model in python.
-  * Read up on [[https://de.wikipedia.org/wiki/Representational_State_Transfer#Beispiel|REST]] here
+  * Our App will communicate with the Server through JSON endpoints
-  * Add JSON endpoints for
+    * see an [[https://de.wikipedia.org/wiki/Representational_State_Transfer#Beispiel|example of a REST endpoint]]
-    * fetching gamestate
+    * we need endpoints for
-    * inserting a piece
+      * fetching gamestate
-    * tricky part: identify the user using [[https://flask.palletsprojects.com/en/2.0.x/quickstart/#sessions|sessions]]
+      * 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.
@@ Zeile 319: / Zeile 331: @@
   * [[https://web.dev/promises/|more on Promises]]
+{{ :ef_informatik:javascript_async_fetch_promises.png?nolink&600 | }}