Idź do:

1. 1. E-commerce to nie tylko sklepy internetowe
2. 2. Wyzwania systemów bazodanowych w e-commerce
3. 3. Co wybrać: nierelacyjne bazy danych czy relacyjne bazy danych?
4. 4. Czym jest MongoDB?
5. 5. NoSQL w e-commerce, czyli co MongoDB może zaoferować branży?
6. 6. Podsumowanie

E-commerce to nie tylko sklepy internetowe

E-commerce to nic innego jak handel przeniesiony do Internetu. Przy czym mówimy tu o samej transakcji kupna-sprzedaży, gdyż płatność i dostawa mogą być realizowane w sieci, jak i poza nią. Najbardziej znanym i przez część osób utożsamianym z tym pojęciem rodzajem handlu są sklepy internetowe. Należy jednak nadmienić, że poza e-sklepami możemy jeszcze wyróżnić serwisy aukcyjne, e-kantory, bankowość elektroniczną czy platformy bukmacherskie.

Wyzwania systemów bazodanowych w e-commerce

System bazodanowy w e-commerce to narzędzie do zadań specjalnych.

Dobrze skonfigurowany system bazodanowy powinien:

• zagwarantować dostępność danych 24/7
• utrzymać szybkość odpytywania w okresie wzrostu użycia
• zapisywać ogromne ilości danych
• informować w sposób dynamiczny i ciągły o zmianach (np. dostępności danego produktu)

W tym celu firmy e-commerce powinny postawić na skalowalność bazy danych. To istotne zwłaszcza w czasie peaków w e-commerce, takich jak Black Friday, Cyber Monday i związaną z nimi zwiększoną liczbą zapytań.

Przeczytaj także: 5 najpopularniejszych narzędzi do analizy danych biznesowych

Co wybrać: nierelacyjne bazy danych czy relacyjne bazy danych?

Zastanówmy się trochę głębiej nad przechowywaniem danych dla usług e-commerce. Do wyboru mamy kilka typów baz danych, przy czym najbardziej znane są relacyjne (SQL) i nierelacyjne (NoSQL). Przyjrzyjmy się różnicom między nimi. Żeby być bardziej precyzyjnym, SQL jest to Structured Query Language, czyli język do pozyskiwania danych z bazy relacyjnej. Przyjęło się jednak tego typu bazy danych nazywać „bazami SQL”, zatem tej nazwy będę używał przy porównywaniu. Upraszcza to też zapamiętanie nazwy drugiego rodzaju baz, czyli NoSQL, które często określa się po prostu jako „nie SQL”.

Przechodząc do różnic, możemy wyróżnić 5 podstawowych, które zebrałem w tabeli poniżej:

Jak widać, bazy NoSQL idealnie wpisują się w wymagania i potrzeby rynku e-commerce w kontekście dostępności i przechowywania danych. Obecnie najpopularniejszym systemem bazodanowym tego typu jest MongoDB.

Czym jest MongoDB?

MongoDB to dokumentowa baza danych zaprojektowana z myślą o łatwości tworzenia i skalowania. Dokumenty są tworzone i przechowywane w formacie BSON, czyli Binary JSON. Zastosowanie JSON oznacza, że ​​bardzo łatwo jest przekonwertować zapytania i wyniki do formatu, który rozumie kod frontendowy, w którym napisana jest aplikacja e-commerce. Jest też on bardziej czytelny dla człowieka. To rozwiązanie NoSQL obejmuje hierarchiczność, automatyczne fragmentowanie i wbudowaną replikację dla lepszej skalowalności i wysokiej dostępności.

Mając już obraz tego, jakie są główne wyzwania w e-commerce, oraz upewniając się, że MongoDB to dobry wybór w kontekście przechowywania danych, możemy zastanowić się nad odpowiedzią na pytanie: co MongoDB może zaoferować branży e-commerce?

NoSQL w e-commerce, czyli co MongoDB może zaoferować branży?

Dynamiczne schematy

Dzięki dynamicznym schematom dokumenty w kolekcji nie muszą posiadać tych samych pól, a i dane pole może mieć różne typy w zależności od dokumentu. Zwiększa to elastyczność mapowania na encje czy obiekty. Praktyka pokazuje jednak, że struktura dokumentów wewnątrz kolekcji jest podobna. Aby to zagwarantować, MongoDB wprowadziło możliwość ustawienia reguł walidacyjnych na kolekcję.

Łatwa hierarchizacja danych

