Seminar / Training
Beschreibung: Dieses Seminar führt durch die Entwicklung Storyblok-basierter Frontends mit modernen JavaScript-Frameworks. Der Schwerpunkt liegt auf Projektstruktur, SDK-Anbindung, dynamischem Rendering, Vorschau, mehrsprachigen Inhalten und stabilen Komponenten.
Seminarziel: Nach dem Seminar können Frontends Inhalte aus Storyblok laden, Komponenten dynamisch rendern, Vorschau-Funktionen einbinden und Projektstrukturen für wartbare Weiterentwicklung aufsetzen.
Kapitel 1: Projektsetup und SDK-Anbindung
Inhaltsverzeichnis: Projektstruktur · Umgebungsvariablen · SDK · Token
Das Frontend wird so vorbereitet, dass Storyblok-Zugriffe zentral konfiguriert werden.
- Schritt 1: Projektstruktur und Ordnerkonzept für Komponenten, Datenzugriff und Seiten festlegen.
- Schritt 2: Umgebungsvariablen für Token und Region einrichten.
- Schritt 3: SDK zentral initialisieren und wiederverwendbare Abfragefunktionen erstellen.
- Schritt 4: Verbindung mit einem Beispielinhalt prüfen.
Kapitel 2: Dynamisches Komponentenrendering
Inhaltsverzeichnis: Content-Typen · Nestable Blocks · Mapping · Fallbacks
Storyblok-Blöcke werden mit Frontend-Komponenten verbunden.
- Schritt 1: Komponenten aus dem Content-Modell den Frontend-Komponenten zuordnen.
- Schritt 2: Verschachtelte Blöcke iterieren und eindeutig rendern.
- Schritt 3: Fallback-Komponenten für unbekannte oder unvollständige Blöcke einbauen.
- Schritt 4: Props und Datenformen dokumentieren.
Kapitel 3: Routing, Sprachen und Datenvarianten
Inhaltsverzeichnis: Slugs · Dynamische Routen · Sprache · Entwurf und Live
Die Anwendung verarbeitet flexible Seitenstrukturen und Sprachvarianten.
- Schritt 1: Slug-Strukturen aus Storyblok in Routen übersetzen.
- Schritt 2: Dynamische Seiten für unterschiedliche Content-Typen erstellen.
- Schritt 3: Sprachparameter und lokalisierte Inhalte einplanen.
- Schritt 4: Entwurfsdaten und veröffentlichte Daten getrennt abrufen.
Kapitel 4: Visual Preview und redaktionelle Prüfung
Inhaltsverzeichnis: Bridge · Preview-URL · Live-Aktualisierung · Fehleranalyse
Die Vorschau wird so integriert, dass Redaktion und Entwicklung gemeinsam prüfen können.
- Schritt 1: Vorschaupfad und lokale Entwicklungsumgebung abstimmen.
- Schritt 2: Bridge-Funktionalität für Aktualisierung im Editor einbinden.
- Schritt 3: Bearbeitbare Komponenten mit den nötigen Attributen versehen.
- Schritt 4: Typische Vorschaufehler strukturiert analysieren.
Kapitel 5: Produktionsreife und Qualität
Inhaltsverzeichnis: Rendering-Strategie · Caching · Build · Monitoring
Die technische Umsetzung wird für den produktiven Betrieb vorbereitet.
- Schritt 1: Rendering-Strategien nach Inhaltstyp und Aktualisierungshäufigkeit auswählen.
- Schritt 2: Cache- und Revalidierungsregeln definieren.
- Schritt 3: Build- und Deployment-Auslöser mit Content-Änderungen abstimmen.
- Schritt 4: Fehlerprotokollierung und technische Prüfpunkte ergänzen.
Teilnehmerkreis
Inhaltsverzeichnis: Rollen · Ausgangslage · benötigtes Vorwissen
Frontend-Entwicklung, Fullstack-Entwicklung und technische Teams, die Storyblok-Inhalte in performante Websites oder Anwendungen integrieren.
Praxisformat
Inhaltsverzeichnis: Übungen · Checklisten · Arbeitsdateien · Wiederholung
Die Teilnehmenden bauen beispielhafte Seiten, registrieren Komponenten, prüfen Vorschauverhalten, konfigurieren Routen und bereiten Build- und Laufzeitvarianten vor.
Seminar und Anbieter vergleichen
Öffentliche Schulung
Diese Seminarform ist auch als Präsenzseminar bekannt und bedeutet, dass Sie in unseren Räumlichkeiten von einem Trainer vor Ort geschult werden. Jeder Teilnehmer hat einen Arbeitsplatz mit virtueller Schulungsumgebung. Öffentliche Seminare werden in deutscher Sprache durchgeführt, die Unterlagen sind teilweise in Englisch.
Inhausschulung
Diese Seminarform bietet sich für Unternehmen an, welche gleichzeitig mehrere Teilnehmer gleichzeitig schulen möchten. Der Trainer kommt zu Ihnen ins Haus und unterrichtet in Ihren Räumlichkeiten. Diese Seminare können auf Deutsch – bei Firmenseminaren ist auch Englisch möglich – gebucht werden.
Webinar
Diese Art der Schulung ist geeignet, wenn Sie die Präsenz eines Trainers nicht benötigen, nicht reisen können und über das Internet an einer Schulung teilnehmen möchten.
Fachbereichsleiter / Leiter der Trainer / Ihre Ansprechpartner
-
Lucas Beich
Telefon: + 49 (221) 74740055
E-Mail: lucas.beich@seminar-experts.de -
Paul Goldschmidt
Telefon: + 49 (221) 74740055
E-Mail: paul.goldschmidt@seminar-experts.de
Seminardetails
| Dauer: | 3 Tage ca. 6 h/Tag, Beginn 1. Tag: 10:00 Uhr, weitere Tage 09:00 Uhr |
| Preis: |
Öffentlich oder Live Stream: € 1.797 zzgl. MwSt. Inhaus: € 5.100 zzgl. MwSt. |
| Teilnehmeranzahl: | min. 2 - max. 8 |
| Teilnehmer: | Frontend-Entwicklung, Fullstack-Entwicklung und technische Teams, die Storyblok-Inhalte in performante Websites oder Anwendungen integrieren. |
| Voraussetzungen: | Sichere Grundlagen in JavaScript oder TypeScript sowie Erfahrung mit Komponenten, Routing und Paketverwaltung. Erste Kenntnisse in Next.js oder Nuxt sind hilfreich. |
| Standorte: | Stream Live, Inhaus/Firmenseminar, Berlin, Bremen, Darmstadt, Dresden, Erfurt, Essen, Flensburg, Frankfurt, Freiburg, Friedrichshafen, Hamburg, Hamm, Hannover, Jena, Kassel, Köln, Konstanz, Leipzig, Luxemburg, Magdeburg, Mainz, München, Münster, Nürnberg, Paderborn, Potsdam, Regensburg, Rostock, Stuttgart, Trier, Ulm, Wuppertal, Würzburg |
| Methoden: | Vortrag, Demonstrationen, praktische Übungen am System |
| Seminararten: | Öffentlich, Webinar, Inhaus, Workshop - Alle Seminare mit Trainer vor Ort, Webinar nur wenn ausdrücklich gewünscht |
| Durchführungsgarantie: | ja, ab 2 Teilnehmern |
| Sprache: | Deutsch - bei Firmenseminaren ist auch Englisch möglich |
| Seminarunterlage: | Dokumentation auf Datenträger oder als Download |
| Teilnahmezertifikat: | ja, selbstverständlich |
| Verpflegung: | Kalt- / Warmgetränke, Mittagessen (wahlweise vegetarisch) |
| Support: | 3 Anrufe im Seminarpreis enthalten |
| Barrierefreier Zugang: | an den meisten Standorten verfügbar |
| Weitere Informationen unter + 49 (221) 74740055 |
Seminartermine
Die Ergebnissliste kann durch Anklicken der Überschrift neu sortiert werden.
