Prezentacja z wydarzenia DrupalDay z dnia 27.01.2022

1. Drupal jako modularny i
rozszerzalny CMS
Case study projektów Domu Maklerskiego Banku
Ochrony Środowiska

2. O projektach i zespole
● 5 developerów - w tym 2 stałych developerów z Droptica; 2 content
edytorów; 1 DevOps, 1 Project manager, 1 Testerka oraz osoba z działu IT
Pomogliśmy zrealizować cele takie jak:
● Wdrożenie modularnego i rozszerzalnego CMS
● Responsive Web Design
● Ustalenie wspólnej nomenklatury dla całego zespołu oraz projektów
● Stabilny i przejrzysty proces CI/CD
● Pomoc i wdrożenie odpowiedniej infrastruktury z użyciem dockera
● Wstęp do scruma
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

3. Część 1

4. Scrum
● Jako zespół udało nam się wdrożyć scruma do projektu
● Wykorzystywaliśmy większość narzędzi znanych z scruma takie jak tablica
scrumowa, stand-up meeting, definition of done czy retrospektywa
● Udało się nam wypracować zadania które posłużyły jako wzory do wycen w
story pointach
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

5. Layout Builder + Pattern Lab
Layout Builder to moduł ułatwiający content edytorom oraz site builder-om
łatwiejsze wizualne tworzenia podstrony w Drupalu. Dzięki zdefiniowanym
layout-om oraz możliwości ich konfiguracji mamy możliwość personalizacji przy
zachowaniu spójności wizualnej.
W pierwszym etapie prac nad tą częścią funkcjonalności zidentyfikowaliśmy oraz
zaimplementowaliśmy wszystkie layouty. To pozwoliło nam w następnym kroku
zidentyfikować globalne opcje konfiguracyjne layout-ów oraz indywidualne opcje
dla poszczególnych layout-ów.
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

6. Layout builder - layouty
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

7. Layout builder - konfiguracja sekcji
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

8. Layout Builder + Pattern Lab
Kolejnym krokiem było utworzenie grup bloków, które będą mogli tworzyć,
edytować i konfigurować content edytorzy.
Zidentyfikowaliśmy wszystkie możliwe grupy bloków, które występowały na
podstawie wcześniej dostarczonych makiet przez zespół MakoLab. Takich grup
powstało łącznie około dwudziestu.
Aby mieć wspólną nomenklaturę w zespole nazwaliśmy podstawową grupę
blokami atomowymi.
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

9. Bloki atomowe
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

10. Opcje konfiguracyjne bloków atomowych
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

11. Opcje konfiguracyjne bloków atomowych
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

12. Przykład bloku atomowego
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

13. Przykład bloku atomowego
Przykładowe możliwości konfiguracji danej sekcji
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

14. Layout Builder + Pattern Lab
● Pattern lab pozwala stworzyć Design system z użyciem m.in. PHP oraz
szablonów twig
● Pattern lab wykorzystuje atomic design
● Pattern Lab jest niezależny od Drupala
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

15. Warianty buttonów
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

16. Warianty buttonów
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

17. Warianty buttonów
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

18. Warianty buttonów
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

19. Element #1
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

20. Tytuł ilustracji
Pattern Lab
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS
bossa.pl

21. Element #2
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

22. Element #3
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

23. Layout Builder + Pattern Lab
W ostatnim etapie zaimplementowaliśmy funkcjonalność która pozwala zapisać
odrębne warianty layoutów danej strony w zależności od roli użytkownika.
Dzięki temu użytkownik anonimowy może podstronę pod tym samym adresem
widzieć inaczej niż użytkownik zalogowany.
Nie musimy przez to np. definiować własnego Controllera z opcjami
konfiguracyjnymi tylko korzystamy z pełnych możliwości które daje nam
funkcjonalność Layout Builder.
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

24. Layout Builder wg roli użytkownika
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

25. VisualCeption
VisualCeption to rozszerzenie do Codeception które jest narzędziem do
wizualnych testów regresji. Wdrożyliśmy, skonfigurowaliśmy oraz
zintegrowaliśmy z CI/CD Visualception dla projektów bossa.pl oraz bossafx.pl.
Wizualne testy regresji zostają ręcznie uruchomione na środowisku stage, czyli
przed wgraniem zmian na środowisko produkcyjne. Raport z testów jest
weryfikowany ręcznie przez testerkę lub content edytorów. Dzięki
wygenerowaniu raportu na odpowiednim środowisku nie jest wymagany duży
nakład pracy i czasu przy jego weryfikacji.
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

26. Raport VisualCeption
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

27. Różnice zauważone przez VisualCeption
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

28. Różnice zauważone przez VisualCeption
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

29. Różnice zauważone przez VisualCeption
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

30. Część 2

31. Node.js z Socket.IO
Mikroserwis z Node.js, którym posiada bibliotekę Socket.IO.
Socket.IO - zapewnia komunikacje dwukierunkową po protokole WebSocket.
Powiadomienia które otrzyma użytkownik:
- o nowych treściach na stronie.
- o wydarzeniach w kalendarzu makroekonomicznym
- informacje tylko dla zalogowanego użytkownika.
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

32. Node.js z Socket.IO
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

33. Powiadomienie - Notification API
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

34. Powiadomienie - HTML
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

35. webpack + React
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

36. Dashboard dla użytkownika
www.droptica.pl
Drupal jako modularny i rozszerzalny CMS

37. Pytanie konkursowe!

38. Część na pytania od publiczności

39. Dziękujemy za
wasz cenny czas!
Imię i Nazwisko autora
Adrian Liegmann - adrian.liegmann@droptica.pl
Damian Skiba - damian.skiba@droptica.pl
Dane Kontaktowe
WWW.DROPTICA.COM