Sklep Magento: Najlepsza aplikacja dla wielu urządzeń

Tworzenie własnego sklepu w Magento potrafi być czasochłonnym i kosztownym przedsięwzięciem. Szczególnie jest tak, gdy chcemy by nasza aplikacja działała na kilku platformach. Zazwyczaj założenia tego typu oznaczają przymus pracy kilku zespołów o różnych kompetencjach. Takie rozwiązanie może przynieść negatywne skutki, zarówno zróżnicowany czas developmentu jak i dodatkowe koszty. Jednak istnieje strategia, która pomoże Ci stworzyć swój sklep Magento dla wielu urządzeń z tylko jednym zespołem.

Po przeczytaniu tego artykułu dowiesz się:

• jak ograniczyć koszty i opóźnienia przy tworzeniu sklepu internetowego
• jakich strategii użyć do stworzenia sklepu na wiele urządzeń
• jakie rodzaje aplikacji działających na wiele urządzeń możesz zbudować dla Magento

Jakie wymagania musisz spełniać przy tworzeniu sklepu na Magento?

Aby nasz sklep internetowy był zyskowny i konkurencyjny musi spełniać pewne wymagania. Po pierwsze, upewnij się, że będzie on obsługiwany przez najpopularniejsze urządzenia z których korzystają Twoi docelowi użytkownicy. 

Mobile Gap nadal widoczny

Większość ruchu w internecie jest generowana z mobilnych urządzeń. To samo w sobie już określa dodatkowe wymagania postawione przed zespołem budującym aplikację sklepu w Magento. Musisz zatem określić swojego docelowego odbiorcę i ustalić z jakich urządzeń korzysta on podczas dokonywania zakupów. Jeśli, np. zajmujesz się sprzedażą akcesoriów dla urządzeń Google’a, twój sklep internetowy powinien posiadać wersję działającą na systemie Android.

Musimy jednak pamiętać, że nie tylko użytkownicy Androida mogą być naszymi klientami. Użytkownicy Windows i Apple stanowią znaczącą część rynku i nie powinieneś ich pominąć.

Dlaczego RWD nie wystarczy przy tworzeniu sklepu internetowego? 

Następnym wyzwaniem są wzrastające wymagania klientów, używających różnych urządzeń. Coraz więcej różnic naliczamy w sposobie konsumpcji treści i poruszania się po aplikacji, w zależności od tego z jakiej platformy korzystają użytkownicy. Sprawia to, że zwyczajne podejście responsywnego designu webowego (RWD) nie jest w stanie zapewnić wszystkich potrzeb i UX designerzy muszą szukać nowych, lepszych rozwiązań. Jednak jak jednocześnie zadbać o wzrastające oczekiwania klientów i obsługę wielu urządzeń za pomocą jednej aplikacji?

Czy tworzenie sklepu internetowy na wiele platform jednym zespołem jest możliwe?

Załóżmy, że prowadzisz projekt sklepu internetowego w Magento i mierzysz się z tym samym problemem. Masz tylko jeden zespół developerów, który ma stworzyć sklep Magento działający na wielu platformach. Od czego zacząć? 

Magento API i spójny stack technologiczny

Magento oferuje ci zarówno rozwiązanie REST, jak i stale poszerzane zasoby GraphQL. O najnowszych zmianach w tej sferze można przeczytać w naszym artykule tutaj. Jeśli korzystasz więc z Magento, nie powinieneś mieć problemów z tworzeniem aplikacji już od pierwszej fazie projektu. 

Następnie musisz zadbać o spójny stack technologiczny w twoim zespole. Chodzi tu o to, aby technologie używane w aplikacjach webowych były wykorzystywane także do tworzenia aplikacji natywnych i innych rozwiązań. Nie dość, że przyspiesza to ogólne tempo pracy, to dodatkowo zabezpiecza przed nieprzewidywalnymi nieobecnościami i zmianami w zespole. 

Dla przykładu: zespół, w którym tylko jedna osoba posiada wiedzę i doświadczenie w zakresie technologii kluczowej dla powodzenia projektu, będzie uzależniony od tej persony. Natomiast, gdy wszyscy członkowie pracujący nad projektem mają podobne umiejętności, mogą oni wypełniać luki pozostawione przez nieobecnych pracowników. Dodatkowo wspólny poziom wiedzy usprawnia współpracę zespołu, a jego rezultatem jest wyższy poziom wykonania sklepu internetowego.

Upewniwszy się, że spełniamy wszystkie powyższe wymagania, możemy zacząć rozważać, jaką strategie programowania aplikacji obierzemy. 