Zastosowanie formatu JSON pozwala na łatwą hierarchizację danych. Możemy to zrobić poprzez osadzenie jednego dokumentu wewnątrz drugiego lub poprzez przekazanie referencji. Użycie jednej bądź drugiej metody powinno być rozpatrywane indywidualnie dla każdej kolekcji. Zalecane jest stosowanie osadzenia, ponieważ pozwala to pozyskać dane w wyniku pojedynczego zapytania, co zwiększa wydajność systemu. Referencje warto rozważyć dla bardziej skomplikowanych reprezentacji hierarchii bądź w sytuacji, kiedy korzyści z zagnieżdżenia nie przeważają nad skutkami duplikacji danych (takimi jak np. potrzeba monitorowania zmian przy podmianie danych)

Replikacja

MongoDB używa konceptu nazwanego Replica Set, czyli zestawu node’ów zawierających te same dane. Umożliwia to replikację danych, której celem jest zwiększenie dostępności oraz zabezpieczenie się przed awariami serwerów bazodanowych. Dobrze zaprojektowana architektura pozwala również na szybszy dostęp do danych.

Kluczowe założenia i mechanizmy replikacji omówimy na podstawie poniższego schematu:

Zestaw replik składa się z jednego node’a, tzw. członka głównego (Primary), oraz członków drugorzędnych (Secondary). Istnieje też specjalny członek takiego zestawu, sędzia (Arbiter), który nie posiada kopii danych, ale służy do wybierania zastępcy w przypadku niedostępności głównego serwera.

Operacje zapisu wykonywane są wyłącznie na głównej instancji, z której później mechanizm wbudowany MongoDB kopiuje dane na pozostałe. Operacje odczytu domyślnie również przechodzą przez wiodącą instancję, ale istnieje możliwość skonfigurowania node’ów, tak aby to poboczne serwery służyły do obsługi zapytań, przy czym może to się wiązać z wystąpieniem tzw. eventual-consistency, czyli z opóźnioną aktualnością danych.

Istotny dla całej koncepcji replikacji jest mechanizm taktowania (heartbeat). Każdy z node’ów (members) co 2 sekundy odpytuje pozostałe w celu sprawdzenia ich dostępności. W przypadku gdy serwer główny jest niedostępny, następuje wybór nowego. Proces ten polega na wybraniu spośród pozostałych instancji tej, która ma ustawiony najwyższy priorytet. Dokumentacja stwierdza, że replika może posiadać do 50 node’ów, przy czym tylko 7 z nich może brać udział w wyborze (voting), i to spośród nich wybierany jest następca. Pozostałe serwery, nazwane Non-Voting members, muszą mieć właściwości votes i priority ustawione na 0. Zaleca się, aby liczba instancji z możliwością głosowania była nieparzysta, stąd też minimalna liczba  node’ów w replice to 3.

Fragmentacja

Fragmentacja polega na podzieleniu zestawu danych na mniejsze części, dzięki czemu możemy skalować horyzontalnie, praktycznie w nieskończoność. MongoDB do obsługi fragmentacji używa klastra, który składa się z następujących elementów:

• Shard, czyli zestawu replik, który zawiera część kolekcji (Chunk)
• Router, który działa trochę jak load balancer i na podstawie konfiguracji przekazuje polecenia do odpowiedniej podkolekcji, żeby zrównoważyć obciążenie
• Config server, przechowujący metadane i konfigurację klastra

Zależności pomiędzy komponentami przedstawia poniższy schemat:

Istotne w przypadku fragmentacji danych jest dobranie odpowiedniego klucza oraz strategii.

Wybierając pole dokumentu, którego chcemy użyć jako klucza, powinniśmy rozważyć:

• Kardynalność – czyli na jak wiele elementów możemy podzielić kolekcję względem klucza
• Powtarzalność – czy któraś wartość nie pojawia się zdecydowanie częściej niż pozostałe
• Jednostajność – czy nowe wartości klucza nie są wzrastające / malejące w sposób liniowy
• Częstotliwość zapytań – klucz powinien być wykorzystywany w najczęstszych zapytaniach

Jeżeli chodzi o strategie, mamy do dyspozycji dwie:

Hashed Sharding

Przy tej strategii MongoDB automatycznie generuje Hash z wartości pól kluczy. Sprawdza się ona w przypadku gdy wartości klucza zmieniają się jednostajnie. Zastosowanie hasha zwiększa równomierne rozdzielenie dokumentów pomiędzy udziałami (Shards). Minusem jest to, że w przypadku zapytań o dany zakres mało prawdopodobne jest, iż wszystkie dokumenty będą w jednym udziale. Skutkuje to odpytywaniem wszystkich części kolekcji (chunks), ponieważ router nie jest w stanie jednoznacznie określić, w którym udziale znajdują się szukane dokumenty.

Ranged Sharding

