Jak rozpocząć budowę sklepu internetowego Magento?

sklep internetowy Magento budowa PWA cross-platform

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.:

  • 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

 

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

 

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ż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.

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.

Napisz do nas

Masz pytanie?

Napisz do nas

Pole jest błędnie wypełnione. Sprawdź wpisaną treść i spróbuj ponownie.
Pole jest błędnie wypełnione. Sprawdź wpisaną treść i spróbuj ponownie.
Pole jest błędnie wypełnione. Sprawdź wpisaną treść i spróbuj ponownie.
Pole jest błędnie wypełnione. Sprawdź wpisaną treść i spróbuj ponownie.
Wyrażenie zgody jest niezbędne.

PDF, DOC, DOCX, JPG lub PNG (max 5MB)

Przynajmniej jedno pole jest błędnie wypełnione. Sprawdź wpisaną treść i spróbuj ponownie.
Andrzej Szylar

Andrzej Szylar

Chief Executive Officer

Dariusz Kobza

Dariusz Kobza

PR & Marketing Manager

Magdalena Paczynska

Magdalena Paczyńska

HR Business Partner