Sklep na Magento: jaki rodzaj aplikacji wybrać?

To jaką ścieżkę developmentu wybierzemy, określi jakie możliwości będzie miała nasza aplikacja. Każdy rodzaj ma swoje mocne jak i słabe strony, ale który rodzaj aplikacji jest dla nas najlepszy? Podzieliliśmy je ze względu na podejście do rozwiązania problemu.

Tworzenie aplikacji desktopowych sklepu w Magento

Przy tworzeniu aplikacji webowej sklepu musisz mieć na uwadze potrzebę przygotowania jej wersji na wiele urządzeń. Dobrą strategią do takiego działania jest podejście headless front-end, nazywane także headless CMS. Za jego pomocą twój zespół będzie mógł tworzyć część frontową aplikacji za pomocą API przygotowanego przez twoich back-endowców. Jest to bardzo dobre rozwiązanie, gdy masz zamiar budować aplikację za pomocą frameworków takich jak JavaScript lub React. Na dodatek pozwoli to twoim developerom projektować front-end aplikacji z myślą o wielu urządzeniach i platformach.

Dobrym rozwiązaniem współpracującym z headless CMS jest Progressive Web Application, czyli krócej aplikacja PWA. Aplikacje progresywne są często stosowane przy tworzeniu sklepów dla wielu urządzeń. Mogą Ci się wydać dobrym wyborem ze względu na dostarczanie spójnego UX końcowemu klientowi. Do tworzenia tego rodzaju aplikacji sklepu w Magento możemy użyć narzędzia Magento PWA Studio. Opisana tutaj strategia należy do najpopularniejszych i najczęściej stosowanych przy tym rodzaju developmentu.

Tworzenie aplikacji mobilnych sklepu w Magento

Przy tworzeniu sklepu mamy do wyboru cztery główne rozwiązania dostępne dla programistów. Są to technologie:

• natywne,
• hybrydowe,
• progresywne (PWA),
• cross-platformowe,

Tworzenie mobilnej wersji sklepu Magento – aplikacje natywne

Programy natywne są rozwiązaniami dedykowanymi danym systemom operacyjnym (Android, iOS i Windows).

Zalety aplikacji natywnej

Niewątpliwymi zaletami rozwiązań natywnych są:

• wysoki poziom wydajności – aplikacje mogą wykorzystywać pełną moc urządzeń, na których są zainstalowane. 
• atrakcyjniejszy UX – ze względu na spójność technologiczną z systemem i wykorzystywanie tej samej logiki i komponentów, będziesz w stanie wykonać bardziej responsywny, wygodniejszy w obsłudze i szybszy interfejs. 
• wysoka optymalizacja – dzięki programowaniu aplikacji w kodzie dla mobilnego systemu operacyjnego, jej elementy są wysoce kompatybilne z urządzeniem.
• dostęp do wbudowanych funkcji – tylko aplikacje natywne oferują możliwość korzystania ze wszystkich wbudowanych funkcji, takich jak, bluetooth, akcelerometr, czy GPS (dostęp akcelerometru i pozycji użytkownika masz zapewniony z poziomu JavaScriptu).

Wady aplikacji natywnej

Aplikacje natywne mają także swoje słabsze strony, które sprawiają, że powinieneś się zastanowić nad włączeniem ich do swojej strategii przy tworzeniu sklepu w Magento.

Do ich wad zaliczają się: 

• wyższe koszty produkcji – jeśli chcesz stworzyć aplikacje natywną pod najpopularniejsze systemy operacyjne będziesz utrzymywał kilka projektów wykonanych w różnych technologiach.
• rozbicie projektu na pomniejsze – ze względu na osobne technologie będziesz potrzebował rozdzielić development na więcej projektów, co może doprowadzić do potrzeby powiększenia zespołu o kolejnych profesjonalistów i mniej efektywnym rozwiązywaniu problemów logicznych.
• dłuższy czas developmentu – żadna z wersji aplikacji natywnych nie będzie dzielić wspólnych rozwiązań i logiki, co sprawi, że problemy pojawiające się podczas prac nad sklepem internetowym będą wymagać dodatkowych dedykowanych akcji.

Aplikacja natywna oferuje jedne z najlepszych rozwiązań pod względem jakości i wydajności. Trudno jednak będzie ją stworzyć za pomocą jednego zespołu w krótkim czasie. Dlatego rozważ, czy jest ona technologią, która odpowiada twoim potrzebom i możliwościom. 

Tworzenie hybrydowej wersji sklepu w Magento – aplikacja hybrydowa

