dashboard entwicklung - s3.eu-central-1.amazonaws.com
TRANSCRIPT
![Page 1: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/1.jpg)
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
![Page 2: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/2.jpg)
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
![Page 3: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/3.jpg)
JS Technology Solutions
We
Code
Experiences.
- JSTS => Dienstleister, -- IT Mitarbeiter, ich arbeite am webshop von Jochen Schweizer
3
![Page 4: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/4.jpg)
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
![Page 5: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/5.jpg)
- Das sieht auch von hier unübersichtlich und unlesbar ausAußerdem:- Zu viele private Daten
<Nachträglich Zensiert>
5
![Page 6: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/6.jpg)
Was könnte man machen um die Daten besser darzustellen? Erste Maßnahme: auf einem richtig großen Smart TV darstellen
6
![Page 7: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/7.jpg)
Außerdem benutzen wir Slack zum Kommunizeiren, also Nachrichten von Slack?
7
![Page 8: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/8.jpg)
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
![Page 9: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/9.jpg)
Und die Tickets von Jira, unserem Projektmanagement Tool
9
![Page 10: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/10.jpg)
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
![Page 11: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/11.jpg)
AnalysePhasen · Projektkosten · Amortisation · Nutzwert
Nachdem wir nun also die Anforderungen kennen, komme ich zur Analyse
11
![Page 12: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/12.jpg)
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
![Page 13: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/13.jpg)
Projektkosten
NACHFRAGEN – Ist es groß genug??Azubi …€ - blau Mitarbeiter 25€ - rotRessourcen 15€ - grün
10.320€h/𝐽𝑎ℎ𝑟 durch 1.760hJahr = FLIPCHART
14
![Page 14: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/14.jpg)
Projektkosten
Entwicklung 70 h · … €
Fachgespräch 3 h · 40,00 €
Abnahme 1 h · 40,00 €
= …,.. €
= 120,00 €
= 40,00 €
……,.. €
40€ nochmal auf Flipchart
15
![Page 15: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/15.jpg)
Automatisch
• Echtzeit
• Keinerlei Aufwand
• Ausfälle sehr gering
Manuell
• 2x pro Woche
• Zu großer Aufwand
• Ausfallanfällig
Nutzwert
Zuerst Manuell
16
![Page 16: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/16.jpg)
Amortisation
…… €
624ℎ·40€
≈ 𝐗𝑾𝒐𝒄𝒉𝒆𝒏
2x pro Woche · 6h
𝑇𝑎𝑔= 𝟔𝟐𝟒
h
𝐽𝑎ℎ𝑟Annahme
17
![Page 17: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/17.jpg)
EntwurfGUI · Recherche · API · Service · DB
18
![Page 18: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/18.jpg)
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
![Page 19: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/19.jpg)
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
![Page 20: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/20.jpg)
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
![Page 21: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/21.jpg)
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
![Page 22: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/22.jpg)
Implementierung
Einfache Implementierung dank Node, NPM und der Community hinter Mozaik
23
![Page 23: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/23.jpg)
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
![Page 24: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/24.jpg)
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
![Page 25: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/25.jpg)
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
![Page 26: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/26.jpg)
- Popups werden erst beim aufrufen befüllt um den RAM nicht zu fluten (wenig vorhanden beim TV)
28
![Page 27: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/27.jpg)
- 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
![Page 28: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/28.jpg)
- Jenkins Build Status
30
![Page 29: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/29.jpg)
Fazit
31
![Page 30: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/30.jpg)
• 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
![Page 31: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/31.jpg)
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
![Page 32: Dashboard Entwicklung - s3.eu-central-1.amazonaws.com](https://reader031.vdocuments.mx/reader031/viewer/2022020916/61b417d11bac5d2b5f3d3349/html5/thumbnails/32.jpg)
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