TU Wien:Web Engineering VU (Cito)

From VoWi
Jump to navigation Jump to search
Similarly named LVAs (Resources):

Daten[edit]

Lecturers Jürgen Cito, Gertrude Kappel, Michael Schröder
ECTS 3
Language English
Links tiss:188951, Homepage, Mattermost-Channel
Zuordnungen
Bachelor Wirtschaftsinformatik Pflichtmodul WIN/EWA - Entwicklung von Web-Anwendungen
Bachelor Software & Information Engineering Wahlmodul Entwicklung von Web-Anwendungen
Bachelor Medieninformatik und Visual Computing Wahlmodul Entwicklung von Web-Anwendungen


Inhalt[edit]

SS2020:

  • HTTP:
    • grober Überblick
    • requests mittels curl
    • Cookies / Sessions
  • HTML / CSS:
    • Accessability, Standards
    • Responsive Design (Flex, Grid, ...)
  • JavaScript
    • Basics
    • DOM / BOM
    • Asynchronous Programming
  • (Web)server
    • Backend mit Node JS
    • Backend Templates
    • Grundlagen zu APIs (z.B. REST APIs)
    • Client/Server Modelle
  • Frontend
    • MVVM Pattern
    • Client-Side mit Vue.js

Ablauf[edit]

Vorlesungen 2 Einheiten wöchentlich, dazu 4 (Gruppen-)Übungen und 2 Tests

Benötigte/Empfehlenswerte Vorkenntnisse[edit]

Arbeiten mit GIT

HTML/CSS/JS nicht unbedingt benötigt - Es kann aber nicht schaden, wenn man schon mal ein paar Webseiten gemacht hat

Grundkenntnisse von HTTP können auch nicht schaden (also z.B. Response-Code 2xx = Erfolg, 4xx = Client-Fehler, etc.)

Vortrag[edit]

Ziemlich angenehmes Englisch, wenn auch manchmal etwas schnell, was es für manche wohl erschwert, dem Vortrag zu folgen. Fokus weniger auf Theorie und mehr auf Beispielen.

Vor dem Vortrag stellt der Professor immer ein paar pre-readings bereit die man vorher alleine durcharbeiten sollte. Die VO überfliegt die Inhalte dann nur noch und konzentriert sich eher auf praktische Beispiele, wie bereits erwähnt.

Während der gesamten VO Zeit konnten in jeder Einheit immer Fragen gestellt werden die auch jedes mal schnell und gut beantwortet wurden.

Am Ende des Semesters gab es zwei Gastvorträge, einer davon war Stoff für den 2. Test, der zweite war "Bonus-Content".

Übungen[edit]

Im Laufe des Semesters wurde dabei ein großes Beispiel über vier Aufgabenblätter hinweg umgesetzt (im S2020 eine Webseite für den Kauf von Kunstgegenständen). Alle Aufgaben wurden in einem Team von vier Personen gelöst.

Dabei gab es bei jeder Aufgabe immer ein vorgegebenes Framework bei dem viele Funktionen schon fertig implementiert waren so dass man sich auf das Wesentliche konzentrieren konnte. Dieses wurde immer über GitHub zur Verfügung gestellt. Das Framework musste bei jeder Aufgabe verwendet werden. Die vorgegebene Projektstruktur enthält auch Testfälle, mit denen die Funktionalität getestet wird und man auch die vorläufigen Punkte angezeigt bekommt.

A0 - HTTP[edit]

HTTP-Request:

    • Zwei Requests senden
    • Einzeln
    • "Einstiegsübung", Vorraussetzung für eigentlichen Übungsteil, Tests etc.

A1 - HTML & CSS[edit]

Es war eine mehrseitige Webanwendung mit HTML und CSS anhand von Mockups und einem Styleguide umzusetzen. Die Basisstruktur der Seiten war schon vorhanden. Verwendung von CSS Grid und Flexbox erforderlich.

A2 - JavaScript[edit]

Die Webanwendung muss um clientseitiges JavaScript erweitert werden. Es wird normales ("Vanilla") JavaScript verwendet, ohne Frameworks wie jQuery oder Vue. Die Funktionalität beinhaltet API-Calls an ein Backend, Änderungen des DOMs u.ä.

Man musste nicht die eigene Abgabe von A1 wiederverwenden sondern hat eine Referenzimplementierung als Basis bekommen.

A3 - NodeJS[edit]

Aufgabe 3 war die Entwicklung des Backends mit NodeJS und ExpressJS. Es waren ein paar Endpoints, In-Memory-Storage und die Anbindung an eine Payment-API ("Bling", die hauseigene für Web Engineering) gefordert.

