Assoziative Arrays: Eisdealer (re )loaded - JirkaDellOro/EIA2 GitHub Wiki

Recherche

Recherchieren Sie zunächst die folgenden Begriffe und Konzepte. Ziehen Sie auch den Beispielcode im begleitenden Repository hinzu und studieren Sie diesen aufmerksam. Nutzen Sie dafür auch den Debugger.

  • Assoziative Arrays (homogen / heterogen)
  • for .. of und for .. in
  • export (in Typescript)
  • Number.toFixed()
  • (Typ assortion (in Typescript))
  • (JSON)

Aufgabe

Die in der letzten Aufgabe entwickelte Seite ist schön und gut aber leider sehr unflexibel. Wenn etwas aus dem Sortiment genommen oder dem hinzugefügt werden soll, muss immer ein Entwickler sowohl die HTML Seite als auch u.U. den TS Code anpassen. Dies ist sowohl teuer, langsam, als auch fehleranfällig. Darum soll die Seite so umgebaut werden, dass lediglich der Datensatz des Angebots aktualisiert werden muss um die Seite automatisch daran anzupassen.

Dazu wird ein Mitarbeiter beim Verkäufer geschult, dass dieser weiß, wie er die Datensätze einzutragen hat - gehen Sie also von einem fähigen Mitarbeiter aus, welcher Ihre Datenstrukturen kennt und weiß, wie er diese Manipulieren muss, um das gewünschte Ergebnis zu erzielen.

Trennen Sie den Code in zwei Dateien:

  • Die erforderlichen Daten zu veränderlichen Teilen des Angebots, wie z.B. die Eissorten und Preise, sind in einer eigenen TS/JS-Datei mit Hilfe geeigneter und erweiterbarer Datenstrukturen definiert. Somit genügt es, in dieser Datei die Daten zu verändern oder zu ergänzen, um das Angebot des Eisdealers anzupassen.
  • Die zweite Datei kümmert sich darum, die Shop Seite aus der gegebenen Datenstruktur dynamisch zu generieren/aufzubauen und sie auch sonst funktional zu machen.

Selbstverständlich sollen die Interaktionsmöglichkeiten aus der letzten Woche weiterhin möglich sein.

Zusätzlich

Schreiben Sie ihren Code so, dass der Händler nach belieben ganze Kategorien hinzufügen oder entfernen kann (z.B. Streusel durch Soße ersetzen).

Hinweise und Tipps

  • Für diese Aufgabe müssen Sie sich keine Gedanken über eine Mobile Seite machen, entwickeln Sie lediglich die Desktopseite.
  • Es wird am einfachsten sein, bei der Berechnung der aktuellen Auswahl sowie des Preises (wie schon bei Mau Mau) die Übersicht komplett zu entfernen und dann neu aufzubauen/zu berechnen.
  • Für viele von Ihnen bedeutet das u.U. eine tiefergehende Überarbeitung Ihres Codes aus der letzten Woche. Halten Sie nicht zu sehr an alten Konzepten fest, selbst wenn es anfangs scheint als wäre es weniger Arbeit. Glauben Sie mir wenn ich Ihnen sage, dass es in den meisten Fällen deutlich mehr Aufwand ist, alte Systeme weiter zu pflegen und zu erweitern als sie neu zu implementieren, besonders mit den Hürden und Problemen der vorherigen Implementation im Hinterkopf.
  • Sofern Sie nicht die zusätzliche Aufgabe versuchen wollen, legen sie ggf in ihrem Code die vorgegebenen Kategorien und deren Eigenschaften fest (z.B. Eiskugeln sind immer Number Input Felder, Darreichungsformen sind Radiobuttons). Diese Festlegung würde bei der zusätzlichen Aufgabe natürlich nicht gehen.
  • Ein Array ist letztendlich auch nur ein Datentyp. Da wir Arrays von Datentypen anlegen können, können wir selbstverständlich auch Arrays von Arrays anlegen. Orientieren Sie sich am Beispielcode!
  • nutzen Sie selbstdefinierte Attribute falls Sie etwas in der HTML Datei speichern müssen. Das value Attribut für den Preis zu missbrauchen hat vllt in der letzten Woche funktioniert, spätestens in der nächsten wird dies nicht mehr der Fall sein. Nutzen Sie die Elemente für die bestimmungsgemäßen Funktionen (insbesonders name & value).

Konzept

  1. Machen Sie ein Anwendungsfalldiagramm für den Händler der Seite zur vorliegenden Anforderung.
  2. Skizzieren Sie dann zunächst die neue Eisdealer Seite. Legen Sie dabei besonderes Augenmerk darauf, welche Teile der Seite über TS/JS generiert werden und welche bereits statisch im HTML definiert werden können. Heben Sie diese Teile geeignet hervor.
  3. Entwickeln Sie eine geeignete Datenstruktur und halten Sie diese Abseits der Aktivitätsdiagramme fest. Geben Sie auch ein konkretes (kurzes) Beispiel für die angewandte Struktur, gefüllt mit tatsächlichen Werten. Hinweis: Überlegen Sie sich, welche Eigenschaften eine einzelne auswählbare Eis-Komponente besitzt und inwiefern Sie sich von anderen unterscheidet.
  4. Erstellen Sie ein Aktivitätsdiagramm zur Generierung der Seite. Überarbeiten Sie ggf die ADs aus der letzten Woche um die neuen Konzepte einzubeziehen.
    Hinweis: ADs bilden nicht die Nutzerinteraktion ab, sondern den Programmablauf. Außerdem müssen diese keinen Code enthalten, sondern können auch Prosa-mäßig beschrieben werden. Finden Sie eine gute Balance zwischen zu ausführlich und zu ungenau ("generiere HTML" ist nicht ausführlich genug! Faustregel: Wenn die Ablaufstruktur eines Codes dargestellt wird mit Schleifen und Abfragen, sind sie schonmal auf einem guten Weg).

Implementation

Beginnen Sie dann mit der Implementation. Ziehen Sie den Beispielcode aus der Vorlesung hinzu und halten Sie sich wie immer strikt an den CodingStyle!