Każdy z udziałów przechowuje części kolekcji w danym zakresie wartości klucza. Strategia ta sprawdza się, kiedy zbiór wartości dla klucza jest duży, ale powtarzalność każdej z nich jest mała. Ogromną zaletą jest możliwość ukierunkowania zapytania na konkretny udział bądź  kolekcję, co znacząco wpływa na szybkość odpytywania.

Dzieleniem na części oraz ich rozmieszczaniem zajmuje się wbudowany mechanizm MongoDB, który dba o równe ich rozdystrybuowanie oraz stara się utrzymać zbliżoną wielkość każdego z nich. Decydując się na fragmentację, należy pamiętać, że MongoDB nie oferuje metody scalenia danych, a jedynie możliwość ponownej fragmentacji po innym kluczu.

Strumienie zmian

Od wersji 3.6 MongoDB pozwala nasłuchiwać zmian w wybranej kolekcji, bazie lub całym systemie, z wyjątkiem kolekcji admin, lokal i config. Odbywa się to poprzez otwarcie kursora, który pozwala iteracyjnie przechodzić po zdarzeniach związanych z danym zakresem. Ponieważ mechanizm ten używa agregacji, możemy również nasłuchiwać konkretnych zmian czy też modyfikować odebrane notyfikacje. Podstawowym wymaganiem jest użycie zestawu replik, gdyż powiadomienie następuje w momencie zapisu zmiany na większości z tych, które są odpowiedzialne za przechowywanie danych.

Strumienie zmian wykorzystują specjalną, ograniczoną kolekcję oplog, która przechowuje informację o operacjach wpływających na aktualny stan danych. Dokumenty w tej kolekcji rotują, oznacza to, że nowy dokument w przypadku osiągnięcia limitu rozmiaru kolekcji powoduje usunięcie najstarszych. Dlatego należy dobrać odpowiedni rozmiar dla tej kolekcji, zależny od częstotliwości występowania zdarzeń, tak aby możliwe było przechwycenie wybranego, zanim zostanie ono usunięte.

Podsumowanie

Wartość polskiego rynku e-commerce w 2020 r. przekroczyła 100 mld zł, jednocześnie według raportu „E-commerce w Polsce 2021”, opracowanego przez Gemius dla e-Commerce Polska, aż 77% Polaków deklaruje, że kupuje online. Wskazuje to wyraźny, utrzymujący się już od dłuższego czasu trend przenoszenia się handlu do Internetu. Według prognoz tak dynamiczny rozwój e-handlu w Polsce utrzyma się jeszcze przez kilka najbliższych lat.

Klienci mają coraz większe wymagania co do stron internetowych czy aplikacji. Do najważniejszych czynników zwiększających tzw. User Experience należą dostępność, szybkość i niezawodność. Dobrze skonfigurowany system bazodanowy taki jak MongoDB jest odporny na awarie, skalowalny i pozwala na hierarchizację i zapis sporych ilości danych, zatem w pełni odpowiada na potrzeby projektów e-commerce.  

1. 1. Rok 2020: przyspieszenie w branży e-commerce
2. 2. E-commerce – nowe możliwości i trendy
3. 3. Najważniejsze trendy w e-commerce w 2021 roku
4. 4. Trendy w e-commerce – podsumowanie

Rok 2020: przyspieszenie w branży e-commerce

W 2020 roku byliśmy świadkami zawrotnego przyspieszenia i rozwoju branży e-commerce, a w związku z kolejnymi lockdownami sprzedaż przeniosła się do sklepów internetowych. Jedną z najważniejszych zmian w handlu internetowym zaobserwowanych w czasie epidemii COVID-19 jest przyspieszenie modernizacji kanałów sprzedaży wśród liderów handlu tradycyjnego.  Według raportu McKinsey, w ubiegłym roku branża e-commerce rozwijała się od 2 do 5 razy szybciej w porównaniu z czasami przed pandemią. Zaowocowało to wzrostem liczby sklepów internetowych (o 39%, według raportu PrestaShop) i większym znaczeniem platform e-commerce, takich jak Shopify, WooCommerce czy Magento. Ten trend nie słabnie – według badań Statista do 2023 roku e-handel będzie miał 22-rocentowy udział w całej sprzedaży w skali globalnej.  Oprócz handlu, rozwój e-commerce nie pozostał bez wpływu na inne sektory gospodarki, przyczyniając się do rozwoju logistyki, w tym rynku magazynowego. 

E-commerce – nowe możliwości i trendy

Pandemia przyniosła nowe wyzwania, ale stworzyła też nowe możliwości w sprzedaży zarówno dla e-handlu, jak i dla klientów. Dystans społeczny, niedostępność tradycyjnych usług – wszystko to sprawiło, że klienci coraz częściej zaczęli zmieniać swoje zwyczaje zakupowe, szukając wygodnych i bezpiecznych opcji, także w duchu trendu eko. Warto wspomnieć o takich trendach w sprzedaży online jak:

