Tworzenie własnego sklepu w Magento potrafi być czasochłonnym i kosztownym przedsięwzięciem. Aby stworzyć mobilną wersję takiego sklepu, skorzystać można z aplikacji natywnych, hybrydowych, PWA i cross-platformowych. Nasza analiza wskazuje na to, że rozwiązania progresywne i międzyplatformowe oferują najbardziej korzystny bilans atutów przy tworzeniu aplikacji sklepu internetowego dla platformy od Adobe. Uzbrojeni w taką wiedzę możemy przejść do następnego tematu jakim jest budowa aplikacji PWA i cross-platform dla sklepów na Magento. W tym artykule dowiesz się m.in.:

• jakich narzędzi potrzebujesz do stworzenia aplikacji PWA i cross-platform dla sklepu internetowego Magento,
• jakie środowiska należy przygotować dla budowy aplikacji na systemy Android i iOS,
• co zrobić jeśli chcesz uniknąć budowy środowiska developerskiego od zera,
• jakie elementy używane w budowie sklepów internetowych Magento są wspólne dla wielu platform.

Jak działają aplikacje PWA i cross-platform?

Progresywne i cross-platformowe wersje sklepów internetowych mają bardzo podobne funkcje i sposoby działania. Do stworzeniu obu wersji aplikacji wystarczy jeden kod: PWA wykorzystuje spójną logikę, a technologia cross-platformowa interpretuje kod dla aplikacji natywnej dla wybranych systemów operacyjnych.

Największymi plusami tych rozwiązań jest spójny i wysokiej jakości UX i likwidacja wymogu tworzenia dwóch wersji aplikacji dla innych platform. Mało tego, jeśli tworzysz cross-platformową wersję sklepu z pomocą React Native jesteś w stanie zachować funkcjonalności aplikacji PWA, ponieważ RN wspiera format progresywny.

Jakie narzędzia są potrzebne do stworzenia sklepu cross-platform lub PWA dla Magento?

Ze względu na ich wszechstronność i najlepsze proporcje zalet do wad, polecamy tworzenie sklepu czy jakiejkolwiek aplikacji przy użyciu technologii cross-platformowej lub PWA. Opiszemy teraz stack technologiczny, który powinien przygotować Twój zespół. Jak widzisz, ma on dwie wersje w zależności od tego, czy zdecydujesz się na pisanie aplikacji w React.js, czy w React Native.

Jak zacząć budowę aplikacji sklepu używając React Native’a?

Przygotowawszy swój stack technologiczny dla aplikacji cross-platformowej i PWA musisz zadbać o stworzenie środowiska developerskiego, które umożliwi Ci zbudowanie swojego sklepu dla platformy Magento. Ze względu na pracę za pomocą frameworka React Native, musisz uwzględnić pewne ograniczenia przy tworzeniu aplikacji na poszczególne systemy.

Jakie środowisko dla sklepu internetowego Magento na Androida?

Gdy tworzysz sklep internetowy na Androida, możesz go budować na każdym systemie, zarówno Windows, OS X, Linux jak i Chrome OS. Będziesz potrzebował Node.js i programu Watchman do obserwacji zmian zachodzących w budowanym systemie i reagowania na nie.

Jako, że Node.js jest narzędziem używającym JavaScript, kolejną wymaganą technologią będzie Java Development Kit. Aby dopasować swoje działania do platformy Android, musisz wyposażyć Twój team w narzędzie Android Studio (dostępne w zestawie Android SDK) . Następnym narzędziem potrzebnym do postawienia środowiska developerskiego jest React Native CLI(command line interface). Na szczęście jest on dostępny w regularnej wersji React.js. Do testów możemy użyć narzędzia wirtualnego urządzenia Android (AVD) dostępnego w Android Studio. Naszą aplikację możemy również testować za pomocą fizycznego urządzenia wykorzystującego system Android wpinając je bezpośrednio do komputera przez wejście USB.

Podsumujmy raz jeszcze które narzędzia są nam potrzebne do postawienia środowiska developerskiego dla budowy sklepu internetowego w formacie PWA i cross-platform na Androidzie:

• Platforma systemowa: dowolna,
• Node.js
• Watchman
• Java Development Kit
• Android Studio (Android SDK)
• React Native CLI
• Android Virtual Device, lub urządzenie używające tego systemu

Jakie środowisko dla sklepu internetowego Magento na iOSa?

Dużo mniej elastyczne opcje budowy środowiska prezentują się przy budowie aplikacji pod system iOS. Jeśli chodzi o platformę systemową na której musisz zaprogramować aplikację, jesteś ograniczony do budowy w OS X. Jest to w sumie największa różnica pomiędzy stawianiem środowiska developerskiego dla Androida i iOSa. Również tutaj potrzebujesz Node.js i Watchmana, do budowy aplikacji PWA lub cross-platformowej i obserwacji zmian. Jednak zamiast JDK, będziesz używał narzędzi do linkowania bibliotek takich jak Xcode i CocoaPods. Podobnie jak na Androidzie i tu potrzebujesz interfejsu dla wiersza poleceń od Reacta (RN CLI), ale testy aplikacji będziesz wykonywał za pomocą narzędzia iOS Simulator dostępnego w Xcode lub wykorzystywał do tego urządzenie z iOS. W tym wypadku będziesz potrzebował także aktywnego konta Apple Developer Account, które dla wewnętrznych testów jest dostępne bez opłat. Podsumowując, oto lista narzędzi potrzebnych dla środowiska developerskiego pod tworzenie aplikacji dla iOS:

