close

Standort Krefeld

acadon AG
Königsberger Straße 115
47809 Krefeld

Tel.: +49 (0) 21 51 96 96-0
Fax.: +49 (0) 21 51 96 96-96
E-Mail: info@acadon.de

close

Support

Hotline _timber
Skype: +49 (0) 21 51 96 96-103
E-Mail: support@acadon.de

Hotline _packaging
Skype: +49 (0) 21 51 96 96-303
E-Mail: packaging@acadon.de

Hotline _venture
Skype: +49 (0) 21 51 96 96-803
E-Mail: venture@acadon.de

Java Script – Die Sprache für Add-Ins

JavaScript Add-In

In unserer letzten Berichtsreihe haben wir uns ausführlich mit den Hintergründen und Algorithmen der künstlichen Intelligenz beschäftigt. Die meisten Beispiele wurden an der Angebotsampel vom Hackathon erklärt. Dieses Mal geht es um das JavaScript Add-In von der Ampel, die später zu einem Tacho wurde und um die allgemeinen Konzepte von JavaScript.

Was ist eine API?

Als ein Application Programming Interface (API) wird eine Schnittstelle zu einem anderen Softwaresystem beschrieben, welche die Möglichkeit bietet es an andere Programme anzubinden. Es wird auch benutzt für den Austausch und die Weiterverarbeitung von Daten und Inhalten zwischen Webseiten oder Programmen.

Es gibt fünf Arten von APIs:

Interne API: Die verfügbaren Seiten sind nur intern verfügbar und sollen dafür sorgen,  dass der eigene Webseitenaufbau modularisiert wird.

Externe APIs: Diese Schnittstelle steht für den Austausch zwischen zwei Systemen und wird für die Bedürfnisse von Externen erstellt.

Plattform APIs: Eine Plattform Schnittstelle bietet die Möglichkeit für die Integration in externen Webseiten oder Plattformen.

Authentifizierung APIs: Mit einer Authentifizierung API kann die Authentifizierung von bestimmten Usern genutzt werden. Den größten Anwendungsbereich findet diese API bei Webseiten, wo sich der Nutzer entweder mit einem neuen Konto für diese Webseite oder mit einem bestehenden Google oder Facebook Konto einloggen kann.

Autorisierung APIs: Eine Autorisierung Schnittstelle wird benutzt für die Zugriffsgewährung, indem der Benutzer der Webseite erlaubt in seinem Namen etwas zu veröffentlichen.

Beziehungen JavaScript und APIs

JavaScript kann auch als Schnittstelle benutzt werden und wird von vielen Anwendungen unterstützt. Eine Web API besteht aus einem Webserver, welcher mit Software von Dritten interagiert. Im Prozess wird eine HMTL Anfrage generiert, um mit einer öffentlichen URL (dem sogenannten Endpoint) mithilfe von JSON-Dateien zu kommunizieren.

JSON DATEIEN

JSON-Dateien übertragen die Daten zwischen dem Server und dem Browser.

In Microsoft Dynamics Navision können auch JavaScript Anwendungen ausgeführt werden, in dem später erklärten Angebotstacho ist das JavaScript Add-In die Schnittstelle zwischen dem JavaScript Code, Navision und dem Webservice der künstlichen Intelligenz für den Wert der Tachonadel.

Was ist JavaScript?

JavaScript ist eine plattformübergreifende objektorientierte Sprache. Der Vorteil einer plattformübergreifenden Sprache ist die kürzere Entwicklungszeit, der größere Nutzungskreis und die einfache Wartung. Mithilfe von JavaScript lassen sich die eingeschränkten Funktionen von HTML erweitern. Es wird auch ermöglicht das Verhalten von Webinhalten zu steuern und mit dem User zu agieren.

Sie ist eine der drei Sprachen, die ein Webentwickler beherrschen muss. HTML wird benötigt um die Inhalte darzustellen, mit CSS wird das Layout designt und mit JavaScript wird das Programmverhalten programmiert.

Es wird entweder clientseitig entwickelt, was bedeutet, dass alles im Browser in HTML Code eingebettet wird oder serverseitig, wo ein JavaScript Interpreter im Browser das Programm ausführt.

Eine Besonderheit von JavaScript ist, dass es interpretiert wird statt durch einen Compiler ausgeführt zu werden, wie in den meisten Programmiersprachen. Das bedeutet zum Beispiel, das Variabeln nicht mit einer Typdeklarierung erstellt werden müssen.

Aufgabenstellung Kunde

Im Rahmen des zuvor erwähnten Hackathon wurde eine Ampel mit JavaScript entwickelt, die auf der Angebotskarte in Microsoft Dynamics die Auftragswahrscheinlichkeit anzeigt.

