Wie Sie AngularJS-Applikationen in Typo3-Websites einbinden

Seit mehreren Jahren blogge ich für Digicomp und eines der Themen, über das ich gern schon seit einiger Zeit schreiben wollte, ist das von mir ziemlich häufig verwendete Zusammenspiel von Typo3 und AngularJS.

Die zündende Idee, wie ich dieses Zusammenspiel erklären soll, kam mir aber erst vergangenen Freitag, als ich am Bahnhof auf meine Kinder wartete.

«Ein Kiosk ist eigentlich so ähnlich wie ein Content Management System»

Kommt man an einem Freitagabend 15 Minuten früher als geplant an einem grösseren Bahnhof in der Schweiz an, ist es alles andere als abwegig, sich die Zeit im Kiosk des besagten Bahnhofs zu vertreiben. Da gibt es so allerlei zu sehen und natürlich auch zu kaufen.

Wie ich so die Auslage des Kiosks studiere, kommt mir Typo3 in den Sinn und ich denke mir: «Ein Kiosk ist eigentlich so ähnlich, wie ein Content Management System.»

Im Kiosk werden unterschiedliche Waren angeboten, in einem CMS unterschiedliche Inhalte. Die Kiosk-Frau ist sozusagen der Server, der die Inhalte in die Regale stellt. Ich als Kunde bin der Browser, der sich die Inhalte anschaut.

Dass ich von Typo3 als CMS begeistert bin, sollte spätestens seit meinen Blogbeiträgen zum CMS-Flaggschiff klar sein.

Warum ich aber Typo3 mit einem Kiosk vergleiche, bedarf noch etwas der Erklärung. Bitte halten Sie noch etwas durch!

Kaugummi allein war gestern

Wenn Sie als Kind das letzte Mal an einem Kiosk waren, empfehle ich Ihnen wärmstens, sich wieder einmal die Zeit zu nehmen, einen zu besuchen.

Als eingefleischter Online-Shopper war mir gar nicht bewusst, was es heute so alles an einem Kiosk zu kaufen gibt. Die Zeiten, in denen man an einem Kiosk nur Kaugummi, Zigaretten und Zeitungen kaufen konnte, sind vorbei. Heute werden da von Handyguthaben über Geldtransfers bis hin zum Lotto-Spiel und dem Sofort-Kredit diverse Dienstleistungen angeboten.

Da fragt man sich als Unwissender schnell einmal, ob das Verkaufspersonal nicht total überfordert ist, wenn es nebst den unterschiedlichen Schokoriegeln auch noch immer neue digitale Dienstleistungen verkaufen darf.

Mit einem CMS verglichen, wäre das in etwa so, als ob man vom System, das sich um Inhalte (Content) kümmern soll, die meist aus Bildern und Texten bestehen, auch noch verlangen würde, dass es aktuelle Event-Daten, die Auslastung der Meeting-Räume im Businesscenter und die aktuelle Liste aller Mitarbeiter einer Firma anzeigen soll.

Klar kann ich in einem CMS eine Inhalts-Seite anlegen, welche mir eine Liste der Mitarbeitenden meiner Firma anzeigt. Aber diese müsste ich dann «von Hand» aktuell halten, da der «Master», also der Haupt-Pflege-Ort für diese Daten nicht im CMS liegt.

Das wäre dann in etwa so, wie wenn die Lottozahlen der letzten Ziehung per Velo-Kurier an jeden Kiosk gebracht und dort abgeschrieben werden würden.

Oder so ähnlich!?

Auf jeden Fall: Unbrauchbar! Sowohl im Business-Kontext eines professionellen Web-Auftrittes, wie auch am Kiosk.

Ein Beispiel zur Illustration

Stellen Sie sich vor, Sie möchten mit einem CMS wie Typo3 eine Seite, wie z.B. digicomp.ch/experts erstellen.

Spontan fallen einem da folgende Möglichkeiten ein:

A) Sie erstellen eine Inhalts-Seite und legen dort jede/n Trainer/in als Inhalts-Element an.

• Im Kiosk: Die Kiosk-Frau schreibt sich während der Lottozahlen-Ziehung im Fernsehen die Gewinnzahlen auf und nimmt sie am nächsten Tag mit zur Arbeit. Da sie das schon seit zehn Jahren so macht, kann sie Ihnen auch für ältere Lottoscheine sagen, ob Sie gewonnen haben oder nicht.
• Beurteilung: Etwas old-fashioned, könnte aber ein Retro-Trend werden. Aufgrund von Pilotprojekten mit Verkaufsflächen ohne Personal aber wohl eher nicht. 😉

