OrgaMon-next

• Dies ist die Konzept-Sammlung für die nächste Version des OrgaMon "OrgaMon 9"
• OrgaMon setzt wo immer möglich die Programmiersprache "Object-Pascal", auch bei Dingen die in Wirklichkeit mit "JavaScript" implementiert werden müssen (CrossCompile).
• Als Compiler wird nur noch Free-Pascal eingesetzt, Wegfall von "Delphi"
• Es werden nur noch Open-Source Komponenten eingesetzt
• Die mit der Delphi-IDE erstellte UI entfällt, der cOrgaMon übernimmt die Funktion eines WebServers
• cOrgaMon wird vorrangig auf Linux Maschinen installiert, unter systemd als (Type=notify) mit "READY=1" nach lesen der ini
• der eCommerce-Kernel soll Schritt für Schritt Kopplungspunkte bekommen wobei Kunden dann Anpassungen machen können. Das Customizing sollte aber auch wieder Open-Source sein und auch Test-Cases beinhalten so dass es für andere Kunden Regeressionsfrei bleibt.
• Die Lazarus-IDE soll auch für Kunden eine Möglichkeit sein, auf den Code einfluss zu nehmen. Dabei soll die neue Paket-Verwaltung von Lazarus den OrgaMon mit wenigen Klicks "installieren" können

OrgaMon HTTP/2

• cOrgaMon ist ein https:// Server nach HTTP/2 Standard ohne UI
• eine Instanz von cOrgaMon kümmert sich um eine langbestehende TCP-Clientverbindung (KEEP_ALIVE)
• die Verbindung bleibt ständig bestehen
• Test https://tools.keycdn.com/http2-test

Implementierung TCP

