Blog

POROZMAWIAJMY
Wprowadzanie tekstu oczami programisty – czy Angular radzi sobie z ogromnymi danymi?

Wprowadzanie tekstu oczami programisty – czy Angular radzi sobie z ogromnymi danymi?

06/11/2020

Czy wiecie, czym jest Kaizen? To japońska metodologia, mająca na celu stopniowe udoskonalanie i optymalizację pracy firmy. Jej podstawą są propozycje ulepszeń, przekazywane przez pracowników – prosto z pierwszej linii frontu! Kaizen zakłada, że każda osoba w firmie jest ekspertem w swojej dziedzinie i wie, jak ulepszyć swoja pracę. Ich zgłoszenia są więc przekazywane do przełożonych, którzy oceniają je i przekazują do realizacji.

Elektroniczna wersja Kaizena, którą przygotowaliśmy skraca i uprasza ten proces – osoby zatrudnione w firmie przekazują sugestie ulepszeń przez specjalną aplikację. Do opisu problemu i rozwiązania użytkownicy mogą dołączyć zdjęcia.

W vKaizenie jest dużo możliwości formatowania wprowadzanego tekstu. Przykładowy edytor tekstu o domyślnych kolorach wygląda tak:

vKaizen

Jest to Quill Editor – edytor wbudowany w jeden z modułów Angulara. Podczas testowania aplikacji przekonaliśmy się, że używanie bogatych edytorów tekstu jest nieco problematyczne, głównie z powodu dużych danych, które muszą zostać zapisane w bazie.

Przypomnijmy, jednym ze sposobów przechowywania fotografii jest pamiętanie 3-elementowych krotek (ciągów, uporządkowanych zbiorów) liczb naturalnych od 0 do 255 (model RGB). Jedna taka liczba mieści się w pamięci komputera na jednym bajcie. Ile może zajmować przykładowa grafika w rozdzielczości 4K? Policzmy rząd wielkości!

 

  1. Standard 4K to rozdzielczość dokładnie 3840×2160 pikseli. Obliczmy liczbę pikseli potrzebnych na zapis jednej fotografii:

osiem milionów pikseli!

 

  1. Zatem liczba bajtów potrzebnych do przechowania zdjęcia 4K to:

dwadzieścia cztery miliony bajtów!

 

Z początku dodawanie fotografii/screenshotów w vKaizenowym edytorze zajmowało kilkadziesiąt sekund. To o kilkadziesiąt sekund za długo, dlatego programiści starali się możliwie skrócić ten czas, być może zapis obrazu osobno, a tekstu osobno rozwiąże sprawę?

Niestety, długie godziny researchu mijały, a my wciąż nie mogliśmy korzystać z funkcji dodawania grafiki do opisu pomysłów ani konwersacji pod pomysłami.

Z pomocą przyszła wbudowana właściwość Quill Editora o niezbyt wyszukanej nazwie – ImageCompress.

vkaizen

Po dołączeniu odpowiedniego modułu oraz niewielkich zmianach w kodzie aplikacji wreszcie możemy cieszyć się bogatym, szybkim i sprawnym edytorem tekstu!

vkaizen

Po implementacji aplikacji klienta oraz API (silnika aplikacji) trzeba połączyć obie ze sobą  oraz dodać możliwość komunikacji API z bazą danych MS SQL Server. Aby była możliwość korzystania z aplikacji przez wielu użytkowników jednocześnie musieliśmy użyć narzędzia zwanego Dockerem. Jest ono pomocne w tworzeniu, udostępnianiu oraz uruchamianiu gotowych aplikacji.

vkaizen

Zarówno aplikacja klienta, jak i API oraz instancja SQL Servera muszą być w osobnych kontenerach, które następnie łączy się w całość przy pomocy pliku docker-compose.yml, służącego do konfiguracji zależności pomiędzy kontenerami.

Ważne jest, by baza danych była zabezpieczona silnym hasłem, tego samego hasła musimy użyć również w API. Należy również odpowiednio nazwać kontener, w którym znajduje się instancja SQL Servera z bazą danych i odwołać się do tej nazwy w aplikacji. Ponadto musimy skonfigurować również połączenie pomiędzy API a aplikacją klienta. Ta druga (Frontend) wysyła do silnika zapytania, które odczytują lub modyfikują stan aplikacji zapisany w bazie.

Na początku wydaje się, że kontenery umieszczone w jednej sieci (przy pomocy docker-compose.yml) widzą się wzajemnie i mają możliwość komunikacji między sobą…

Nic bardziej mylnego! Poszczególne elementy układanki przyjmują i zwracają dane na różnych portach, których przekierowanie również ustawia się w powyżej wspomnianym pliku konfiguracyjnym.

 

vkaizen

Zatem, aby móc uruchomić vKaizena niezbędne jest ustawienie odpowiednich portów tak, by aplikacja klienta wysyłała requesty pod odpowiedni adres oraz API tworzyło zapytania do odpowiedniej instancji SQL Servera. Fragment przykładowego pliku konfiguracyjnego wygląda tak:

kaizen

Przy pomocy odpowiednio skonfigurowanego pliku docker-compose.yml jesteśmy w stanie jedną komendą docker-compose up uruchomić wszystkie trzy kontenery i cieszyć się vKaizenem w wybranej przeglądarce.

Porozmawiajmy

Twoja wiadomość została wysłana.
Dziękujemy!