
ul. Strzegomska 2-4
53-611 Wrocław
NIP 8992786490
KRS 0000608120
REGON 363987723
Global4Net Sp. z o. o.
+48 71 358 41 00
© 2009 – Global4Net. All Rights Reserved.
W ostatnim artykule o sklepach na Magento omawialiśmy jaki rodzaj aplikacji najlepiej spisuje się dla wielu urządzeń. Tamże opisaliśmy zalety i wady aplikacji natywnych, hybrydowych, PWA i cross-platformowych. Nasza analiza wskazywała na to, że rozwiązania progresywne i między-platformowe 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.:
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.
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.
React.js | React Native | |
Język programowania | JavaScript lub TypeScript | JavaScript lub TypeScript (tworzona nadal w React) |
Komponenty aplikacji | CSS, SCSS, LESS lub biblioteka Styled Components | Style za pomocą JavaScript (Styled Components) |
System szablonów | JSX | JSX (gotowe komponenty) |
Zarządzanie stanem aplikacji | Redux lub Context API (zależnie od architektury wybranej przez zespół) | Redux/Context API |
Testy aplikacji | Jest, Enzyme, RTL | Jest, Enzyme, RTL, RNTL |
Analiza kodu | ESlint, Prettier | ESlint, Prettier |
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.
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:
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:
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ę.
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:
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.
Korzystając z aplikacji Expo budujesz aplikację na jej serwerach. Oznacza to, że jesteś w pewnym stopniu uzależnieniony 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.
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:
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:
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.
Napisz do nas