View
1
Download
0
Category
Preview:
Citation preview
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
Recommended