Dashboard EntwicklungJacob Groß

MARKER BEREITLEGEN„Meinen Namen kennen sie ja schon (oder sagen), ich bin Auszubildender bei Jochen Schweizer und ich stelle ihnen heute die entwicklung eines … vor. Da der Titel ziemlich lang ist, einigen wir uns auf Dashboard Entwicklung

1

Vorstellung

Einleitung in das Thema

Analyse

Entwurf

Implementierung

Agenda

Fazit

Gleich stelle ich meine Firma vor, dann steigen wir in das Thema ein; Dort gehe ich dann auf die Analyse ein, dann werde ich den Entwurf und die Implementierung vorstellen. Zum Schluss ziehe ich noch ein Fazit.

2

JS Technology Solutions

We

Code

Experiences.

- JSTS => Dienstleister, -- IT Mitarbeiter, ich arbeite am webshop von Jochen Schweizer

3

Einleitung in das Thema

Da wir das nun geklärt hätten, lassen Sie mich zeigen wie man als Mitarbeiter die Verkäufe aus dem Online-Shop anschauen kann

4

- Das sieht auch von hier unübersichtlich und unlesbar ausAußerdem:- Zu viele private Daten

<Nachträglich Zensiert>

5

Was könnte man machen um die Daten besser darzustellen? Erste Maßnahme: auf einem richtig großen Smart TV darstellen

6

Außerdem benutzen wir Slack zum Kommunizeiren, also Nachrichten von Slack?

7

Dazu noch den Build Status von Jenkins, ein Tool für die kontinuierliche Integration, damit wir schneller sehen wann er fertig ist oder ob es Fehler gab?

8

Und die Tickets von Jira, unserem Projektmanagement Tool

9

Auch wenn das Bild jetzt wie Werbung für ein Apple Produkt aussieht; Das ist ein Raspberry Pi – auf dem soll das Projekt laufen und wird mir bereitgestellt

10

AnalysePhasen · Projektkosten · Amortisation · Nutzwert

Nachdem wir nun also die Anforderungen kennen, komme ich zur Analyse

11

913 35 11

0 10 20 30 40 50 60

Analyse Entwurf Implementation

Qualitätsmanagement Deployment Dokumentation

Projektphasen - „Zeitstrahl“Wie man sieht: Implementierung nimmt am meisten Zeit ein, danach kommt Entwurf. Warum Entwurf so viel einnimmt, erkläre ich später(aufpassen, sind keine 70!)

12

Projektkosten

NACHFRAGEN – Ist es groß genug??Azubi …€ - blau Mitarbeiter 25€ - rotRessourcen 15€ - grün

10.320€h/𝐽𝑎ℎ𝑟 durch 1.760hJahr = FLIPCHART

14

Projektkosten

Entwicklung 70 h · … €

Fachgespräch 3 h · 40,00 €

Abnahme 1 h · 40,00 €

= …,.. €

= 120,00 €

= 40,00 €

……,.. €

40€ nochmal auf Flipchart

15

Automatisch

• Echtzeit

• Keinerlei Aufwand

• Ausfälle sehr gering

Manuell

• 2x pro Woche

• Zu großer Aufwand

• Ausfallanfällig

Nutzwert

Zuerst Manuell

16

Amortisation

…… €

624ℎ·40€

≈ 𝐗𝑾𝒐𝒄𝒉𝒆𝒏

2x pro Woche · 6h

𝑇𝑎𝑔= 𝟔𝟐𝟒

h

𝐽𝑎ℎ𝑟Annahme

17

EntwurfGUI · Recherche · API · Service · DB

18

Entwurf• Prinzipien des Datenschutzgesetzes

=> So viel wie notwendig, so wenig wie möglich

• Atomare Services => Flexibilität | Verfügbarkeit | Performance

- Projekt soll aus möglichst atomaren Services bestehen für maximale- Verkäufe werden auf Karte angezeigt; Bei Klick auf Marker sollen Details zum Kauf angezeigt werden

19

Kein Widget System

Recherche

WidgetsAktualitätArchitektur

Nicht mehr weiterentwickelt

