Kursthemen

  • Webentwicklung 2

    Alles einklappen Alles aufklappen

    • Logo Webentwicklung 2

    • Fragestunden im Sommersemester 2024
      • Dienstag, 2.7.2024, 11:00-12:00 Uhr
      • Dienstag, 9.7.2024, 11:00-12:00 Uhr
      • Und nach / in der Vorlesung

    • Wege zum Erfolg des Fachs "Webentwicklung 2"


      • Wichtiger Hinweis: Im Sommersemester 2023 wurde die Vorlesung neu konzeptioniert sein und die Inhalte in großen Teilen geändert. Web 2 baut auf modernen, teils einfacheren Werkzeuge auf mit vielen Übungsblöcken.

      Die wichtigsten Neuerungen waren:

      • Block zu Grundlegendes Javascript Wissen.
      • Intelligente Komponenten mit Solid.
      • Webframework mit Astro.
      • Serverendpoints (leichter einzurichten), Node ist optional.

      Die wichtigsten Neuerungen im Sommersemester 2024:

      • Einige Videos werden ergänzt.
      • Login Funktionalität nun fester Bestandteil für 1,x
      • State-Management bei Solid für Apps mit mehreren Seiten und Seitenteilen.

      Hinweise zum Fach und zum Ablauf und Erfolg:

      • Webentwicklung 2 ist ein anspruchsvolles Technologiefach, das neueste Webtechnologien zeigt. 
      • Viele ehemalige Studierende berichteten, dass das Wissen aus diesem Fach eine Eintrittskarte für Praktika und Jobs war. Aufgrund der angespannten wirtschaftlichen Lage sind spannende Projekte nicht mehr so einfach zu bekommen. Mit den richtigen Skills geht es leichter.
      • Da die Inhalte insgesamt recht komplex und vielfältig sind, sind Inhalte nun verstärkt Schritt für Schritt aufeinander aufgebaut.
      • Ein Invest von ca. 2 Stunden pro Woche nach den beiden Vorlesungen ist absolut notwendig, reicht aber auch vollkommen aus, um die Inhalte nachzuvollziehen.
      • Dieser Zeitinvest ist aber absolut notwendig, damit sie nicht abgehängt werden. Jene, die nicht dabei bleiben, haben enormen Stress am Ende des Semesters, was fast immer zum panischen Schieben des Fachs führt.
      • Leider kann der Erkenntnisgewinn durch nichts außer das selbstständige Anwenden der Inhalte ersetzt werden. Daher wurde die Vorlesung um zahlreiche praktische Einheiten erweitert. Wenn Sie nicht üben und nicht zur Vorlesung kommen, kann ich nicht viel machen. Der Wissensaufbau aus dem Internet ist definitiv zeitaufwendiger, weil sicher 2/3 der Tutorials fehlerhaft sind. Der enorme Zeitaufwand, um herauszufinden, was geht und was nicht geht, habe ich ihnen quasi schon abgenommen. 
      • In den vergangenen Semestern wurden öfters Ansätze aus youtube Videos oder ChatGPT Schnipsel zusammengeklickt, ohne zu wissen, warum was gemacht wird. Vieles war architektonisch ungeschickt und die Apps funktionierten nicht, waren instabil und hatten böse Sicherheitslücken. In Industrieprojekten ist ein solider Aufbau projektentscheidend. In unzähligen Projekten sahen wir Softwareunfälle von Projekten, die so gebaut wurden und später enorme Probleme nach sich zogen. KI-Tools sind eine gute Hilfe, aber nur in sinnvollem architektonischen Kontext.
      • Ich frage oft jene, die sehr gute Projekte abgegeben, haben folgende Frage: "Was haben Sie getan, ein so gutes Projekt und damit eine 1,x zu bekommen:" "Ich hab halt früh angefangen und dann so nach und nach weiter gemacht. Am Ende brauchte ich noch ein Wochenende, dann war es fertig!" "Ich wollte eine gute App haben" "Ich hatte Lust drauf, am Anfang wars blöd, aber mit der Zeit kommt man rein!" "Ich habe viele viele Tutorials angeschaut. Es kostete enorm viel Zeit!" "Der Anfang war zäh, aber dann gings!" "Ich wollte diese Anwendung haben!" "Ich möchte in den Webbereich!" "Ich habe die Beispiele angeschaut!" "Ich habe mit ein paar Leuten zusammen gearbeitet!" "Letztes Semester habe ich es unterschätzt und dieses Jahr habe ich es dann durchgezogen!"
      • Das Fach ist gut machbar, wenn sie dran bleiben.

      Wichtige Randbedingungen:

      • Bitte nutzen sie das Toolset, das hier gezeigt wird. In Projekten haben sie auch meist nicht die Wahl, was sie benutzen möchten. Es gibt viele gute Frameworks. Aber zu einer Bewertung muss ich auf die Nutzung der vorgestellten Technologien bestehen, bzw. müssen sie andere Technologien mit mir abzustimmen. Nicht allein die Optik einer Seite und die Präsentation muss passen, sondern der Aufbau der Software muss stimmen, damit sie marktrelevant durchstarten können. Unsichere Software mit schlechtem Aufbau zerstört ganze Unternehmen. Beispiele hierzu in der Vorlesung. 
      • Projekte mit Baukästen wie Wordpress, Joomla, Typo 3 dürfen nicht genutzt werden.


      Projektabgabe

      • Projekte können in Zweiergruppen bearbeitet werden.

    • Icon Forum
      Ankündigungen Forum
    • Icon BigBlueButton
      BBB Stream der Vorlesung BigBlueButton

  • Abnahme der WebApps

    • Icon Aufgabe
      Abgabe der WebApps bis spätestens 15.02.2024, 20 Uhr Aufgabe

      Hochladen der ZIP-Datei im Sommersemester bis spätestens 10.07.2024, 20 Uhr

      Termin zum Übergabetermin (15 Min pro App, BBB) : 11. (ganztägig) und 12.07.2024 (nachmittags).
      Jeder Teilnehmer gibt eine ZIP Datei mit folgenden Inhalten ab: 

      • Quellcode der App (ohne den Ordner node_modules), sonst bitte alles.
      • Screenshots der einzelnen Views. 
      • Kurzdoku der App (sehr knappe kurze Beschreibung der Hauptfunktion/zweck, Datenmodell und Besonderheiten, Zieldevice (Smartphone, PC, Tablet) sowie Screenshots der App). Keine seitenlange Doku! Maximal 3 Seiten. 

      Dateiname - bitte nur so:
      Web2_Vorname_Name_Matrikelnummer_Vorname_Name_Matrikelnummer_TitelDerApp.zip

      ------------------------------------------------------------------

      Bewertung der App: 

      Neue Bewertung ab SoSe2024:

      • UI/UX/Umsetzung der Idee: 35%
      • Code/Aufbau: 35%
      • Fragen beim Abnahmegespräch: 30%

      (Konzepte müssen verstanden sein und es sollte bekannt sein, warum was gemacht wird. Dies wird eingeführt, um zu vermeiden, dass ChatGPT Komponenten wahllos zu Projekten zusammengeklickt werden).

      ------------------------------------------------------------------


      Hinweise zur Umsetzung: 

      • Es sollte ein WebApp sein mit einem echten Use Case.
      • Umsetzung mit Astro/SolidJS
      • Pages in Server Side Technologie.
      • Pages mit Solid Komponenten.
      • RESTful Service: Es sollte ein Cloud-Anwendung sein, sprich Daten sollen eingegeben werden, gespeichert, geladen werden können. Es sollten aber auch rein darstellende Seiten enthalten sein wie beispielsweise About/Welcome etc.
      • Für 1,x: Login und Node Server
      • Im Serversystem sollte REST (und falls notwendig Sockets) umgesetzt werden und die Daten in einer Datenbank gespeichert werden. 
      • SQLite Datenbank mit Server-Endpoints
      • Saubere Architektur und klarer Aufbau (auch auf Variablen und Datenbankbenennungen achten, kein Deutsch/Englisch Mix in den Variablen), bitte für ein Sprache bei der Darstellung (also die Sprache der Webseite, Tabellen etc.) entscheiden.

  • Einführung und Technologieüberblick

    • Vorlesung 1: Einführung und Technologieüberblick

      • Vorstellung und Einführung
      • Technologieüberblick - Web 1.0 bis heute
      • Konzepte und Architekturen für Apps, Webapps, Browser und IoT.
      • Spekulation über die Webtechnologie in der Zukunft.
      • Anforderungen an die Projekte (die Infos werden auch auf Moodle veröffentlicht)
      • Info: Historische Webdesigns webdesignmuseum.org

    • Vorlesung 2: Grundkonzept

      Servertechnologien
      • Monolith / Microservice
      • Gängige Technologien
      Zwecke von Apps/Webportalen:
      • Wie eine Webapplikation entsteht
      • Zweck der App, Mobile, Web - vom Geschäftsmodell zur App
      • Technologiebrüche
      Technische Konzepte:
      • Server Side Rendering (SSR)
      • Single Page App (SPA)
      • Konzept Datenaustausch (SSR und SPA)
      • Inhalte der Vorlesung SSR und SPA und intelligente Komponenten

    • Nacharbeit Vorlesung 1 und 2 (ca. 30-40 Minuten), folgende Fragen sollten sie in der nächsten Vorlesung beantworten können und reflektiert haben: 

      • Was ist der Unterschied zwischen einem Monolithen und einem Microservice?
      • Welche modernen Serversysteme kennen sie?
      • Wie entsteht ein Portal?
      • Was ist ein Technologiebruch?
      • Erklären sie SSR und nennen sie drei Beispiele von Seiten mit SSR.
      • Erklären sie SPA und nennen sie drei Beispiele von Webapplikationene mit SPA.
      • Wie werden Daten zwischen App / Webapp ausgetauscht?
      • Was sind intelligente Webkomponenten?
      Fertigen Sie eine Mindmap an oder eine 1-Seite Zusammenfassung in ihrem Stil.
    • Icon Datei
      Skript zu Einführung in die Technologien Datei
      • Anwendung der Webtechnik
      • Digitalisierung
      • Web 1.0 bis heute
      • Serverstrukturen (Monolith, Microservice)
      • SaaS, Serverless Functions, API
      • Gängige Serversysteme
      • NodeJS (Überblick)
      • Native und Webapps
      • Moderne Systeme
      • Zukunftsblick

  • Javascript

  • Astro

    • Icon Datei
      Skript: Wird jedes Mal erweitert Datei

    • Vorbereitung für Astro

      • BItte installieren Sie die letzte Stable Version von Node - https://nodejs.org/en
      • Setzen Sie die Pfad Variable.
      • Wenn Sie möchten können Sie ab Freitag ein erstes Miniprojekt herunterladen und mal testen.

    • Vorlesung 1: Überblick über Astro - erste Seiten

      • Installation
      • Übersicht über den Projektaufbau
      • Erste statische Seite mit CSS Einbindung
      • Generieren von Inhalten mit map
      • Markdown
    • Icon Datei
      ### VIDEO: Package.json (Neu SoSe24) Datei
      • Was ist npm
      • Pakete für das Projekt laden
      • Inhalte der package.json
    • Icon Datei
      *** 1_Astro Datei
      • Astro Projekt
      • Komponentenbasierter Aufbau
      • map-Funktion zum Aufbau einer Seite

    • Vorlesung 2-5: Astro und Server Side Rendering

    • Icon Datei
      *** 2_Astro_Blog_Markdown_DaisyUI_SSR Datei

      Dieser Seed basiert nicht mehr wie im SoSe23 auf Astroship. Hier ist eine neue Vorlage enthalten, die auf DaisyUI aufbaut und intuitiver zu verstehen ist. 

      • DaisyUI 
      • SSR Redaktions-/Blogsystem
      • SSR Seiten
      • Navbar, die in Mobile zum Burgermenu wirs (collapse)
    • Icon Datei
      ### Video: Übersicht über Astro (SoSe24) Datei
      • Übersicht über Astro
      • Contentdriven
      • Ordnerbasierte Struktur
    • Icon Datei
      ### Video: Astro, Layouts, Footer, Responsive Navbars (SoSe24) Datei
      • Nutzung von Layouts
      • Footer
      • Responsive Navbars (die sich zu einem Burgen Menu zusammenfalten bei kleineren Screens)
    • Icon Datei
      ### Video: Server Side Rendering (SoSe24) Datei
      • Server Side Rendering am Beispiel der Seite "Person"
      • Die Seiten werden statisch gebaut und sind im Frontend dann nicht mehr änderbar. --> für reinen Content ohne Interaktion sehr gut geeignet.
    • Icon Datei
      ### Video: Blogübersicht (SoSe24) Datei
      • Automatische Darstellung der Blogkomponten abhängig vom Datum der Veröffentlichung und publish Flag
    • Icon Datei
      ### Video: Blogbeiträge aus Markdown rendern (SoSe24) Datei
      • Markdown Files in Seite einbetten.
      • Dynamische Routen am Beispiel [article].astro
    • Icon Datei
      ### Video: Theming mit DaisyUI (SoSe24) Datei
      • Theme in tailwind.config.cjs eintragen
      • Theme in Layout aktivieren
      • Eigene Themes erstellen

    • Vorlesung 6: Daten serverseitig abholen.

      • Download Postman POSTMAN
      • SSR mit Daten von einem Server holen 
      • Diese Daten darstellen. 
      • Beispiel Personen API