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.
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 (natürlich darfst du auch beide Aufgaben abschließen).
Das Projekt soll zusätzlich auf GitHub hochgeladen werden.
Erste Schritte für beide Projekte:
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.
Die API soll zwei Schnittstellen zur Verfügung stellen:
/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.
Wir empfehlen dir, das Backend in NodeJS zu schreiben (es ist dir aber freigestellt, eine andere Sprache zu verwenden)
Führe in einem neuen Verzeichnis
npm init |
aus.
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!'); }); |
Führe
node index.js |
aus und öffne deinen Browser und navigiere zu http://localhost:3000.
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.
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:
Erstelle einen Ordner mit dem folgenden Inhalt:
. ├── index.html ├── css │ └── style.css └── js └── script.js |
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> <h1>FP-Feedback</h1> <script src="js/script.js"></script> </body> </html> |
Installiere das npm Modul "http-server":
(sudo) npm install http-server -g |
Dann kannst du den Server mit
http-server [path] -p 8080 |
starten. Im Browser kannst du auf die Seite über http://localhost:8080 zugreifen.
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