• Click and collect – klienci dokonują zakupów online i odbierają je w wybranym sklepie stacjonarnym.
• E-grocery – klienci zamawiają produkty spożywcze online i odbierają je w sklepie lub korzystają z dostawy do domu.
• Dostawa Out-of-Home – klienci chętnie korzystają z zakupów online i możliwości odbioru produktów w pobliskich paczkomatach. Usługa ta jest uważana za wygodną i ekologiczną.
• Ekodostawa – trend eko dotarł również do branży e-commerce. Klienci deklarują gotowość dopłaty za ekologiczną dostawę produktów, żeby np. ograniczać tzw. ślad węglowy.

Najważniejsze trendy w e-commerce w 2021 roku

1. Multi-vendor marketplace – model ten dobrze prosperuje i można uznać go za wiodący trend w e-commerce. W tym modelu biznesowym wielu sprzedawców może prowadzić sprzedaż online w jednym miejscu, podobnie jak to ma miejsce w galeriach handlowych.
2. Omnichannel – rola usług cyfrowych znacznie wzrosła, dziś strategia omnichannel w e-commerce to już raczej standard niż trend. Sprzedawcy muszą dostosować swoją ofertę do wielu kanałów i zapewnić dostęp do produktów zarówno online, za pośrednictwem urządzeń, jak i offline.
3. UX i personalizacja – według raportu McKinsey koncentracja na UX w e-commerce stała się koniecznością. User Experience jest obecnie jedną z kluczowych metod zwiększania konkurencyjności w E-Commerce. Audyt UX, optymalizacja pod kątem User Experience, Customer Research to działania najczęściej rekomendowane. UX wiąże się także z kolejnym trendem, jakim jest product discovery.
4. Product discovery – sprzedawcy muszą znać swoich klientów, ich potrzeby i preferencje oraz wprowadzać rozwiązania poprawiające Customer Experience. Kategoryzowanie produktów tak, aby ułatwić klientom ich filtrowanie, to tylko jeden ze sposobów promocji oferty i wsparcia klientów w podejmowaniu decyzji. W dzisiejszych czasach wyszukiwanie głosowe (Voice Search) i wizualne (Visual Search), a także oferowanie powiązanych produktów są kluczowym elementem personalizacji, który poprawia Customer Experience.
5. Sztuczna inteligencja i uczenie maszynowe – rola sztucznej inteligencji i ML w handlu online rośnie, gdyż dziś klienci sklepów internetowych oczekują lepszego UX. Te zaawansowane rozwiązania sprawiają, że zakupy są szybsze, wygodniejsze i bezpieczniejsze. To również wymierne korzyści dla sprzedawców – poprawiają konwersję i umożliwiają im analizowanie dużych zbiorów danych.
6. E-commerce staje się Agile – sytuacja jest dziś bardzo dynamiczna, stąd niełatwo jest zaplanować cały rok z góry. Właściciele sklepów internetowych mogą wykorzystać metody Agile do zwinnego planowania działań sprzedażowych i marketingowych (dzieląc je na krótsze czasookresy, np. kwartalne Sprinty.)
7. Mobile commerce – wydaje się, że nie ma odwrotu od trendu mobilnego w e-commerce. Obecnie już ponad 50% klientów robi zakupy online, korzystając z urządzeń mobilnych. Badania wskazują, że jeśli strona ofertowa nie załaduje w ciągu trzech sekund, klienci ją opuszczą, dlatego osoby prowadzące sprzedaż w internecie powinny skupić się na tym, aby ich strona była dostosowana do wyświetlania na urządzeniach mobilnych, responsywna, i żeby wpisywała się w trend „mobile first”.
8. Transakcje bezgotówkowe – 2020 rok przyniósł zwrot w stronę płatności bezgotówkowych. Rola transakcji online zyskiwała na popularności jeszcze przed pandemią.
9. Sprzedaż transgraniczna – ten trend w e-commerce nabiera coraz większego znaczenia. Obserwujemy ekspansję światowych marek e-commerce, takich jak Amazon czy Allegro, które oferują produkty coraz szerszemu gronu konsumentów. Ekspansja na rynkach zagranicznych niesie wyzwanie w postaci wprowadzenia rozwiązań cyfrowych, które umożliwią szybsze dostarczanie produktów przy jednoczesnym obniżeniu kosztów. Kolejne wyzwania w tym obszarze to to bariera językowa czy regulacje prawne.
10. Social commerce – tzw. social selling cieszy się coraz większą popularnością. 54% klientów przyznaje, że interesują ich pezentacje produktów na żywo oraz transmisje sprzedażowe w mediach społecznościowych. Klienci dołączają także do dedykowanych grup na Facebooku, w których mogą znaleźć interesujące ich produkty.
11. Silver commerce – nie jest tajemnicą, że europejskie społeczeństwo starzeje się. Przewiduje się, że do 2030 r. seniorzy (pokolenie określane jako „Silver Power”) w wieku 65+ będą stanowić ¼ całej populacji Europy. W dzisiejszych czasach seniorzy korzystają z zakupów online równie chętnie jak reprezentanci młodszych pokoleń, w dużej mierze przyczyniła się do tego także pandemia. Właściciele sklepów online, przygotowując ofertę, nie powinni zapominać o potrzebach tej grupy konsumentów, i zadbać o odpowiedni UX strony.
12. Headless commerce i PWA – sprzedawcy e-commerce, którzy chcą być o krok przed konkurencją, muszą zadbać o to, by ich strony internetowe były szybkie, responsywne i atrakcyjne wizualnie. Tu z pomocą przychodzą PWA i architektura headless commerce. Headless commmerce to w dużym skrócie oddzielenie warstwy front-end i back-end aplikacji e-commerce, co przekłada się na elastyczność i szybkość witryny. Zmiana strony w PWA (Progressive Web Application) pomaga poprawić jej responsywność, a tym samym zapewnić klientom lepsze doświadczenie zakupowe.

