Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- ef_informatik:voci_rest [2022-05-24 08:03] – [Aufgabe: Dynamischer Webserver] hof
+++ ef_informatik:voci_rest [2022-05-31 13:16] (aktuell) – sca
@@ Zeile 81: / Zeile 81: @@
 using Grapevine;
-// Start the standalone REST server.
+namespace server;
-using (var server = RestServerBuilder.UseDefaults().Build()) {
-    // We want to serve static content (HTML, CSS, JS that is not modified
-    // but transferred to the client as is from the "website" folder.
-    string staticPath = Path.Combine(Directory.GetCurrentDirectory(), "website");
-    server.ContentFolders.Add(staticPath);
-    server.UseContentFolders();
-    // Start the server.
+class VociServer {
-    // The server will scan the entire assembly for RestResource annotations
+    static void Main(string[] args) {
-    // and add them to the served prefixes.
+        // Start the standalone REST server.
-    server.Start();
+        using (var server = RestServerBuilder.UseDefaults().Build())
+        {
+            // The server will scan the entire assembly for RestResource annotations
+            // and add them to the served prefixes.
-    // Block the thread to keep the process from terminating.
+            // In addition, we want to serve static content (HTML, CSS, JS that is not modified
-    Console.WriteLine("Press enter to stop the server");
+            // but transferred to the client as is from the "website" folder.
-    Console.ReadLine();
+            string staticPath = Path.Combine(Directory.GetCurrentDirectory(), "website");
+            server.ContentFolders.Add(staticPath);
+            server.UseContentFolders();
+            // Start the server.
+            server.Start();
+            Console.WriteLine("Press enter to stop the server");
+            Console.ReadLine();
+        }
+    }
 }
 </code>
-Wenn wir ihn starten mit `dotnet run`, können wir alle Dateien im `website` Ordner übertragen.
+Wenn wir ihn starten mit `dotnet run`, können wir alle Dateien im `website` Ordner übertragen. Wenn du jetzt mehrere `Main` Funktionen hast, kannst du die auszuführende angeben mit
+```
+dotnet build -p:StartupObject=server.VociServer
+dotnet run
+```
 Eine einfache Website könnte beispielsweise mit folgendem HTML dargestellt werden:
@@ Zeile 118: / Zeile 130: @@
   * Binde `grapevine` in deinen Code ein.
-  * Füge einen Ordner `website` in den Projekt ein und füge eine leere Website als Datei `website/index.html` hinzu.
+  * Füge einen Ordner `website` in den Projekt ein und füge obige HTML-Seite als Datei `website/index.html` hinzu.
   * Starte den Server mit `dotnet run` und rufe http://localhost:1234/index.html auf - die Datei sollte im Browser angezeigt werden.
@@ Zeile 162: / Zeile 174: @@
   * Füge eine neue Klasse wie die obige zu deinem Code hinzu.
   * Teste, ob du den Webserver auf `http://localhost:1234/hello/world` erreichst, indem du die Adresse mit dem Browser öffnest.
-  * Füge eine Route mit Muster und Parametern ein, z.B. `http://localhost:1234/greetings/Mr. Bond`.
+    * Was passiert, wenn du `http://localhost:1234/hello/mars` aufrufst?
+  * Füge eine Route mit Muster und Parametern ein, z.B. `http://localhost:1234/greetings/Mr.%20Bond`.
   * Sicherheit: überlege dir, wie ein Angreifer Unfug treiben könnte mit unserem Code.
@@ Zeile 181: / Zeile 194: @@
 [RestResource]
 [ResourceLifetime(ServiceLifetime.Singleton)]
-public class UnitResource {
+public class VociRoutes {
     // TODO: load the unit from CSV
     private Unit unit;
@@ Zeile 195: / Zeile 208: @@
   * Starte mit dem obigen Code und gib ein zufälliges Wort zurück.
   * Teste, ob du den Webserver auf `http://localhost:1234/random` erreichst. Was passiert beim Reload (Ctrl+R)?
-  * Nächster Schritt: baue eine Route ein, um vom Client einen Übersetzungsversuch einzulesen, z.B. auf den Pfad "/submit/{word}/{translation}".
+  * Nächster Schritt: baue eine Route ein, um vom Client einen Übersetzungsversuch einzulesen, z.B. auf den Pfad `/submit/{word}/{translation}`.
+    * Die Logik solltest du eigentlich direkt vom bisherigen Konsolenprogramm übernehmen können.
 #### Aufgabe: Statische Webseite
   * Baue eine einfache Webseite mit HTML & CSS für die Voci-App (more details coming).
+  * Lerninhalte zu HTML & CSS im [[gf_informatik:web:start|Grundlagenfach-Wiki]]
 #### Aufgabe: Web-App
   * Verknüpfen von Website und dynamischen Inhalten mit Javascript (TBD).
+## JavaScript
+JavaScript einbinden:
+<code html index.html>
+<html>
+    <head>
+        <title>Voci Trainer</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="voci.css" />
+    </head>
+    <body>
+        <h1>Voci Trainer</h1>
+        <div class="words">
+            <span id="original"></span>
+            <input type="text" id="translation" name="translation" onkeyup="keyup(this, event);">
+            <div class="buttons">
+                <button type="button" id="submit" onclick="submit();">Eingabe</button>
+            </div>
+        </div>
+        <div class="status">
+            <p id="reply"></p>
+            <p id="stats"></p>
+        </div>
+    </body>
+    <script src="voci.js" async></script>
+</html>
+</code>
+JavaScript Code:
+<code javascript voci.js>
+/**
+ * Function called when the user clicks the submit button or presses Enter.
+ */
+async function submit() {
+    // Get the original and translated words, send them to the server.
+    original = document.getElementById("original").innerHTML;
+    translation = document.getElementById("translation").value;
+    uri = `/submit/${original}/${translation}`;
+    let response = await fetch(uri);
+    let response_text =  await response.text();
+    if (!response.ok) {
+        // something unexpected happened...
+        console.log(`Error: ${response_text} in response to '${uri}'`);
+        return;
+    }
+    // Update the status text.
+    document.getElementById("reply").innerText = response_text;
+    // And fetch the next word.
+    next();
+}
+/**
+ * Update the stats.
+ */
+async function updateStats() {
+    uri = '/stats';
+    let response = await fetch(uri);
+    let response_text =  await response.text();
+    document.getElementById("stats").innerText = response_text;
+}
+/**
+ * Fetches a new word to translate. Called automatically after submit(), and initially for the first
+ * word.
+ */
+async function next() {
+    // Ensure the stats are correctly displayed.
+    updateStats();
+    uri = `/random`;
+    let response = await fetch(uri);
+    let response_text =  await response.text();
+    if (!response.ok) {
+        console.log(`Error: ${response_text} in response to '${uri}'`);
+        return;
+    }
+    document.getElementById("original").innerText = response_text;
+    document.getElementById("translation").value = "";
+}
+/** Called when a key is released within input. */
+async function keyup(input, event) {
+    var code = event.code;
+    if (code == "Enter") {
+        submit();
+    }
+}
+// Initial call to fetch the first word.
+next();
+</code>