Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 19 Current »


In diesem Einstiegsprojekt geht es darum, sich Grundlegendes über Webseiten, REST-APIs und das Kommunizieren zwischen einem Browser und einem Server anzueignen.

Es dient dazu, dir einen Einblick in deine potentielle Arbeit bei Physik Online zu geben und bereits hilfreiche Grundlagen zu vermitteln.

Sobald du fertig mit deinem Projekt bist, setzen wir uns mit dir kurz zusammen und sprechen darüber, wie du die Aufgabe umgesetzt hast und was deine Gedankengänge waren.

Unsere Erwartungshaltung ist natürlich keine Perfektion, sondern, dass du dich mit den Themen auseinander gesetzt, eigenständig Probleme gelöst hast und deine Ideen erklären kannst.



Thema

Für unsere Anmeldemaske zum Fortgeschrittenen Praktikum haben wir ein kleines Feedback System entwickelt, bei dem Studenten, nachdem sie sich angemeldet haben, angeben können, wie ihnen die Anmeldung gefallen hat.

Dabei kann zwischen 1 und 5 Sterne und (optional) ein kleiner Feedbacktext angegeben werden.

Das Feedback, das gegeben wurde, soll eingelesen und ein Programm zur Darstellung der Ergebnisse geschrieben werden.

Wir teilen diese Aufgabe in zwei Teile auf (Backend und Frontend). Du darfst entscheiden, welches von beiden du umsetzen möchtest.
Das Projekt soll zusätzlich auf GitHub hochgeladen werden.

Erste Schritte für beide Projekte:

  1. Installiere NodeJS: https://nodejs.org/en/ (Linux: oder über den Package Manager)
  2. Installiere GIT (Github.com)
  3. Einen Account bei GitHub erstellen: https://github.com/
  4. Ein Repository für das Projekt anlegen



Aufgabe 1: Backend

In diesem Teil sollen die Daten mithilfe einer API eingelesen, gespeichert und weitergegeben werden.
Die Daten sollen über eine REST-API angenommen bzw. zurückgegeben werden.

Konkrete Aufgabe

Die API soll zwei Schnittstellen zur Verfügung stellen:

  • /api/feedback soll per GET-Request alle verfügbaren Feedbacks als JSON Object zurückgeben (siehe https://vm.elearning.physik.uni-frankfurt.de/po-fp-rating/rating.json für ein Beispiel).

  • /api/feedback soll per POST-Request ein neues Feedback entgegen nehmen und das Feedback speichern. Der Client wird dir das folgende JSON Object im Body des Requests schicken:

    {
	"stars": 5,
	"project": "Project Name",
	"feedback": "Feedback text"
}

    "stars" gibt die Sterne an, die der Nutzer der Anmeldung gegeben hat, "feedback" das (optionale!) Feedback des Nutzers und "project" eine Angabe darüber, um welches Projekt es sich handelt (damit die API auch für andere Projekte nutzbar ist).

Das Feedback soll gespeichert werden. Es ist dir freigestellt, welche Methode du nutzt.

Mach dich damit vertraut

  • Wie kommuniziert ein Server mit einem Client (z.B.: Internetbrowser)
    • REST-API: Was ist das?
    • JSON: Was ist das?
  • Wie speichere ich Daten aus der API dauerhaft? (Datei oder Datenbank)
  • NodeJS und Express: https://expressjs.com/

Vorgehen

Wir empfehlen dir, das Backend in NodeJS zu schreiben (es ist dir aber freigestellt, eine andere Sprache zu verwenden)

  1. Führe in einem neuen Verzeichnis 

    npm init

    aus.

  2. Erstelle eine "index.js" Datei und öffne sie in einer IDE deiner Wahl
  3. Installiere express mit npm

  4. Für einen ersten Test kannst du dies in die index.js schreiben: 

    const express = require('express');
const app = express();

app.get('/', function(req, res) {
  res.send('Hello World!');
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!');
});

  5. Führe 

    node index.js

    aus und öffne deinen Browser und navigiere zu http://localhost:3000.

  6. ...
  7. Profit!
  8. (Falls noch nicht geschehen) commite und pushe deinen Code auf GitHub und sage uns Bescheid (smile)



Aufgabe 2: Front-End

In diesem Teil sollen die Daten aus der API aufgerufen und verarbeitet werden.

Die Logik wird im Browser über Javascript umgesetzt. Die grafische Darstellung der Bewertungsergebnisse sollen über HTML strukturiert und über CSS aufgehübscht angezeigt werden. 

Damit das Rad nicht neu erfunden werden muss sollte für die Darstellung zur Hilfe das Framework "Bootstrap" (bestehend aus HTML und CSS) genutzt werden.

Konkrete Aufgabe

Wir haben eine JSON Datei hochgeladen mit Dummy Daten. Das Frontend, was du schreibst, kann die Daten über die URL abrufen: https://vm.elearning.physik.uni-frankfurt.de/po-fp-rating/rating.json

Wird diese URL angefragt, so erhält man ein Objekt im JSON-Format, welches über Javascript abgefangen und bearbeitet werden kann. Über HTML und CSS sollen diese Daten aufbereitet angezeigt werden.

Anforderungen:

  • Zeige die Anzahl der aktuellen Feedbacks und die durchschnittliche Sternebewertung an
  • Zeige eine Liste aller Feedbacks an
  • Ermögliche das Neuladen der Feedbacks
  • Zeige mindestens einen Graphen (Feedbacks über die Zeit, Verteilung der Sterne etc.) an
  • Für Motivierte:
    • Implementiere eine Möglichkeit die Feedbacks zu sortieren und zu filtern (nach Sterne, Zeit oder Projekt)

Mach dich damit vertraut

Vorgehen

  1. Erstelle einen Ordner mit dem folgenden Inhalt: 

    .
├── index.html
├── css
│   └── style.css
└── js
    └── script.js

  2. Deine "index.html" sollte so aussehen: 

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
</head>
<body>
  
  <script src="js/script.js"></script>
</body>
</html>
  3. Füge die für Bootstrap notwendige Dateien zu deinem Projekt und Tags zu deiner "index.html" hinzu.
  4. Die "index.html" Datei kannst du nicht direkt mit dem Browser öffnen, da dann AJAX Request nicht funktionieren

    1. Installiere das npm Modul "http-server": 

      (sudo) npm install http-server -g

    2. Dann kannst du den Server mit 

      http-server [path] -p 8080

      starten. Im Browser kannst du auf die Seite über http://localhost:8080 zugreifen.

  5. ...
  6. Profit!
  7. (Falls noch nicht geschehen) commite und pushe deinen Code auf GitHub und sage uns Bescheid (smile)




Wenn du Fragen vor oder während der Umsetzung des Projektes haben solltest, kannst du dich gerne jeder Zeit bei Lars (lars@elearning.physik.uni-frankfurt.de) oder Bastian (bastian@elearning.physik.uni-frankfurt.de) melden.


Viel Spaß und Erfolg mit deinem Projekt (smile) (big grin) (smile) (big grin)

  • No labels