Nach einer Präsentation beim Kunden wurde von ihm gewünscht, die Ampel in einen Tacho umzubauen, denn das würde besser zur Vorgehensweise passen. Bisher verteilen die zuständigen Personen im Unternehmen willkürliche und zu niedrige Zahlen für Angebotszeilen, eben weil es diese Anzeige des Tachos nicht gab. Der Außendienst muss diese mit viel Mühe wieder geradebiegen, um Gewinn zu erzielen. Unerfahrene Mitarbeiter sollen bei einer Anzeige im roten Bereich einen Außendienstler kontaktieren und mit ihm die Zahlen durchsprechen. Wenn die Tachonadel im grünen Bereich ist, ist keine Aktion erforderlich.

Das Ganze soll als JavaScript Add-In für Navision implementiert werden.

Umsetzung

Ampel zu Tacho

Die erste Version war eine Ampel, wo mithilfe von HTML der Rahmen und die Ampelkreise erstellt wurden, JavaScript änderte die Farbe je nachdem, was für einen Wert dieser aus dem Webservices der künstlichen Intelligenz erhielt.

Die Ampel wurde mit den folgenden Werten geschaltet:

Rot: 0 bis X, Gelb: X bis X und Grün von X bis 100.

In der zweiten Version wurde ein großer Tacho entwickelt, mithilfe einer JavaScript Bibliothek namens AnyChart. Der komplette Tacho wurde mit JavaScript erzeugt und es wurden die verschiedenen Methoden der Bibliotheken genutzt,  um das Design anzupassen. Des Weiteren mussten die folgenden Skripte eingebunden werden: anychart-core.min.js, anychart-circular-gauge.min.js und für die Anbindung an Navision jquery-1.11.0.min.js.

Der Tacho ähnelte der  dargestellten Abbildung:

Leider ließ die Bibliothek AnyChart keine kommerzielle Nutzung ohne Lizenz zu und es wurde sich dagegen entschieden eine zu erwerben.

Der Tacho musste mit anderen Mitteln erstellt werden.

Nach einiger Recherche wurde die freizugängliche Bibliothek Raphael gefunden und der Tacho wurde umgebaut zu Version 3. Der Tacho ist im Design schlanker und weniger auffällig (siehe Abbildung rechts). Die einzubindenden Skripte waren raphael-2.1.4.min.js, justgage.js sowie das obengenannte Skript für Navision.

Der Aufbau der einzelnen Dateien und ihrer Funktionen wird im weiteren Verlauf erklärt.

HTML zu Js

Der JavaScript Code wurde nicht direkt als eigene Datei entwickelt, sondern zunächst in HTML eingebunden und mit dem Browser getestet.

Um JavaScript in HTML zu integrieren muss, die Datei den folgenden Aufbau aufweisen:

Im Body muss auch ein Container erstellt werden, eine sogenannte Anzeigefläche für den Code.

Im grünmarkierten Bereich wurde der Code eingefügt, dieser bestand aus den drei Funktionen CreateControl(), LoadPropabilityMeter() und Output().

Jede Funktion nutzt die Methoden aus der Bibliothek justgauge.js oder raphael-2.1.4.min.js.

Nachdem der Test im Browser erfolgreich verlief, wurde der Code in eine eigene .js Datei verschoben. Der HTML Code für die Container Erstellung wird als Variabel mit dem Namen html ganz oben in der Datei angelegt.

Der nächste Schritt bestand darin den JavaScript Code in Navision zu integrieren, dies sollte mit einer Extension umgesetzt werden.

Js und NAV

Um JavaScript in Microsoft Dynamics Navision einzusetzen, mussten zu den regulären Extension Basisdateien folgende Dateien erstellt werden:

ProbabilityGauge.al: Hier wird das Control-Addin angelegt, alle js-Dateien und Css-Dateien werden eingebunden und die Standardmaße für die Anzeige werden festgelegt.

Pag50104acadonProbabilityGauge.al: Dies ist die Seite, wo die Factbox angelegt wird. Des Weiteren müssen verschiedene Funktionen angelegt werden, damit das Add-In geladen wird.

PagExt50101.ACA-TLSalesQuote.al: Mithilfe dieser Page Extension wird die Angebotsseite um die Factbox mit dem Addin erweitert.

Zusätzlich zu diesen Dateien existiert noch eine Codeunit, die den Webservice anspricht und den Wert an das Add-In übergibt.

Nach der Installation der Extension wird das Add-In angezeigt.

Ausblick

Als nächster Schritt steht die Visualisierung der Kundendaten mithilfe von Power BI an, dies dient dem Zweck, die Daten weiter zu klassifizieren und auszuwerten. Um herauszufinden, welche Merkmalkombinationen eine Auswirkung auf die Erteilung eines Auftrags haben. Nach der Auswertung wird eine neue Intelligenz entwickelt und mit den ausgewählten Merkmalen trainiert.

Das beste Ergebnis landet in einem Webservice, der das Java Skript Add-In ansteuert. Das Java Skript Add-In ist als Extension in Buisness Central integriert und die Ampel wird auf der Angebotsseite angezeigt.Java Skript Add-In

Zusammenfassung

Auftragswahrscheinlichkeit konnte beim Wettbewerb den zweiten Platz holen.