Home » Wprowadzanie tekstu oczami programisty – czy Angular radzi sobie z ogromnymi danymi?
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:
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!
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.
Po dołączeniu odpowiedniego modułu oraz niewielkich zmianach w kodzie aplikacji wreszcie możemy cieszyć się bogatym, szybkim i sprawnym edytorem tekstu!
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.
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.
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:
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.