Wenn Sie den Web Interface Builder ausprobieren oder Ihre eigene Interface-Builder-basierte Website erstellen möchten, haben wir eine mit viel Funktionalität ausgestattete Beispielanwendung für Sie, die Scrivito Portal App, eine leichtgewichtige Business-Website mit Datenintegration für Kundenportale.

Sie können diese Anwendung installieren, um sich ein Bild davon zu machen, wie durchdacht der Interface Builder ist, und sie dann als Grundlage für Ihre neue Website verwenden! Wenn Sie zunächst die Konzepte hinter dem Interface Builder kennenlernen möchten, siehe Wie funktioniert eine Interface-Builder-Anwendung? als Einführung.

Die Portalanwendung zu installieren, erfordert etwas Erfahrung im Bereich der Web-Entwicklung, Sie brauchen jedoch kein JavaScript-Experte zu sein, um diese App nutzen zu können!

1Registrieren Sie sich bei JustRelate

Falls nocht nicht geschehen, registrieren Sie sich zuerst bitte bei JustRelate über console.justrelate.com. Ihr Account und Ihre Interface-Builder-Test-Instanz werden automatisch angelegt. Klicken Sie in der Console dann auf “Edit with Scrivito”, um Ihre Instanz mit den Portal-Beispielinhalten ausstatten zu lassen.

2Klonen und bereiten Sie die App vor

Die Details zum Klonen und Vorbereiten der App finden Sie in dem entsprechenden ReadMe auf GitHub: https://github.com/Scrivito/scrivito-portal-app

In einem der Schritte zur Vorbereitung der App werden Sie gebeten, die ID Ihrer Interface-Builder-Instanz in eine Konfigurationsdatei einzutragen. Wenn Sie in der Console angemeldet sind und Ihren Account ausgewählt haben, kopieren Sie die rechts unten angegebene „Default instance ID“ in die Zwischenablage und fügen Sie sie dann in die Konfigurationsdatei ein.

3Geben Sie die CORS-Quellen an

Damit Ressourcen zwischen Ihrem Interface Builder und Ihrer Web-Anwendung geteilt werden können, geben Sie die URL(s) Ihrer App im Reiter „Trusted origins“ der Console an. Klicken Sie auf „Add origin”, um einen weiteren CORS-Origin oder eine weitere URL einzutragen, unter der auf Ihre App zugegriffen wird.

Wenn alles nach Plan verlaufen ist, können Sie nun Ihre Interface-Builder-Anwendung nutzen und Ihren Wünschen entsprechend anpassen! Um Inhalte mit der Benutzeroberfläche zu erstellen oder zu bearbeiten, öffnen Sie einfach edit.scrivito.com in Ihrem Browser und geben Sie die URL Ihrer App an, also http://localhost:8080.

Änderungen im „src“-Unterverzeichnis bewirken, dass die App mit der aktuellen Seite sofort neu geladen wird.

Fehler in der App, verursacht beispielsweise durch nicht richtig funktionierende React-Komponenten, werden in der Browser-Konsole ausgegeben, nicht im Terminal-Fenster. In letzterem werden lediglich Fehler beim Kompilieren, Probleme mit verwendeten Bibliotheken etc. protokolliert.

Sämtliche Website-Inhalte können in Arbeitskopien erstellt und bearbeitet werden. Mit Hilfe der Leiste auf der rechten Seite können Sie Arbeitskopien anlegen und veröffentlichen oder die Liste der Änderungen öffnen, um zu sehen, was bis jetzt geändert wurde. Erfahren Sie mehr über Arbeitskopien und die veröffentlichten Inhalte.

Das Web-Interface des Interface Builders zur Bearbeitung von Inhalten ist leicht zu bedienen: Wandern Sie mit dem Mauszeiger über die Seite, um die Widget-Rahmen sichtbar zu machen. Klicken Sie auf eines der Plus-Zeichen auf einem Rahmen, um ein Widget hinzuzufügen, oder verwenden Sie den kleinen „Griff“ rechts oben, um das Widget-Menü zu öffnen oder das Widget an eine andere Stelle auf der Seite zu ziehen. In der Anleitung für Redakteure finden Sie viele weitere nützliche Tipps.