Wszystko, co musisz wiedzieć o studiu Magento PWA

Opublikowany: 2022-04-18

Progressive Web Apps, czyli PWA, zyskują coraz większą popularność ze względu na aktualną funkcjonalność. Dzięki najnowocześniejszej technologii poprawia jakość obsługi klienta i przynosi firmie większe przychody. Dlatego wiele firm zastosowało tę platformę w sklepach internetowych, aby wykorzystać zalety PWA. Szczególnie wiele firm wybiera progresywne aplikacje internetowe na Magento. Następnie przekażemy Ci szczegółową listę kontrolną dotyczącą studia Magento PWA, aby pomóc Ci się do niego przyzwyczaić.

Przegląd studia PWA

Studio PWA

Co to jest progresywna aplikacja internetowa?

Progresywna aplikacja internetowa wygląda i działa jak aplikacja natywna, ale działa bezpośrednio w przeglądarkach mobilnych. Nie ma potrzeby pobierania czegokolwiek z App Store. Zamiast tego klienci natychmiast uzyskują w swoich przeglądarkach wrażenia przypominające aplikacje.

Funkcja progresywnej aplikacji internetowej

Możliwość pracy offline: Service workers – za tę funkcję odpowiada technologia. Dzięki temu aplikacja może przechowywać rzeczy w trybie offline i elastycznie zarządzać żądaniami sieci w celu ich pobrania. W rezultacie prowadzi to do zminimalizowania ilości danych, których potrzebujemy do uruchomienia aplikacji.

Wykrywalność i łatwa instalacja: PWA to strona internetowa z kilkoma dodatkami, które można znaleźć za pomocą zwykłych wyszukiwarek, takich jak Google lub Bing. Dlatego użytkownicy nie muszą niczego pobierać ze sklepów z aplikacjami. Instalacja PWA jest bardzo prosta, odbywa się w tle podczas pierwszej wizyty.

Wykorzystanie funkcji telefonu: PWA mają wiele możliwości dostępu do funkcji urządzenia na Androidzie i kilka mniej na iOS. Korzystanie z kamer, GPS lub skanerów linii papilarnych w sposób podobny do aplikacji wzbogaca wrażenia użytkownika.

Automatyczne aktualizacje: PWA umożliwia wydawcom natychmiastowe wdrażanie poprawek. Co więcej, pozwala im zachować pełną kontrolę nad treścią. Klienci zawsze korzystają z najnowszej wersji aplikacji.

Bezpieczeństwo: Dzięki zastosowaniu protokołu HTTPS dane są bezpieczne ze względu na szyfrowanie, a przez to trudniejsze do przechwycenia i zmiany. Ponadto użytkownicy postrzegają HTTPS jako gwarancję bezpieczeństwa i niezawodności wydawców. A Google daje dodatkowe punkty w rankingu wyszukiwania za korzystanie z niego.

Poczucie aplikacji: Cała idea stojąca za PWA polega na znalezieniu sposobu na połączenie najlepszego możliwego doświadczenia z aplikacją przypominającą aplikację o otwartej naturze sieci.

Zarys Magento PWA Studio

Magento-studio

Geneza Magento PWA Studio

Magento udostępniło zestaw narzędzi dla wszystkich handlowców prowadzących sklepy internetowe. Magento PWA Studio to nazwa tego zestawu narzędzi. Zaoszczędzi to sprzedawcom internetowym dużo czasu i pieniędzy na tworzenie natywnych aplikacji dla wszystkich różnych systemów operacyjnych.

Dzięki narzędziom do projektowania stron internetowych przypominających aplikacje Magento, sprzedawcy internetowi mogą zwiększyć swój współczynnik konwersji mobilnej. Jest to wynik poprawy doświadczeń klientów w wielu kanałach. Poza tym Magento PWA pozwala mu zachowywać się jak natywna aplikacja, co zapewnia lepsze wrażenia użytkownika.

Sprzedawcy mogą wykorzystać niesamowicie szybką architekturę frontonu i otwarte internetowe interfejsy API. Pomaga przekształcić ich sklepy w to, co szybko staje się nową normą.

Pakiet budowania PWA

Pakiet Buildpack zawiera niezbędne biblioteki programistyczne i kompilacyjne oraz narzędzia do tworzenia błyskawicznie szybkiego interfejsu i PWA. Pozwala na zaaranżowanie środowiska lokalnego pod rozwój PWA.

Witryna sklepu PWA

PWA Storefront, znany również jako Venia Storefront, to PWA typu proof-of-concept zbudowane z narzędzi Peregrine i PWA Buildpack. Dowiadując się o Magento PWA Studio i jego możliwościach, witryna sklepu pokazuje przykładowe strony kategorii i szczegóły produktów.

Wędrowiec