Rozwiązanie hybrydowe jest połączeniem technologii natywnej i webowej. Możesz  napisać aplikację używając HTML-a, CSS lub JavaScript, jednak zamiast w formie przeglądarkowej, będzie ona działała jako aplikacja dostępna do pobrania w sklepie. Dzieje się tak przez technologię nazywaną wrapowaniem, która pozwala odczytywać zapis logiczny innym systemom. Przykładami takich aplikacji są właśnie Apple’owski App Store i Amazon App Store. Pamiętaj o tzw. Minimum Functionality: chodzi tu o wymóg dotyczący Twojej aplikacji hybrydowej. Musi ona zawierać nowe funkcje, treść i interfejs. Nie może być tylko dokładną wersją strony internetowej. Jeśli tak będzie wtedy Twoja aplikacja może zostać odrzucona przez wybrany App Store. Do stworzenia sklepu internetowego w formie hybrydowej możesz użyć oprogramowania IONIC. Umożliwią Ci one skompilować twoje preferowane frameworki, co ułatwi tworzenie aplikacji.

Zalety aplikacji hybrydowej

Przejdźmy zatem do zalet tego rozwiązania:

• hybryda wymaga jednego języka – zazwyczaj będzie to wyżej wspomniany HTML lub CSS, co oznacza, że nie będziesz musiał wymagać wyspecjalizowanego stacku technologicznego jak przy aplikacjach natywnych.
• szybki czas developmentu – tworzenie za pomocą jednego kodu dla wszystkich platform, przyśpiesza stworzenie wersji MVP aplikacji (Minimum Viable Product).

Wady aplikacji hybrydowej

Jednak zaoszczędzony czas i dzielony dla wszystkich wersji kod wymusza pewne ustępstwa względem kilku sfer developmentu:

• ograniczona wydajność – przez wymóg korzystania z technologii webowej, wydajność Twojej aplikacji będzie zależała od przeglądarki urządzenia. Oznacza to możliwość wolniejszego ładowania.
• gorszy UX – aplikacja hybrydowa w działaniu przypomina bardziej stronę internetową, aniżeli aplikację natywną. Jej wydajność może być chwiejna a UX często nie będzie spójny w działaniu i dostarczaniu rodzaju interakcji, do których przywykli są użytkownicy danej platformy. 
• ograniczony dostęp do funkcji urządzenia – w momencie pojawienia się nowych funkcji w urządzeniu, będziesz musiał zaimplementować łatkę, która pozwoli korzystać z niego. Zabierze to kolejne zasoby i cenny czas. 

Podsumowując aplikacja hybrydowa jest tak naprawdę jedną aplikacją działającą na kilku urządzeniach. Lecz mimo osiągnięcia naszego celu, jakość Twojego sklepu internetowego stworzonego na podstawie tej technologii prawdopodobnie będzie pozostawiała wiele do życzenia, w szczególności w sferze UX. Tak więc przyjrzyjmy się następnemu rozwiązaniowi.

Tworzenie wersji progresywnej sklepu Magento – aplikacja PWA

Tworzenie aplikacji PWA w Magento jest znacznie ułatwione dzięki obecności Magento PWA Studio. Dodatkowo narzędzie to zawiera swój własny progresywny storefront o nazwie Venia, który pomaga uniknąć dodatkowych kosztów developmentu i utrzymania. Ponadto oferuje wszystkie rozwiązania PWA i jednocześnie jest w pełni wspierany przez Adobe, czego rezultatem jest techniczne wsparcie i pomoc ekspertów.

Zalety aplikacji PWA

Najważniejsze cechy PWA to m.in.:

• jeden kod dla wszystkich platform – podobnie jak rozwiązanie hybrydowe wykorzystuje ona spójną logikę, co ułatwia pracę i przyspiesza development.
• prosty rozwój i utrzymanie sklepu internetowego – dzięki używaniu tylko jednego kodu w ramach wszystkich platform nie musisz rozszerzać stacku technologicznego twojego zespołu.
• działanie w trybie offline – dzięki wbudowanemu modułowi pamięci podręcznej, klienci będą mogli przeglądać ofertę twojego sklepu nie mając dostępu do Internetu.

Wady aplikacji PWA

Jednak zalety PWA generują także problemy, z którymi odbiorcy rozwiązań muszą się uporać:

