Lernziel

Du lernst…

  • wie eine grössere Anwendung geplant werden kann
  • projektorientiertes Arbeiten in einem kleinen Team
  • Zusammenhänge zwischen Server und Client sowie verschiedenen Technologien zu erkennen und zu verstehen

Idee

Wir wollen eine öffentliche REST-Schnittstelle verwenden, diese aber mit einer eigenen Datenbank ergänzen, so dass wir auch Daten speichern können.Diese beiden Quellen werden wir dann verwenden, um eine WebApp zu programmieren.

  1. Wir schauen die öffentliche REST-Schnittstelle zusammmen an.
  2. Wir ergänzen diese um unsere eigene Datenbank:
    1. Dabei müssen wir uns zuerst genau überlegen, was wir abspeichern möchten
    2. Dann überlegen wir uns, wie wir das abspeichern können und erstellen ein ER-Diagramm
    3. Dann erzeugen wir ein Schema, d.h. wir legen die Struktur der Datenbank fest, indem wir entsprechende Tabellen erzeugen und Datentypen festlegen
    4. Anschliessend füllen wir die Datenbank mit Daten, damit wir etwas zum Arbeiten haben
    5. Wir überlegen uns zusammen wie man die Daten als REST-Schnittstelle zur Verfügung stellen kann.
  3. In Zweier- oder Dreier-Gruppen erstellt ihr eine WebApp welche auf die beiden Quellen zugreift. Dabei kommen verschiedene Technologien zum Einsatz

Theorie

Einige Dinge werden wir zusammen anschauen, andere sollt ihr selbständig nachlesen und erarbeiten.

👉 Skript Datenbanken
👉 Skript HTML, CSS und JS

Gruppen

Die Arbeit kann in Zweier-Gruppen oder alleine.

Wireframes/Mockups

Wireframes von Webseiten sind skizzenhafte Layout-Anordnungen der einzelnen Seite. Es soll grob gesagt werden, wo welche Elemente auftauchen. Die etwas detaillierteren Mockups führen das Layout dann genauer aus und fügen ein Design dazu.

Wireframes/Mockups können entweder auf Papier von Hand erstellt und eingescannt/fotografiert werden. Dazu existieren Vorlagen für bestimmte Formate. Man kann dies natürlich auch mit einem Zeichenprogramm, oder mit Powerpoint oder mit spezialisierten Apps/Webseiten erstellen!

👉 https://wireframe.cc (online wireframe-tool)
👉 https://www.sketchize.com (vorlagen als PDF)
👉 …

Projektantrag

Der zu Beginn einzureichende Projektantrag umfasst die folgenden Punkte:

  • Erweiterte Spezifikationen der App (siehe WebApp, ergänzen und erweitern)
  • Titel der Webseite/des Projektes
  • alle Gruppenmitglieder aufführen
  • Arbeitsplan (Teilaufgaben, Tests, Zwischenziele, …)
  • Wireframes/Mockups der Webseiten (Start-, Suchtreffer- und Detailseite sowie deren Abhängigkeiten)

Der Projektantrag ist als PDF per E-Mail an den Auftraggeber einzureichen.

Arbeitsjournal

Wird mit der LK geteilt (z.B. per E-Mail), beinhaltet Antworten auf die folgenden Fragen (Ende jedes Arbeitsblock):

  • Was haben wir heute erreicht?
  • Wo sind wir auf Probleme gestossen?
  • Wo stehen wir in unserem Zeitplan und was sind unsere nächsten Schritte

Projektbericht

Der Projektbericht setzt sich aus den folgenden Teilen zusammen und muss am Ende des Projektes als PDF eingereicht werden:

  • Zusammenstellung der vervollständigten Spezifikation
  • Bericht über erreichtes Resultat und offen gebliebene Punkte
  • Bericht über die Arbeitsresultate der einzelnen Gruppenmitglieder
    («wie habt Ihr Euch organisiert?»)
  • Dokumentation der Webseiten-Struktur

Abgabe

Abgegeben wird neben dem Projektbericht (als PDF) das Endprodukt der WebApp (Ordner mit allen Dateien, als ZIP-Datei) bis Freitag, 10.6.2022, 23.59 Uhr.

Bewertung

Das Projekt wird bewertet. Die Note setzt sich wie folgt zusammen:

20%
Arbeitsweise (Projektantrag, Arbeitsjournal, Einhaltung Termine)
60%
Webseite (Vollständigkeit, Navigation, Design, Code, Originalität)
20%
Projektbericht (Vollständigkeit, erreichte Resultate, Bericht der Arbeitsresultate, Dokumentation der Webseite)