Trendy w e-commerce – podsumowanie

Dziś branża e-commerce intensywnie się rozwija i wymaga nowych rozwiązań, które pozwolą sprzedawać produkty szybciej i wydajniej oraz zapewnić możliwie jak najlepsze doświadczenie zakupowe klientom. Przyzwyczajenia klientów, ich oczekiwania, zmieniają branżę e-commerce na naszych oczach. Prowadząc sklep internetowy, aby nadążyć za najnowszymi trendami (takimi jak np. omnichannel, mobile commerce czy social commerce), właściciele powinni wdrażać odpowiednie rozwiązania cyfrowe oraz stawiać na technologie, które poprawią Customer Experience – niezależnie od grupy docelowej klientów.

Przejdź do:

1. 1. E-commerce – od czego zacząć?
2. 2. Nikt nie obiecywał, że będzie łatwo
3. 3. Najważniejsze wzorce projektowe w e-commerce
4. 4. Pomyślę o tym później – czyli antywzorce projektowe
5. 5. Podsumowanie

E-commerce – od czego zacząć?

Próg wejścia w przypadku programowania systemów e-commerce, ze względu na ich złożoność, jest dużo większy niż w przypadku pisania systemu od podstaw. Żeby zacząć rozwijać taką aplikację, potrzebne są więc spora wiedza i doświadczenie. Tworząc taki system, można dużą część funkcjonalności pokryć funkcjami “out of the box”, jakich nam dostarcza jego wersja domyślna. Natomiast modyfikacje takiego systemu wymagają już sporej wiedzy na temat jego budowy i funkcjonowania.

Pracę nad aplikacją e-commerce dobrze jest zacząć od szkolenia z zakresu programowania w danej technologii. W ten sposób zdobywamy podstawową wiedzę na temat dobrych praktyk programowania w projekcie. Często zdarza się, że systemy e-commerce wykorzystują gotowe frameworki służące do pisania aplikacji. Złożoność takich systemów jest duża, jednak owocuje to korzyściami dla programistów i użytkowników. Otrzymujemy potężne aplikacje, które są bardzo elastyczne oraz mają spore możliwości konfiguracyjne dla użytkownika obsługującego je od zaplecza.

Czytaj także: Frameworkowe wojny

Nikt nie obiecywał, że będzie łatwo…

Poruszanie się w gąszczu wzorców nie należy do najłatwiejszych. Ponadto jedna funkcjonalność może wpływać na drugą i trzeba wcześniej upewniać się co do wdrażanych modyfikacji w systemie. Warto też pamiętać, że wszystkie modyfikacje należy wykonywać zgodnie z zasadami. Dlatego właśnie moim zdaniem utrzymywanie systemów e-commerce jest trudniejsze niż ich pisanie.

