Hinzufügen von Text durch die Augen eines Programmierers - wie man mit großen Datenmengen umgeht

Kaizen ist eine Philosophie des Verbesserungswesens, die sich auf die kontinuierliche Verbesserung der Arbeit des Unternehmens in der Produktion und im Geschäftsleben konzentriert.

Mit vKaizen haben wir eine Anwendung entwickelt, die den Prozess des Einreichens von Verbesserungsvorschlägen erleichtert. Die Mitarbeiter können Beschreibungen von Verbesserungsvorschlägen in das System eingeben und diese mit Fotos illustrieren – deshalb ist es wichtig, dass die Benutzer so viele Bilder und Texte wie nötig hochladen können.

Es gibt viele Möglichkeiten für die Textformatierung in vKaizen. Der Beispiel-Texteditor könnte so aussehen:

Das ist der Quill-Editor – der Texteditor von Angular. Leider gibt es einige Probleme bei der Verwendung von Rich-Text-Editoren, weil große Daten in der Datenbank gespeichert werden müssen.

Man kann Grafiken als viele Tupel (geordnete Folgen) von drei Zahlen von 0 bis 255 (im RGB-Modell) speichern. Jede Zahl wird in einem separaten Byte im Computerspeicher gespeichert. Wie viel Speicherplatz nimmt die Grafik in 4K-Qualität ein?

Der 4K-Standard ist eine sehr gute Qualität – 3840×2160 Pixel. Berechnen wir, wie viele Pixel für die Speicherung eines Fotos erforderlich sind: 8 Millionen Pixel!

Das ist also die Anzahl der Bytes, die zum Speichern eines Fotos in 4K-Qualität erforderlich sind: vierundzwanzig Millionen Bytes!

In einer sehr frühen und einfachen Version von vKaizen dauerte das Hinzufügen von Fotos Dutzende von Sekunden. Das war uns zu langsam, also machten sich die Programmierer Gedanken darüber, wie es gehen würde, das zu beschleunigen.

Vielleicht löst das getrennte Speichern von Bildern und Text das Problem?

Leider dauerte die Suche nach einer Möglichkeit, das Hinzufügen von Fotos zu beschleunigen, sehr lange und blieb ergebnislos. Wir konnten auch keine Grafiken in die Ideenbeschreibungen oder in die Konversation unter den Ideen einfügen.

Schließlich fanden die Programmierer ein eingebautes Angular-Modul namens ImageCompress.

Durch das Einfügen des Moduls in den Anwendungscode erhielten wir einen umfangreichen, schnellen und zuverlässigen Texteditor genießen.

Nach der Implementierung der Kundenanwendung und der API (der Anwendungs-Engine) ist es notwendig, alles zu einer Anwendung (mit MS SQL Server-Datenbank) zusammenzuführen, die sofort einsatzbereit ist. Wir möchten, dass unsere Anwendung von vielen Nutzern gleichzeitig verwendet werden kann, daher haben wir ein Tool namens Docker vorbereitet. Es ist sehr hilfreich beim Erstellen, Bereitstellen und Ausführen der fertigen Anwendung.

Die Client-Anwendung, die API und die SQL Server-Instanz müssen sich in separaten Containern befinden. Alle drei Teile der Anwendung sind über ein Netzwerk verbunden, wobei eine Datei docker-compose.yml verwendet wird, um die Abhängigkeiten zwischen den Containern zu konfigurieren.

Es ist wichtig, die Datenbank durch die Verwendung eines starken Passworts zu sichern, das gleiche Passwort muss auch in der API verwendet werden. Wir müssen die Beziehung zwischen der API und der Anwendung des Kunden konfigurieren. Der zweite Container (Frontend) sendet Anfragen an die Application Engine, um Daten in der Datenbank zu lesen oder zu ändern.

Es scheint selbstverständlich zu sein, dass Container, die über ein Netzwerk verbunden sind (mit docker-compose.yml), miteinander kommunizieren können…

…doch leider ist dies nicht der Fall. Jedes Element unserer Anwendung verwendet verschiedene Ports, um Daten zu erhalten und darauf zu reagieren. Die Ports müssen in der genannten Konfigurationsdatei abgebildet werden.

Wenn wir vKaizen betreiben wollen, müssen wir die Ports so einstellen, dass die Client-App Anfragen an die richtige Adresse sendet und die API Abfragen an die passende SQL-Server-Instanz erstellt. Ein Beispiel für eine Konfigurationsdatei sieht so aus:

Schließlich müssen wir nur einen Befehl docker-compose up ausführen, der eine docker-compose.yml-Datei verwendet, um vKaizen zu starten. Dann können wir die Anwendung gewünschten Browser nutzen.