INTEGRACJA VUE STOREFRONT:

Rozwiązanie typu headless oparte o Syliusa i Pimcore

ArtNight - Sylius and Vue Storefront integration case study
ArtNight - Sylius and Vue Storefront integration case study
Klient

ArtNight

ArtNight to niemiecka firma założona jesienią 2016 roku przez Davida Neisignera, której celem było zapewnienie ludziom kreatywnej rozrywki. Pierwsza odsłona ArtNight dotyczyła malarstwa. Polegała na tym, że pod okiem artysty, goście tworzą swoje dzieła w lokalnych barach i restauracjach. Unikalną cechą ArtNight jest to, że oferuje wysoki poziom rozrywki. Z tego względu wydarzenia ArtNight są świetną okazja do poznania nowych ludzi albo spędzenia miłego wieczoru z przyjaciółmi. Warto także wspomnieć, że artyści pokazują techniki malarstwa w bardzo przystępny sposób, tak żeby osoba początkująca mogła stworzyć swój wyjątkowy obraz. 

Wizją ArtNight jest bycie największą firmą w Europie łączącą tysiące ludzi z różnych miast, oferującą im kreatywną rozrywkę i doświadczenia. 

Obecnie, dla ArtNight pracuje ponad 80 osób w całej Europie. Firma działa głównie w sektorze B2C, jednakże oferuje także usługi dla rynku B2B pod nazwą Private ArtNights.

Malowanie, pieczenie i majsterkowanie...

Teraz ArtNight to nie tylko malowanie, jak to miało miejsce w pierwszej odsłonie. Pod szyldem marki powstał także PlantNight i BakeNight. Pierwsze wydarzenie jest nastawione na dostarczenie niezapomnianych  doświadczeń związanych z florystyką, rękodziełem i majsterkowaniem. Drugie wydarzenie, czyli BakeNight oferuje zawierający niezbędne wskazówki przyjazny dla początkujących kurs pieczenia. Wszystko oparte jest o świetną atmosferę i dobrą zabawę. Podczas sytuacji związanej z pandemią COVID – 19 i brakiem możliwości organizacji tego typu eventów, ArtNight zdecydowało się tworzyć wydarzenia online. Dzięki temu ludzie nadal mogli cieszyć się z tworzenia sztuki pozostając w tym czasie w swoich domach. 

Jako BitBag, ściśle współpracujemy z CTO i całym zespołem technicznym. Wspólnie z ArtNight tworzymy najlepsze oprogramowanie, aby zaspokoić wszystkie potrzeby związane z  przetwarzaniem zakupów, realizacją zamówień oraz marketingowymi częściami systemu.

Problem

Historia zaczyna się od WooCommerce…

Może być to zadowalające rozwiązanie dla małych firm, dla których dbanie o spójność i dostępność danych nie jest aż tak ważne. Natomiast dla firm, które się rozwijają, WooCommerce nie jest wystarczającym rozwiązaniem.

Strona ArtNight zaczęła działać wolniej, ze względu na ilość danych, strukturę i narzut wydajności WooCommerce. Niesatysfakcjonujący UX i problemy związane z zarządzaniem danymi spowodowały, że biznes nie mógł się rozwijać, stał się nieskalowalny, więc niezbędne było znalezienie nowego rozwiązania. Co więcej, wizja na dostarczania wartości ludziom z całej Europy – a  w przyszłości całemu światu – była powodem do poszukiwania nowych rozwiązań i możliwości. 

…kontynuując z Vue Storefront jako rozwiązaniem front-end…

Nowy system mógłby pomóc w osiągnięciu lepszego UX, ale głównym celem było poprawienie szybkości strony – co można podsumować w dwóch punktach: przyspieszenie backendu i powtórzenie tego dla frontendu. Klient zdecydował się na ruch w tym kierunku.

Początkowo Vue Storefront (frontend oparty na frameworkach Vue.js i Nuxt) był używany z backendem WooCommerce, co  pomogło na chwilę, lecz nie było to rozwiązanie długoterminowe. Backend musiał zostać zmieniony na system o lepszej architekturze, rozszerzalności i wyższej wydajności.

