Eine state of the art Webapp, geschrieben in JavaScript,
beinhaltet mehrere Netzwerk-Operationen Tools. Einige davon sind:

Netzwerk Monitoring: Der Datenfluss, geliefert von SNMP-Exporters, wird vom Prometheus Monitoring Tool zusammen gestellt und vom Dashboard App Backend über REST API abgefragt. Die Daten werden in der App grafisch als Netzwerkschemen bzw. Wetterkarten von Traffik, Temperatur, Feuchtigkeit, usw. dargestellt.

IPAM (IP Adressen Management) / DNS operations tool:
Netzwerk struktur wird als Baum dargestellt. Davon kann der Administrator ein Subnetzwerk auswählen und dem Gerät eine bestimmte IP-Adresse zuweisen. Eingegebene Werte (SNMP / ICMP Fähigkeiten, IP-Adresse, Hostname, etc.) werden in der Datenbank gespeichert und automatisch an den AWS Route
53 gesendet. Dort wird ein DNS und TXT Record erstellt. TXT Record enthält eine Beschreibung des Gerätes und wird von DNS Exporter verwendet.

Alert Monitoring: Applikation Backend mit Hilfe von REST API Anfragen liefert eine Liste von Instanz-Alarmen. Sie werden nach Umgebung / Alarmtyp sortiert und in dem Frontend als gefärbte Info-Tafeln mit zusammen-hängender Information dargestellt.

Auf eine frisch erstellte VPC-Instanz soll folgende Software installiert und konfiguriert werden: Linux Ubuntu 16.04, Vagrant, Nginx, NodeJS, OrientDB, GitLab, Git, Postfix, HumHub, SpagoBI, LifeRay, GruntJS, Bower. Firewall wird konfiguriert, alle unsicheren HTTP-Verbindungen werden auf sichere HTTPS umgeleitet, alle Firmendomäne müssen entspechend in der NGINX-Konfiguration eingetragen und aktiviert. Softwareinstallationsschritte müssen in einem Shell-Skript erfasst werden. Eine Vagrant-Konfiguration wird erstellt, damit Instanzbereitstellung lokal auf dem PC getestet werden kann.

Automatisierte Bereitstellung einer dedizierter AWS EC2

Server-Instanz und Softwarebereitstellung für die Operations Dashboard App ist mit den Terraform und SaltStack Tools implementiert. Dafür werden spezielle Profile erstellt. Das Terraform Profil definiert Instanztyp (OS, RAM, CPUs, usw.) und Parameter, wie IP-Adresse, DNS Name, Sicherheitsregeln, usw. Die SaltStack-Formel bestimmt, welche Software auf der Instanz installiert sein wird. Damit sind die Bereitstellung des virtuellen
Servers und Softwareinstallation voll automatisiert. Die virtuelle AWS EC2 Instanz kann jederzeit zerstört und wieder in der gleichen Konfiguration erstellt werden.

Das Tool ist als ein Linux System Service (daemon) implementiert und funktioniert zusammen mit dem IPAM-Tool der Operations Dashboard App. DNS TXT Record im AWS Route 53 beschreibt jedes Gerät im Netzwerk, welches über eine SNMP, ICMP oder eine andere Fähigkeit verfügt und kann über das Protokoll

benötigte monitoring Werte liefern. Das TXT Record wird
vom Route 53 über AWS REST API abgefragt, geparst und gespeichert. Davon entsteht eine Job-Beschreibung für das Prometheus Net Monitoring Tool, welche automatisch vom Tool abgelesen und bearbeitet wird.

Der bim+ Web Explorer ist ein Teil der bim+ Cloud-

Kollaborationsplattform für Architekten und Ingenieure. Das ist eine plattformübergreifende pure Javascript Webapplikation, ein funktionsreicher 3D-Viewer, der ohne jegliche Plugins in einem Browser läuft. Der bim+ Web Explorer basiert auf neuesten Internet-Technologien und Frameworks wie WebGL, HTML5 / CSS3, EmberJS, ThreeJS, AJAX, REST, JSON, Indexed DB.

Die Webanwendung funktioniert zusammen mit einem
Microsoft® IIS und SQL-Datenbank (im Cloud), wo 3D-CADDaten von Kunden gespeichert sind. Verschiedene Dateiformate wie z.B. Allplan, IFC oder SketchUp werden importiert, serverseitig in ein internes JSON-Format umgewandelt und in der bim+-Datenbank gespeichert. Per eine AJAX-Anfrage werden die serialisierten Daten zurück an den Web Explorer als eine JSON-String geliefert. Hier werden sie geparst und als 3D-Modell in dem Viewport dargestellt. Werden die Daten einmal heruntergeladen, werden sie in einer internen Browser-Datenbank gespeichert, um einen unnötigen Netzwerk-traffic zu vermeiden, das 3D-Modell beim nächsten Aufruf schneller zu rendern und einen Offline-Modus zu ermöglichen.

