Anleitung Vorlagenentwicklung
Dieses Dokument führt Sie durch den Prozess der Vorlagenentwicklung in der FirstSpirit Cloud. Der allgemeine Prozess wird kurz erklärt und mit den weiterführenden Links gelangen Sie zur detaillierten Dokumentation, in der die einzelnen Schritten erörtert werden.
Zielgruppe: (Neue) Vorlagenentwickler innerhalb der FirstSpirit Cloud-Umgebung
Vorraussetzungen: DTB (Entwicklerschulung Basic)
Training & Coaching Center
Ihre FirstSpirit Cloud-Umgebung
Ihre FirstSpirit Cloud-Instanz beinhaltet standardmäßig drei Umgebungen: Dev, QA und Prod:
Entwicklung (Dev)
In dieser Umgebung können einer oder mehrere Entwickler arbeiten, ohne sich gegenseitig zu behindern oder den Live-Code zu gefährden.
Qualitätssicherung (QA)
Diese Umgebung ist der Staging-, bzw. Testbereich, in dem entwickelte Segmente getestet werden können, um die Qualität zu gewährleisten, bevor sie in die Produktionsumgebung übertragen werden. Diese Umgebung ist daher eine nahezu exakte Nachbildung der Produktionsumgebung.
Produktion (Prod)
Diese Umgebung enthält alle veröffentlichten Projekte, die möglicherweise bereits Inhalte enthalten und für Kunden verfügbar sind.
- Die Projekte in allen drei Umgebungen sind fast identisch.
- Änderungen an Vorlagen und Einstellungen werden regelmäßig in die nachfolgende Umgebung kopiert. Damit werden Abweichungen im Entwicklungsstand vermieden.
- Die Umgebungen Dev und QA enthalten in der Regel Testinhalte. Prod zeigt den gesamten Inhalt des Live-Projekts an.
Vorbereitung: Einrichten der Umgebung
Vorlagenentwicklung
Sie haben zwei Möglichkeiten, Ihr Projekt zu entwickeln:
Klassisches HTML-Projekt
In einem klassischen HTML-Projekt werden HTML, CSS und JavaScript im Vorfeld entwickelt und mit SiteArchitect ins Projekt übertragen. Ein Anwendungsfall für diesen Projekttyp ist das Ermöglichen der Arbeit von Redakteuren direkt in der Vorschau der konkreten Ziel-Website.
Headless-Projekt
In einem Headless-Projekt arbeiten Redakteure nur an Inhalten, die ins FirstSpirit CaaS (Content as a Service) verteilt wurden – mit einem Datenpool also, aus dem die Inhalte über verschiedene Kanäle (PWA, Touchpoint, etc.) abgerufen werden können. Dieser Projekttyp bietet sich an, wenn eine moderne Anwendung mit der Trennung von Frontend und Inhalt entwickelt wird oder aber wenn derselbe Inhalt in unterschiedlichen Zielanwendungen verfügbar sein soll.
Entwicklung klassischer HTML-Projekte
Inhaltsmodell und Frontend (HTML, CSS, JS) werden vollständig mit SiteAchitect erstellt und verwaltet.
| Schritte | Zusatz-Informationen |
|---|---|
|
1. Erstellung eines leeren Projekts |
|
|
A. Manuelle Vorlagen-Erstellung |
|
|
B. Vorlagen-Import mit HTML-Importer |
|
|
2. Formular-Erstellung zur Dateneingabe durch Redakteure |
|
|
Datenausgabe und Aussehen der Website |
|
|
3. Hochladen von Bildern und Dateien |
|
|
4. Vorlagen-Prüfung und -Debugging |
|
|
Weitere Möglichkeiten der Vorlagenentwicklung in FirstSpirit und Syntax-Referenz (Scripting, API, Anleitung von Redakteuren etc.) |
|
|
A. Kontinuierliche Entwicklung in externen Tools |
FirstSpirit-Medienverwaltung Aufbau von Vorlagen |
|
B. Kontinuierliche Entwicklung im SiteArchitect |
Aufbau von Vorlagen |
Entwicklung von Headless-Projekten
Das Frontend wird in der Regel extern gehostet (z. B. PWA in Git), das Content-Modell wird im SiteAchitect verwaltet.
| Schritte | Zusatz-Informationen |
|---|---|
|
1. Entwicklung des Frontends Als Frontend kann eine beliebige PWA verwendet werden; ein FirstSpirit-Ausgangskanal wird nicht benötigt. Beispiele: Kundenspezifische Apps (z. B. mit Angular, React, Vue.js), Frontends als Service (z. B. Vue Storefront, Frontastic) |
Beispielprojekt: Experience Accelerator |
|
2. Entwicklung des Inhaltsmodells Die Befüllung der Inhalte erfolgt in FirstSpirit über Formulare. |
|
|
Start eines E-Commerce-Projekts In E-Commerce-Projekten werden Inhalt und Struktur durch das FirstSpirit-Projekt definiert, das Frontend wird separat entwickelt. Das Frontend hängt oft stark von dem verwendeten E-Commerce-System ab. |
FirstSpirit Connect for Commerce – Referenzprojekt auf Git |
|
Datenabruf im Frontend Die Daten werden von FirstSpirit in einem standardisierten, nicht anpassbaren JSON-Format bereitgestellt. Sie werden automatisch an FirstSpirit CaaS übertragen und können über das Frontend abgerufen werden. |
Caas-Produktdokumentation CaaS Connect für Admins Standardisierte JSON-Ausgabe in FirstSpirit Navigationsdienst |
Vorlagen-Transport
Vorteile des Vorlagen-Transports:
- Mehrstufige Entwicklungsprozesse (Entwicklung, Test, Freigabe):
Gemeinsame Nutzung von Arbeitsergebnissen in getrennten Umgebungen (Dev, QA, Prod). - Synchronisierung mehrerer Unter-Projekte (Master → Unter-Projekt):
Gemeinsame Nutzung von Arbeitsergebnissen in unterschiedlichen Projekten.
Als Unter-Projekte können Projekte angelegt werden, die für Inhalte in unterschiedlichen Sprachen, bzw. Ländern benötigt werden. Ihr "Master"-Projekt kann als Basis für die Entwicklung von Vorlagen verwendet und bei Bedarf auf Unter-Projekte verteilt werden, um ein einheitliches Design und eine einheitliche Struktur zu gewährleisten.
Das Verteilen von Vorlagen wird in FirstSpirit mithilfe verschiedener Tools ermöglicht:
- Vorlagen-Transport
Modul zum einfachen Verteilen aller Vorlagen, vor allem zwischen Unter-Projekten. Mit den Standardeinstellungen werden nur Vorlagen und technische Medien mit wenigen Klicks in die Umgebungen verteilt (Dev, QA, Prod). Mit eigenen Konfigurationen können die Möglichkeiten erweitert werden. - ContentTransport
Möglichkeit zum Verteilen ausgewählter Vorlagen, hauptsächlich zwischen unterschiedlichen Dev-Umgebungen. Eigene Konfigurationen sind möglich, z. B. nur Verteilen veränderter Vorlagen. Abhängigkeiten zu referenzierten Elementen werden visualisiert, um die Ermittlung und die Verteilung von Gesamtstrukturen zu erleichtern.
Zwischen Umgebungen Dev → QA → Prod
| Schritte | Zusatz-Informationen |
|---|---|
|
1. Vorlagen-Transport Dev → QA |
|
|
a) mit "Vorlagenverteilung" |
|
|
b) mit "ContentTransport" |
|
|
Vorlagen-Transport mit FS CLI, |
FS CLI-Releases |
|
Verwendung der Dateisystemfunktion, Verzeichnis "/opt/firstspirit5/s3-transfer" zum Vorlagen-Transport |
ContentTransport |
|
2. QA: Ergebnisprüfung |
|
|
3. Vorlagen-Transport QA → Prod |
|
|
a) mit "Vorlagenverteilung" |
|
|
b) mit "ContentTransport" |
|
|
Vorlagen-Transport mit FS CLI, |
FS CLI-Releases |
|
Verwendung der Dateisystemfunktion, Verzeichnis "/opt/firstspirit5/s3-transfer" zum Vorlagen-Transport |
ContentTransport |
|
4. Prod: Ergebnisprüfung |
|
|
Vorlagen-Transport zu Unter-Projekten |
|
|
Kontinuierliche Entwicklung im Master-Projekt
|
Aus Master-Projekt ins Unter-Projekt
| Schritte | Zusatz-Informationen |
|---|---|
|
1. Vorlagen-Transport |
|
|
a) mit "Vorlagenverteilung" |
|
|
b) Verwendung von "ContentTransport" |
|
|
Vorlagen-Transport mit FS CLI, |
FS CLI-Releases |
|
Verwendung der Dateisystemfunktion, Verzeichnis "/opt/firstspirit5/s3-transfer" zum Vorlagen-Transport |
ContentTransport |
|
2. Einstellungen im Unter-Projekt |
|
|
3. Ergebnisprüfung im Unter-Projekt |
|
|
Kontinuierliche Entwicklung im Master-Projekt.
|