• Platforma: przymus OS X,
• Node,
• Watchman,
• Xcode,
• CocoaPods,
• React Native CLI,
• iOS Simulator (dostępny w Xcode) lub urządzenie z iOS

Po przygotowaniu środowiska do pracy, możesz kontynuować budowę sklepu internetowego Magento korzystając już wyłącznie z linii komend React Native CLI. Dostarczy on gotową aplikację.

Alternatywa dla środowiska developerskiego

Jeśli jednak z jakichkolwiek powodów nie chcesz konfigurować środowiska od nowa, możesz skorzystać z alternatywy, jaką jest korzystanie z pakietu narzędzi Expo. Jest to open source’owa platforma do budowy aplikacji natywnych. Możesz ją po prostu zainstalować i zacząć tworzyć swoje projekty. Program Expo dostarcza klienta na urządzenia mobilne i można na nim przygotować aplikacje zarówno na system Android, jak i iOS. Na początku za pomocą skanowania wyświetlającego się w menu programu kodu QR, nasza aplikacja jest wysyłana na serwery Expo. Aby wykonać tę operację należy wykonać następujące kroki:

• Zainstaluj aplikację Expo na komputerze i telefonie.
• Uruchom aplikację Expo na komputerze.
• Wyświetli ona kod QR.
• Zeskanuj kod za pomocą telefonu.
• Twój projekt jest wysłany na serwer Expo.
• Będziesz teraz widział zmiany następujące w Twoim projekcie za pomocą telefonu.

Backup projekt jest dostępny na serwerze Expo, gdzie możesz kontynuować budowanie twojego sklepu Magento i przesłać go na wybrane urządzenie. Za pomocą aplikacji Expo możemy również zbudować wersję produkcyjną aplikacji i podpiąć do niej certyfikaty developerskie, a potem od razu wystawić tę wersję do Apple Store czy Google Play. Dodatkowo oferuje ona aktualizacje aplikacji w trybie over-the-air, co oszczędza konieczności wystawiania nowych wersji do sklepów dla danych platform.

Jak budować sklep dla Magento bez Expo?

Korzystając z aplikacji Expo budujesz aplikację na jej serwerach. Oznacza to, że jesteś w pewnym stopniu uzależniony od ich wydajności. Szczególnie niekorzystne dla Ciebie mogą być prace konserwacyjne lub awarie serwerów. Na dodatek, często tzw. kolejka budowy może być zapchana, przez co nie będziesz mógł pracować nad swoją aplikacją wtedy, kiedy będziesz chciał. Istnieje jednak sposób na uniezależnienie się od ograniczenia serwerów Expo. Możesz z nich pobrać Turtle CLI – narzędzie do budowania aplikacji, które jest w stanie częściowo skopiować środowisko serwera Expo. Dzięki temu, będziesz mógł prowadzić budowę aplikacji z poziomu własnego komputera. Używając linii komend Expo możesz wygenerować plik APK czy IPA, które używane są do budowania aplikacji na kolejno, Androida i iOSa.

Elementy wspólne przy tworzeniu sklepu Magento na różne platformy

Gdy tworzysz aplikację sklepu na spójnym stacku technologicznym korzystając z bliźniaczych technologii, ważnym jest, aby wiedzieć, iż pewne elementy logiki będą współdzielone między wersjami aplikacji. Oznacza to, że będzie możliwe ich ponowne użycie przy budowie pozostałych wersji sklepu na inne platformy, bez konieczności programowania od nowa. Takimi wspólnymi elementami będą m.in:

• utilsy – klasy zawierające statyczne metody, które mogą zostać użyte ponownie w innych wersjach aplikacji,
• hooki – szczególnie te używane do połączeń z backendem aplikacji, łączenia się z API, itp.
• komponenty reużywalne – komponenty, które mogą zostać użyte przy budowie więcej niż jednej instancji UI.

Możesz też ułatwić sobie pracę ze współdzielonymi elementami za pomocą Monorepo. Jest to narzędzie, dzięki któremu będziesz w stanie stworzyć jedno wielkie repozytorium, zamiast dzielić repozytoria na każdy poszczególny projekt. Tworząc jedno duże repozytorium o kształcie drzewa, dużo łatwiej będzie ci utrzymywać kilka projektów jednocześnie, zaprowadzić porządek i uruchomić testy aplikacji wchodzących w skład Monorepo. Zalety korzystania z Monorepo to:

• proste importowanie elementów między projektami – dzięki traktowaniu poszczególnych rootów jako pojedynczych aplikacji,
• ułatwione utrzymywanie aplikacji – w każdej chwili możesz zarządzać testy automatyczne z poziomu roota na wszystkie aplikacje lub wersje aplikacji,
• hostowanie bibliotek do roota – brak konieczności ściągania tych samych biblioteki do modułów node.

Jak widzisz istnieje wiele rozwiązań ułatwiających i usprawniających budowę aplikacji na wiele platform, niezależnie od docelowego systemu operacyjnego. Pozostaje Ci wybranie, który rodzaj aplikacji – PWA czy cross-platformowy – jest lepszym rozwiązaniem dla Twojego projektu lub przedsiębiorstwa. Jeśli chcesz być pewnym, że wybierzesz rozwiązanie najlepsze dla swojego sklepu Magento, możesz skontaktować się z nami i skorzystać z możliwości konsultacji e-Commerce prowadzonych przez Global4Net.