… i skalowalnym back-endem (Sylius) oraz oprogramowaniem PIM.

Po przeanalizowaniu rynku, Sylius został wybrany jako rozwiązanie backendowe. W tym samym czasie front sklepu miał być nadal oparty na rozwiązaniu Vue Storefront (z ulepszeniami i rozszerzeniami dopasowanymi do potrzeb biznesowych). Jednocześnie podjęto decyzje o skorzystaniu z możliwości udostępnienia jednego źródła prawdy i utrzymaniu wysokiego poziomu spójności danych . W tym celu wybrano implementację Pimcore z wykorzystaniem modułów PIM (Product Information Management) oraz DAM (Digital Asset Management).

Te kroki przyczyniły się do stworzenia szybkiej i skalowalnej aplikacji z bardzo dobrze działającymi systemami do zarządzania danymi i zasobami. 

analysis-icon

Wyzwania

  • Przygotowanie integracji Sylius – Vue Storefront 
  • Opracowanie planu działania, który uwzględniał wszystkie specyficzne dla projektu wymagania. 
  • Obsługa wielu rodzajów różnorodnych produktów 
  • Utworzenie komunikacji z systemami zewnętrznymi. 
  • Dostarczenie zaawansowanego systemu kart podarunkowych. 
  • Realizacja integracji Byrd 
  • Wdrożenie trzech metod płatności z podejściem headless: główna – Mollie i dwie dodatkowe PayPal i Stripe
  • Ulepszenie mapowania indeksów Elasticsearch
  • Obsługa wielu kanałów przez Sylius i Vue Storefront.
  • Internacjonalizacja obejmująca cały system (strefy czasowe, tłumaczenia). 
  • Obsługa realizacji kursów wideo z pośrednictwem platformy LearnWorlds. 
  • Integracja pixela Facebooka 
  • Użycie Redis do przechowywania i buforowania danych 
  • Wsparcie migracji danych 
  • Wsparcie klienta w utrzymaniu systemu. 
  • Zapewnienie doradztwa i wiedzy z zakresu kompleksowych rozwiązań i możliwości architektury. 
  • Zapewnienie developerów obsługujących backend i frontend.
  • Dostosowanie biznesu do zmian pojawiających się w związku z pandemią COVID – 19.

Chcesz wdrożyć rozwiązanie PWA w swoim eCommerce?

Rozwiązanie problemu

Pierwszym krokiem w naszej współpracy było przygotowanie połączenia pomiędzy Syliusem, a Vue Storefront. Zostało ono wykonane w formie wtyczki open – source, która następnie została udostępniona społeczności.