Duże systemy e-commerce napisane w technologii PHP, takie jak Magento czy Shopware, korzystają z bibliotek Symfony i Zend. Na rynku mamy wiele podobnych rozwiązań gotowych do instalacji i rozbudowy. Niektóre systemy oferują wprawdzie wersję enterprise dla bardziej wymagających klientów, jednak licencja jest zazwyczaj kosztowna i przeznaczona dla dużych systemów. Warto więc rozważyć kastomizację, która będzie tańsza i będzie w pełni spełniać wymagania naszej firmy. Co ważne, na rynku narzędzi e-commerce zaczęły się już pojawiać systemy, które można łatwo skalować w chmurze AWS, Google Cloud lub Azure. Idealnie więc jest mieć rozwiązanie, które pozwala na migrację pomiędzy chmurami. Aby stworzyć tak skomplikowany system, trzeba trzymać się sztywnych reguł pisania aplikacji. Jak więc ułatwić sobie pracę?

EXPERT KNOWLEDGE

Read on to discover the importance of Scrum's value of respect.

Read article

Najważniejsze wzorce projektowe w e-commerce

Wzorców projektowych w pisaniu systemów informatycznych jest mnóstwo i nie chciałbym się skupiać na wymienianiu wszystkich. Postaram się przybliżyć najważniejsze z nich, które przynoszą największe korzyści pod względem jakości kodu. Oto kilka wzorców projektowych, bez których stworzenie jakiejkolwiek aplikacji komercyjnej byłoby wręcz niemożliwe.

Wyróżniamy trzy rodzaje wzorców projektowych:

Kreacyjne

Opisują one procesy tworzenia nowych obiektów, do ich zadań należą także wszelkie czynności związane z ich konfiguracją oraz tworzeniem typów danych.

• Property – to najbardziej podstawowy z wzorców kreacyjnych. Służy głównie do przetrzymywania konfiguracji, jest to bardzo ważne ze względu na to, że eliminuje ryzyko duplikowania wartości konfigurujących oraz ułatwia późniejsze modyfikacje i utrzymywanie kodu.
• Abstract factory – jest wzorcem, który może posłużyć w budowaniu aplikacji, określa on interfejs do tworzenia różnych obiektów należących do tego samego typu (domeny).
• Factory method – jest podobnym wzorcem do abstract factory. Również określa interfejs, z tym, że odnosi się do różnych metod zamiast obiektów.
  

  Strukturalne

  Definiują struktury powiązanych ze sobą obiektów.

• Adapter – to przykład wzorca strukturalnego, który może posłużyć obsługi niezgodnych interfejsów w obiektach. Jego zadaniem w takim przypadku jest umożliwienie komunikacji takich obiektów.
• Facade – to kolejny wzorzec strukturalny. Przechowuje on mapę obiektów wraz z możliwością ich obsłużenia. Implementacja tego wzorca może odbyć się przez stworzenie klasy oraz osadzenie w niej wszystkich obiektów, które realizują konkretną logikę aplikacji.
  

  Czynnościowe

  Opisują wzajemne zależności pomiędzy obiektami.

• Observer – to jeden z popularnych wzorców czynnościowych. Służy on do obsługi zdarzeń w aplikacjach i dzięki niemu aplikację można łatwo rozszerzać. Przykładem takiego zdarzenia w systemie e-commerce może być moment wystawienia faktury za transakcję. Przykładowo, programista w zależności od wymogów biznesu może zaprogramować jakąś akcję po wystawieniu faktury, np. dodatkowe powiadomienie dla pracownika sklepu.
• Dependency injection – kolejnym wzorcem czynnościowym jest dependency injection. Polega on na „wstrzykiwaniu” zależności jednego obiektu do drugiego oraz wykonywanie na nim operacji, na podstawie których jest realizowana logika aplikacji. Pozwala na usuwanie zależności pomiędzy danymi komponentami.

Pomyślę o tym później – czyli antywzorce projektowe

Pisząc o wzorcach w e-commerce, chciałbym wspomnieć także o antywzorcach projektowych, których również jest sporo.

• Gold plating – ciekawym antywzorcem projektowym jest gold plating, czyli tzw. złocenie. Mamy z nim do czynienie w sytuacji, gdy prace nad projektem lub zadaniem trwają dłużej, niż jest to wymagane (np. z powodu ciągłego ulepszania funkcjonalności i chęci dostarczenia klientowi jeszcze lepszego produktu). W pewnym momencie zostaje jednak przekroczony punkt krytyczny, w którym dodatkowy wysiłek nie przynosi wartości dodanej w projekcie.
• We’ll handle it later – przykładem równie skrajnym jest wspomniane we’ll handle it later, czyli tzw. „Na tym etapie bym się tym nie przejmował”. Antywzorzec ten stosowany jest, gdy analiza danego zadania lub projektu nie została wykonana prawidłowo lub nie została przeprowadzona w ogóle.
• U mnie działa – kto z nas nie słyszał choć raz w życiu „U mnie działa?”. To często spotykane stwierdzenie można często spotkać przy uruchomieniu aplikacji na różnych systemach operacyjnych lub przy w różnych środowiskach klienckich. A przecież warto zbadać każde zgłoszenie – ignorowanie problemów na początkowym etapie może mieć dalsze konsekwencje na późniejszych etapach projektów.
• Hard code – tzw. umieszczenie w kodzie tej samej zmiennej w kilku miejscach, co drastycznie wpływa na późniejsze utrzymanie takiej aplikacji.