Projekt Magento Peregrine, jak wcześniej wspomniano, zawiera zestaw narzędzi i komponentów interfejsu użytkownika do tworzenia Magento PWA. Składniki można łączyć, rozszerzać i mieszać, tworząc wyjątkowe sklepy Magento 2 PWA.

Niektóre wybitne cechy Magento PWA Studio

ReactJS – ReactJS działa bardzo dobrze i zapewnia doskonałe wrażenia zakupowe i deweloperskie.

Alternatywa dla ekranu głównego – Magento PWA udostępnia sklep, który można pobrać na ekranie głównym. Będzie wyglądać i działać jako natywna aplikacja

Działa w trybie offline – aplikacje internetowe PWA mogą działać zarówno w trybie offline, jak i online.

Silny back-end – solidny wewnętrzny backend Magento zapewnia płynne wrażenia użytkownika z kilkoma problemami.

Przewaga przy korzystaniu z Magento PWA Studio

Studio Magento

Kompleksowe narzędzia programistyczne

Magento Studio udostępnia narzędzia programistyczne PWA, które są najnowocześniejsze i zawierają dokładną dokumentację. Użytkownicy mogą szybko zaaranżować z nimi własne lokalne środowiska programistyczne PWA.

Łatwe ustawienie

Konfiguracja PWA z zaplecza jest prosta dzięki Magento Studio. Aby pomyślnie uruchomić aplikację, użytkownicy muszą wstawić adres URL instancji Magento do pliku.env. Następnie sklonujesz repozytorium i uruchomisz polecenie. Od początku było oczywiste, że łatwość tworzenia jest głównym celem.

WykresQL

Ponieważ GraphQL wykorzystuje deklaratywne pobieranie danych, PWA opracowane w Magento Studio prawie nie powodują nadmiernego pobierania zapytań. Wtedy lepiej jest w stanie pomieścić wielu użytkowników z różnych źródeł.

Społeczność

Magento to znana platforma e-commerce, która zaowocowała dużą globalną społecznością użytkowników i współpracowników Magento PWA.

Architektura i szkielet pracowni Magento PWA

Studio jest naprawdę proste w konfiguracji i korzysta z niego, aby uniknąć błędów pojawiających się na początku procesu tworzenia aplikacji. Deweloperzy są natychmiast ostrzegani, gdy coś nie jest odpowiednio zaaranżowane. Oszczędza to czas, jeśli chodzi o wykrywanie i naprawianie błędów, gdy program jest prawie gotowy.

Konstruktor studia Magento PWA jest gotowy do użycia

Nie ma potrzeby instalowania kreatora i spędzania czasu na dostosowywaniu i konfigurowaniu środowiska. Wszystko działa od razu z Magento PWA Studio po instalacji. Wszystko jest skonfigurowane i gotowe do pracy.

Gotowe elementy można dostosować

PWA Studio zawiera dużą liczbę skompletowanych i gotowych do użycia części serwisu. Tworząc swoją stronę internetową, możesz użyć dowolnego lub wszystkich elementów w dowolnej kombinacji. W tym momencie przygotowane elementy mogłyby być używane dokładnie tak, jak są. Nawet gotowe elementy można modyfikować, aby spełnić potrzeby dewelopera lub konsumenta.

Idealnie prosty routing i buforowanie

Funkcje routingu i buforowania Magento PWA Studio to dodatkowe wspaniałe cechy. Routing i buforowanie są wykonywane w taki sam sposób, jak zawsze, bez zmian. Jeśli zastosujesz konwencjonalną technikę routingu i buforowania Magento, nie będziesz musiał uczestniczyć w routingu i buforowaniu.

Magento PWA Studio i wady, które trzeba będzie pokonać

Jedna platforma

Jeśli chcesz posiadać Magento Studio, każdy sklep musi działać na Magento 2.3 i nowszych wersjach. Chociaż nie trzeba się martwić o kompatybilność, jest to dość ograniczone.

Brak kompatybilności

Jeśli chodzi o kompatybilność, funkcja GraphicQL Magento Studios czyni ją nieodpowiednią w stosunku do poprzednich wersji.

Problemy z obsługą iOS

Magento nie obsługuje powiadomień iOS PWA i nie będzie działać z urządzeniami iOS, które nie są połączone z Internetem.

Problemy z walidacją

Podczas tworzenia nowych kont klientów mogą pojawić się wątpliwości dotyczące walidacji. Dotyczy to zwłaszcza użytkowników iOS podczas konfigurowania hasła. Powiadomienie nie może zostać dostarczone, jeśli wybrane hasło nie spełnia wymagań dotyczących hasła.

Jak zainstalować Magento PWA Studio (z wersją 2)

Jak zainstalować Magento PWA Studio

Krok 1: Zainstaluj najnowszą wersję Magento