A4 - Vue[edit]

Zuletzt war das Frontend von A2 mit Vue zu schreiben. Inhalt der Übung waren die Basisfunktionen von Vue, also Properties, one-way und two-way Binding, Events, Lifecycle Hooks, API-Calls und Zugriff auf Vuex (zentrales State-Management). Es gab wieder ein Grundgerüst vorgegeben und es waren nur gewisse Seiten und Komponenten anzupassen.

Wie bei allen Übungen gab es wieder automatische Testfälle, mit denen man seine Implementierung testen kann.

Prüfung, Benotung[edit]

Test 1: Empfand ich als überraschend schwer. Der Test wurde über TUWEL abgehalten (war auch von Anfang an so geplant, nicht nur wegen des distance-learning). Man hatte 30 Minuten Zeit, die Fragen zu beantworten, nachdem man den Test gestartet hat. Insgesamt war der Test eine Stunde lang geöffnet (es war also nicht so schlimm, wenn man 10 Minuten zu spät online gekommen ist). Pro Frage hatte man im Durchschnitt 2 Minuten Zeit, was für manche Fragen schon recht knapp war. Fragen konnten nicht wiederholt werden, und es gab nur einen Versuch. Wer also bei einer Frage nicht weiter wusste, musste raten. Der Test war nicht unfair gestaltet, aber 1-2 Fragen haben Code snippets beinhaltet, die recht lang waren und wo man schon ein wenig Zeit gebraucht hat, um sich alles durchzulesen.

Die Benotung erfolgte sofort nachdem alle Studierenden den Test beendet hatten. Der Professor hat anschließend eine anonymisierte Grafik der Noten veröffentlicht und die meisten haben gut bis sehr gut abgeschnitten. Der Test war also schaffbar ;)

Test 2: Gleiche Modalitäten wie beim 1. Test, nur die Zeit wurde um 15 Minuten verlängert. Im S20 hat der Test ausschließlich online über TUWEL stattgefunden. 15 Fragen, 50 Punkte insgesamt, nachdem man auf weiter geklickt hat, konnte man nicht mehr zurück gehen. Die Fragen und Antworten waren zum Teil doch schon recht lang und die Antworten haben sich oft nur durch Kleinigkeiten unterscheidet. Zum Test kamen die VO-Blöcke 6-10 (also alles, was nach dem 1. Test durchgenommen wurde) und es waren auch einige (zum Teil längere) Code Beispiele dabei. Allerdings musste man hier keinen Code selbst schreiben, sondern es waren vier Snippets vorgegeben und das richtige musste ausgewählt werden. Die meisten Studierenden haben wieder recht gut abgeschnitten. In Summe ein fairer Test ohne große Überraschungen.

Test Retake: Einer der zwei Tests darf wiederholt werden, sofern man das selbst wünscht. Dabei zählt nicht der bessere Versuch, sondern der neuere. Es ist also auch möglich, sich zu verschlechtern. Beim retake Test soll es offene Fragen geben (und nicht (nur) multiple-choice). --> Bitte ergänzen falls/sobald jemand einen Test wiederholt hat!

Benotung: Man muss bei beiden Tests kombiniert mindestens 50% erreichen, um positiv zu sein, außerdem muss man bei jeder Übungsaufgabe mehr als 33% erreichen um im Übungsteil positiv zu sein.

Dauer der Zeugnisausstellung[edit]

Semester Zeugnis erhalten am Dauer
2020S 07.07.2020 n/a

Zeitaufwand[edit]

Es wurde bereits bei der Vorbesprechung darauf Aufmerksam gemacht, dass der Zeitaufwand die 3 ECTS deutlich übersteigt.

Unterlagen[edit]

Kein Skriptum.

Die Vorlesungsfolien werden immer rechtzeitig hochgeladen und sind auch recht hilfreich, wenn auch nur eine Zusammenfassung.

Es gibt zu jeder VO pre-readings die man vorher durcharbeiten sollte.

Die Vorlesung wird aufgezeichnet.

Tipps[edit]

  • Rechtzeitig anfangen, die meiste Zeit Verbringt man mit Nachbesserungen der Kleinigkeiten
  • Die späteren Aufgaben waren definitiv viel einfacher als die ersten zwei

Verbesserungsvorschläge / Kritik[edit]

2020S A1

