Section outline

  • Webentwicklung 2

    Collapse all Expand all

    • Logo Webentwicklung 2

    • Fragestunden im Sommersemester 2024
      • Dienstag, 2.7.2024, ab 10:00
      • Donnerstag, 4.7.2024, ab 10 Uhr
      • Dienstag, 9.7.2024, ab 10 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.

    • Ankündigungen Forum
    • BBB Stream der Vorlesung BigBlueButton

  • Abnahme der WebApps

    • Abgabe der WebApps bis spätestens 17.07.2024, 20 Uhr Assignment

      Hochladen der ZIP-Datei im Sommersemester bis spätestens 17.07.2024, 23 Uhr

      Termin zum Übergabetermin (15 Min pro App, BBB) : 18. (ganztägig) und 19.07.2024 (vormittags).

      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:

      • App/UI/UX/Umsetzung der Idee: 40%
      • Code/Aufbau: 40%
      • Fragen beim Abnahmegespräch: 20%

      (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. ChatGPT eignet sich gut zum Lernen. Jedoch sollte stehts genau nachvollzogen werden, was generiert wird).

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

       

      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.

  • Wissens-Check

    • Webtechnik/Astro:
      • Was ist ein Microservice, was ist ein Monolith?
      • Was bedeutet Serverside Rendering?
      • Was ist ein Server-Endpoint?
      • Was sind Vorteile von Astro?
      • Wie werden Layouts in Astro definiert? Wozu dienen diese?
      • Wie werden Nav-Bars in Astro integriert?
      • Was ist static Routing in Astro?
      • Was ist dynamic Routing in Astro?
      • Tailwind CSS und DaisyUI - wofür wird dies genutzt?
      • Unterschied zwischen ServerSideRendering und SinglePageApps?
      • Wie werden Daten zwischen Frontend und Backend ausgetauscht?
      • Was ist Markdown?
      • Wie kann Markdown in Astro gerendert werden?
      • Was ist JSON?
      SolidJS
      • Was ist eine Komponente?
      • Was ist JSX?
      • Was steht in der return Funktion einer Solid-Komponente?
      • Was ist ein Signal? Wozu wird es gebraucht?
      • Was ist eine Ressouce und was ist der Unterschied zu einem Signal?
      • Was ist eine Prop?
      • Wie können Komponenten Props übergeben werden?
      • Wie wird eine Komponente upgedated und wie werden Nutzerinteraktionen realisiert?
      Backend / Datenbanken
      • Was ist SQLite?
      • Was ist eine UUID?
      • Welche Typen von REST Abfragen gibt es?
      • Welche 3 Möglichkeiten gibt es, Daten in einer REST-Abfrage zum Server zu übermitteln?
      • Welche Verknüpfungen von Tabellen gibt es in SQL?
      • Wie heißen die 4 Befehle zum Lesen, Neu anlegen, Ändern und Löschen von Tabellen in einer Datenbank?
      • Welche 3 Möglichkeiten zum Verknüpfungen von Datenbanken gibt es?


  • 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.
    • Skript zu Einführung in die Technologien File
      • 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

    • Skript: Wird jedes Mal erweitert File

    • 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
    • ### VIDEO: Package.json (Neu SoSe24) File
      • Was ist npm
      • Pakete für das Projekt laden
      • Inhalte der package.json
    • *** 1_Astro File
      • Astro Projekt
      • Komponentenbasierter Aufbau
      • map-Funktion zum Aufbau einer Seite

    • Vorlesung 2-5: Astro und Server Side Rendering

    • *** 2_Astro_Blog_Markdown_DaisyUI_SSR File

      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)
    • ### Video: Übersicht über Astro (SoSe24) File
      • Übersicht über Astro
      • Contentdriven
      • Ordnerbasierte Struktur
    • ### Video: Astro, Layouts, Footer, Responsive Navbars (SoSe24) File
      • Nutzung von Layouts
      • Footer
      • Responsive Navbars (die sich zu einem Burgen Menu zusammenfalten bei kleineren Screens)
    • ### Video: Server Side Rendering (SoSe24) File
      • 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.
    • ### Video: Blogübersicht (SoSe24) File
      • Automatische Darstellung der Blogkomponten abhängig vom Datum der Veröffentlichung und publish Flag
    • ### Video: Blogbeiträge aus Markdown rendern (SoSe24) File
      • Markdown Files in Seite einbetten.
      • Dynamische Routen am Beispiel [article].astro
    • ### Video: Theming mit DaisyUI (SoSe24) File
      • 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

  • Astro und Solid

    • Vorlesung: Einführung in Solid

      • Konzept der intelligenten Komponenten.
      • Komponenten isoliert
      • Intelligente Komponenten vs. SSR
      • CSS Integration
      • Buttons, Edits als Function
      Im Git Repo - Branch "Solid"
    • ### Video : Was ist das Solid Framework? File
      • Warum Solid?
      • Verbreitung und Konzept
    • ###Video: Solid in Astro integrieren File
      • Solid Integration in Astro
      • Die Komponente in den Browser laden mit client:load
      • Client-Side

    • ### Video: Reagieren auf das Klicken eines Buttons File
      • Reagieren auf Nutzerinteraktionen am Beispiel eines Buttons.
      • Signals: getter und setter

    • ### Video: Input/Edit Field File
      • Text/Nummern Eingabe mit <input ...>
      • Platzhalter
      • Änderung eines Signals durch EIngabe in das Input-Feld mit onInput
    • Vorlesung: Table im Frontend
      • Tabelle im Frontend erzeugen. 
      • Schnelles Filtern

    • Vorlesung: Serverendpoint mit get, Daten in Solid laden

      • Serverendpoints in Astro
      • Ersten get-Endpoint erzeugen und mit Postman testen.
      • createRessouce in SolidJS und Laden von Daten vom Server
    • ### Video: Checkbox und initiale Werte File
      • Checkboxen
      • Signale initial setzen, um einen definierten Zustand beim Rendern zu erhalten. Zum Beispiel soll eine Checkbox beim Öffnen gesetzt oder nicht gesetzt sein oder ein initialer Text in einem Input-Feld gesetzt werden.
    • *** CODE: Astro und Solid Komponente File

  • Server-Endpoints - "Serverless" Functions und Serveranbindung für einfache Cloudservices

  • Erweiterte Funktionalität (Login, etc)

  • Pro-Workshop (Node Server, ORM)