Aby zainstalować Magento PWA Studio, musisz najpierw mieć zainstalowaną wersję Magento 2.3.x. Bez niego nie można zainstalować Magento PWA Studio Project(2.3), ponieważ żadna inna wersja Magento go nie obsługuje.

Krok 2: Zainstaluj NodeJS

Następnie musisz zainstalować NodeJS (wersja >=10.14.1). Jeśli nie znasz tej techniki, użyj polecenia wymienionego poniżej. (Dotyczy to tylko użytkowników Linuksa.)

sudo apt-get install nodejs

Przede wszystkim musisz sprawdzić wersję węzła : node -v

Następnie przejrzyj wersję NPM: npm -v

Jeśli zainstalowana wersja jest starsza niż pokazana powyżej, użyj poniższego polecenia, aby zaktualizować do najnowszej i stabilnej wersji węzła.

sudo npm cache clean -f

sudo npm zainstalować -gn

sudo n stabilny

Krok 3: Zainstaluj i uruchom Node JS

Po instalacji i uruchomieniu NodeJS, będziesz musiał zainstalować Yarn (Yarn >=1.13.0 ). Uruchom następujące polecenie, aby zainstalować przędzę. (Dotyczy tylko systemu operacyjnego Linux).

sudo npm zainstaluj przędzę -g

Teraz sprawdź wersję włóczki :

przędza -v

Krok 4:

Po zainstalowaniu Yarn sklonuj repozytorium PWA do katalogu deweloperskiego.

klon git: https://github.com/magento-research/pwa-studio.git

Krok 5:

W następstwie tego kroku zainstaluj zależności projektu, uruchamiając następujące polecenie.

instalacja przędzy

Krok 6: Utwórz plik .env

Aby utworzyć plik .env, uruchom następujące polecenie z katalogu głównego PWA-

(Dla motywu Venia możesz użyć zainstalowanego przez Ciebie Magento lub domyślnego Magento 2.3.1. Tutaj używamy domyślnego.)

MAGENTO_BACKEND_URL=”https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/”przędza buildpack create-env-file packages/venia-concept

Możesz również utworzyć plik .env i ustawić niestandardową wartość MAGENTO_BACKEND_URL za pomocą następującego polecenia:

MAGENTO_BACKEND_URL=”https://YOUR_MAGENTO_BACKEND_URL/”pakiet tworzenia przędzy create-env-file packages/venia-concept

Krok 7: Zainstaluj certyfikat SSL

Zainstaluj certyfikat SSL, ponieważ PWA działa na bezpiecznej ścieżce, Możesz uruchomić polecenie create-custom-origin w celu wygenerowania certyfikatu SSL:

przędza buildpack twórz pakiety niestandardowego pochodzenia / koncepcja venia

Krok 8: Zainstaluj dane próbki Venia

Możesz również zainstalować Venia Sample data, skrypt bash jest już dostępny pod adresem packages/venia-concept/deployVeniaSampleData.sh

bash deployVeniaSampleData.sh

Aby zainstalować przykładowe dane w Magento, uruchom następujące polecenia:

Konfiguracja bin/magento: uaktualnienie

indeksator bin/magento: reindeksuj

Zbuduj teraz wszystkie artefakty dla swojego motywu, uruchamiając-

kompilacja przędzy

Uruchom serwer, uruchamiając dowolne z następujących poleceń zgodnie z potrzebami z katalogu głównego projektu PWA.

Dla rozwoju-

zegarek do biegania przędzy: venia

Do uruchomienia pełnego deweloperskiego PWA Studio

zegarek do biegania przędzy: wszystkie

Za budowanie artefaktów i prowadzenie studia PWA do inscenizacji-

przędza run build && przędza run stage: venia

PWA zostało pomyślnie zainstalowane. Po uruchomieniu powyższych poleceń zobaczysz adres URL, pod którym działa PWA. Następnie wskaże, czy instalacja się powiodła, czy nie

Zainstaluj Magento PWA Studio

Wniosek

Przeprowadzimy Cię przez ten artykuł z nadzieją, że: masz przegląd Magento pwa studio. Dzięki wielu wspaniałym funkcjom zdecydowanie warto wskoczyć, aby powiększyć swój sklep internetowy. Dzięki temu Twoja firma może sprostać wymaganiom klientów i daje więcej możliwości rozwoju w środowisku internetowym. Jeśli jednak nadal nie masz pewności co do tej technologii, Magesolution chętnie zostanie partnerem wspierającym Twój biznes. Dzięki wielu doświadczeniom w tej dziedzinie jesteśmy pewni, że zapewnimy najlepszą usługę: Magento Progressive Web Application Development. Dlatego jeśli masz jakiekolwiek pytania, skontaktuj się z nami, aby uzyskać więcej informacji.