Alle Objekte in dem 3D-Viewport sind interaktiv. Der Benutzer kann ein beliebiges Objekt auswählen, seine Eigenschaften und 3D-Vorschau in separatem Fenster anschauen, Kommentare, Anhänge oder ein Problem mit dem 3D-Spot an beliebigem Objekt kreieren. Sichtbare Modell-Knoten sowie verschiedene Modell-Typen/ Ebenen können in einem separaten Modell-
Topologie-Fenster ein- oder ausgeblendet werden.
Alle Web-Views (z.B. Modell-Topologie, Projekt-Liste,
3D-Viewport, Objekt-Details, usw.) sind als unabhängige Web- Objekte implementiert und können überall auf der Webseite platziert werden, sobald die Seite dieses bim+ Web-Framework und bim+ Datenaustauschformat verwendet.

Beschreibung

• Das Produkt ist eine pure browser- und plattform übergreifende Javascript + HTML5 Web anwendung, die als Web-Klient- Software für einen CAD-Zeichnungs daten bank zugriff dient. Um die Software einzusetzen ist keine Plugin-Installation nötig. Die Anwendung läuft auf einem Desktop-PC oder iPad ohne jegliche Optimierung.
  Die Kunden-CAD-Zeichnungen (DWG, DXF, usw.) sind in
  der ORACLE-Datenbank in einem Cloud gespeichert. Die
  Anwendung bekommt eine Zeichnungs-ID vom Benutzer
  und macht eine AJAX-Anfrage an den Tomcat Java-Servlet [Server]. Der Server liefert lokalisierte Strings (JSON-Objekte), gerenderte Hintergrund-Bilder (PNG) in bestimmter Auflösung und JSON-Vorder grund objekte zurück. Der Benutzer kann die Zeichnung schieben, skalieren und drehen. Skaliert der Benutzer näher, werden benötigte Teile des vergrößerten Bildes von dem
  Server dynamisch geladen und angezeigt. Vordergrund-Objekte werden dabei als Vektorgrafik gerendert. Alle Objekte werden auf einem 2D-Canvas dargestellt. Aktive Vordergrundobjekte können vom Benutzer selektiert und geändert werden. Es besteht auch die Möglichkeit neue Objekte (z.B. Notizen) zu kreieren. Alle Änderungen werden automatisch in der Datenbank gespeichert. Der Benutzer definiert sichtbare Hinter- und Vordergrund-ebenen der Zeichnung, MouseOver-Highlights,
  Sichtbarkeit und Benutzervorlagen von Objekt-Tooltips und-Labels, Kolorierung / Schraffur / Symbolsets für Objekte und diese werden nach vom Benutzer ausgewählten Wert gefärbt. Alle Benutzereinstellungen werden automatisch in der Datenbank gespeichert und beim Neuladen wiederhergestellt. Bei Bedarf kann die Zeichnung als PNG-Bild in drei Auflösungen
  exportiert, gespeichert oder ausgedruckt werden.
  Forschung und Konzeption, Definition von Technologie und System architektur, Prototyping und UX-Analyse, GUI-Design und Entwicklung bis zur Release-Version des Produktes wurde von mir durchgeführt.

Rolle

• Produkt Designer, System Architekt, Usability Expert, User
  Interface Designer, Webentwickler

Tätigkeiten

• Forschung, User Interface und User Experience Designer,
  HTML5- / JavaScript-Programmierer, Usability Analyse

Beschreibung

• Kunden CAD-Zeichnungen (DWG, DXF, usw.) sind in der ORACLE-Datenbank auf einem Server gespeichert. Die Anwendung bekommt eine Zeichnungs-ID vom Benutzer und macht eine Anfrage an den Server. Der Java-Server liefert gerenderte Bitmap-Bilder (PNG) in bestimmter Auflösung zurück. Der Benutzer kann die Zeichnung schieben, skalieren und drehen. Skaliert der Benutzer näher, werden benötigte Teile des vergrößerten
  Bildes von dem Server dynamisch geladen und angezeigt. Dabei werden Maus-Koordinaten, sowie Rotation, Zoom und Maßstab angezeigt.