B) Sie bringen dem CMS bei, wie es nicht nur mit Text und Bildern umgehen kann, sondern auch mit Mitarbeitern (als Datensatz) und Sie verwalten Ihre Mitarbeiter-Liste im CMS.

• Im Kiosk: Sie bringen der Kiosk-Frau bei, wie sie selbst Lottoziehungen durchführen kann. Swisslos fragt dann beim Kiosk nach, was die aktuellen Lottozahlen sind.
• Beurteilung: Viele CMS bieten Module für solche Herausforderungen an. Auch Typo3 mit seinen vielen Extensions hält sich da nicht zurück. Mit dieser Idee dürfte es aber schwierig werden, sicher zu stellen, dass die Kiosk-internen Gewinnzahlen den offiziellen von Swisslos entsprechen. Wahrscheinlich – oder hoffentlich – verwalten auch Sie Ihre Mitarbeiter in einem HR-System (und nicht auf Ihrer Website), so dass Sie deshalb die Liste wohl doppelt führen müssten .

C) Sie bringen Ihrer HR-Datenbank bei, die Daten regelmässig in die CMS-Datenbank zu laden.

• Im Kiosk: Dem Kiosk werden regelmässig die aktuellen Lottozahlen zugeschickt.
• Beurteilung: Grundsätzlich eine sehr gute Idee. Das Kiosk-Personal kann sich entspannen und am Mittwochabend auch mal etwas anderes schauen als die Euro-Millions-Ziehung. Es brauchen keinen eigenen Ziehungen veranstaltet zu werden und man kann sich ziemlich gut darauf verlassen, dass die Informationen in jedem Kiosk gleich sind.

Es geht aber auch noch eine Spur besser!

D) Sie lassen den Browser des Kunden die Daten holen.

• Im Kiosk: Im Zeitalter des Internets könnte man ja online nachschauen, was die aktuellen Lottozahlen sind. Oder – und so läuft es ja heute an den Kiosken – das Kassensystem holt sich die aktuellen Lottozahlen und kann so in Echtzeit sagen, ob ein Schein gewonnen hat oder nicht.
• Beurteilung: Entfällt hier. Bitte weiterlesen!

Auf das Rezept, sorry, die Schnittstelle kommt es an

Nochmals, das Ziel: Eine Seite, wie https://www.digicomp.ch/experts

Das Rezept: eine Schnittstelle

Die Zutaten:

• Eine CMS-Inhalts-Seite, welche die Vorlage (Template) vorgibt.
• Eine Schnittstelle, welche die Daten liefert
• Etwas Code, damit die Daten der Schnittstelle entsprechend ins Template hinein geladen werden.

Aber gern Schritt für Schritt im Detail.

Zutat Nr. 1: Die Vorlage im CMS

In Typo3 lege ich dazu auf einer Seite ein Inhalts-Element vom Typ «Reines HTML» an:

In dieses Element schreibe ich dann den HTML-Code für einen einzelnen Datensatz. In unserem Fall für eine/n Trainer/in. Hier in vereinfachter Form lediglich mit Namen und Firmenname:

Um Rückfragen zu vermeiden: Ja, Sie dürfen selbstverständlich mehr Zeit und Energie in den HTML-Code stecken, als ich es hier tue. 😉

That’s it für Zutat Nr. 1!

Zutat Nr. 2: Die Schnittstelle

Diese Zutat erfordert entweder eine fixfertige Schnittstelle, einiges an Programmierkenntnissen oder ein Gespräch mit mir. (Nein, ich lebe nicht vom Bloggen allein!) Gehen wir der Einfachheit zuliebe davon aus, dass Sie mich bereits kontaktiert haben, Sie mich und meine Firma sympathisch fanden und wir Ihnen eine Schnittstelle programmiert haben, welche die benötigten Daten in ähnlicher Form liefert, wie es z.B. jsonplaceholder.typicode.com/users tut:

Mit etwas Übung oder den entsprechenden JSON-Kenntnissen können Sie diese «Liste» sogar entziffern und die Namen der Personen sowie die Namen der Firmen für die Sie arbeiten herauslesen.

