It’s #FrontendFriday – WordPress – JavaScript in Beitrag einbetten

Generell im Editor die „Text“-Ansicht anstelle der „Visuell“ Ansicht wählen. So kann man auch eigene HTML Elemente hinzufügen und ist flexibler bei der Gestaltung.

Code darstellen

Hier im Beitrag nutze ich dazu die Seite codepen.io [1], die es erlaubt HTML, CSS wie auch JS Code anzuzeigen. Auch kann das Ergebnis angezeigt werden. Dazu muss man einen Account erstellen, einen eigenen Pen erstellen und unten rechts auf Embed drücken. Hier kann man dann die gewünschte Darstellung und Art der Einbettung wählen (hier habe ich das empfohlene html gewählt).

Code ausführen

Inline

Wenn ihr den Code direkt im Beitrag einfügen wollt, fügt euch WordPress <p> Tags in den Code und macht diesen kaputt (Google Suche). Um dies zu verhindern könnt ihr einfach
//<![CDATA[
um euren Code machen
//]]>.
Ob dieser Ansatz von der eingesetzten WordPress-Version abhängt weiß ich leider nicht. Für mich war er zumindest hier die Lösung :) Schreibt gerne eure Erfahrung.

Beispiel: Code hier in der Seite embedded:

changeMe


Extern laden

Ist euer Code auf einem Server gehostet, so könnt ihr diesen per script tag und dem attribut src einbinden.

Beispiel siehe 3D Visualisierung im Browser.

Es gibt auch extra WordPress Plugins, mit denen man Code einbinden kann. Ich finde diese einfachen Möglichkeiten aber am Besten, da man diese ohne weitere extra Plugins nutzen kann. Wenn ihr noch weitere Tipps habt, gerne in die Kommentare :)

Schönes Wochenende!
Nico


Links
[1] codepen.io – Abgerufen 2020-05-28

Vorbereitung ist alles: Wie die erfolgreiche Einführung eines Remote Service gelingt

 

„Mein PC zeigt eine komische Meldung an. Was muss ich jetzt drücken?“

„Ich bin schon bei der Arbeit – kannst du bitte schauen, ob ich das Bügeleisen ausgeschaltet habe?“

 

Im Alltag gibt es häufig Probleme, die wir remote lösen möchten. Oft funktioniert dies auch – manchmal ist die Problemlösung aber nicht so einfach umsetzbar, da die technischen Voraussetzungen nicht vorhanden sind.

Ähnliche Schwierigkeiten finden wir auch in der Industrie. Taucht beispielsweise an einer Maschine beim Kunden ein Fehler auf und die Maschine läuft nicht mehr, heißt es so schnell wie möglich handeln und das Problem remote identifizieren. Denn der plötzliche Stillstand einer Maschine bedeutet nicht nur wirtschaftliche Verluste, sondern mindert auch die Kundenzufriedenheit. Ehe eine nicht durchdachte Problembeseitigung angesteuert wird, ist eine Vorabanalyse in jedem Fall nötig: Vorbereitung ist alles, um Störungsfälle aus der Ferne effizient zu beheben. Der Lösungsansatz: die Einführung von Remote Services – doch wie vorgehen und was sollte beachtet werden?

Die gängigsten Remote Services

Unzählige UseCases werden im Bereich von Remote Services geboten. Die Favoriten darunter sind Sensorwerte, Remote Desktop, Log-/Konfigurationsdateien und Softwareupdates. Dabei lassen sich Sensorwerte anzeigen, so dass mögliche Fehlerquellen direkt identifiziert bzw. ausgeschlossen werden können. Auf diese Weise können defekte Teile schnell gefunden und so eine Reparatur effizient geplant werden. Um direkt die Oberfläche eines Produktes einsehen zu können und mit dieser zu agieren, ist die Nutzung von Remote Desktop weit verbreitet. Log-/Konfigurationsdateien werden wiederum übertragen, um Fehler zu analysieren und Einstellungen zu ändern. Eine weitere Anwendung ist die Bereitstellung und Auslieferung von Softwareupdates für neuste Sicherheitsupdates oder Features.

Die Bedienung: einfach aber effektiv

Eine Oberfläche zur Einsicht und Nutzung aller Funktionen muss erstellt werden. Die verfügbaren Daten müssen für den Nutzer übersichtlich aufbereitet und dargestellt werden, so dass ein Problem schnell gefunden werden kann. Für eine gute UserExperience ist hier auch ein Augenmerk auf die Endgeräte zu legen mit denen die Oberfläche bedient werden soll (Smartphone, PC, …). Des Weiteren müssen Benachrichtigungen versandt werden, um bei Problemen automatisch Verantwortliche zu informieren bzw. im Idealfall einen bevorstehenden Ausfall vorherzusehen (siehe auch Best Practices bei der Umsetzung von Predictive Maintenance).

Herausforderungen

Nachdem die Rahmenbedingungen festgelegt sind, gilt es zur erfolgreichen Realisierung von Remote Service verschiedene, komplexe Phasen zu durchlaufen:

  1. Connectivity: Das Vernetzen der Geräte ist Grundlage des Remote Service. Die Daten müssen remote abgreifbar sein. Hier gibt es oft auch bereits vorhandene Schnittstellen, da das Produkt bereits mit anderen Produkten kommunizieren muss. An diese kann man anknüpfen.
  2. Condition Monitoring: Automatisches Überwachen des Zustandes der Geräte. Hierbei gilt es die relevanten Datenwerte zu finden, die für einen Ausfall sorgen können.
  3. Alerting: Bei kritischen Zuständen müssen Verantwortliche angemessen alarmiert werden. Hierzu müssen zunächst kritische Zustände definiert und Verantwortliche gefunden werden.
  4. Predictive Maintenance, Prescriptive Maintenance: In diesem Fall wird vorab erkannt, dass ein Produkt ausfallen wird. So kann es proaktiv gewartet und Ausfallzeiten verhindert werden.

 