Die Bewertungsmethode der ersten Aufgabe ist ein schlechter Scherz. Die Abgabe wird mittels Screenshots der erstellten Website in unterschiedlichen Breiten gegen Referenzbilder verglichen, wobei bei einer Diskrepanz >= 1.5% die Teilaufgabe als nicht gelöst gewertet wird. Ich habe als Web-Entwickler mit 2 Jahren Berufserfahrung für meinen Teil etwa 3 Stunden gebraucht die Webseite nach der Angabe zu rekonstruieren und dann weitere 14 Stunden um mit den Paddings und Margins zu spielen, bis diese Akzeptiert wurden.

  • Andere Meinung: Obwohl die Art der Bewertung nicht optimal ist und sicherlich verbessert werden könnte muss ich meinem Vorposter widersprechen. Grundsätzlich ist es eigentlich nicht nötig Pixel zu verschieben und es hat bei mir und auch vielen anderen Kollegen fast gänzlich ohne manuelles verschieben funktioniert. Ich kann nicht verstehen, wie man als Web-Entwickler mit 2 Jahren Berufserfahrung 14h lang Pixel verschiebt und nicht auf die Idee kommt etwas grundsätzlich am Grid/der Flexbox zu ändern.
  • Dritte Meinung: Das eigentliche Problem war, dass im Design Guide mehrere Abstände gefehlt haben (die meisten wurden nach 5 Tagen im TUWEL gepostet). Ich hab desshalb auch 4 Stunden herumprobieren müssen. Cito hält die LVA zum ersten Mal ... da kann sowas schon passieren, er hat sich eh dafür entschuldigt uns ein paar Bonuspunkte / Zeitaufschub gegeben und wird es bei der nächsten Abhaltung bestimmt besser machen.
  • Vierte Meinung: Ich habe davor noch nie etwas mit Webdevelopment zu tun gehabt, HTML/CSS kannte ich zwar, hab's aber nie wirklich davor verwendet. Bei mir und meinen Kollegen hat praktisch alles auf Anhieb funktioniert, die meiste Zeit habe ich aber auch damit verbracht ein paar "Pixelungenauigkeiten" zu korrigieren. Den Test halte ich aber auch für einen Witz, vor allem weil man immer auf GitHub pushen muss um richtige Ergebnisse zu bekommen. Auch wenn meine Gruppe keine großen Probleme damit hatte, kann ich mir vorstellen wie frustrierend das Ganze im worst-case werden kann. Aber wie schon angemerkt wird die LVA von Cito zum ersten Mal abgehlaten, da finde ich es im Rahmen dass solche Probleme auftreten können. Großen Respekt dafür dass das Problem von der LVA-Leitung anerkannt wurde und alle eine Entschädigung dafür bekommen haben, normalerweise kommen nur dumme Ausreden und macht weiter wie bisher.
  • Noch eine Meinung: Ich stimme der zweiten Meinung zu. Es war sicherlich nicht nötig, einzelne Pixel zu verschieben. Und schon gar nicht 14 Stunden lang. Aber es stimmt auch, dass viele Sachen im Style-Guide nicht ausreichend präzise beschrieben waren. So gab es zu jeder Seite immer nur eine genaue Beschreibung der Abstände, und die mobile Seite war, zumindest bei meinem Teil, anders als die Vorgaben. Allerdings war es nicht schwer, das rauszufinden. Ich denke, es sollte in Zukunft Teilpunkte geben. Also z.B. noch 50% der Punkte bis 2% Ungenauigkeit und 25% der Punkte bis 2.5%. Ich habe selbst wirklich schon mit vielen Kunden gearbeitet und die waren oft noch viel nerviger als der automatisierte Test. Hier konnte man wenigstens sehen, was die Referenz ist. Bei einem echten Kunden existiert dieses Bild oft nur virtuell im Kopf.
2020S A2-4

Anders als bei A1 haben die Aufgaben 2 bis 4 gut gepasst. Die Aufgaben wirkten sinnvoll, der Zeitaufwand war angemessen und man konnte sie schon irgendwie auf 4 Leute aufteilen. Aber auch hier ist finde ich etwas Kritik an den Tests und an den Aufgabenstellungen angebracht. Die Aufgabenstellungen sind oft leicht unvollständig, gewisse Implementierungsdetails auf die sehr wohl getestet wird werden nicht erwähnt und man hat nach dem Lesen der Aufgabenstellung teilweise keine klares Bild davon, was man jetzt eigentlich machen muss. Das liegt daran, dass es Seitens der LVA die Einstellung "Machen Sie es so, dass die Tests durchlaufen / Schauen Sie in den Tests nach, wie das funktionieren soll" vertreten wird. Man kämpft also eher gegen das Testframework, als das man versucht ein Programm zu schreiben, welches die Aufgabenstellung erfüllt.