JavaScript hat eine bewegte Geschichte hinter sich. Manch einer erinnert sich diesbzüglich vielleicht an die ersten Gehversuche für kleinere Spielereien auf Webseiten. Inzwischen hat sich JavaScript nicht nur zu einer ernstzunehmenden Programmiersprache gemausert, sondern gehört auch zu den Top 10 der meist genutzten Sprachen.
Tausende von frei verfügbaren Web-Frameworks auf JavaScript-Basis bieten einen reichhaltigen Fundus zur Entwicklung oder Ergänzung von eigenen Anwendungen.
Darüberhinaus gibt es nicht nur Client-basiert sondern auch Server-basiert mächtige Werkzeuge, mit denen sich unterschiedlichste Anwendungsszenarien – vom Number-Crunching bis zu hochskalierbaren Server-Diensten – effektiv umsetzen lassen.
Wie man sich diese Möglichkeiten innerhalb von FileMaker zu Nutze machen kann, erklärt dieser Vortrag anhand von Beispielen – wie z.B. interaktive Kalender, graphische Auswertungen, Batch-Verarbeitung von umfangreichen Berechnungen.
Aus der Praxis wird ein Beispielprojekt vorgestellt zur Lösung des TSP (Traveling Salesman Problem), wo die Möglichkeiten von JavaScript effektiv in eine FileMaker-Anwendung integriert wurden. Es werden Herangehensweisen erläutert und frei verfügbare Bibliotheken für unterschiedliche Anwendungszwecke vorgestellt.
Interessant für den FileMaker-Entwicker sind die unterschiedlichen Integrations-Möglichkeiten von JavaScript in eigene Anwendungen. Hierzu werden alternative Integrations- und Schnittstellen-Methoden vorgestellt, die über die Standard-Möglichkeiten des Webviewers hinausgehen.
Aus der Praxis wird ein Beispielprojekt vorgestellt zur Lösung des TSP (Traveling Salesman Problem), wo die Möglichkeiten von JavaScript effektiv in eine FileMaker-Anwendung integriert wurden.
FMK2019 Layout und Eigene Menüs-Management by Jörg Köster
FMK2015: The Power of JavaScript by Marcel Moré
1. Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
The Power of JavaScript
Marcel Moré
2. 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
4. 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:
5. Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
JavaScript als Sprache
6. 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
7. 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
8. 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
9. 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
10. 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
11. 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
12. Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Warum JavaScript
in FileMaker nutzen?
13. 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...
14. Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
typische Szenarien
18. Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Visualisierung
Quelle: h(p://www.flotcharts.org/
19. Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Visualisierung
Quelle: h(p://www.flotcharts.org/
20. Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Visualisierung
Quelle: h(p://www.flotcharts.org/
21. Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Visualisierung
Quelle: h(p://sigmajs.org/
22. Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Visualisierung
Quelle: h(p://mbostock.github.io/protovis/
23. Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Visualisierung
Quelle: h(ps://www.jasondavies.com/parallel-‐sets/
24. 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/
25. Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Demo
26. Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Wo liegen die
Herausforderungen?
27. 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)
28. Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Einbindung in FileMaker
29. 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
30. 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>
31. 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>
32. 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
33. 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
34. 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!
36. 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>
39. 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
40. 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¶m=" + 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/
41. 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/
42. 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
43. 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.
44. 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
45. 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
46. 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
47. 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;
}
48. 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 ]
?
49. 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...
!
51. 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 !
52. 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
53. 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
54. 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
55. 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
56. 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
57. Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Fazit
58. 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 ✔ ✔ ✔
59. 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
60. 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!
61. Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Praxis-Beispiel
62. Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Die Aufgabe
75. Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Wo ist das Problem?
76. Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
kann man nicht einfach alle
Kombinationen ausprobieren?
77. 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
78. 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
79. Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Wie soll das in FileMaker
lösbar sein?
80. Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Ist es überhaupt lösbar?
?
81. Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
laut Recherchen gibt es
ein paar ausreichend gute
Näherungsverfahren...
!
86. Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Demo
87. 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!
88. Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Was am Ende dabei
herauskam...
89. 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
90. 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!
91. Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Die Lösung
92. 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
93. X, Y, Breite, Tiefe,
Ausrichtung
Rechteck-‐
Koordinaten für
SVG-‐Template
98. 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
99. JavaScript bekommt die
Regal-‐KombinaAonen
und findet für alle
Einträge die kürzeste
Route
per Pixel-‐Suche
100. 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
111. Marcel Moré
The Power of JavaScript
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Fazit
112. 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
116. 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
117. 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