- Anfangs Strapi gefunden, ein MVC Framework; => Kein Widget System- Dashing, ist geschrieben in Ruby und Widget System; Aber...- (wenn jmd frägt -> Architektur da mozaik auf node / mvc ist)

20

Entwurf

„Orders“Shop API

DB DB

Mozaik

JSONJSON

Website

!!Mit Finger führenZuerst Shop <-> Orders:- Schnittstelle soll möglichst wenig Arbeit machen, damit die Server nicht belastet

werden (vorallem bei Stoßzeiten wie Weihnachten)- Orders konvertiert Daten und speichert sie

21

Datenmodell

Einfach gehalten, da Produkte usw direkt als Objekt gespeichert werden könnten und somit flexibel sind- Tabelle Count ist quasi ein Cache der Orders um rechenaufwand zu reduzieren- Produkte werden nicht ausgelagert, da der Service Produkte nur ausgeben, aber

nicht verwalten soll- => Weniger Rechenaufwand auf kosten von mehr Speicherplatz (was durch Gzip

und co aber minimiert wird von MongoDB intern)- => Einfach auf mehr Speicherplatz zu upgraden als auf schnellere CPU- Da wir mit Node arbeiten und Objekte in JavaScript haben, bietet es sich an eine

MongoDB zu nutzenda man Objekte direkt speichern kann

22

Implementierung

Einfache Implementierung dank Node, NPM und der Community hinter Mozaik

23

Shop API

Pipeline = Einstiegspunkt für HTTP Anfragen; Geschützt durch automatischGeneriertes Passwort, welches idealerweise monatlich gewechselt wirdSchloss = Secure Flag = Kommunikation ausschließlich per TLS, d.h. läuft nur verschlüsselt ab

<Bild entfernt>

24

Service „Orders“

• Caminte (ORM)

=> Generiert per CMD Routen zu Models

• Express JS

• Xml2js

• Request

• Bluebird

• Cron

Von der Community bereitgestellte NPM Module erleichtern das LebenMan muss nur noch richtig zusammensetzen

26

Anpassung Mozaik

• Mozaik-ext-slack

• Mozaik-ext-jenkins

• Mozaik-ext-jira

• Mozaik-ext-Landkarte

➢ React Element <Landkarte>

➢ React-

NPM magic bleibt uns auch bei Mozaik erhalten, die installation war einfachDennoch mussten sie zum teil angepasst werden auf eigene bedürfnisse

Richtige arbeit war die Landkarte, welche als eigenes react element fungiertBenutzt react leaflet

27

- Popups werden erst beim aufrufen befüllt um den RAM nicht zu fluten (wenig vorhanden beim TV)

28

- Es wird herausgezoomt und Popup bleibt geöffnet, bis der nächste Verkauf komm- Zoom an standort nach FIFO prinzip (first in first out)

29

- Jenkins Build Status

30

Fazit

31

• a

•React Versions-Chaos

• TV Monitor debuggen ist unschön

•Open-Source Community ist wertvoll

Fazit

- Manuelles Deployment- Verschiedene React Versionen (react-leaflet will neuere als mozaik hat)- Window.alert ist nicht toll zum debuggen- Dank Community hinter Mozaik einfaches plug&play, allgemein auch beim Service

dank den ganzen npm modulen

32

Ausblick

Microservices-Cloud-Infrastruktur

- Service nicht nur für das Dashboard verwendet, sondern z.B. für „Kürzlich gekauft“ usw

- Automatisches deployment- Fehlermeldungen anders ausgeben / logging service

33

Vielen Dank!

Ich danke Ihnen fürs Zuhören und freue mich auf Ihre FragenCI => Zusammenfügen von Komponenten zu einer Anwendung; automatisch bei commitKlasse => Abbildung von realen Objekten in Software objekte; Attribute und MethodenAtomar => So klein wie möglich = Unabhängigkeit; ganzes Programm stürzt nicht ab wenn ein Teil abstürztDatenschutz => Verbot mit Erlaubnisvorbehalt, Datenvermeidung und Datensparsamkeit, Zweckbindung, TransparenzDatenbanktypen => Dokumentenorientiert (Mongo), hierarchisch (XML), relational (SQL) und Objektorientiert (db4o)Ressourcen => Strom, Getränke, Arbeitsplatz, Laptop

34