Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

Beide Seiten, vorherige Überarbeitung Vorherige Überarbeitung
Nächste Überarbeitung		 Vorherige Überarbeitung
ef_informatik:voci_rest [2022-05-24 08:02] – [Dynamische Ressourcen] hofef_informatik:voci_rest [2022-05-31 13:16] (aktuell) – sca
Zeile 81: Zeile 81:
 using Grapevine; 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> </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: Eine einfache Website könnte beispielsweise mit folgendem HTML dargestellt werden:
Zeile 118: Zeile 130:
  
   * Binde `grapevine` in deinen Code ein.   * 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.   * 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.   * 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.   * 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/stranger`.+    * 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.   * Sicherheit: überlege dir, wie ein Angreifer Unfug treiben könnte mit unserem Code.
  
Zeile 181: Zeile 194:
 [RestResource] [RestResource]
 [ResourceLifetime(ServiceLifetime.Singleton)] [ResourceLifetime(ServiceLifetime.Singleton)]
-public class UnitResource {+public class VociRoutes {
     // TODO: load the unit from CSV     // TODO: load the unit from CSV
     private Unit unit;     private Unit unit;
Zeile 195: Zeile 208:
   * Starte mit dem obigen Code und gib ein zufälliges Wort zurück.   * 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)?   * 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 #### Aufgabe: Statische Webseite
   * Baue eine einfache Webseite mit HTML & CSS für die Voci-App (more details coming).   * 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 #### Aufgabe: Web-App
   * Verknüpfen von Website und dynamischen Inhalten mit Javascript (TBD).   * 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>
 +
  • ef_informatik/voci_rest.1653379370.txt.gz
  • Zuletzt geändert: 2022-05-24 08:02
  • von hof