Bitte wählen Sie die Bereiche, die Sie exportieren möchten:
Schulung Fullstack-Webentwicklung mit SvelteKit und Prisma
Ein lauffähiges Team-Board an drei Tagen bauen und ausliefern
Schulungsformen
Inhouse-/Firmenschulung
- 3 Tage - anpassbar
- Termin nach Wunsch
- In Ihrem Hause oder bei der GFU
- Preis nach Angebot
- Lernumgebung in der Cloud
- Inhalte werden auf Wunsch an die Anforderungen Ihres Teams angepasst.
Individualschulung
- 3 Tage - anpassbar
- Termin nach Wunsch
- In Ihrem Hause oder bei der GFU
- Preis nach Angebot
- Lernumgebung in der Cloud
- 1 Teilnehmender = Fokus aufs Fachliche und maximaler Raum für individuelle Fragen.
Beschreibung
Der Kurs ist als ein einziges, durchgehendes Projekt angelegt. Statt isolierter Einzelübungen bauen die Teilnehmenden über drei Tage TeamBoard auf - ein Aufgaben-Board, auf dem ein kleines Team Projekte und Aufgaben in den Spalten offen, in Arbeit und erledigt verwaltet. Jede Übung erweitert dieselbe Anwendung, sodass am Ende ein abgesichertes, deploybares Produkt steht, das mitgenommen wird.
Durchgehendes Projekt: TeamBoard
TeamBoard ist ein Aufgaben-Board für kleine Teams mit einem bewusst schlanken, aber vollständigen Datenmodell:
- Nutzer: Name, E-Mail, Passwort-Hash, Rolle (Mitglied oder Admin)
- Projekt: Name, Beschreibung, Farbe
- Aufgabe: Titel, Beschreibung, Status (offen, in Arbeit, erledigt), Priorität (niedrig, mittel, hoch), Fälligkeitsdatum, zugewiesene Person, Projektzugehörigkeit
- Label: Name und Farbe, den Aufgaben in einer Viele-zu-viele-Beziehung zugeordnet
Erweitern Sie Ihr Wissen mit einem weiteren Webentwicklung Training.
Schulungsziel
Jede teilnehmende Person verlässt das Seminar mit einem selbst gebauten, lauffähigen MVP - dem Team-Board TeamBoard mit SvelteKit, Svelte 5 und Prisma - sowie der Fähigkeit, vollständige Fullstack-Webanwendungen eigenständig zu entwickeln. Sie lädt Daten serverseitig mit Load-Funktionen, bindet PostgreSQL über Prisma an, schreibt Mutationen mit Form Actions, validiert Formulare mit Superforms und Zod, sichert die Anwendung mit Authentifizierung ab und liefert sie über Adapter aus.
Details
Inhalt
- Ziele und Erwartungen der Teilnehmenden
- Klärung individueller Lernziele und Erwartungen für ein praxisnahes und relevantes Seminar
- Tag 1: 1. Das Fullstack-Modell von SvelteKit
- SvelteKit als durchgängiges Framework: Oberfläche, Server und Datenbank
- Svelte 5 und die Runes: $state, $derived, $effect und $props
- Dateibasiertes Routing mit +page, +layout und Routengruppen
- Server- gegen Client-Ausführung verstehen
- Projektaufbau mit dem sv-CLI und Überblick über die Adapter
- Praxis-Übung: TeamBoard mit dem sv-CLI aufsetzen, die Routen /projekte und /projekte/[id] sowie ein Layout mit Kopfzeile anlegen und als erste Rune ein Live-Abzeichen "offene Aufgaben" einbauen, das auf Klick hochzählt.
- 2. Datenladen mit Load-Funktionen
- Server-Load in +page.server.ts gegenüber universellem Load in +page.ts
- Wann welcher Load-Typ passt
- Layout-Load und das Vererben von Daten
- Typsicherheit über die generierten Typen
- Abhängigkeiten und gezielte Invalidierung
- Praxis-Übung: Die Aufgaben eines Projekts über eine Server-Load-Funktion laden und auf /projekte/[id] in den drei Spalten offen, in Arbeit und erledigt darstellen, zunächst aus Beispieldaten.
- 3. Datenbank mit Prisma und PostgreSQL anbinden
- PostgreSQL als relationale Grundlage hinter Prisma
- Prisma-Schema und Modellierung
- Migrationen und der Prisma-Workflow
- Den Prisma-Client serverseitig einbinden und die Server-only-Grenze wahren
- Verbindungsverwaltung in der Entwicklung und in Produktion
- Praxis-Übung: Das TeamBoard-Datenmodell (Nutzer, Projekt, Aufgabe, Label) als Prisma-Schema anlegen, migrieren, mit zwei Projekten und etwa acht Aufgaben füllen und die Load-Funktion von Beispieldaten auf die Datenbank umstellen.
- 4. Daten darstellen: Komponenten, Beziehungen und Aggregationen
- Komponenten strukturieren und Daten als Props übergeben
- Beziehungen abfragen: One-to-Many und Many-to-Many
- Filtern, Sortieren und Aggregieren über Prisma
- Listen, Detailansichten und verschachtelte Daten
- Wiederverwendbare UI-Bausteine
- Praxis-Übung: Die Projektübersicht als Karten bauen, auf jeder Karte über eine Aggregation die Zähler "offen, in Arbeit, erledigt" anzeigen und die Aufgaben-Detailansicht mit zugewiesener Person, Fälligkeitsdatum und Labels umsetzen.
- Stand am Ende von Tag 1: TeamBoard zeigt echte Projekte und Aufgaben aus der Datenbank.
- Tag 2: 5. Mutationen mit Form Actions
- Form Actions als zentraler Weg für Schreiboperationen
- Benannte Actions für mehrere Operationen je Seite
- Progressive Enhancement: Funktion auch ohne JavaScript
- Insert, Update und Delete gegen die Datenbank
- Rückgabewerte, Weiterleitungen und Invalidierung nach der Mutation
- Praxis-Übung: Die benannten Actions anlegen, bearbeiten und löschen für Aufgaben umsetzen, sodass sich über das Formular "Neue Aufgabe" Einträge erstellen, ändern und entfernen lassen - auch ohne JavaScript.
- 6. Formulare und Validierung mit Superforms und Zod
- Formularzustand und Fehlerbehandlung mit Superforms
- Schemavalidierung mit Zod auf Server und Client
- use:enhance für reaktive Formulare
- Validierungsfehler anzeigen und Eingaben erhalten
- Mehrstufige und verschachtelte Formulare
- Praxis-Übung: Das Aufgabenformular mit Superforms und Zod validieren - Titel mindestens drei Zeichen, Fälligkeitsdatum nicht in der Vergangenheit, Priorität als Auswahl - und Feldfehler anzeigen, ohne Eingaben zu verlieren.
- 7. Server-Endpunkte und APIs
- Eigene Endpunkte mit +server.ts
- JSON-APIs für externe Konsumenten
- HTTP-Methoden, Statuscodes und Header
- Abgrenzung: wann Endpunkt, wann Form Action
- Streaming und Datei-Antworten
- Praxis-Übung: Den Endpunkt GET /api/projekte/[id]/export.json bereitstellen, der die Aufgaben eines Projekts als JSON liefert, und ihn über einen Export-Button in der Oberfläche anbinden.
- 8. Zustand und Reaktivität mit Runes
- Lokaler Zustand mit $state und abgeleitete Werte mit $derived
- Seiteneffekte mit $effect bewusst einsetzen
- Zustand über Module und Kontext teilen
- Die Ablösung der klassischen Stores
- Reaktivität sauber und vorhersehbar halten
- Praxis-Übung: Eine Filterleiste nach zugewiesener Person und Priorität mit $state und $derived umsetzen und einen Inline-Statuswechsel offen, in Arbeit, erledigt direkt auf der Karte ermöglichen.
- Stand am Ende von Tag 2: TeamBoard ist eine voll bedienbare Anwendung mit Anlegen, Bearbeiten, Filtern und Export.
- Tag 3: 9. Authentifizierung und Autorisierung
- Authentifizierungswege in SvelteKit
- Auth.js und Better Auth einbinden; Lucia ist nur noch eine Referenz zum Selbstbau
- Sessions in hooks.server.ts auswerten und in locals bereitstellen
- Geschützte Routen und Layout-Gruppen
- Rollen und Berechtigungen prüfen
- Praxis-Übung: Registrierung und Login einrichten, den Bereich /projekte schützen, eine Ansicht "Meine Aufgaben" für die angemeldete Person bauen und der Rolle Admin den Blick auf alle Aufgaben geben.
- 10. Fortgeschrittene Datenzugriffe und Performance
- Transaktionen und zusammengesetzte Operationen mit Prisma
- Streaming von Daten über Promises in der Load-Funktion
- Invalidierung und gezieltes Nachladen
- Fehler- und Lade-Zustände mit +error und +loading
- Caching-Strategien und ihre Grenzen
- Praxis-Übung: Die Funktion "alle erledigten Aufgaben archivieren" als Transaktion umsetzen und ein Dashboard mit gestreamten Kennzahlen sowie sauberen Fehler- und Lade-Zuständen bauen.
- 11. Deployment und Adapter
- Das Adapter-System: Vercel, Node, Cloudflare und statische Ziele
- Umgebungsvariablen und Geheimnisse sicher verwalten
- Serverless PostgreSQL anbinden
- Build, Vorschau und Produktionsbetrieb
- Grundlegende Beobachtung und Fehlerverfolgung
- Praxis-Übung: TeamBoard für ein Zielsystem konfigurieren, die Datenbankverbindung und das Auth-Geheimnis als Umgebungsvariablen hinterlegen, an eine serverless Datenbank anbinden und live ausliefern.
- 12. Gesamtprojekt, Test und Peer-Review
- Die Bausteine zum fertigen MVP zusammenführen
- Unit-Tests mit Vitest und End-to-End-Tests mit Playwright im Überblick
- Codeorganisation und Wartbarkeit
- Häufige Stolpersteine und ihre Lösung
- Praxis-Übung (Peer-Review): Einen Vitest-Test für eine Hilfsfunktion und einen Playwright-Test für den Ablauf "Aufgabe anlegen erscheint auf dem Board" schreiben und das ausgelieferte TeamBoard einer anderen teilnehmenden Person gegen Datenfluss, Mutationen, Sicherheit und Deployment-Tauglichkeit prüfen.
- Stand am Ende von Tag 3: ein deploybares, abgesichertes TeamBoard.
Zielgruppe & Vorkenntnisse
- Webentwickelnde mit JavaScript- und TypeScript-Grundlagen, die vollständige Fullstack-Anwendungen bauen
- Frontend-Entwickelnde mit Schritt in die Server- und Datenbankentwicklung
- Teams, die eine leichtgewichtige Alternative zu React-basierten Stacks suchen
- Entwickelnde, die SvelteKit als durchgängiges Framework kennenlernen wollen
Ihre Schulung
In Präsenz | Online |
|---|---|
| Lernmethode | |
Ausgewogene Mischung aus Theorie und praktischen Übungen auf persönlichem Schulungs-PC. | Wie auch bei unseren Präsenz-Seminaren: Ausgewogene Mischung aus Theorie und praktischen Übungen. Trainer durchgehend präsent. |
| Unterlagen | |
Seminarunterlagen oder Fachbuch inklusive. Das Fachbuch wählt der Trainer passend zum Seminar aus - Ihren individuellen Buch-Wunsch berücksichtigen wir auf Nachfrage gerne. | Seminarunterlagen oder Fachbuch inklusive (via DHL). Das Fachbuch wählt der Trainer passend zum Seminar aus - Ihren individuellen Buch-Wunsch berücksichtigen wir auf Nachfrage gerne. |
| Arbeitsmaterialien | |
Din A4 Block, Notizblock, Kugelschreiber, USB-Stick, Textmarker, Post-its | |
| Teilnahmezertifikat | |
Nach Abschluss des Seminars erhalten Sie das Teilnahmezertifikat inkl. Inhaltsverzeichnis per E-Mail als PDF. | |
Organisation
In Präsenz | Online | |
|---|---|---|
| Teilnehmendenzahl | ||
min. 1, max. 8 Personen | ||
| Garantierte Durchführung * | ||
Ab 1 Teilnehmenden | ||
| Schulungszeiten | ||
| ||
| Ort der Schulung | ||
 GFU SchulungszentrumAm Grauen Stein 27 51105 Köln-Deutz oder online im Virtual Classroom oder europaweit bei Ihnen als Inhouse-Schulung Um ein optimales Raumklima zu gewährleisten, haben wir das Schulungszentrum mit 17 hochmodernen Trotec TAC V+ Luftreinigern ausgestattet. Diese innovative Filtertechnologie (H14 zertifiziert nach DIN EN1822) sorgt dafür, dass die Raumluft mehrfach pro Stunde umgewälzt wird und Schadstoffe zu 99.995% im HEPA-Filter abgeschieden und infektiöse Aerosole abgetötet werden. Zusätzlich sind alle Räume mit CO2-Ampeln ausgestattet, um jederzeit eine hervorragende Luftqualität sicherzustellen. | ||
