Posts Tagged ‘WordPress’

11. Juli 2017

WordPress + AngularJS – Hybridsystem

AngularJS und WordPress

Vorwort

Bei diesem Beitrag möchte wir euch näher bringen, wie man die beiden Technologien WordPress und AngularJS für eine Webseite miteinander verlötet. Zur Abgrenzung, es geht hierbei nicht darum, dass komplette Frontend (Seiten, Beiträge, …) von WordPress in AngularJS zu laden, sondern nur einzelne vorher definierte Seiten. Zwischen diesen Seiten wird dann das Routing von Angular verwendet und der Wechsel zu den normalen WordPress Seiten und Beiträgen soll weiterhin funktionieren. Die unterschiedliche Technologien sollen für die jeweiligen Seiten Ihre Stärken ausspielen. Beispielsweise ist für die SEO (Suchmaschinen-Optimierung) es sehr vom Vorteil, dass die Webseite schon vorgerendert vom Webserver ausgeliefert wird. Der Vorteil beim dem Angular Teil ist, dass dort die große Datenmengen mit weniger Overhead geladen werden und somit die Seite dort auch deutlich schneller reagiert.

ToDo’s

Folgende kleine Teilaufgaben waren für die Verschmelzung zu erledigen. Das „ng-app“-Attribut muss in das WordPress Template integrieren werden, sonst kennt Angular nicht seinen Startpunkt innerhalb des DOM. Angular benötigt für das Routing das „ng-view“-Attribut, damit es weißt an welchen Ort die neue View geladen werden soll. Das Attribut haben wir über das WordPress Backend den einzelnen Seiten zugeordnet. Anschließend müssen die Angular seine Templates bereitgestellt werden. Dazu haben wir ein eigenes Plugin geschrieben, in diesem sich diese Templates bereitzustellen. Als nächstes geht es um das Routing. Da die Anzahl der Seiten bei denen sich Angular um das Routing kümmern soll, relativ gering ist, haben wir uns dazu entschieden ist händisch synchronisiert zu halten. Damit ist gemeint, dass bei den Seiten im Routing auch das ng-view im Content der WordPress-Seite gesetzt ist. Für das Routing muss noch die BaseUrl im HTML Head gesetzt werden und in der Angular Config der HTML5 Modus aktiviert werden.

Tipps und Tricks

In Angular als SPA (Single Page Application) ist es nicht vorgesehen, dass das Routing mit anderen Technologien geteilt wird. Um Angular mitzuteilen, dass es sich beim folgen eines Links nicht um das Routing kümmern soll, gibt es verschiedene Möglichkeiten. Beispielsweise reicht es bei den Links das Attribut target=“_self“ zu setzen, damit Angular weiß, dass es sich nicht um das Routing kümmern muss. Wir haben uns für eine andere Lösung entschieden. Dazu haben wir das Routing um ein „otherwise“ ergänzt. Die nicht gefundenen Routen laufen dort hinein. Dann wird explizit mittels normalen JavaScript ein neuer Browser-Request zu dieser Route ausgelöst. Dies ist für uns die beste Lösung, da wir nur eine kleine Anzahl an Angular Routen benötigten und wir nicht jede möglichen Link in den WordPress suchen müssen um dort Target-Attribut zu ergänzen.

Fallstricke

Beim Verlassen einer Angular Seite und beim Wiedereintritt, muss das komplette JavaScript Model zu Angular erneut aufgebaut werden. Wie beim ersten Aufruf einer Angular SPA. Um dieses Problem zu verringern werden einige Daten über das LocalStorage gecached, anstatt diese erneut beim Server anzufragen. Das dazugehörige JavaScript und Templates werden normalerweise bereits vom Browser gecached und benötigen keiner weiteren Beachtung.

Fazit

Durch die Verschmelzung der beiden Technologien konnten wir das beste der beiden Welten zusammenführen. Alle Schwierigkeiten ließen sich mit relativ geringen Aufwand beheben und der Nachteil des häufigen neu Aufbau des JS Models kann man weiter minimieren und hält sich im Vergleich manchen überladenen Seiten auch noch in Grenzen.




19. Mai 2017

BidAskClub WordPress Twitter-Bot

Wir stellen den „BidAskBot“ Twitter-Bot vor: Automatisiertes Generieren und Posten von Neuigkeiten aus einer Datenbank über das WordPress „BidAskBot“ Plugin zu Twitter.

BidAskClub Twitter-Bot

Das BidAskClub Twitter-Bot – News System

Unser Fin-Tech Partner von www.bidaskclub.com wollte das BidAskClub Twitter Profil als zusätzlichen News Kanal verwenden. Die Seite bidaskclub.com zeigt Unternehmens- und Sektor-Bewertungen. Die technische Basis ist ein WordPress mit Angular Theme und eine MySQL Datenbank mit Millionen von Datensätzen (Big Data) zu den aktiennotierten Unternehmen. Die Bewertung eines Unternehmens oder Sektors kann sich jedem Werktag ändern. Gerade solche tagesaktuelle Änderungen sind höchst interessant für Analysten. Über diese Bewertungsänderung sollten die Nutzer informiert werden und dazu ist, neben einem Email Newsletter System, Twitter eine hervorragende Möglichkeit.

Unsere Aufgabe bestand darin, ein Plugin für WordPress zu erstellen, dass die Neuigkeiten an den Twitter Stream sendet.

Bei einer Bewertungsänderung wird erst einmal ein News Beitrag bei WordPress. Die Daten werden hierfür noch durch das WordPress Plugin weiter aufbereitet. Dazu gehört bspw., dass zu jeder Neuigkeit ein Bild generiert wird, dass die aktuelle Bewertung und das Unternehmen zeigt. Außerdem erhält der Beitrag Informationen um die Twitter-Cards zu befüllen. Anschließend wird der Link mit einer optimierte Nachricht zu Twitter gesendet. Wenn man wollte, könnte man die generierten Bilder und weitere Inhalte direkt mit an Twitter übergeben, dies war aber bei unserem Vorhaben nicht nötig, da wir die befüllten Cards hatten. Durch die Cards bekommt Twitter gesagt, welches Bild für den Tweet geladen werden soll, was die Überschrift ist und eine Kurzbeschreibung.

Durch das Plugin werden am Tag ca. 200 News generiert und zwar nicht nur zu den Unternehmen, sondern auch zu den Sektoren, sowie zu den Top-Sektoren und Unternehmen. Twitter selbst besitzt eine Obergrenze von 250 Tweets am Tag über die API. Sollte es also mal mehr Neuigkeiten geben, als wir Tweets absetzen können, so greift die Priorisierung über die Markt-Kapitalisierung und die größeren Sektoren und Unternehmen werden früher veröffentlicht.

BidAskClub – Twitter Profil

BidAskClub Twitter-Bot

Twitter-Bot – Main Features

  • Automatisiertes tweeten der News von der BidaskClub Webseite
  • Anhängen von Bilder an den Tweet
  • Verlinkung des angehängten Bildes
  • Priorisiertes tweeten von News
  • Zeitlich verzögertes tweeten

 

Weiterführende Links

Webseite: www.bidaskclub.com

Blogpost: https://fancysoftware.de/blog/big-data-and-beautiful-visualizations/

Twitter Profil: twitter.com/bidaskclub