Podsumowanie

Systemy e-commerce nie tracą na popularności i dają duże możliwości zarówno użytkownikom, jak i programistom. Aby nie pogubić się w ich złożoności i w pełni wykorzystać ich potencjał, warto wystrzegać się opisanych przeze mnie antywzorców i pogłębiać swoją wiedzę na temat dobrych praktyk. Nie tylko w programowaniu przekładają się one na najlepsze rezultaty. Mam nadzieję, że opisane przeze mnie przykładowe wzorce zachęcą Was do poznania kolejnych i stosowania ich w projektach.

Przejdź do:

1. 1. Co to jest PWA?
2. 2. Progressive Web App – czy warto?
3. 3. PWA– narzędzia dla developera
4. 4. Dodanie Progressive Web App do Angulara
5. 5. Jak sprawdzić działanie PWA?
6. 6. Mamy PWA – co dalej?
7. 7. Podsumowanie

Co to jest PWA?

Aplikacja PWA (Progressive Web App) jest stroną internetową, która zachowuje się jak aplikacja mobilna. Upraszczając, aplikacja PWA od „zwykłej” strony internetowej z JavaScript różni się w zasadzie tym, że posiada service worker oraz plik manifest json. Z punktu widzenia użytkownika działa niemal jak natywna aplikacja mobilna, ponieważ service worker umożliwia działanie w trybie offline, a plik manifest json odpowiada za jej wizualne podobieństwo. Z punktu widzenia developera aplikacja PWA daje możliwości stworzenia lepszego doświadczenia dla użytkownika końcowego. W tym krótkim artykule postaram się opisać konfigurację PWA przy użyciu Angulara, która jest bardzo prosta dzięki natywnemu wsparciu przez Angular CLI. Sama konfiguracja service workera nie ogranicza nas jednak tak naprawdę do użycia określonego frameworka JavaScript, typu React Angular czy Vue.js.

Progressive Web App – czy warto?

Ponad połowa internautów w Polsce korzysta ze stron internetowych za pomocą urządzeń mobilnych, a posiadanie responsywnej, szybko ładującej się strony to obecnie być albo nie być w e-commerce. Wykorzystanie poprawnie zbudowanej aplikacji PWA znacznie ułatwia spełnienie wymagań i zaleceń optymalizacyjnych Google’a, przekłada się też na konkretne rezultaty – w niektórych przypadkach PWA pozwoliła podnieść współczynnik konwersji o 70%.

Korzystanie z aplikacji PWA ułatwia możliwość jej instalacji na pulpicie urządzenia końcowego (nie wymaga pobierania z Google Play/ App Store). Użytkownik może korzystać z aplikacji w trybie offline (dane zsynchronizują się w momencie nawiązania połączenia). PWA to również funkcjonalność powiadomień push, które znacząco zwiększają zaangażowanie i są skuteczną metodą odzyskiwania utraconych koszyków w e-commerce.

Koszt rozwoju i utrzymania aplikacji PWA jest nieporównywalnie mniejszy niż w przypadku aplikacji natywnych. Nie wymaga akceptacji procesu aktualizacji po stronie sklepu z aplikacjami, co znacznie usprawnia szybkość wdrażania kolejnych wersji, ułatwia też analizę danych i raportowanie.

Progressive Web Apps – narzędzia dla developera

Istnieją liczne strony takie jak https://whatwebcando.today/, które zapewniają wsparcie dla developerów. W prosty sposób można uzyskać dostęp do komponentów poprzez JavaScript i service workera. Warto tutaj wspomnieć, że pełne wsparcie komponentów posiada jedynie Google Chrome na systemie Android. Niestety, iPhone z Safari ogranicza nas w niektórych miejscach. Wsparcie komponentów tak dynamicznie się zmienia, że nie warto tutaj poruszać tematu różnic między przeglądarkami. W pierwszej części artykułu postaram się wytłumaczyć, jak w pełni skonfigurować oraz przetestować naszą aplikację. W dalszej części skupię się na innych komponentach, jak tryb offline, notyfikacje, geolokalizacja czy dostęp do plików. Gotowi na przygodę z PWA? Zacznijmy!

Dodanie Progressive Web App do Angulara

Zaczynamy od zainstalowania aplikacji angularowej przez Angular CLI. Następnie należy wywołać komendę ng add @angular/pwa