Byliśmy w stanie zapewnić rozszerzalną aplikacje, łatwą w utrzymaniu, dzięki logice biznesowej dobrze pokrytej testami, integracjami i funkcjonalnościami. Sylius został rozszerzony o dodatkowe funkcje, takie jak anulowanie rezerwacji, notatki wewnętrzne oraz ulepszoną historię operacji. Co więcej, obsługiwanych jest przynajmniej 6 typów produktów, a każdy z nich ma inny proces realizacji.

  • Karta podarunkowa
    Przygotowaliśmy zaawansowany system kart podarunkowych z możliwością personalizacji. Jest to istotna kwestia dla biznesu, zwłaszcza dla marki PlantNight.
    Karty podarunkowe traktowane są jako środek płatniczy. Można je pobrać i wydrukować. W przyszłości planowana jest realizacja fizycznych kart podarunkowych, a ich wysyłka będzie realizowana za pośrednictwem Byrd.
  • Usługi zewnętrzne
    Komunikacja z zewnętrznymi systemami w celu synchronizacji informacji o produktach, zamówieniach, klientach i stanach magazynowych lub wysyłanie powiadomień do Syliusa – odbywa się za pośrednictwem brokera wiadomości Kafka , który jest niezawodnym i skalowalnym sposobem obsługi wiadomości asynchronicznych – wykorzystywanym również przez Netflix, Uber, Spotify i LinkedIn.
  • Elasticsearch
    Klient posiadał już strukturę mapowania indeksów Elasticsearch, przygotowaną w poprzedniej implementacji Vue Storefront z WooCommerce. Zdecydowaliśmy się na jej ulepszenie i sprawienie, żeby działała jeszcze sprawniej poprzez usunięcie nadmiaru danych. Ponadto, dla osiągnięcia lepszej wydajności została ograniczona
    duplikacja i objętość danych.
  • Wielokanałowość
    Wielokanałowość i funkcjonalności internacjonalizacji musiały zostać objęte – ze względu na oczekiwania przyszłych rynków – usługą powiadomień dla wszystkich systemów, czyli Sylius, Vue Storefront, Elasticsearch i Pimcore.
  • Marketing i video
    Integracja z zewnętrzną platformą LearnWorlds została przygotowana w celu realizacji kursów wideo, które obecnie są kluczową częścią biznesu. Na potrzeby marketingowe wykonaliśmy integrację Facebook Pixel, która pozwala analizować ruch na stronie klientów, zobaczyć, jakie działania są wykonywane przez osoby odwiedzające, mierzyć konwersję reklam i odpowiednio koordynować procesy sprzedażowe

Obecnie w nowym systemie działają dwie marki: PlantNight , który ma mniejsze obciążenie oraz ArtNight, który jest główną marką. System jest stabilny i teraz pracujemy głównie nad nowymi funkcjami oraz ulepszeniami, które pozwolą działać firmie na większą skalę

Następną marką, na której wykonamy migracje będzie BakeNight, lecz najpierw musimy wdrożyć nowe funkcjonalności specyficzne dla domeny. Wsparliśmy klienta we wszystkich potrzebach związanych z rozwojem, utrzymaniem i doradztwem, wykorzystując naszą wiedzę, zaproponowaliśmy najlepsze możliwe rozwiązania.

Obok głównej platformy B2C, przygotowaliśmy również serwis do sprzedaży B2B, opierający się na frameworkach Vue.js i Nuxt. Dzięki podejściu Agile, skutecznie dostarczaliśmy klientowi wartość, niezależnie od okoliczności, co pokazała to sytuacja związana z globalną pandemią COVID – 19, podczas której potrzeby biznesowe szybko się zmieniają. 

Wielki finał

Wynik

Klient otrzymał platformę stworzoną na Syliusie (backend). To rozwiązanie typu headless, które jest szybkie i niezawodne.  VueStorefront – używany jako frontend – to aplikacja PWA, którą można uruchomić jak natywną aplikację na urządzeniach mobilnych. Te dwa czynniki poprawiły dostępność witryny, jej wydajność i zapewniają fantastyczne wrażenia użytkownika. Wszystko jest dobrze zintegrowane, stabilne i skalowalne. Biznes może się rozwijać i rosnąć – do pewnego stopnia – bez żadnych dodatkowych działań. Ponadto nasz frontend developer przygotował dodatkową witrynę B2B, aby zaspokoić potrzeby rynku w tym obszarze.

Wspólnie z naszymi przyjaciółmi z ArtNight przygotowaliśmy również integrację Syliusa z Vue Storefront 2 , a w niedalekiej przyszłości planujemy użyć jej z dostosowaną do potrzeb klienta aplikacją. Nowa wersja posiada dodatkowe funkcje i uproszczoną architekturę, niezbędną dla tak złożonego systemu z wieloma usługami.

ArtNight

Wydajne i nowoczesne rozwiązanie PWA – od WooCommerce do integracji VueStorefront<->Sylius

  • Migracja z WooCommerce
  • Rozwiązanie headless z backendem Sylius
  • Integracja Pimcore

Z myślą o doświadczeniu użytkownika

Szukasz podobnego rozwiązania dla swojego eCommerce?

Radosław Żurawski
CSO
Marcin Grajoszek
New Business Developer