Des Weiteren müssen Abläufe definiert werden, die in enger Abstimmung mit den Service-Technikern wie auch mit den Kunden erstellt werden. Für ein Softwareupdate muss beispielsweise geklärt sein, wann und von wem dieses eingespielt werden darf. Wird das Produkt gerade eingesetzt, so wäre ein automatisiertes Update nicht gewünscht – evtl. sogar kritisch.

Eine weitere Herausforderung ist die Berücksichtigung des Datenschutzes: Wo werden die Daten z.B. gespeichert (On Premise, Cloud)? Wer kann welche Daten einsehen (Rechte und Rollen)? Müssen Daten zensiert werden (DSGVO)?

Remote Service mit ThingWorx

Mit unserem IoT Partner PTC und der ThingWorx-Plattform, haben wir bereits einige Remote Service Lösungen umgesetzt. Hierbei stellt sich ThingWorx als sehr flexibel heraus und bietet bereits Of-the-box-Lösungen an:

Connectivity: Neben einer Kepware-Integration zur direkten Anbindung von Produkten, die bereits Industriestandard Protokolle wie OPC nutzen, werden unter anderem auch SDKs für verschiedene Programmiersprachen angeboten. Vorhandene Systeme wie Mail, ERP oder Datenbanken können über Standard-Module wie auch einer REST-API angebunden werden. Kundenspezifische Protokolle über Protocol Adapter.

Dashboards: Durch den Mashup Builder können eigene Oberflächen erstellt werden. Auch bietet PTC mit Zusatzmodulen wie die ThingWorx Apps1 eine vorkonfigurierte Oberfläche für IoT Anwendungen. Diese kann nach Bedarf erweitert werden.

Remote Desktop: Neben einer integrierten Tunneling Lösung, die ohne aufwändiges VPN (VirtualPrivateNetwork) eine sichere Verbindung zu Applikationen wie Remote Desktop aufbauen kann, bietet ThingWorx auch eine TeamViewer Integration wie auch weitere Remote Assistance-Lösungen wie Augmented Reality2.

Predictive Maintenance: Mit ThingWorx Analytics3 können Machine Learning Projekte umgesetzt werden, die Ausfälle von Maschinen vorhersagen können sollen.

Fazit

Remote Service kann die Wartung von Geräten stark vereinfachen und dem Kunden sowie der Produktion einen hohen Mehrwert bieten. Damit dies reibungslos funktioniert muss eine Lösung sorgfältig geplant werden. Eine flexible Plattform ist hier von Vorteil, die sich auch für kommende UseCases einsetzen lässt. Hier legt ThingWorx mit den Out-of-the-Box Lösungen eine gute Grundlage bereit, ein Remote Service Projekt zu starten.

Der Bonus: Sind die Produkte erstmal connected, so bieten sich neben Remote Service auch weitere Einsatzzwecke der Daten an: Dashboards für den Kunden, Machine Learning, Auslastung der Produkte um Verbesserungspotentiale zu entdecken und noch viele weitere, auch ungeahnte Möglichkeiten, die man zuvor gar nicht in Betracht gezogen hatte.

Template Business Case herunterladen

 

Das könnte Dich auch interessieren: Praktische Predictive Services Anwendungen aus der Industrie


Links:

1 ThingWorx Apps

2 Industrial Augmented Reality für den Service

3 Predictive Analytics unterstützt durch Machine Learning

It’s #FrontendFriday – Who runs the world? WebBrowser?

Hallo #FrontendFriday-Leser/in,

mir ist vor ein paar Tagen erst bewusst aufgefallen, dass wir immer mehr im WebBrowser machen (können). Sei es Emails lesen oder schreiben, Nachrichten lesen, Videos schauen, Kalender teilen, Geld überweisen, einkaufen, …

Eine Anwendung für den WebBrowser zu entwickeln ist sehr attraktiv, jeder benutzt einen und man kann den Inhalt auf allen Betriebssystemen einsehen. Mails z.B. bei GMX kann ich am PC, Handy oder vom Tablet aus über einen einfachen Link www.gmx.de erreichen. Wie genial ist das eigentlich?
Die Browser werden auch immer mit neuen Funktionen ausgestattet und machen so Features plattformübergreifend verfügbar.

Mehr

It’s #FrontendFriday – Klassen / Modul-Diagramme in Frontend-Projekten

Hallo #FrontendFriday-Leser/in,

heute geht es um Tools, die Klassendiagramme aus Frontend-Projekten (speziell TypeScript, Angular) generieren.

Zu Beginn eines Projekt wird eine Architektur der Anwendung erstellt (die sich im Laufe des Projekts weiterentwickelt). Während des Projekts stellt sich die Frage, ob die geplante Soll-Architektur mit der tatsächlich umgesetzten Architektur übereinstimmt. Hierzu können unter anderem Klassendiagramme helfen, die automatisch aus dem entwickelten Code generiert werden.

Mehr

AR/IoT-Prototyp: IoT in Verbindung mit Augmented Reality

Ich hatte das Glück bei doubleSlash meine Master Thesis im Bereich der Augmented Reality in Verbindung mit dem Internet of Things zu schreiben: „Exploring new worlds using Mixed Reality and the Internet of Things“. Zur Zeit gibt es viel Neues aus dieser Sparte zu berichten, deshalb teile ich hier gerne meine Erkenntnisse, auch wenn die Thesis schon etwas her ist.Mehr