| Räumlichkeiten | ||
Helle und modern ausgestattete Räume mit perfekter Infrastruktur | Bequem aus dem Homeoffice von überall | |
| All-Inclusive | ||
Frühstück, Snacks und Getränke ganztägig, Mittagessen im eigenen Restaurant, täglich 6 Menüs, auch vegetarisch | Eine Auswahl unserer Frühstücks-Snacks und Nervennahrungs-Highlights senden wir Ihnen mit den Seminarunterlagen via DHL zu. | |
| Barrierefreiheit | ||
Das GFU-Schulungszentrum (Am Grauen Stein 27) ist barrierefrei | - | |
Kostenfreie Services
In Präsenz | Online |
|---|---|
|
|
Buchungsmöglichkeiten
Online oder in Präsenz teilnehmen
Sie können sowohl Online als auch in Präsenz am Seminar teilnehmen. Klicken Sie bei Ihrer Buchung oder Anfrage einfach die entsprechende Option an.
- Lernumgebung in der Cloud
- Inhalte werden auf Wunsch an die Anforderungen Ihres Teams angepasst.
- Lernumgebung in der Cloud
- 1 Teilnehmender = Fokus aufs Fachliche und maximaler Raum für individuelle Fragen.
Was bedeutet Offene Schulung und Inhouse Schulung?
Bei einer offenen Schulung stehen Ort und Termin vorab fest. Jeder Interessent kann eine offene Schulung buchen, daher treffen Teilnehmer aus verschiedenen Unternehmen aufeinander.
Inhouse Schulungen können auf Ihren individuellen Schulungsbedarf zugeschnitten werden. Sie bestimmen den Teilnehmerkreis, Termin und Schulungsort.
Ist eine Inhouse Schulung die richtige Wahl?
Bei einer Inhouse Schulung gehen wir auf die individuellen Bedürfnisse Ihres Unternehmens ein und decken den Schulungsbedarf direkt bei Ihnen im Unternehmen ab.
Das spart Zeit und Geld und sorgt für einen schnellen Wissenstransfer Ihrer Mitarbeiter.
Wer kümmert sich um die Technik bei Inhouse Schulungen?
Eine komplette Lernumgebung in der Cloud mit Remote Zugriff ist für uns selbstverständlich. Sie müssen sich um nichts kümmern. Lediglich ein funktionierender PC oder Notebook mit Internetanschluss sollte für jeden Teilnehmer am Schulungstag bereit stehen.
Vorteile einer Inhouse Schulung
- Kompetente Seminarberatung
- Dozenten aus der Praxis
- Auf Ihre Bedürfnisse zugeschnittener individueller Lernstoff
- Sie können den Termin flexibel gestalten, so wie es für Sie am besten passt
- Unsere Inhouse Schulungen können Europaweit durchgeführt werden
- Der Fokus liegt auf Ihrem Schulungsbedarf, somit schonen Sie Ihr Budget
- Wissenslücken Ihrer Mitarbeitet werden schnell geschlossen