• unit HPACK.pas erstellen (Quelle github)
• testen mit https://github.com/http2jp/hpack-test-case (uses json)
• unit HTTP2Server.pas erstellen (https://github.com/nghttp2/nghttp2)
• ev. auch mit https://python-hyper.org/h2/en/stable/index.html und Kopplung über das WSGI Interface

Zertifikat

• mit openssl erst mal key.pem und cert.pem erstellen
  • openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -subj '/CN=localhost'
• https://letsencrypt.org
• https://github.com/certbot/certbot

Sicherheit

• zusammen mit dem Login soll Certifikat Pinnig verwendet werden
  • https://tools.ietf.org/html/rfc7469

OrgaMon UI

User Interface (UI) Ideen

ein Projekt, das zum Ziel hat den OrgaMon mit einer Plattform-übergreifenden GUI anzubieten

farbige Tabs

• Tab sind erst mal nicht da, können aber aus einem Suchbegriff oder einem Befehl frisch erzeugt werden. Wird z.B. ein Vertrag angewendet entstehen ev. ganz viele neue Beleg, ein Beleg wir als ein einzelner Tab angezeigt.
• Standard-Aktionen sind auf Tabs anwendbar und können als transaktion auf Gruppen von TAbs angewendet werden.
• Eine aktuell eingerichtete Tab-Gruppe (3 Personen und 2 Beleg und 1 Vertrag) kann in einer Tab-Historie gespeichert werden.
• Tab-Favoriten gibt es auch, auf die "Umgeschaltet" werden kann aber auch "dazugeladen" werden kann.
• man kann mehrere Belege öffnen und gleichzeitig bearbeiten. Dazu "Zieht" man sich einen neuen Tab. Tabs aus der selben Gruppe haben die gleiche Farbe und sind immer zusammen angeordnet (Gruppe schliessen).
• Es gibt einen Neu Tab.
• Ein Langer gehaltener Klick auf einen Tab erzeugt einen "Drag"-Event
• https://addons.mozilla.org/de/firefox/addon/tab-kit/

Tab-Funktionen

• Anklicken: Der Tab-Inhalt kommt nach vorne, jetzt erst wenn der TabInhalt sichtbar ist wird das kleine "close" sichtbar.
• Schliesst man den Browser mit offenen Tabs muss am nächsten Tag ein reconnect erfolgen mit allen Inhalten parat!!!

Progressbereich

• zeigt zentral aktuelle Wartezeiten an, im Hilfehinweis oberhalb laufen Log meldungen
• ich bin unsicher, ob dies durchführbar ist, aber ich will eine Unstoppable GUI die einfach nur Anforderungen an eine Exekutive weitergibt. In dem Progressbereich stapeln sich einfach Aufgaben, die im Moment am laufen sind und noch nicht abgeschlossen (Beispiele Dafür: Tagwache auf einem Server, Tagesabschluss auf einem Server, Anwendung von Verträgen usw.)

Suchbereich

OrgaMon ist (wieder) über Hotkeys steuerbar: <ctrl>PN macht "Person" "neu" der Focus steht beim Vornamen usw.

SVG woimmer es geht

• wegen DPI Awareness und Size Awareness sollten immer SVG eingesetzt werden, die der Browser zoomt

blauer Aqua-Button

der Start-knopf des OrgaMon, hier kommen die ganzen früheren Menü Möglichkeiten

UI Implementierung

• 22.12.2016: Das Konzept des OrgaMon 9 steht:
• GUI ist ...
• immer ein Firefox-Client ab Rev. 50+ (KEINE AUSREDEN, KEIN EDGE, KEIN CHROME, einfach eine Blank Screen in dem Fall!! PUNKT)
• immer https:// (HTTP/2)
  • immer window.isSecureContext
• immer html5 und JavaScript, immer generiert aus eigenen Quellen, nach Möglichkeit keine Meta-Ebene auf dem Client, alles direkt und "nativ"
• kein HTTPS Server dazwischen (z.B. Apache oder nxing)
• eigene Session Verwaltung über die Datenbank
• Die Bedienelemente sollen ganz einfach beginnen und dann Schritt für Schritt mächtiger werden

Asynchrone UI

• Die UI darf durch Kommunikation mit dem Server nicht geblockt werden
  • https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox/Message_Manager/Message_manager_overview
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

erste Schritte

• ein Fenster mit einer Schaltfläche:

offene Fragen:

• Wie das lokale Dateisystem angesprochen werden soll weiss ich noch nicht
• Wie das Design der Fomulare erfolgen soll weiss ich noch nicht (also mit welcher IDE, XML Definitionen, ...) Formulare sollen jedoch in der Datenbank stehen
• In einer Übergangsphase soll ein Webkit in den OrgaMon.exe integriert werden (der OrgaMon wird z.B. auch einen Magnetstreifen scannen müssen, oder Datensicherung machen, oder den Computernamen abfragen, oder?)

HTML5-
Client  <--https/2--> systemd Socket Activation <---sd_listen_fds()---> hOrgaMon Web Server    <--fbclient----> FirebirdSQL
                                                                        (links libsystemd.so)   +--file I/O---> .\OrgaMon\

Das User-Interface-Grundgesetz

Im Zentrum einer GUI müssen unverhandelbare Grundrechte des Benutzers / Bedieners stehen. Auswüchse die es im Moment gibt (Wir sind immer noch in der IT-Steinzeit) müssen verhindert werden.

• Beispiel: Edge: Während man in der Adresszeile des Browsers ist wechselt der Eingabefokus in ein anderes Control
• Beispiel: Delphi: Suchbegriffe werden immer vervollständigt, will man nur nach "S" suchen, ist die Eingabe nicht möglich. "S" <Enter> sucht nach "String", da "S" nach "String" vervollständigt wird.
• Beispiel: Man Klickt auf ein Button, jedoch wenige ms zuvor überdeckt ein unmotiviert eingeblendetes Fenster den Button, nunmehr verarbeitet dieses neue Fenster den Click auf einen zufällig deckungsgleichen Button. Und das obwohl eine gewolltes Anklicken gar nicht möglich ist.

§1 Klickbarkeit

Ist ein Text oder ein Bild oder ein Icon anklickbar, so muss es in einer deutlich sichtbaren Weise grafisch anders ausgeprägt werden, das dies deutlich wird. Bei einem MoveOver muss sich auch der Zeiger ändern. EIn Button muss von einem immer gleichen Rahmen umfasst sein, inerhalb des Textes muss "["Begriff"]" stehen oder #Begriff. Unterstreichen ist keine erlaubte Link-Symbolisierung.

§2 Fokus

Der Eingabefokus darf niemals programmgesteuert dem aktuell sichbaren Eingabefeld entzogen werden. Das Einblenden eines Meldungsfensters während der Benutzer eine Eingabe tätigt ist ein solcher Fokusentzug. Ein Notifikationsbereich ist erlaubt.

§3 Eingabesicherheit

Direktes Abändern/Verfälschen der Eingabe, also automatisches Vervollständigen, automatisches Setzen eines Punktes usw. ist nicht erlaubt.

§4 Sichtbarkeit

Eingabebereiche dürfen nicht unmotviert überdeckt oder verschoben werden. Bei einer Grössenänderung muss das Zentrum (=Position des Eingabe-Cursors) beibehalten werden. Info Texte die den Sinn des aktuellen Eingabefeldes beschreiben müssen oberhalb des EIngabefeldes stehen, es muss damit gerechnet werden dass ein Touch Keyboard direkt unter dem Eingabefeld eingeblendet wird.

§5 Klicksichtbarkeit

Ein Klick auf Controls, die erst wenige ms sichtbar sind, darf nicht als eingabe gewertet werden. ALso wenn ein neu sichtbares Fenster eine alte GUI überdeckt und sich der Benutzer für einen Klick entschieden hat darf das neue Fenster diesen Klick-Event nicht verarbeiten.

§6 Reaktivität

Die GUI darf niemals auf Ergebnisse des Arbeitsprozesses warten, der Job wird an der Theke abgegeben, die GUI ist sofort wieder aktiv.

§7 Feedback

Ausgelöste Aktionen muss ein Feedback auf der GUI erzeugen

§8 Pausen

Jede Eingabe muss zurückgestellt werden können. Eingaben auf anderen Formularen müssen dann möglich sein

§9 Variante

Jedes Formular muss dupliziert werden können. Es muss Testeingabe / Versuche verkraften ohne dass eine Aktion durchgeführt wird, erst anschließendes "Buchen" führt zur Aktion oder eben "Abbruch"

§10 Rückgängig

Jede lokale Eingabe die noch nicht "abgeschickt" ist, muss rückgängig gemacht werden können

Client Konzepte

Retry, Reconnect Fähig

• immer eine lang stehende Keep-Alive TCP Verbindung, mit "Full Reconnect"- und "Client-IP-Change"- Möglichkeit
• Ein kleines Symbol oder eine Uhr, oder ich weis noch nicht, soll symbolisieren wenn es sich um eine frisch aufgebaute Verbindung handelt
• Es. soll eine Reconnect auch visualisiert werden, oder auch ein Verbindungsende / Abbruch
• In der Anfangszeit brauche ich aber ein Feedback das mir beweist dass NICHT immer neue TCP verbindungen aufgebaut werden
• Der HTTP/" Server soll eine Modus haben, wo er nur EINE Verbindung EINER IP akzetiert

Paralleles Arbeiten

• Klar ist: Ein OrgaMon Prozess ist für eine dauerhafte TCP/Connection zuständig
• Möglicherweise startet dieser Prozess auf dem Server SubProgramme mit langen Laufzeiten
• Rückmeldungen dieser lang laufenden Prozesse ev. über https://developer.mozilla.org/de/docs/Web/API/Push_API

Datenhaltung

• Tabellenwerte oder Eingabefelder sollen auf der Client Seite bereits mit dem HTML initial gehalten werden
  • Die JSON Daten sind Teil des HTML und wandern in die "Lokale Datenbank"
  • Dazu zusammen erhalten Sie einen ETAG, dieser kann einzeln abgefragt werden, das Resultat ist eine Info ob sich dieser ETAG geändert hat
  • Ev. auch ein COntext-ID mit einem ETAG, also wenn BEIDE gleich geblieben sind ist die Version in der Datenbank noch aktuell
  • Der Server soll bei Datenabfragen "ETAG" fähig sein, insbesondere für Daten-Requests, Also: Der Client frägt ein Dataset ab, ist es unverändert bekommt er nur das ETAG, das ist in der lokalen DB
• Server liefert neue Daten nicht im HTML sondern in der Form, http://abral.altervista.org/apps/libri/elibri.json.php
• Client benutzt eine Datenbank, die allen TABs zur verfügung stehen
  • "Lokale Datenbank" ist https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
  • nur im Notfall frägt er es nochmals an, darf aber "kein Thema" sein und legitim (Full reload, oder was weis ich ...)

sagen wir mal, wir haben:

type
 DataModuleeCommerce = class(GhostAbleInterface)
 
 published
  TodaySettings : TStringList;
 end;

wir sagten ja ein lokaler OrgaMon kann auf TodayStrings zugreifen, als wäre das lokal

fetch()

https://fetch.spec.whatwg.org/

• Alle Server Anforderungen gehen sofort zunächst in einen Sync-Buffer
• Wenn mögich wird der Sync-Buffer Asynchron abgearbeitet
• Mit dem Server wird per fetch() gesprochen
• Ein Fetch kann misslingen
  • IP Change
  • Server Process Crash
  • Client Internet Connection Gab
  • Dies darf aber niemals zum Problem werden

Pascal -> JavaScript

• Die Tatsache "JavaScript" auf der Clientside wird der Lazarus-IDE scheinbar verheimlicht
  • Es muss also der Pascalcode in JavaScript umgewandelt werden
  • Für den Client muss eine Art Code-Lib zur Verfügung stehen, die Pascal rufen kann und umgekehrt
• Die IDE soll denken/vorleben das Client-Seitig auch "Pascal" gesprochen wird
  • Debugging: Hier muss der WebClient in den remote-Debugging Modus gebracht werden
    • https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging
  • Es könnte die Infrastruktur der "Source maps" verwendet werden, also "komprimierte" Zeilen des JavaScript Quellcodes zeigen auf die entsprechenden Zeilen, die in FreePascal formuliert sind. Es werden also "fake"-Source-Maps zur Verfügung gestellt, so das eine korrekte 1:1 Beziehung zwischen Pascal und Javascript bestehen kann.
  • FreePascal und die Lazarus IDE müssen lernen, dass Teile vom Quelltext "remote" executables sind
  • FreePascal Lazarus muss Möglichkeiten bieten von einem eintretendem JAvaScript Breakpoint gerufen zu werden

• • Es soll alles auch in der Lazarus IDE mit Break-Points programmierbar sein, die IDE soll ein Verständnis haben welche Zeile welchen Code verbirgt
• Die IDE sollte den Client-Side Part ev. farblich hinterlegen?!
• Es muss so sein, dass eine Unit weiterhin ServerSide- / ClientSide- Code mischen kann

program SimpleCalculator;

var
 Panel : TPanel;
 Button1 : TButton;
 Button2 : TButton;
 
procedure Panel.OnClick;
begin
 beep; // This goes to JavaScript Client Code
end;

procedure Button1.OnClick;
begin
 Button2.Disable; // This goes to JavaScript Client Code
end;

procedure Button1.OnClick;
begin
 Button2.Disable; // This goes to JavaScript Client Code
end;

begin
 App.add(Panel);
 App.add(Button1);
 App.add(Button2);
end.

• die IDE soll ein Verständnis haben dass auf Client-Seite nicht "alles" Programmierbar ist
• aus den JavaScript Parts soll über einen Dispatcher der nonGUI Code aufbar gemacht werden
• In einer Datenbank soll das Know-How für die Web Objekte gespeichert sein

Roadmap

aktuell in Arbeit

• HTTP/2 HPACK

kommende Aufgaben

• HTTP/2 openSSL TLS 1.2 Connection
• HTTP/2 Multiplexer
• HTTP/2 erster statischer Content "/"
• HTTP/2 erste Login Seite
• erster OrgaMon-Dialog ist "System"
• "Eingabefeld",
• "Tabelle"

Links

• http://wiki.lazarus.freepascal.org/
• https://developer.gnome.org/gtk3/stable/gtk-broadway.html
• http://www.phoronix.com/scan.php?page=news_item&px=ODgzMA
• http://www.micrel.cz/Dx/
• http://www.foss-group.ch/de/Anwendungen/OSBD/