• działa w trybie offline… ale nie zawsze – na urządzeniach systemu iOS po tygodniu nieaktywności aplikacji, czyli nieużywania jej przez użytkownika jej cache ulega wyczyszczeniu. Oznacza to, że przy następnym uruchomienia będziesz musiał ponownie pobrać jej zawartości. Jest to wyjątkowo niewygodne, gdy klient Twojego sklepu nie ma akurat dostępu do Internetu. Nie będzie mógł przeglądać on twojej oferty i dodatkowo zostanie zmuszony do ściągnięcia jej zawartości. No cóż, c’est la vie.
• niecodzienny UX – niektóre działania i część mechaniki aplikacji progresywnych mogą być niekompatybilna lub po prostu niespójne ze sposobem działania systemu danego urządzenia.
• ograniczony dostęp do funkcji wbudowanych – podobnie jak w zastosowaniu hybrydowym, PWA jest ograniczona przez możliwości przeglądarki na danym systemie.

Pomimo, że dla urządzeń desktopowych jest ona jednym z topowych narzędzi, przy projektowaniu dla technologii mobilnych PWA może nie spełniać wszystkich wymagań jakie postawisz przed sobą. Dlatego, możesz rozważyć korzystanie z rozwiązań cross-platformowych. 

Tworzenie cross-platformowej wersji sklepu Magento – aplikacja cross-platformowa

Tworząc swój sklep Magento na podstawie technologii cross-platformowej, zauważysz, że jest ona podobna do rozwiązania hybrydowego. Oferuje jednak bardziej zoptymalizowane rozwiązania dla urządzeń mobilnych. Dzieje się tak przez to, że zamiast wrapowania logiki, kod użyty do w budowy cross-platformowej jest interpretowany dla aplikacji natywnej dla obu systemów mobilnych. Ten rodzaj programu jest możliwy do stworzenia przy użyciu Javacsriptowych frameworków React.js lub React Native. Ponadto przy tworzeniu aplikacji cross-platformowej z Reactem, możemy zachować funkcjonalności rozwiązania PWA, gdyż framework od Javy wspiera ten format. Możesz także użyć oprogramowania Flutter od Google’a.

Zalety aplikacji cross-platformowej

Przewagami aplikacji cross-platformowej są:

• wyższa wydajność – kod jest interpretowany do standardów natywnych, co przyspiesza działanie programu.
• zachowany wysoki poziom UX – spójność zastosowanych komponentów z systemem operacyjnym sprawia, że poziom doświadczenia użytkownika jest na równi z aplikacjami natywnymi.
• Łatwe utrzymanie i rozbudowa – spójność kodu dla wszystkich platform ułatwia i przyspiesza pracę developerów.

Jednak nawet podejście cross-platformowe nie oferuje rozwiązania idealnego. Tutaj ograniczeniem jest ograniczony dostęp do funkcji wbudowanych urządzenia. Jednak niektóry frameworki do budowy aplikacji cross-platformowych pozwalają na zakodowanie pewnych funkcji używając języków natywnych i mostu z React Native’em. Rezultatem tego działania jest prawie natywny poziom kompatybilności. 

Czemu cross-platformowy rodzaj aplikacji jest najlepszy do developmentu dla wielu urządzeń?

Nowoczesny klient wymaga jak najwyższej wydajności, których nie mogą mu dostarczyć aplikacje hybrydowe. Pozostają więc rozwiązania natywne i cross-platformowe. Które z nich jest łatwiejsze do wykonania i jest najlepszym rodzajem aplikacji?

Obierając ścieżkę cross-platformową nie będziesz musiał powiększać swojego zespołu developerskiego. Mimo, że nadal będzie on pracował na dwóch technologiach, to będzie się to odbywało w ramach jednego spójnego stacku technologicznego. Skrócisz tym harmonogram pracy, gdyż logika funkcjonalności projektu będzie współdzielona. Zapewni Ci to także większą elastyczność przy dzieleniu zasobów do poszczególnych etapu projektu. Jeśli zdecydujesz się na budowę za pomocą frameworka React, będziesz mógł zachować również zalety technologiczne dostępne zwykle tylko na PWA. Ponadto, co najważniejsze, budowanie aplikacji cross-platformowej dla twojego sklepu pozwoli Ci zmniejszyć koszty budżetowe wdrożenia projektu.

Alternatywą jest technologia natywna zastosowana dla wszystkich osobnych systemów. Wymagałoby to utworzenia trzech różnych zespołów. Wiązałoby się to również z wyższym budżetem przeznaczonym na zbudowanie aplikacji której poszczególne wersje oferowałyby prawie takie same funkcjonalności.

Dlatego też budowanie sklepu Magento dla wielu urządzeń na podstawie technologii cross-platformowej to bardziej wydajny i oszczędny development.