Zutat Nr. 2 ist somit auch ready.

Zutat Nr. 3: Der Code

Ich empfehle hier AngularJS zu verwenden. Auch wenn es schon etwas länger her ist, dass AngularJS das Licht der Welt erblickt hat und sein Nachfolger namens Angular (ohne JS) beim Verfassen dieses Beitrag sich bereits mit der Versions-Nummer 7 schmückt, ist es für unsere Zwecke hervorragend geeignet, da es direkt ins (unter Zutat Nr. 1) erstellte Inhalts-Element geschrieben werden kann.

Konkret braucht es …

… das Einbinden von AngularJS als JavaScript-Datei, wie auf angularjs.org beschrieben:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>

… das Anpassen des (HTML-)Templates:

Dabei geht es grundsätzlich darum, den bestehenden Code in ein HTML-Element zu packen, welches mit den Attributen “ng-app” und “ng-controller” versehen ist.

Zudem werden die Platzhalter für den Namen der Person und den Namen der Firma mit sogenannten Angular-Expressions (die Dinger mit den je zwei geschweiften Klammern drum herum, im Code gelb hinterlegt) ersetzt.

Zu guter Letzt, wird mit Hilfe eines «ng-repeat»-Attributs (im Code grün hinterlegt) definiert, welches HTML-Element sich pro Datensatz wiederholen soll.

… Ahoi, JavaScript, das Schreiben einer entsprechenden AngularJS-App:

<script>
var trainerListApp = angular.module('trainerListApp', );
trainerListApp.controller('trainerListController', function ($scope,$http) {
$scope.alleTrainer = ;
$http.get("https://jsonplaceholder.typicode.com/users")
.then(function(r){
$scope.alleTrainer = r.data; 
}); 
});
</script>

Der Code hat die Aufgabe, von der in «Zutat Nr. 2» definierten URL die Daten zu holen und in «alleTrainer» abzulegen, damit das oben erwähnte «ng-repeat»-Attribut damit arbeiten kann.

Wer bei mir einen JavaScript-Kurs besucht hat, sollte in der Lage sein, diesen Code zu verstehen. Wer das (noch) nicht getan hat, muss mir einfach glauben: sehr sehr gutes Code-Leistungs-Verhältnis.

Alles in allem sieht dann das Typo3-Inhalts-Element in etwa so aus:

Ruft man die Seite in einem Browser auf, sollte etwa folgendes dabei heraus kommen:

Für alle Skeptiker

Warum man das so machen könnte? Drei Antworten:

1. Die Schnittstelle ist wiederverwendbar und keine Speziallösung für einen Einzelfall. Das Master-System hat keine Bring-Schuld, sondern das konsumierende System eine Hol-Schuld.
2. Die Daten werden vom Client-Browser geholt und zur Laufzeit in die HTML-Seite gerendert. Das spart «Aufwand» auf Serverseite.
3. Sie sind skeptisch??!! Haben Sie gesehen, mit wie wenig Code ich ganz ohne zusätzliche Typo3-Extension die Daten aus der API in die Website gezaubert habe!!!!!!!!!!!!!!!!! HABEN SIE???!!! 😉

Für alle die gut aufgepasst haben

1. Wer anmerkt, dass die von AngularJS benötigten Attribute wie «ng-app» oder «ng-repeat» im HTML-Validator des W3C unter validator.w3.org bemängelt werden, darf gern je ein «data-» vorne anfügen (siehe .w3schools.com/tags/att_global_data.asp).
   AngularJS wird Sie dennoch verstehen.
2. Wer anmerkt, dass es unschön sei, wenn aufgrund der durch das asynchrone Laden auftretenden Latenzen die Daten erst nachträglich auf der Webseite erscheinen, darf sich gern mit «ng-cloak» (siehe angularjs.org/api/ng/directive/ngCloak) vertraut machen – und mir eine einfachere Formulierung für diesen Satz vorschlagen.
3. Wer anmerkt, dass es auf die oben beschriebene Art vorkommen kann, dass die AngularJS-JavaScript-Datei mehrfach eingebunden wird, darf sich gern mit typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#includejslibs-array vertraut machen.

Für alle, die bis hierhin gelesen haben

Wow! Klasse! Haben Sie auch alles auf Anhieb verstanden?

Also ich, ich muss es nochmals durchlesen. 😉