1.0 Wprowadzenie
Będąc w branży retail eCommerce, na pewno natrafiłeś na słowo PWA (Progressive Web App). Jeśli tak, musisz również zdawać sobie sprawę z możliwości, jakie niosą ze sobą jako aplikacja zakupowa. W przeciwnym razie wylądowałeś we właściwym miejscu. Wraz ze stałym wzrostem wykorzystania aplikacji zakupowych (zarówno natywnych, jak i PWA), sklepy internetowe przechodzą na rozwój aplikacji mobilnych PWA dla swoich firm. Uruchamianie progresywnej aplikacji internetowej jest obecnie dość prostszym i niedrogim zadaniem. KnowBand uruchomił aplikację mobilną Magento 2 PWA, kompletne bezkodowe i zautomatyzowane narzędzie do uruchamiania progresywnej aplikacji internetowej. Krótko mówiąc, za każdym razem, gdy dowolny użytkownik otworzy adres URL Twojego sklepu w przeglądarce mobilnej, otrzyma monit „Dodaj do ekranu głównego”. Progresywna aplikacja internetowa Magento 2 zostanie dodana do urządzenia użytkownika, tak jak każda inna aplikacja, a zakupy online będą mogły być dokonywane w podróży.
1.1 Wyświetl aplikację demonstracyjną:
Poznaj demo progresywnej aplikacji internetowej dla Magento 2 i zobacz, jak będą wyglądać i działać Twoje ostateczne aplikacje:
URL sklepu demonstracyjnego:�https://ma2demo.knowband.com/pwa/manager/
URL aplikacji PWA:�https://ma2demo.knowband.com/pwa/pwa-app/
[IMP] Uwagi dotyczące Magento 2 iOS PWA:
�> Urządzenia z systemem iOS nie oferują wbudowanego monitu „Dodaj do ekranu głównego”. Użytkownicy muszą ręcznie dodać aplikację mobilną Magento 2 PWA do ekranu głównego iPhone’a lub iPada. �> iOS nie obsługuje powiadomień web push. Powiadomienia push można wysyłać tylko na urządzenie z systemem Android z panelu administratora�Magento 2 PWA Mobile App Builder.
[NOWA AKTUALIZACJA] Magento 2�PWA obsługuje języki RTL:
Kreator aplikacji mobilnych Magento 2 PWA obsługuje teraz wszystkie języki świata, w tym RTL (od prawej do lewej). Aplikacja mobilna PWA dla Magento 2 może mieć języki takie jak arabski, hebrajski, perski itp. Właściciel sklepu może oferować wszystkie języki strony internetowej w Progressive Web App, a nawet dodawać nowe.
Ekrany panelu administracyjnego 2.0:
Dzięki przyjaznemu zapleczu panelu administracyjnego administrator sklepu może konfigurować i dostosowywać wygląd, działanie i działanie aplikacji mobilnej PWA. Wystarczy kilka kliknięć i przełączeń myszy, aby wprowadzić zmiany w progresywnych aplikacjach internetowych Magento 2. Przyjrzyjmy się szczegółowo ekranom panelu administracyjnego:
2.1 Ustawienia ogólne:
a) Włącz rozszerzenie:�Włącz�moduł Magento 2�PWA, aby aplikacja webowa działała na smartfonach użytkowników.
b) Przekieruj na stronę koszyka po dodaniu do koszyka:�Włącz przekierowywanie użytkowników do koszyka lub wyłącz, aby utrzymać ich na ekranie produktu.
c) Krótki opis wyświetlacza:�Włącz dodawanie i wyświetlanie krótkiego opisu na ekranie produktu progresywnej aplikacji internetowej.
d) Włącz raportowanie dziennika żądań: Włącz tę zakładkę, aby aktywować plik dziennika w aplikacji mobilnej PWA. Ten plik dziennika może służyć do naprawy wszelkich nienormalnych zachowań progresywnej aplikacji sieci Web.
e) Pokaż podgląd aplikacji: Włącz, aby dodać podgląd telefonu w panelu administracyjnym. Wszystkie zmiany kolorów, czcionek, ekranu głównego będą wyświetlane w telefonie podglądu w czasie rzeczywistym.
f) Włącz pasek kart: Dodaj dolny pasek kart w aplikacji mobilnej Magento 2 PWA.
g) Wybierz układ strony głównej:�Wybierz pożądane układy spośród dodanych i popraw wygląd i działanie aplikacji.
h) Obraz ikony aplikacji:�Prześlij samodzielnie ikonę aplikacji Magento 2 PWA i zmień ją w razie potrzeby.
i) Nazwa aplikacji PWA:�Wpisz nazwę progresywnej aplikacji internetowej Magento 2.
j) Wybierz czcionkę dla aplikacji PWA:�Wybierz czcionkę swojej aplikacji PWA dla Magento 2.
k) Kolor przycisku aplikacji: Wybierz kolor przycisku dla swojej aplikacji mobilnej PWA.
l) Kolor tekstu przycisku aplikacji: Wybierz kolor tekstu przycisku dla swojej aplikacji Magento 2. Progressive Web App.
m) Kolor motywu aplikacji: Wybierz kolor motywu (nagłówek) swojej aplikacji internetowej.
n) Aplikacja� Kolor tła:�Wybierz kolor tła progresywnej aplikacji internetowej.
o) Kolor tła ekranu powitalnego: Wybierz odpowiednią opcję koloru tła ekranu powitalnego aplikacji PWA.
p) Wyłączone metody wysyłki: Wybierz metody wysyłki, które nie będą działać w aplikacji mobilnej Magento 2 PWA.
q) Włącz i prześlij logo: Dodaj obraz logo swojego sklepu, który będzie wyświetlany w nagłówku aplikacji PWA Mobile.
2.2 Ustawienia powiadomień push:
Progresywna aplikacja internetowa Magento 2 oferuje nieograniczoną liczbę powiadomień push na rynku oraz promuje oferty i produkty w sklepach. Administrator sklepu będzie otrzymywać powiadomienia push przez całe życie bez dodatkowych opłat.
Różne pola na tej karcie ustawień wymagają skonfigurowania konta Firebase. Oto jak możesz go ustawić:
Jak założyć konto Firebase?
Krok 1: Zaloguj się do Google Firebase
Krok 2: Utwórz nowy projekt Po kliknięciu na Dodaj projekt pojawi się następujące okno dialogowe:
Utworzenie projektu zajmie kilka sekund. Gdy projekt będzie gotowy, kliknij kontynuuj.
Krok 3: Zarządzaj ustawieniami projektu Po utworzeniu projektu kliknij Ustawienia projektu.
Krok 4: Przejdź do opcji uwierzytelniania:
Krok 5: Znajdź klucze Firebase W ustawieniach projektu kliknij Ustawienia wiadomości w chmurze. Stąd możesz bezpośrednio uzyskać klucz serwera.
Krok 6: Dodaj swoją aplikację internetową do Firebase
Krok 7: Pobierz inne szczegóły związane z Firebase i wklej je w panelu administracyjnym modułu PWA.
Krok 8: Uzyskaj klucz serwera Firebase z karty wiadomości w chmurze w Ustawieniach:
Krok 9: Dodaj swoją domenę w uwierzytelnianiu>>zaloguj się.
2.21 Zautomatyzowane powiadomienia push:
Administrator sklepu może zaplanować automatyczne wysyłanie powiadomień w następujących przypadkach:
a) Nowe ustawienia zamówień:�Za każdym razem, gdy składane jest nowe zamówienie z aplikacji mobilnej Magento 2 PWA.
b) Ustawienia zmiany statusu zamówienia: Za każdym razem, gdy status dostawy dowolnego zamówienia zostanie zmieniony/zaktualizowany.
c) Ustawienia porzuconego koszyka: Za każdym razem, gdy jakikolwiek użytkownik zostawia produkt w koszyku i rezygnuje z Progressive Web App.
2.22 Ręczne powiadomienie push:
Jak pokazano na powyższej migawce, administrator sklepu może personalizować i wysyłać ręczne powiadomienia push do użytkowników aplikacji mobilnej PWA. Wiadomość, zdjęcie, oferowany rabat, link przekierowania można dodać/edytować, aby poprawić skuteczność powiadomień i zwiększyć sprzedaż.
Układ strony głównej 2.3:
Magento 2 PWA Mobile App Builder oferuje w pełni konfigurowalny panel edytora DIY do dostosowywania i konfigurowania wyglądu progresywnej aplikacji internetowej. Do panelu administracyjnego można dodać różne nowe układy w oparciu o nadchodzące festiwale i okazje.
2.31 Najlepsze kategorie:
2.32 Baner kwadratowy:
2.33 Przesuwany baner:
2.34 Baner siatki:
2.35 Baner odliczający czas
2.36 Kwadratowe produkty:
2.37 Produkty przesuwne:
2.38 Produkty sieciowe:
Jak uzyskać szczegółowe informacje o aplikacji Facebook?
Aplikację Facebook można utworzyć, wykonując poniższe czynności:-
Krok 1:�Idź do danego�URL: https://developers.facebook.com/apps/
Krok 2:�Kliknij przycisk „Dodaj nową aplikację”.
Krok 3 i 4:Wprowadź nazwę swojej aplikacji i identyfikator e-mail, a następnie kliknij przycisk „Utwórz identyfikator aplikacji”.
Krok 5 i 6:�Po kliknięciu Create App ID będziesz musiał� przejść kontrolę bezpieczeństwa, jak pokazano:
Krok 7:�Kliknij na zakładkę „Ustawienia”.
Krok 8-13:�Dwie opcje będą dostępne na liście rozwijanej, Podstawowe i Zaawansowane, kliknij „Podstawowe”. Następnie wprowadź swoją „Domenę aplikacji”,�„Kontaktowy adres e-mail”, „Prywatność�URL”, „Zasady i warunki�URL”, „Dodaj logo”, „Wybierz kategorię” i kliknij przycisk „Zapisz zmiany”. Domeny aplikacji: twojadomena.com jest�poprawna twojadomena.com/store jest�nieprawidłowa www.domena.com jest�nieprawidłowa
Krok 14:�Teraz kliknij „+Dodaj platformę”.
Krok 15:�I wybierz Witrynę jako Platformę.
Krok 16:�Teraz wprowadź adres URL swojej witryny.
Krok 17 i 18:�Kliknij „Produkty+” i wybierz login Facebook.
Krok 19:�Wybierz sieć jako platformę aplikacji.
Krok 20:�Teraz kliknij Zapisz.
Krok 21 i 22:�Kliknij Ustawienia i dodaj prawidłowe identyfikatory URI przekierowania OAuth. Prawidłowe identyfikatory URI przekierowania OAuth: https://example.com/pwa-app/login
Krok 23 i 24:�Kliknij „Przegląd aplikacji”. I zaznacz „Ustaw „Nazwę swojej aplikacji” jako publiczną” na Tak.
Ostatni krok:�Skopiuj identyfikator aplikacji i klucz tajny aplikacji i wklej je w pola w module.
Jak uzyskać szczegółowe informacje o aplikacji Google?
- Przejdź do Google Developers Console (https://console.developers.google.com/project) lub kliknij link znajdujący się w prawym górnym rogu odpowiedniej zakładki na stronie konfiguracji modułu.
- Teraz kliknij Utwórz projekt po lewej stronie.
- Wpisz nazwę swojego projektu i przejdź do następnego kroku.
- Teraz kliknij APIs and auth-> Credentials z lewego menu, jak pokazano poniżej.
- Kliknij przycisk Utwórz nowy identyfikator klienta z prawego panelu ekranu.
- Przed kontynuowaniem może być konieczne wypełnienie formularza na ekranie zgody. Aby to zrobić, musisz kliknąć Ekran zgody w lewym menu, jak pokazano na powyższym obrazku.
- Wypełnij wyskakujący formularz, podając poniższe dane:
Typ aplikacji:�Aplikacja internetowa.
Autoryzowane źródła JavaScript:�Nazwa domeny Twojego sklepu (https://www.yourstore.com).
Autoryzowany identyfikator URI przekierowania lub URI strony przekierowania Loginizera:
https://example.com/pwa-app/login
- Teraz kliknij przycisk Utwórz identyfikator klienta, aby uzyskać identyfikator klienta i tajny klucz klienta.
- Teraz możesz użyć klucza klienta i identyfikatora klienta, aby umożliwić klientom logowanie się do Twojego sklepu przy użyciu ich konta Google.
3.0 Ekrany aplikacji Front End PWA:
Rzuć okiem na płynnie zaprojektowane ekrany Progressive Web App dla Magento 2:
3.1 Ekran główny:
Ekran główny Magento 2 Progressive Web App jest w pełni konfigurowalny z panelu administracyjnego modułu. Możesz zaprojektować układ ekranów aplikacji tak, jak chcesz. Niestandardowe układy można projektować w panelu administracyjnym w oparciu o wydarzenia, festiwale, okazje itp. i używać w razie potrzeby.
1. Układ dynamiczny:
Korzystając z różnych elementów projektowych (banerów, suwaków, kategorii itp.), administrator sklepu może stworzyć dynamiczny układ zgodnie z potrzebami.
2. Logo sklepu:
Dodaj logo sklepu w nagłówku aplikacji PWA.
3. Koszyk:
Ikona koszyka na zakupy w prawym górnym rogu ekranu głównego pozwala użytkownikom przełączać się na ekranie koszyka.
4. Menu nawigacji:
Przeglądaj kategorie w aplikacjach z lewym menu nawigacyjnym na ekranie głównym.
3.2 Lewe menu nawigacyjne:
Aplikacje mobilne Magento 2 PWA zapewniają bezproblemową kategoryzację produktów. Kategorie w Aplikacji Mobilnej PWA będą takie same, jak dostępne na stronie. Kupujący online mogą łatwo i bezproblemowo przeglądać produkty z wielu kategorii. Różne strony CMS można również dodać do lewego menu nawigacyjnego za pomocą panelu administracyjnego.
1. Moje konto:
Opcja Moje konto zawiera wszystkie informacje osobiste, wysyłkowe, dotyczące zamówienia. Kupujący aplikacji PWA mogą przeglądać wszystkie powiązane z nimi przechowywane dane i mogą je również aktualizować.
2. Kategorie
Kategorie wyświetlane w lewym menu nawigacyjnym aplikacji PWA są takie same jak na Twojej stronie.
3. Strony CMS:
Różne strony CMS, takie jak O nas, Kontakt z nami, Regulamin itp. Można uzyskać dostęp tutaj.
4. Język(i)
Opcja języka umożliwia użytkownikom aplikacji PWA przeglądanie aplikacji internetowej w żądanym języku. Wszystkie dostępne języki są wyświetlane tylko w tej opcji.
5. Waluta(e)
Wszystkie waluty dostępne w Twojej witrynie są wyświetlane tutaj w aplikacji�Magento 2 PWA.
6. Zaloguj się/Wyloguj
Dzięki tej opcji użytkownicy mogą łatwo zalogować się/wylogować się z aplikacji Magento 2 PWA.
3.3 Ekran kategorii:
1. Wiele widoków:
Kategorie w aplikacji PWA dla Magento 2 można przeglądać zarówno w widoku listy, jak i siatki.
2. Sortowanie:
Ta opcja pozwala kupującym online wybrać kolejność sortowania w celu zawężenia wyszukiwania i łatwego uzyskania pożądanego produktu.
3. Filtr:
Opcja filtrowania produktów upraszcza wyszukiwanie produktów. Użytkownicy mogą filtrować wszystkie produkty w kategoriach za pomocą różnych atrybutów, takich jak rozmiar, kolor, cena itp.
3.4 Ekran produktu:
Ekran produktu w Magento 2 Progressive Web App zawiera wszystkie niezbędne informacje o produkcie, takie same jak w Twoim sklepie. Od wielu zdjęć produktów po krótki i długi opis pomaga w skłonieniu użytkownika do zakupu. Dostępność produktu jest sygnalizowana jako „W magazynie” lub „Brak w magazynie” na podstawie stanu zapasów.
1. Informacje o produkcie i pielęgnacja
Tutaj zostaną wyświetlone pełne informacje o produkcie dostępne w ekwipunku.
2. Krótki opis
Użytkownicy mogą zapoznać się z krótkim opisem Twojego produktu, aby szybko podjąć decyzję o zakupie.
3. Opcje produktu:
Tutaj wyświetlane są wszystkie opcje związane z produktem, takie jak rozmiar, kolor itp.
5. Dodaj do koszyka:
Ten przycisk umożliwia użytkownikom dodawanie produktów do koszyka. Użytkownicy mogą dalej przetwarzać koszyk do zakupu.
6. Udostępnianie społecznościowe produktu:
Opcja udostępniania produktu umożliwia użytkownikom udostępnianie produktów w wielu kanałach społecznościowych.
Ekran logowania 3.5
Progresywna aplikacja internetowa Magento 2 oferuje szybkie opcje logowania jednym dotknięciem i ułatwia proces logowania/rejestracji: – Logowanie przez e-mail – Logowanie do Google – Logowanie do Facebooka
1. Zaloguj Się
Użytkownicy aplikacji mogą łatwo uwierzytelniać się i logować do aplikacji PWA przy użyciu swoich poprzednich danych logowania e-mail.
2. Zapisz się
Wszyscy nowi użytkownicy aplikacji mogą zarejestrować się i utworzyć swoje konto w sklepie z aplikacji Magento 2 PWA. Formularz rejestracyjny prosi tylko o podanie danych niezbędnych do utworzenia konta.
3. Zaloguj się przez facebook
Użytkownicy mogą logować się do aplikacji PWA za pomocą swoich poświadczeń konta na Facebooku.
4. Zaloguj się przez Google+
Użytkownicy mogą logować się do aplikacji PWA za pomocą swoich danych logowania do konta Google.
3.6 Ekran koszyka:
W koszyku aplikacji Magento 2 PWA pojawią się wszystkie dodane produkty wraz z ich ilością i ceną do zapłaty. Użytkownicy aplikacji mogą również przeglądać szczegóły produktu, aby upewnić się przed zakupem.
1. Zastosuj kupon:
Ta opcja umożliwia użytkownikom korzystanie z kuponów internetowych i zbieranie ofert rabatowych.
2. Całkowita cena produktu:
Użytkownicy mogą zobaczyć pełny koszt swojej torby na zakupy, zanim przejdą dalej. Jest automatycznie aktualizowany zgodnie z każdą aktualizacją o ilość produktu lub nowy dodatek.
3. Zaktualizuj ilość produktu:
Użytkownicy aplikacji PWA mogą nawet aktualizować ilość produktu za pomocą opcji „Aktualizuj ilość”.
4. Usuń produkt:
Użytkownicy aplikacji mogą po prostu usunąć produkt z koszyka, po prostu dotykając opcji „Usuń”.
5. Kontynuuj zakupy:
Użytkownicy aplikacji mogą opuścić koszyk, aby przeglądać więcej produktów w Twojej aplikacji.
6. Przejdź do kasy:
Użytkownicy aplikacji PWA mogą przejść dalej do ekranów kasy i płatności, klikając opcję „Przejdź do kasy”.
3.7 Ekran kasy:
Aplikacje PWA Mobile dla Magento 2 są wyposażone w jeden ekran bez bałaganu, z wymaganymi tylko odpowiednimi i niezbędnymi polami. Użytkownicy aplikacji otrzymują pełny przegląd zamówienia przed dokonaniem płatności, np. szczegóły wysyłki, dane rozliczeniowe, podsumowanie zamówienia, komentarz do zamówienia, podsumowanie płatności.
1. Szczegóły dotyczące wysyłki i rozliczeń
Ten ekran zawiera szczegółowe informacje o adresach wysyłkowych i rozliczeniowych zapisanych przez użytkownika. W razie potrzeby użytkownik może również edytować/zapisywać nowy adres wysyłki.
2. Podsumowanie zamówienia
Użytkownicy aplikacji mogą zobaczyć szczegóły produktu przed dokonaniem płatności.
3. Metody wysyłki
Wszystkie dostępne metody wysyłki są wyświetlane tutaj. Użytkownicy mogą wybrać ten, który odpowiada ich potrzebom.
4. Komentarz do zamówienia
Użytkownicy mogą również dodać dowolny komentarz związany z ich zamówieniem, który będzie widoczny dla administratora sklepu na stronie zamówienia w zapleczu.
6. Podsumowanie płatności
Ta sekcja wyświetla pełne szczegóły płatności za awarię związane z zakupem.
7. Przejdź do płatności
Użytkownicy aplikacji PWA zostaną przekierowani do ekranu Płatności po naciśnięciu przycisku „Przejdź do płatności”.
3.8 Ekran płatności:
Aplikacja Magento 2 PWA zapewnia wszystkie płatności internetowe (strona internetowa) w aplikacji. Użytkownicy aplikacji znajdą tutaj te same opcje płatności, które są dostępne w aplikacjach. Ekran płatności Magento 2 Progressive Web App jest w pełni zoptymalizowany pod kątem wyświetlania aplikacji.
3.9 Ekran Mojego Konta:
Ekran mojego konta aplikacji Magento 2 PWA oferuje wszystkie dane użytkowników dostępne w Progressive Web App. Kupujący online mają dostęp do danych osobowych, adresu wysyłki, szczegółów zamówienia itp.
1. Dane osobowe
Użytkownicy mogą również przeglądać i aktualizować swoje wcześniej zapisane dane profilu.
2. Adres(y) wysyłki
Użytkownicy aplikacji mogą zobaczyć pełną listę zapisanych adresów wysyłkowych w aplikacji PWA.
3. Szczegóły zamówienia
Użytkownicy aplikacji mają dostęp do pełnej listy wcześniej złożonych zamówień z aplikacji PWA oraz ich szczegółów.
4. Funkcja ponownego zamówienia
Na ekranie Moje konto w aplikacji PWA znajduje się przycisk bezpośredniego zamówienia. Wszystkie poprzednie produkty w ramach tego zamówienia zostaną dodane do koszyka za pomocą jednego przycisku.
3.10 Ekran szczegółów zamówienia
Progresywna aplikacja internetowa Magento 2 wyświetla pełne szczegóły zamówień z poprzednich zamówień aplikacji. Ten ekran zawiera szczegóły zamówienia, historię statusu, adresy wysyłkowe i rozliczeniowe itp. dla każdego zamówienia złożonego za pośrednictwem aplikacji Magento 2 PWA. Użytkownicy aplikacji mogą szybko przeglądać całe podsumowanie zamówienia i śledzić status dostawy.