• Forschung und Konzeption, Auswahl der Technologie und System architektur, Prototyping, UX-Analyse, GUI-Design und Entwicklung wurde von mir durchgeführt.

Rolle

• Produktdesigner, Prototyper, User Interface Designer, Usability Expert

Tätigkeiten

• Forscher, Grafikdesigner, Programmierer

Beschreibung

• Der fullfeatured GUI Prototyp wurde entwickelt, um das Kunden-Feedback zu sammeln und das in dem Usability-Analyse und Entwicklung der Konzeption der Software UI zu involvieren. Der Prototyp ist eine pure ActionScript 3 AIR Anwendung, die auf touchfähigem 46-Zoll Monitor im Vollbildschirm-Modus repräsentiert wird. Mit dem Prototyp sollte man ein GUI-Prototyp für das Zeichnen mit Fingern testen. Die Anwendung emuliert die Arbeitsfläche der Software mit allen wichtigsten UI-Funktionen und sieht genauso aus, wie die zukünftige UI der CAD-Software. Der Kunde kann damit eine Hintergrundzeichnung laden, Ebenen-Transparenz einstellen, Polygone, Kreise und Kurven erstellen, Stile von Linien und Füllung definieren, „Inline-Objekte“ (wie z.B. Fenster oder Türen)
  hinzufügen, positionieren und verschiedene Parameter mit Hilfe des JIT-Toolbars (just in time toolbar) einstellen. Alle kreierten Objekte können editiert oder gelöscht werden.

Tätigkeiten:

• Rapid Control Prototyper (Flash), Digital MockUp, User Interface Designer, Entwickler

Tätigkeiten:

• Grafik-/UI-Designer, Illustrator, UX-Analyse

Beschreibung

• Für eine allseitige Usability-Analyse der zukünftigen CADSoftware-UI wird ein GUI-Prototyp der Software-Oberfläche benötigt. Der Prototyp musste die Arbeitsfläche und einen touchfähigen Workspace-Manager der neue Generation emulieren.
• Der Prototyp ist eine XML + ActionScript-Anwendung die
  im Vollbildschirm-Modus als eine AIR-Applikation läuft und wird auf einem 46-Zoll-Touchfähigem Monitor präsentiert. Die Benutzeroberfläche (UI) sieht genauso aus, wie die von der zukünftigen Software, und stellt alle Fenster, Menüs und Steuerelemente dar, die man testen soll. Der Benutzer kann die Fenster öffnen oder schließen, positionieren oder dessen Größe ändern, zwischen der freien und angeordneten Fenster-Ansicht
  umschalten, sich mit der Hilfe von Übersichtskarte navigieren oder mit Hilfe von Dropdown-Menüs verschiedene Parameter von Objekten in Fenster definieren.

Tätigkeiten

• User Interface Designer, Flash-Prototyper, ActionScript 3
  Programmierer, Usability Analyse

Tätigkeiten

• Grafik-/UI-Designer, Illustrator

Tätigkeiten

• GUI-Designer, UX-Analyse

Tätigkeiten

• Grafik-/UI-Designer, Illustrator, UX-Analyse

Beschreibung

• Alle Präsentationsdateien wie Dokumente, Bilder, Filme und Folien sind in einer Folder-Struktur (3 Ebenen) auf der Festplatte gespeichert. Das Präsentationstool kann diese Struktur automatisch einlesen, entsprechende Navigationselemente dynamisch generieren, um das Produkt oder Konzept mit Hilfe von einer intuitiven UI auf einem Touch monitor zu präsentieren. Erstmals werden alle Intro filme abgespielt (falls vorhanden). Danach wird die Flash-Intro gezeigt und die Steuer elemente auf
  der Oberfläche platziert.
• Der Präsentierende rotiert das Karussell (erste Navigations ebene in der Struktur) mit einer Wischbewegung (Swipe Touch-Geste), wählt die benötigte Folie aus und lässt sie mit einem Tap-Touch
  im Voll bildschirm-Modus zeigen (zweite Struktur-Ebene). „In der Folie“ kann man vor und zurück mit den Touch-Gesten blättern und Bilder bzw. Filme zeigen (dritte Ebene). Die Filme können pausiert oder auf eine beliebige Stelle gespult werden.
• Das Tool kann mit einem Logitec R400 Presenter entfernt oder auch mit einer Tastatur oder Maus gesteuert werden.

Tätigkeiten

• Grafik-Designer, Programmierer