Dzięki temu w naszym folderze zostaje dodanych kilka plików potrzebnych do uruchomienia PWA:

ngsw-config.json – plik konfiguracyjny, który pozwala na ustawienie reguł cache’owania danych. Więcej informacji o strategiach cache’owania można znaleźć tutaj: https://serviceworke.rs/caching-strategies.html

Na konfiguracji tego pliku skupimy się w kolejnej części artykułu.

manifest.webmanifest – plik konfiguracyjny, który pozwala na ustawienie zachowania naszej aplikacji po zapisaniu przez użytkownika (orientacja, kolory, ikony).

*.png – domyślne ikony, które będą wyświetlać się użytkownikowi po zapisaniu aplikacji na pulpicie ekranu.

Dodatkowo zostaną zaktualizowane pliki:

angular.json (ustawiona flaga ServiceWorker: true),

index.html – dodana linijka do wczytania manifestu,

app.module.ts

Dzięki temu nasza aplikacja wie, że gdy uruchomimy ją w trybie produkcyjnym, service worker powinien zostać zarejestrowany do naszej przeglądarki.

Jak sprawdzić działanie PWA?

Niestety samo uruchomienie aplikacji przez Angular CLI nie pozwoli nam sprawdzić, czy service worker działa poprawnie. Możemy jednak w łatwy sposób to obejść, uruchamiając zbudowaną przez siebie aplikację lokalnie. Można to zrobić łatwo w dwóch krokach.

1. Budujemy aplikację w trybie produkcyjnym: ng build –prod
2. Uruchamiamy http-server (jeżeli nie mamy zainstalowanego lokalnie, to najpierw: npm i http-server -g) komenda: http-server ./dist/pwa-test -o

Pamiętajmy, że po dist należy wprowadzić swoją nazwę aplikacji. Po wpisaniu komendy powinna uruchomić się nasza strona internetowa. Aby sprawdzić poprawność service workera i manifestu, użyjemy wbudowanych narzędzi w Google Chrome. Po uruchomieniu Developers Tools przechodzimy do zakładki Application.

W menu bocznym Service Worker powinniśmy zobaczyć informację, że nasz service worker został odnaleziony i jest poprawnie zainstalowany.

W zakładce Manifest znajdziemy z kolei informację, czy domyślna konfiguracja (kolory, ikony oraz nazwa) jest zaimportowana poprawnie.

Wszystkie te dane są zaczytywane z plików, które zostały wygenerowane przez Angular CLI po zbudowaniu aplikacji. Znajdują się one w folderze /dist/NazwaAplikacji.

Dzięki pozytywnemu wgraniu manifestu oraz service workera nasza aplikacja pozwala na korzystanie w pełni z komponentów na urządzeniu mobilnym czy komputerze.

Mamy PWA – co dalej?

Dzięki domyślnej konfiguracji możemy jedynie zapisać naszą aplikację na telefonie czy komputerze. Aby to zrobić, na komputerze wystarczy kliknąć ikonę plusika obok adresu strony internetowej.

Nazwa oraz ikona są pobierane z pliku manifest.

Po zapisaniu nasza strona internetowa będzie zachowywać się jak aplikacja, a użytkownik nie jest świadomy, że uruchamia stronę internetową w przeglądarce. Po uruchomieniu aplikacji (po zapisaniu) powinno nam się wyświetlić tak wyglądające okno:

Jak widać na zdjęciu, znikł cały górny pasek z adresem, dodatkami oraz zakładkami. Użytkownik nie jest świadomy, że aplikacja uruchomiła się w przeglądarce.

Udało nam się skonfigurować aplikację startową w Angularze, tak aby zachowywała się jak Progressive Web Application. Użytkownik korzystający z naszej strony może na razie jedynie ją zapisać. W kolejnych krokach możemy dodać trochę kodu do naszej aplikacji, tak aby poinformować użytkownika o nowych wersjach naszej strony czy umożliwić korzystanie z niej w trybie offline. W kolejnych artykułach rozwinę temat PWA, pisząc o tym, jak rozwinąć naszą nowo powstałą aplikację o nowe funkcjonalności.

Podsumowanie

Stworzenie i konfiguracja PWA nie są trudne. W sieci pojawia się coraz więcej publikacji o możliwościach technologii, która już teraz jest nazywana frontendową rewolucją. Nic dziwnego – Progressive Web Application pozwała w łatwy sposób stworzyć przyjazną i szybko ładującą się stronę. Dla developerów to sygnał, że wykorzystując technologię PWA, wdrażają rozwiązanie, które przyniesie konkretne, mierzalne rezultaty.

Czytaj również: Który framework frontendowy jest najlepszy?