Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
The Power of JavaScript
Marcel Moré

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Marcel Moré
Gefahrensucher
• überlebt seit 23 Jahren in
der FileMaker-Hölle
• Cross-Plattform Erfahrung
• Abenteuer in
17 subtropischen
Programmiersprachen
• unterwegs auf Debugging-
Expedition in exotischer
Scripting-Umgebung
• auf zu neuen Ufern in
bislang unbekanntes
Terrain...
@mmore

The Power of JavaScript

The Power of JavaScript
• dies ist kein JavaScript Programmierkurs!
• kurzer Überblick zur Sprache
• warum JavaScript für FileMaker Entwickler interessant ist
• typische Szenarien für den Einsatz von JavaScript in FileMaker
• wie lässt sich JavaScript konkret in FileMaker einbinden?
• Praxis-Beispiel: Lösung des TSP (Traveling Salesman Problem)
Was Euch in den nächsten 90 Minuten erwartet:

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
JavaScript als Sprache

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Was ist JavaScript?
• JavaScript (kurz JS) ist eine Skriptsprache, die ursprünglich für
dynamisches HTML in Webbrowsern entwickelt wurde, um
Benutzerinteraktionen auszuwerten, Inhalte zu verändern,
nachzuladen oder zu generieren und so die Möglichkeiten von
HTML und CSS zu erweitern.
• Heute findet JavaScript auch außerhalb von Browsern Anwendung,
so etwa auf Servern und in Microcontrollern.
• Der als ECMAScript standardisierte Sprachkern von JavaScript
beschreibt eine dynamisch typisierte, objektorientierte, aber
klassenlose Skriptsprache.
• Sie wird allen objektorientierten Programmierparadigmen unter
anderem auf der Basis von Prototypen gerecht. In JavaScript lässt
sich objektorientiert und sowohl prozedural als auch funktional
programmieren.
Quelle: h(ps://de.wikipedia.org/wiki/JavaScript

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Was ist JavaScript?
• JavaScript (kurz JS) ist eine Skriptsprache, die ursprünglich für
dynamisches HTML in Webbrowsern entwickelt wurde, um
Benutzerinteraktionen auszuwerten, Inhalte zu verändern,
nachzuladen oder zu generieren und so die Möglichkeiten von
HTML und CSS zu erweitern.
• Heute findet JavaScript auch außerhalb von Browsern Anwendung,
so etwa auf Servern und in Microcontrollern.
• Der als ECMAScript standardisierte Sprachkern von JavaScript
beschreibt eine dynamisch typisierte, objektorientierte, aber
klassenlose Skriptsprache.
• Sie wird allen objektorientierten Programmierparadigmen unter
anderem auf der Basis von Prototypen gerecht. In JavaScript lässt
sich objektorientiert und sowohl prozedural als auch funktional
programmieren.
Quelle: h6ps://de.wikipedia.org/wiki/JavaScript
früher: Spielkram für Webseiten
heute: ausgerei@e
Programmiersprache

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Besonderheiten
• Kontrollstrukturen (if/else; switch; while; for; for…in)
• Variablen, Arrays
• Funktionen (vollständig objektorientiert)
• Objekte (mit Eigenschaften und Methoden)
• objektorientierte Vererbung
• Delegationsprinzipien; Fehlerbehandlung mit Exceptions
• enge Anbindung an das DOM (Document Object Modell)
im modernen WEB-Standard, u.a. mit Event-Handlern (Trigger)
kurz: im Vergleich zu FileMaker-­‐Script
weitaus mächAger

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Vorteile
• einfach zu erlernende Grundprinzipien
• ausgereifte objektorientierte Sprache mit vielen mächtigen Konstrukten
• leistungsfähige dynamische Dokumenten-Steuerung
im direkten Zugriff auf das DOM inkl. HTML, CSS, SVG
• verteilte Anwendungen (Code extern nachladbar)
• Client- oder Server-basierte Systemarchitekturen
kurz: mit wenig MiBeln viel erreichen
in unterschiedlichsten Szenarien

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
weitere Vorteile
• unendliche Anzahl von Tutorials und Beispielen
im WEB frei verfügbar
• zahlreiche ausgereifte FrameWorks und Bibliotheken
(jQuery, Protoype, AngularJS, backbone.js, YUI, Dojo, u.ä.)
• öffentliche Repositories mit riesigen Code-Sammlungen (GitHub, u.ä.)
• große Anzahl von fertigen Anwendungen,
die sich größtenteils an eigene Bedürfnisse adaptieren lassen
(GUI, Datenanalyse, Visualisierung, …)
• viele APIs für Apps, WEB- und Cloud-Anwendungen
(Google Maps, Amazon AWS, MS Office, Acrobat, SharePoint,
Dropbox, Evernote, FaceBook, Twitter, ...)
kurz: überall präsent, viele Werkzeuge

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Die beliebtesten Programmiersprachen
JavaScript #1gemäß Ihrer relaAven Popularität auf GitHub
Quelle: h(ps://github.com/blog/2047-­‐language-­‐trends-­‐on-­‐GitHub

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Warum JavaScript
in FileMaker nutzen?

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
JavaScript für FileMaker
• mittels spezifischer Sprachkonstrukte und flexibler Objekt-Strukturen
lassen sich manche Aufgaben sehr viel einfacher lösen
• teilweise wesentlich höhere Performance erreichbar als in FileMaker
• viele vorgefertigte Lösungsbausteine für zahlreiche Anwendungsfälle
frei verfügbar (von einfachen Steuerungselementen bis zu kompletten
Anwendungen)
• keine zusätzlichen Plugins erforderlich – JavaScript lebt direkt im
Webviewer
kurz: wie Plugins, nur ohne Plugins...

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
typische Szenarien

• dynamische Schalter, Regler, Anzeigeelemente
• Widgets
• dynamische Tabellen
• Belegungspläne
• Kalender
Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
komplexe GUIs
h(p://jqueryui.com/
h(p://justgage.com/
jqxGauge

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
komplexe GUIs
Quelle: h(p://fullcalendar.io/

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Visualisierung
• Charts
• Diagramme
• dynamische Graphen
• interaktive Diagramme
• Analysen
• 3D-Grafik
• http://www.flotcharts.org/
• http://www.chartjs.org/
• http://d3js.org/
• http://sigmajs.org/
• http://mbostock.github.io/protovis/
• http://p5js.org/
• http://threejs.org/

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Visualisierung
Quelle: h(p://www.flotcharts.org/

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Visualisierung
Quelle: h(p://www.flotcharts.org/

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Visualisierung
Quelle: h(p://www.flotcharts.org/

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Visualisierung
Quelle: h(p://sigmajs.org/

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Visualisierung
Quelle: h(p://mbostock.github.io/protovis/

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Visualisierung
Quelle: h(ps://www.jasondavies.com/parallel-­‐sets/

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Number-Crunching
• Analysen
• statistische Auswertungen
• Spezial-Algorithmen
• http://jstat.github.io/
• http://simplestatistics.org/
• https://github.com/pseudosavant/psMathStats
• https://qiao.github.io/PathFinding.js/visual/
• http://parano.github.io/GeneticAlgorithm-TSP/

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Demo

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Wo liegen die
Herausforderungen?

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Herausforderungen
• sich aufraffen, über den Tellerrand
der FileMaker-Welt zu schauen!
• Fallstricke bei der Implementierung
im Webviewer
• Datenübergabe zu JavaScript
bidirektional in FileMaker einbinden
• die richtigen Bausteine finden
(Recherche: Repositories, Frameworks, Libs)

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Einbindung in FileMaker

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
JavaScript in FileMaker
• Wo liegt der Code?
• Wie wird das JavaScript gestartet?
• Datenübergabe
• von FileMaker an das JavaScript
• vom JavaScript an FileMaker
• weitere Möglichkeiten und Alternativen

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Wo liegt der Code?
• Webviewer
• eingebettet in HTML
• wird ausgeführt, sobald der Webviewer im Layout dargestellt wird
<html>
<body>
<script type="text/javascript">
document.write("Hello World");
</script>
</body>
</html>

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Wo liegt der Code?
• URL mit Verweis auf
HTML-Dokument
<html>
<body>
<script type="text/javascript">
document.write("Hello World");
</script>
</body>
</html>

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Wo liegt der Code?
• URL mit Verweis auf
HTML-Dokument
• Data URL kann auf
Variable verweisen

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Wo liegt der Code?
• URL mit Verweis auf
HTML-Dokument
• Data URL kann auf
Variable verweisen
"data:text/html," & $$JavaScript

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Wo liegt der Code?
• Warum ist es nützlich, den Code in einer Variable zu haben?
• Datenübergabe!

Datenübergabe
FileMaker JavaScript

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Datenübergabe
• Code liegt als Text in einer Variable vor
• Daten können als Platzhalter direkt in den Code eingebettet werden
• Austauschen ( $$JavaScript; "<meinwert>"; "Hallo Welt!" )
<html>
<body>
<script type="text/javascript">
document.write("<meinwert>");
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
document.write("Hallo Welt!");
</script>
</body>
</html>

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Datenübergabe
• Code-Template Beispiel:
<html>
<body>
<script type="text/javascript">
/* -­‐-­‐-­‐-­‐-­‐ INPUT PARAMETER -­‐-­‐-­‐-­‐-­‐ */
myNumber = <myNumber>;
myString = "<myString>";
myArray = [<myArray>];
/* -­‐-­‐-­‐-­‐-­‐ DO WHATEVER -­‐-­‐-­‐-­‐-­‐ */
document.write( myString );
</script>
</body>
</html>

Datenübergabe
FileMaker JavaScript

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Datenübergabe
• Ergebnis als Parameter in Script-Aufruf
per FMP-URL Schema
• Ergebnis in der Zwischenablage
• Ergebnis direkt in den Inhalt des Webviewers
schreiben und dort auslesen*
• Ergebnis im 'Fenstertitel' des Webviewers*
*Plugin erforderlich

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Datenübergabe
Ergebnis als Parameter in Script-Aufruf per FMP-URL Schema
• JavaScript:
var p = "Mein Ergebnis";
var url = "fmp://$/MeineDB?script=LiesErgebnis&param=" + p ;
window.location = url ;
• FileMaker:
–> Script "LiesErgebnis [ p ]"
Variable setzen [ $Ergebnis ; Hole ( ScriptParameter ) ]
• Hinweise: Erst ab FileMaker Version 13.0v2 sinnvoll verwendbar.*
Unter Windows können nur 2048 Zeichen übergeben werden.
*Quelle: h(p://isolufons-­‐inc.com/2014/04/05/fmp-­‐url-­‐scheme-­‐and-­‐the-­‐13-­‐0v2-­‐improvement/

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Datenübergabe
Ergebnis in die Zwischenablage schreiben
• JavaScript: window.clipboardData.setData( 'Text' , "Mein Ergebnis" );
• FileMaker: Einfügen [ Auswahl; Tabelle::Ergebnis ]
• Hinweis: Als Workaround unter Windows geeignet, wenn Ergebnisse mit
mehr als 2048 Zeichen übergeben werden sollen*
*Quelle: h(p://www.seedcode.com/filemaker-­‐webviewer-­‐javascript-­‐calculafon-­‐engine/

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Datenübergabe
Ergebnis direkt in den Webviewer schreiben und dort auslesen
• JavaScript: document.write( "Mein Ergebnis" );
• FileMaker: Variable setzen [ $Ergebnis;
LiesLayoutobjektAttribut ( "Webviewer" ; "content" ) ]
• Problem: Aktueller Inhalt des Webviewers wird nicht erkannt,
stattdessen wird der Sourcecode zurück geliefert!
• Alternative: Auslesen über Funktion im MBS-Plugin
• Variable setzen [ $Ergebnis;
MBS( "WebView.GetPlainText"; "Webviewer" ) ]
Doku: h(p://www.mbsplugins.eu/WebViewGetPlainText.shtml

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Datenübergabe
Ergebnis direkt in den Webviewer schreiben und dort auslesen
• JavaScript: document.write( "Mein Ergebnis" );
• FileMaker: Variable setzen [ $Ergebnis;
MBS( "WebView.GetPlainText"; "Webviewer" ) ]
Doku: h(p://www.mbsplugins.eu/WebViewGetPlainText.shtml
Vorteil: für große Datenmengen gut
geeignet, kommt problemlos mit
mehreren Megabytes Text zurecht.

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Datenübergabe
Ergebnis in den 'Fenstertitel' des Webviewers schreiben
• mit Bordmitteln nicht möglich
• Alternative: Auslesen über Funktion im MBS-Plugin
• JavaScript: document.title = "Mein Ergebnis";
• FileMaker: Variable setzen [ $Ergebnis;
MBS( "WebView.GetTitle"; "Webviewer" ) ]
Doku: h(p://www.mbsplugins.eu/WebViewGetTitle.shtml

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Weitere Möglichkeiten
• URL Aufruf zu externem Script
• MBS Plugin
• BaseElements Plugin
• Node.js

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
externer URL Aufruf ➊
• JavaScript ist in einem HTML-Dokument
unter einer URL erreichbar:
http://www.server.de/script.html?p=MeinWert
• Parameterübergabe in der URL
• Werte müssen codiert sein:
LiesAlsURLVerschlüsselt ( MeinWert )
• mehrere Werte trennen:
script.html?a=1&b=2&c=3

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
externer URL Aufruf ➋
• JavaScript: Parameter aus der URL lesen
funcfon getUrlVars() {
var vars = {};
var parts = window.locafon.href.replace( /[?&]+
([^=&]+)=([^&]*)/gi,
funcfon( m, key, value ) {
vars[ key ] = unescape( value );
} );
return vars;
}

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
externer URL Aufruf ➌
• JavaScript Ergebnis:
document.write( "Mein Ergebnis" );
• FileMaker:
Aus URL einfügen [ ... Tabelle::Ergebnis ; URL ]
?

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
externer URL Aufruf ➌
• JavaScript Ergebnis:
document.write( "Mein Ergebnis" );
• FileMaker:
Aus URL einfügen [ ... Tabelle::Ergebnis ; URL ]
geht nicht: Aus URL einfügen
liefert staBdessen den Quelltext!
Weil keine Browser-­‐Instanz als
Interpreter dazwischen liegt...
!

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
externer URL Aufruf ➌
• JavaScript Ergebnis:
document.write( "Mein Ergebnis" );
• FileMaker:
Aus URL einfügen [ ... Tabelle::Ergebnis ; URL ]
• Variable setzen [ $Ergebnis;
MBS( "WebView.GetPlainText"; "Webviewer" ) ]

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
externer URL Aufruf ➌
• JavaScript Ergebnis:
document.write( "Mein Ergebnis" );
• externe URL im Webviewer anzeigen
• Variable setzen [ $Ergebnis;
MBS( "WebView.GetPlainText"; "Webviewer" ) ]
aber: Webviewer erfüllt den Job...
Zum Auslesen ist dann wieder
MBS-­‐Plugin erforderlich !

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
MBS Plugin
• MBS( "WebView.RunJavaScript";
WebViewerRef; Javascript )
• MBS( "WebView.RunJavaScriptReturnTitle";
WebViewerRef; Javascript )
• trotz Kapselung in Funktion ist ein Webviewer
für die Darstellung erforderlich
Doku: h(p://www.mbsplugins.eu/WebViewRunJavaScript.shtml

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
BaseElements Plugin
• BE_EvaluateJavaScript ( text )
• verwendet eingebettete JavaScript-Engine
„Duktape“ –> http://duktape.org/
• direkt in Formeln anwendbar
kein Webviewer erforderlich; keine GUI(!)
• derzeit noch im Beta-Stadium (v3.1)
Doku: h(ps://www.geisfnteracfve.com/2014/12/28/baseelements-­‐plugin-­‐gets-­‐javascript/
Doku: h(p://www.goya.com.au/blog/baseelements-­‐plugin-­‐updated-­‐31-­‐adds-­‐smtp-­‐and-­‐more
Doku: h(ps://baseelementsplugin.zendesk.com/hc/en-­‐us/arfcles/204528287-­‐BE-­‐EvaluateJavaScript

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Node.js
• Java-Script Server
https://nodejs.org/
• hohe Performance, Parallel-Verarbeitung,
gut skalierbar, für zahlreiche Plattformen
verfügbar (OSX, Win, Linux)
• Aufruf über Aus URL einfügen möglich
oder Aufruf über Webviewer (wie externe URL)
Doku: h(p://www.nodebeginner.org/
Info: h(p://blog.modulus.io/absolute-­‐beginners-­‐guide-­‐to-­‐nodejs
Info: h(ps://www.airpair.com/javascript/node-­‐js-­‐tutorial

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Fallstricke
• FileMaker-Befehle zum Auslesen des
Webviewers verhalten sich nicht wie erwartet:
LiesLayoutobjektAttribut und
Aus URL einfügen liefern Quelltext statt
sichtbaren Inhalt
• unter bestimmten Bedingungen werden
externe JavaScript-Referenzen (eingebundene
Bibliotheken) nicht geladen
• Same-Origin-Policy
• Cross-Origin Resource Sharing

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Fallstricke
• wenn WebViewer Inhalte zu oft nacheinander
geladen werden, stürzt FileMaker u.U. mit
einem Speicherüberlauf ab!
• z.B. Schleife über tausende von Datensätzen
• Workaround: alle Datensätze einsammeln und
als Parameter in einem Aufruf übergeben;
Ergebnis entsprechend zurückliefern und
wieder zerlegen
= 1 Aufruf berechnet 10.000 Datensätze

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Fazit

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Welche Technik wofür?
Webviewer +
FMP URL
Callback
Webviewer +
MBS Plugin
BaseElements
Plugin
Node.js
GUI
Widgets ✔ ✔
GUI
Interaktion ✔ ✔
Number-
Crunching ✔ ✔ ✔

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
persönlicher Eindruck
• Durch die FileMaker-Brille betrachtet, gleicht
manches einem Drahtseilakt
• GUI-Erweiterungen sind meist schnell
umgesetzt mit sehr flexibler Interaktivität
• schiere Masse an verfügbaren JS-Bibliotheken
ist ein starkes Argument
• komplexe Anwendungen erfordern manchen
Workaround, aber erweitern den FileMaker-
Horizont enorm

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
persönlicher Eindruck
• unterm Strich eröffnen sich durch den
gezielten Einsatz von JavaScript in FileMaker
völlig neue Welten
• gilt umso mehr in Kombination mit SVG
JavaScript + SVG
= Dreamteam!

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Praxis-Beispiel

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Die Aufgabe

B-­‐35
B-­‐25
B-­‐15
B-­‐5

LagerplätzeReihenfolge auf Beleg
Reihenfolge der Picking-­‐Route im Lager

Laufstrecke
99 m
Reihenfolge
vom Beleg
geht das evtl.
noch besser?

54 m
Laufstrecke
Op7mierung
99 m
Reihenfolge
vom Beleg
op7mierte
Reihenfolge
46 %

280 m 181 m
Laufstrecke
Reihenfolge
vom Beleg
op7mierte
Reihenfolge
Op7mierung
35 %

784 m 458 m
Laufstrecke
Reihenfolge
vom Beleg
op7mierte
Reihenfolge
Op7mierung
42 %

74 m 33 m
Laufstrecke
Reihenfolge
vom Beleg
op7mierte
Reihenfolge
Op7mierung
55 %

70.000Belege pro Jahr
Op#mierung würde sich schon lohnen...
8 MioMeter Laufstrecke

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Wo ist das Problem?

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
kann man nicht einfach alle
Kombinationen ausprobieren?

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
TSP - Traveling Salesman Problem
• beschäftigt seit über 80 Jahren Generationen
von Mathematikern
• »NP-schweres« Problem
• für n Knoten gibt es (n – 1)!/2 Varianten
• Berechnung würde einfach zu lange dauern!
Info: h(p://www-­‐i1.informafk.rwth-­‐aachen.de/~algorithmus/algo40.php
Info: h(p://www.math.uwaterloo.ca/tsp/
Info: h(ps://de.wikipedia.org/wiki/Problem_des_Handlungsreisenden

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
TSP - Traveling Salesman Problem
Knoten Varianten Laufzeit
3 1
1
msec
4 3
3
msec
5 12
6
msec
6 60
60
msec
7 360
360
msec
8 2.520
2,5
sec
9 20.160
20
sec
10 181.440
3
min
11 1.814.400
0,5
Stunden
12 19.958.400
5,5
Stunden
13 239.500.800
2,8
Tage
14 3.113.510.400
36
Tage
15 43.589.145.600
1,3
Jahre
16 653.837.184.000
20
Jahre

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Wie soll das in FileMaker
lösbar sein?

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Ist es überhaupt lösbar?
?

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
laut Recherchen gibt es
ein paar ausreichend gute
Näherungsverfahren...
!

githubjavascript tsp solver

Quelle: h(ps://github.com/parano/GenefcAlgorithm-­‐TSP

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Demo

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Das sieht
vielversprechend aus....
Hey, wir haben gerade gelernt,
wie man JavaScript in
FileMaker nutzen kann!

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Was am Ende dabei
herauskam...

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
➊ Pathfinder in JavaScript
• graphische Darstellung des Lagers in SVG
• effizienter Pathfinder Algorithmus aus frei
verfügbaren Quellen
• automatisierte Codierung des Lagermodells
für die Anwendung der TSP-Algorithmen
1000100010101001001001
0010010011101010101010
0100100101110101011101

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
➋ TSP Solver in JavaScript
• eigene Bibliothek, die mit beliebigen
Algorithmen als Plugins ergänzt werden kann
• 2 effiziente Algorithmen aus frei verfügbaren
Quellen:
• Genetischer Algorithmus
• Ameisen Algorithmus
• Jede Menge Erkenntnisse
auf dem Weg zur Lösung!

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Die Lösung

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Lösungsweg
• Datenmodellierung in FileMaker
• Darstellung des Hallengrundriss → SVG
• Ermittlung der Wegteilstrecken → JavaScript
• Berechnung der Routen → JavaScript
• Einbindung der Ergebnisse in FileMaker
• Zusatznutzen

X, Y, Breite, Tiefe,
Ausrichtung
Rechteck-­‐
Koordinaten für
SVG-­‐Template

Rechteck-­‐
Koordinaten
Wände
Rechteck-­‐
Koordinaten
Türen
Grundriss
als SVG

SVG-­‐Templates

SVG im
Webviewer
Grundriss
Regale
Wegpunkte
graphische RepräsentaAon
der Regal-­‐Datensätze
jederzeit aktualisierbar!

Script erzeugt
1. Grundriss als Grafik
2. Routentabelle über
JavaScript

Grundriss Grafik für
JavaScript vorbereiten
SVG Quelltext
erzeugen aus
Datensätzen
SVG in
Webviewer
anzeigen
Webviewer als
JPG in Medienfeld
per MBS Plugin
JPG als Base64
umwandeln
für JavaScript
1
2
3
4
5
2
1
3 4 5

JavaScript bekommt die
Regal-­‐KombinaAonen
und findet für alle
Einträge die kürzeste
Route
per Pixel-­‐Suche

Jump Point Search -­‐ Algorithmus
Quelle: h(p://zerowidth.com/2013/05/05/jump-­‐point-­‐search-­‐explained.html
Demo: h(p://qiao.github.io/PathFinding.js/visual/
Start Ziel

alle Verbindungen
von Regal zu Regal
durch
Pathfinder-­‐
Algorithmus
automaAsch
ermiBelt
inkl. Längen

Routentabelle
mit allen
Verbindungen und
Strecken-­‐Längen
von Regal zu Regal
= 56.953
Datensätze
für 338 Regale

Routeneintrag
mit Verbindung
von Regal zu Regal
Regale
Koordinaten
für Pfad
in SVG-­‐Darstellung
Länge

Beleg nach
Posi.onen
sor.ert
hier findet die »Magie« sta;!

Beleg nach
Routen-­‐
Op.mierung
sor.ert
hier findet die »Magie« sta;!

Knotenpunkte für Regale werden übergeben
Als Ergebnis kommen Knoten sorAert zurück
JavaScript
berechnet
unterschiedliche
Algorithmen

JavaScript Template
in der FileMaker
Datei

GeneAc
Algorithmus
als minified
JavaScript
/* Genetic - minifed */
! ! var Route_Genetic=function(){function H(c,a){var b=[];c.forEach(function(c)
{b.push(a[c])});return b}function h(c){return parseInt(Math.random()*c)}function A(c,a,b)
{solution=[];a=g[a].clone();b=g[b].clone();var d,f,e=a[h(a.length)];for(solution.push(e);
1<a.length;)d=a[c](a.indexOf(e)),f=b[c](b.indexOf(e)),a.deleteByValue(e),b.deleteByValue
(e),e=q[e][d]<q[e][f]?d:f,solution.push(e);return solution}function B(c){w++;do m=h
(c.length-2),n=h(c.length);while(m>=n);for(var a=0,b=n-m+1>>1;a<b;a++)c.swap(m+
a,n-a);return c}function C(c){w++;var a,b;do a=h(c.length>>1),b=h(c.length);while
(a>=b);var d=c.slice(0,a);a=c.slice(a,b);c=c.slice(b,c.length);return a.concat(d).concat
(c).clone()}function D(){for(var c=0;c<g.length;c++){for(var a=p,b=c,d=g[c],f=q[d[0]][d
[d.length-1]],e=1;e<d.length;e++)f+=q[d[e]][d[e-1]];a[b]=f}c=0;a=p[0];for(b=1;b<g.length;b+
+)p[b]<a&&(a=p[b],c=b);r={bestPosition:c,bestValue:a};if(void 0===t||t>r.bestValue)s=g
[r.bestPosition].clone(),t=r.bestValue}function I(c){var a;for(a=0;a<
k.length;a++)if(c<=k[a])return a}function J(c){for(var a=[],b=0;b<c;b++)a.push(b);return
a.shuffle()}var x=100,l=30,y,E,F,w,q,t,s,G,r,g,p,u,k,z;Array.prototype.clone=function()
{return this.slice(0)};Array.prototype.shuffle=function(){for(var c,a,b=this.length-1;b;c=h
(b),a=this[--b],this[b]=this[c],this[c]=a);return this};Array.prototype.indexOf=function(c){for
(var a=0;a<this.length;a++)if(this[a]===c)return a};Array.prototype.deleteByValue=function
(c){c=this.indexOf(c);this.splice(c,1)};Array.prototype.next=
function(c){return c===this.length-1?this[0]:this[c+1]};Array.prototype.previous=function(c)
{return 0===c?this[this.length-1]:this[c-1]};Array.prototype.swap=function(c,a){if(!
(c>this.length||a>this.length||c===a)){var b=this[c];this[c]=this[a];this[a]
=b}};Array.prototype.roll=function(){for(var c=h(this.length),a=[],b=c;b<this.length;b++)
a.push(this[b]);for(b=0;b<c;b++)a.push(this[b]);return a};Array.prototype.reject=function(c)
{return $.map(this,function(a){return 0>$.inArray(a,c)?a:null})};return{init:function(c,
a,b){y=c;E=a;F=b;z=H(y,F)},run:function(){w=0;t=void 0;s=[];G=0;r;g=[];p=Array(l);u=Array
(l);k=Array(l);q=Array(z.length);var c=y,a=E,b=c.length,d,f,e,h,v=[];for(d=0;d<b;d++)if(e=c
[d],void 0!==a[e])for(v[d]=[],f=0;f<b;f++)h=c[f],e!=h&&void 0!==a[h]&&(v[d][f]=a[e]
[h]),e==h&&void 0!==a[h]&&(v[d][f]=0);q=v;for(c=0;c<l;c++)g.push(J(z.length));D();for
(c=0;c<=x;c++){G++;a=[];a.push(g[r.bestPosition]);a.push(B(s.clone()));a.push(C(s.clone
()));a.push(s.clone());for(b=0;b<p.length;b++)u[b]=1/p[b];for(b=d=
0;b<u.length;b++)d+=u[b];for(b=0;b<k.length;b++)k[b]=u[b]/d;for(b=1;b<k.length;b++)k[b]
+=k[b-1];for(b=4;b<l;b++)a.push(g[I(Math.random())]);g=a;a=[];for(b=0;b<l;b++).
9>Math.random()&&a.push(b);a.shuffle();b=0;for(d=a.length-1;b<d;b+=2)f=a[b],e=a[b
+1],child1=A("next",f,e),child2=A("previous",f,e),g[f]=child1,g[e]=child2;for(a=0;a<l;a++).
01>Math.random()&&(.5<Math.random()?g[a]=C(g[a]):g[a]=B(g[a]),a--);D()}return
{distance:t,route:s}},setPopulation:function(c){l=c},setIterations:function(c)
{x=c},getPopulation:function(){return l},
getIterations:function(){return x}}}();
Größe:
nur 3 Kilobyte

Zusatznutzen:
graphische
Repräsentafon der
Regal-­‐Datensätze
jederzeit
aktualisierbar
interakfve
Anwendungen
möglich
Darstellung als GUI
nutzen!

interakAve
Lager-­‐
Auswertung
als Heatmap
Klick aufs
Regal zeigt
Zeitreihe und
Durchsatz-­‐
Zahlen

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Fazit

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Fazit Praxis-Beispiel
• Die angewandten Methoden wären aufgrund
ihrer Komplexität mit FileMaker Bordmitteln
nicht abbildbar gewesen
• Die Algorithmen zur Lösung der Aufgabe
konnten als fertige Bausteine genutzt werden
• Durch die Verwendung von JavaScript ergab
sich eine einfache und effiziente Möglichkeit
für die Einbindung der Algorithmen in die
eigene Lösung

Neue Horizonte

The Power of JavaScript
neugierig
geworden...?

Danke für
Euer Interesse

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Download
• Vortragsfolien
• Demo-Datei JavaScript in FileMaker
• http://blog.marcel-more.de/
• Konferenz-Server
@mmore

Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Vielen Dank unseren Sponsoren
Danke für das Bewerten dieses Vortrages