FMK2015: The Power of JavaScript by Marcel Moré

1.072 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
0 Kommentare
3 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.072
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
8
Aktionen
Geteilt
0
Downloads
46
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

FMK2015: The Power of JavaScript by Marcel Moré

  1. 1. Marcel Moré The Power of JavaScript FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com The Power of JavaScript Marcel Moré
  2. 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
  3. 3. The Power of JavaScript
  4. 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. 5. Marcel Moré The Power of JavaScript FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com JavaScript als Sprache
  6. 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. 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. 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. 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. 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. 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. 12. Marcel Moré The Power of JavaScript FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com Warum JavaScript in FileMaker nutzen?
  13. 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. 14. Marcel Moré The Power of JavaScript FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com typische Szenarien
  15. 15. • 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
  16. 16. Marcel Moré The Power of JavaScript FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com komplexe GUIs Quelle:  h(p://fullcalendar.io/
  17. 17. 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/
  18. 18. Marcel Moré The Power of JavaScript FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com Visualisierung Quelle:  h(p://www.flotcharts.org/
  19. 19. Marcel Moré The Power of JavaScript FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com Visualisierung Quelle:  h(p://www.flotcharts.org/
  20. 20. Marcel Moré The Power of JavaScript FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com Visualisierung Quelle:  h(p://www.flotcharts.org/
  21. 21. Marcel Moré The Power of JavaScript FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com Visualisierung Quelle:  h(p://sigmajs.org/
  22. 22. Marcel Moré The Power of JavaScript FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com Visualisierung Quelle:  h(p://mbostock.github.io/protovis/
  23. 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. 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. 25. Marcel Moré The Power of JavaScript FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com Demo
  26. 26. Marcel Moré The Power of JavaScript FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com Wo liegen die Herausforderungen?
  27. 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. 28. Marcel Moré The Power of JavaScript FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com Einbindung in FileMaker
  29. 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. 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. 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. 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. 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. 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!
  35. 35. Datenübergabe FileMaker                        JavaScript
  36. 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>
  37. 37. 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>
  38. 38. Datenübergabe FileMaker                        JavaScript
  39. 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. 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&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/
  41. 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. 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. 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. 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. 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. 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. 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. 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. 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... !
  50. 50. 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" ) ]
  51. 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. 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. 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. 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. 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. 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. 57. Marcel Moré The Power of JavaScript FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com Fazit
  58. 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. 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. 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. 61. Marcel Moré The Power of JavaScript FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com Praxis-Beispiel
  62. 62. Marcel Moré The Power of JavaScript FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com Die Aufgabe
  63. 63. B-­‐35 B-­‐25 B-­‐15 B-­‐5
  64. 64. LagerplätzeReihenfolge  auf  Beleg Reihenfolge  der  Picking-­‐Route  im  Lager
  65. 65. Laufstrecke 99  m Reihenfolge   vom  Beleg geht  das  evtl.   noch  besser?
  66. 66. 54  m Laufstrecke Op7mierung 99  m Reihenfolge   vom  Beleg op7mierte   Reihenfolge 46  %
  67. 67. 280  m 181  m Laufstrecke Reihenfolge   vom  Beleg op7mierte   Reihenfolge Op7mierung 35  %
  68. 68. 784  m 458  m Laufstrecke Reihenfolge   vom  Beleg op7mierte   Reihenfolge Op7mierung 42  %
  69. 69. 74  m 33  m Laufstrecke Reihenfolge   vom  Beleg op7mierte   Reihenfolge Op7mierung 55  %
  70. 70. 70.000Belege pro Jahr Op#mierung  würde  sich  schon  lohnen... 8 MioMeter Laufstrecke
  71. 71. Marcel Moré The Power of JavaScript FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com Wo ist das Problem?
  72. 72. Marcel Moré The Power of JavaScript FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com kann man nicht einfach alle Kombinationen ausprobieren?
  73. 73. 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
  74. 74. 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
  75. 75. Marcel Moré The Power of JavaScript FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com Wie soll das in FileMaker lösbar sein?
  76. 76. Marcel Moré The Power of JavaScript FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com Ist es überhaupt lösbar? ?
  77. 77. Marcel Moré The Power of JavaScript FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com laut Recherchen gibt es ein paar ausreichend gute Näherungsverfahren... !
  78. 78. githubjavascript tsp solver
  79. 79. Quelle:  h(ps://github.com/parano/GenefcAlgorithm-­‐TSP
  80. 80. Marcel Moré The Power of JavaScript FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com Demo
  81. 81. 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!
  82. 82. Marcel Moré The Power of JavaScript FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com Was am Ende dabei herauskam...
  83. 83. 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
  84. 84. 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!
  85. 85. Marcel Moré The Power of JavaScript FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com Die Lösung
  86. 86. 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
  87. 87. X,  Y,  Breite,  Tiefe,   Ausrichtung Rechteck-­‐ Koordinaten  für   SVG-­‐Template
  88. 88. Rechteck-­‐ Koordinaten   Wände Rechteck-­‐ Koordinaten   Türen Grundriss als  SVG
  89. 89. SVG-­‐Templates
  90. 90. SVG  im   Webviewer Grundriss Regale Wegpunkte graphische  RepräsentaAon   der  Regal-­‐Datensätze jederzeit  aktualisierbar!
  91. 91. Script  erzeugt 1.  Grundriss  als  Grafik 2.  Routentabelle  über   JavaScript
  92. 92. 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
  93. 93. JavaScript  bekommt  die   Regal-­‐KombinaAonen   und  findet  für  alle   Einträge  die  kürzeste   Route per  Pixel-­‐Suche
  94. 94. 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
  95. 95. alle  Verbindungen von  Regal  zu  Regal durch   Pathfinder-­‐ Algorithmus   automaAsch   ermiBelt inkl.  Längen
  96. 96. Routentabelle mit  allen   Verbindungen  und   Strecken-­‐Längen von  Regal  zu  Regal =  56.953   Datensätze für  338  Regale
  97. 97. Routeneintrag mit  Verbindung   von  Regal  zu  Regal Regale Koordinaten für  Pfad in  SVG-­‐Darstellung Länge
  98. 98. Beleg  nach   Posi.onen   sor.ert hier  findet  die  »Magie«  sta;!
  99. 99. Beleg  nach   Routen-­‐ Op.mierung   sor.ert hier  findet  die  »Magie«  sta;!
  100. 100. Knotenpunkte  für  Regale  werden  übergeben Als  Ergebnis  kommen  Knoten  sorAert  zurück JavaScript   berechnet   unterschiedliche   Algorithmen
  101. 101. JavaScript  Template in  der  FileMaker   Datei
  102. 102. 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
  103. 103. Zusatznutzen: graphische   Repräsentafon  der   Regal-­‐Datensätze jederzeit   aktualisierbar interakfve   Anwendungen   möglich Darstellung  als  GUI   nutzen!
  104. 104. interakAve   Lager-­‐ Auswertung   als  Heatmap Klick  aufs   Regal  zeigt   Zeitreihe  und   Durchsatz-­‐ Zahlen
  105. 105. Marcel Moré The Power of JavaScript FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com Fazit
  106. 106. 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
  107. 107. Neue Horizonte
  108. 108. The Power of JavaScript neugierig geworden...?
  109. 109. Danke  für Euer  Interesse
  110. 110. 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
  111. 111. 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

×