{"id":806931,"date":"2020-06-10T10:48:07","date_gmt":"2020-06-10T10:48:07","guid":{"rendered":"https:\/\/www.knowband.com\/blog\/?p=805464\/"},"modified":"2022-08-13T12:01:14","modified_gmt":"2022-03-04T16:43:24","slug":"magento-2-pwa-mobile-app-user-manual","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/pl\/instrukcja-obslugi\/magento-2-pwa-mobile-app-user-manual\/","title":{"rendered":"Magento 2 PWA Mobile App – User Manual"},"content":{"rendered":"

<\/head><\/p>\n

1.0 Wprowadzenie<\/h2>\n

B\u0119d\u0105c w bran\u017cy retail eCommerce, na pewno natrafi\u0142e\u015b na s\u0142owo PWA (Progressive Web App). Je\u015bli tak, musisz r\u00f3wnie\u017c zdawa\u0107 sobie spraw\u0119 z mo\u017cliwo\u015bci, jakie nios\u0105 ze sob\u0105 jako aplikacja zakupowa. W przeciwnym razie wyl\u0105dowa\u0142e\u015b we w\u0142a\u015bciwym miejscu. Wraz ze sta\u0142ym wzrostem wykorzystania aplikacji zakupowych (zar\u00f3wno natywnych, jak i PWA), sklepy internetowe przechodz\u0105 na rozw\u00f3j aplikacji mobilnych PWA dla swoich firm. Uruchamianie progresywnej aplikacji internetowej jest obecnie do\u015b\u0107 prostszym i niedrogim zadaniem. KnowBand uruchomi\u0142 aplikacj\u0119 mobiln\u0105 Magento 2 PWA, kompletne bezkodowe i zautomatyzowane narz\u0119dzie do uruchamiania progresywnej aplikacji internetowej. Kr\u00f3tko m\u00f3wi\u0105c, za ka\u017cdym razem, gdy dowolny u\u017cytkownik otworzy adres URL Twojego sklepu w przegl\u0105darce mobilnej, otrzyma monit \u201eDodaj do ekranu g\u0142\u00f3wnego\u201d. Progresywna aplikacja internetowa Magento 2 zostanie dodana do urz\u0105dzenia u\u017cytkownika, tak jak ka\u017cda inna aplikacja, a zakupy online b\u0119d\u0105 mog\u0142y by\u0107 dokonywane w podr\u00f3\u017cy.<\/p>\n

1.1 Wy\u015bwietl aplikacj\u0119 demonstracyjn\u0105:<\/h3>\n

Poznaj demo progresywnej aplikacji internetowej dla Magento 2 i zobacz, jak b\u0119d\u0105 wygl\u0105da\u0107 i dzia\u0142a\u0107 Twoje ostateczne aplikacje:<\/p>\n

URL sklepu demonstracyjnego:\ufffd<\/strong>https:\/\/ma2demo.knowband.com\/pwa\/manager\/<\/a>
\nURL aplikacji PWA:\ufffd<\/strong>https:\/\/ma2demo.knowband.com\/pwa\/pwa-app\/<\/a><\/p>\n

 <\/p>\n

[IMP] Uwagi dotycz\u0105ce Magento 2 iOS PWA:<\/h4>\n

\ufffd> Urz\u0105dzenia z systemem iOS nie oferuj\u0105 wbudowanego monitu \u201eDodaj do ekranu g\u0142\u00f3wnego\u201d. U\u017cytkownicy musz\u0105 r\u0119cznie doda\u0107 aplikacj\u0119 mobiln\u0105 Magento 2 PWA do ekranu g\u0142\u00f3wnego iPhone’a lub iPada. \ufffd> iOS nie obs\u0142uguje powiadomie\u0144 web push. Powiadomienia push mo\u017cna wysy\u0142a\u0107 tylko na urz\u0105dzenie z systemem Android z panelu administratora\ufffdMagento 2 PWA Mobile App Builder.<\/p>\n

[NOWA AKTUALIZACJA] Magento 2\ufffdPWA obs\u0142uguje j\u0119zyki RTL:<\/h4>\n

Kreator aplikacji mobilnych Magento 2 PWA obs\u0142uguje teraz wszystkie j\u0119zyki \u015bwiata, w tym RTL (od prawej do lewej). Aplikacja mobilna PWA dla Magento 2 mo\u017ce mie\u0107 j\u0119zyki takie jak arabski, hebrajski, perski itp. W\u0142a\u015bciciel sklepu mo\u017ce oferowa\u0107 wszystkie j\u0119zyki strony internetowej w Progressive Web App, a nawet dodawa\u0107 nowe.<\/p>\n

Ekrany panelu administracyjnego 2.0:<\/h2>\n

Dzi\u0119ki przyjaznemu zapleczu panelu administracyjnego administrator sklepu mo\u017ce konfigurowa\u0107 i dostosowywa\u0107 wygl\u0105d, dzia\u0142anie i dzia\u0142anie aplikacji mobilnej PWA. Wystarczy kilka klikni\u0119\u0107 i prze\u0142\u0105cze\u0144 myszy, aby wprowadzi\u0107 zmiany w progresywnych aplikacjach internetowych Magento 2. Przyjrzyjmy si\u0119 szczeg\u00f3\u0142owo ekranom panelu administracyjnego:<\/p>\n

2.1 Ustawienia og\u00f3lne:<\/h3>\n

\"Og\u00f3lne-settings\"<\/p>\n

a) W\u0142\u0105cz rozszerzenie:<\/strong>\ufffdW\u0142\u0105cz\ufffdmodu\u0142 Magento 2\ufffdPWA, aby aplikacja webowa dzia\u0142a\u0142a na smartfonach u\u017cytkownik\u00f3w.<\/p>\n

b) Przekieruj na stron\u0119 koszyka po dodaniu do koszyka:<\/strong>\ufffdW\u0142\u0105cz przekierowywanie u\u017cytkownik\u00f3w do koszyka lub wy\u0142\u0105cz, aby utrzyma\u0107 ich na ekranie produktu.<\/p>\n

c) Kr\u00f3tki opis wy\u015bwietlacza:<\/strong>\ufffdW\u0142\u0105cz dodawanie i wy\u015bwietlanie kr\u00f3tkiego opisu na ekranie produktu progresywnej aplikacji internetowej.<\/p>\n

d) W\u0142\u0105cz raportowanie dziennika \u017c\u0105da\u0144:<\/strong> W\u0142\u0105cz t\u0119 zak\u0142adk\u0119, aby aktywowa\u0107 plik dziennika w aplikacji mobilnej PWA. Ten plik dziennika mo\u017ce s\u0142u\u017cy\u0107 do naprawy wszelkich nienormalnych zachowa\u0144 progresywnej aplikacji sieci Web.<\/p>\n

e) Poka\u017c podgl\u0105d aplikacji:<\/strong> W\u0142\u0105cz, aby doda\u0107 podgl\u0105d telefonu w panelu administracyjnym. Wszystkie zmiany kolor\u00f3w, czcionek, ekranu g\u0142\u00f3wnego b\u0119d\u0105 wy\u015bwietlane w telefonie podgl\u0105du w czasie rzeczywistym.<\/p>\n

f) W\u0142\u0105cz pasek kart:<\/strong> Dodaj dolny pasek kart w aplikacji mobilnej Magento 2 PWA.<\/p>\n

g) Wybierz uk\u0142ad strony g\u0142\u00f3wnej:<\/strong>\ufffdWybierz po\u017c\u0105dane uk\u0142ady spo\u015br\u00f3d dodanych i popraw wygl\u0105d i dzia\u0142anie aplikacji.<\/p>\n

\"Ustawienia<\/p>\n

h) Obraz ikony aplikacji:<\/strong>\ufffdPrze\u015blij samodzielnie ikon\u0119 aplikacji Magento 2 PWA i zmie\u0144 j\u0105 w razie potrzeby.<\/p>\n

i) Nazwa aplikacji PWA:<\/strong>\ufffdWpisz nazw\u0119 progresywnej aplikacji internetowej Magento 2.<\/p>\n

j) Wybierz czcionk\u0119 dla aplikacji PWA:<\/strong>\ufffdWybierz czcionk\u0119 swojej aplikacji PWA dla Magento 2.<\/p>\n

k) Kolor przycisku aplikacji:<\/strong> Wybierz kolor przycisku dla swojej aplikacji mobilnej PWA.<\/p>\n

l) Kolor tekstu przycisku aplikacji:<\/strong> Wybierz kolor tekstu przycisku dla swojej aplikacji Magento 2. Progressive Web App.<\/p>\n

m) Kolor motywu aplikacji:<\/strong> Wybierz kolor motywu (nag\u0142\u00f3wek) swojej aplikacji internetowej.<\/p>\n

n) Aplikacja\ufffd Kolor t\u0142a:\ufffd<\/strong>Wybierz kolor t\u0142a progresywnej aplikacji internetowej.<\/p>\n

o) Kolor t\u0142a ekranu powitalnego:<\/strong> Wybierz odpowiedni\u0105 opcj\u0119 koloru t\u0142a ekranu powitalnego aplikacji PWA.<\/p>\n

\"Ustawienia<\/p>\n

p) Wy\u0142\u0105czone metody wysy\u0142ki<\/strong>: Wybierz metody wysy\u0142ki, kt\u00f3re nie b\u0119d\u0105 dzia\u0142a\u0107 w aplikacji mobilnej Magento 2 PWA.<\/p>\n

q) W\u0142\u0105cz i prze\u015blij logo:<\/strong> Dodaj obraz logo swojego sklepu, kt\u00f3ry b\u0119dzie wy\u015bwietlany w nag\u0142\u00f3wku aplikacji PWA Mobile.<\/p>\n

2.2 Ustawienia powiadomie\u0144 push:<\/h3>\n

Progresywna aplikacja internetowa Magento 2 oferuje nieograniczon\u0105 liczb\u0119 powiadomie\u0144 push na rynku oraz promuje oferty i produkty w sklepach. Administrator sklepu b\u0119dzie otrzymywa\u0107 powiadomienia push przez ca\u0142e \u017cycie bez dodatkowych op\u0142at.<\/p>\n

\"powiadomienia<\/p>\n

R\u00f3\u017cne pola na tej karcie ustawie\u0144 wymagaj\u0105 skonfigurowania konta Firebase. Oto jak mo\u017cesz go ustawi\u0107:<\/p>\n

Jak za\u0142o\u017cy\u0107 konto Firebase?<\/strong><\/p>\n

Krok 1:<\/strong> Zaloguj si\u0119 do Google Firebase<\/p>\n

\"baza<\/p>\n

Krok 2:<\/strong> Utw\u00f3rz nowy projekt Po klikni\u0119ciu na Dodaj projekt pojawi si\u0119 nast\u0119puj\u0105ce okno dialogowe:<\/p>\n

\"tworzenie-projektu\"
\nUtworzenie projektu zajmie kilka sekund. Gdy projekt b\u0119dzie gotowy, kliknij kontynuuj.<\/p>\n

\"kontynuuj-projekt\"<\/p>\n

Krok 3:<\/strong> Zarz\u0105dzaj ustawieniami projektu Po utworzeniu projektu kliknij Ustawienia projektu.<\/p>\n

\"ustawienia<\/p>\n

Krok 4:<\/strong> Przejd\u017a do opcji uwierzytelniania:<\/p>\n

\"opcje
\nKrok 5:<\/strong> Znajd\u017a klucze Firebase W ustawieniach projektu kliknij Ustawienia wiadomo\u015bci w chmurze. St\u0105d mo\u017cesz bezpo\u015brednio uzyska\u0107 klucz serwera.<\/p>\n

\"klawisz
\nKrok 6:<\/strong> Dodaj swoj\u0105 aplikacj\u0119 internetow\u0105 do Firebase<\/p>\n

\"web-aplikacja-do-firebase\"<\/p>\n

\"web-aplikacja-do-firebase\"<\/p>\n

Krok 7:<\/strong> Pobierz inne szczeg\u00f3\u0142y zwi\u0105zane z Firebase i wklej je w panelu administracyjnym modu\u0142u PWA.<\/p>\n

\"firebase-szczeg\u00f3\u0142y\"<\/p>\n

Krok 8:<\/strong> Uzyskaj klucz serwera Firebase z karty wiadomo\u015bci w chmurze w Ustawieniach:<\/p>\n

\"klawisz<\/p>\n

Krok 9:<\/strong> Dodaj swoj\u0105 domen\u0119 w uwierzytelnianiu>>zaloguj si\u0119.<\/p>\n

\"klucz-serwera-firebase\"<\/p>\n

\"klucz-serwera-firebase\"<\/p>\n

2.21 Zautomatyzowane powiadomienia push:<\/h4>\n

Administrator sklepu mo\u017ce zaplanowa\u0107 automatyczne wysy\u0142anie powiadomie\u0144 w nast\u0119puj\u0105cych przypadkach:<\/p>\n

\"push-powiadomienia-2\"<\/p>\n

a) Nowe ustawienia zam\u00f3wie\u0144:<\/strong>\ufffdZa ka\u017cdym razem, gdy sk\u0142adane jest nowe zam\u00f3wienie z aplikacji mobilnej Magento 2 PWA.<\/p>\n

b) Ustawienia zmiany statusu zam\u00f3wienia:<\/strong> Za ka\u017cdym razem, gdy status dostawy dowolnego zam\u00f3wienia zostanie zmieniony\/zaktualizowany.<\/p>\n

c) Ustawienia porzuconego koszyka:<\/strong> Za ka\u017cdym razem, gdy jakikolwiek u\u017cytkownik zostawia produkt w koszyku i rezygnuje z Progressive Web App.<\/p>\n

2.22 R\u0119czne powiadomienie push:<\/h4>\n

\"wy\u015blij<\/p>\n

Jak pokazano na powy\u017cszej migawce, administrator sklepu mo\u017ce personalizowa\u0107 i wysy\u0142a\u0107 r\u0119czne powiadomienia push do u\u017cytkownik\u00f3w aplikacji mobilnej PWA. Wiadomo\u015b\u0107, zdj\u0119cie, oferowany rabat, link przekierowania mo\u017cna doda\u0107\/edytowa\u0107, aby poprawi\u0107 skuteczno\u015b\u0107 powiadomie\u0144 i zwi\u0119kszy\u0107 sprzeda\u017c.<\/p>\n

Uk\u0142ad strony g\u0142\u00f3wnej 2.3:<\/h3>\n

Magento 2 PWA Mobile App Builder oferuje w pe\u0142ni konfigurowalny panel edytora DIY do dostosowywania i konfigurowania wygl\u0105du progresywnej aplikacji internetowej. Do panelu administracyjnego mo\u017cna doda\u0107 r\u00f3\u017cne nowe uk\u0142ady w oparciu o nadchodz\u0105ce festiwale i okazje.<\/p>\n

\"uk\u0142ad-strony-g\u0142\u00f3wnej\"<\/p>\n

\"uk\u0142ad-ekranu<\/p>\n

2.31 Najlepsze kategorie:<\/h4>\n

\"najlepsze<\/p>\n

2.32 Baner kwadratowy:<\/h4>\n

\"kwadrat-baner\"<\/p>\n

2.33 Przesuwany baner:<\/h4>\n

\"przesuwany<\/p>\n

2.34 Baner siatki:<\/h4>\n

\"siatka-banery\"<\/h4>\n

2.35 Baner odliczaj\u0105cy czas<\/h4>\n

\"baner<\/p>\n

2.36 Kwadratowe produkty:<\/h4>\n

\"produkty-kwadrat\"<\/p>\n

2.37 Produkty przesuwne:<\/h4>\n

\"produkty-przesuwne\"<\/p>\n

2.38 Produkty sieciowe:<\/h4>\n

\"produkty-siatki\"<\/p>\n

Jak uzyska\u0107 szczeg\u00f3\u0142owe informacje o aplikacji Facebook?<\/h3>\n

Aplikacj\u0119 Facebook mo\u017cna utworzy\u0107, wykonuj\u0105c poni\u017csze czynno\u015bci:-<\/p>\n

Krok 1:<\/strong>\ufffdId\u017a do danego\ufffdURL: https:\/\/developers.facebook.com\/apps\/<\/p>\n

Krok 2:<\/strong>\ufffdKliknij przycisk \u201eDodaj now\u0105 aplikacj\u0119\u201d.<\/p>\n

\"dodaj-nowa-aplikacja\"<\/a><\/p>\n

Krok 3 i 4:<\/strong>Wprowad\u017a nazw\u0119 swojej aplikacji i identyfikator e-mail, a nast\u0119pnie kliknij przycisk \u201eUtw\u00f3rz identyfikator aplikacji\u201d.<\/p>\n

\"utw\u00f3rz<\/a><\/p>\n

Krok 5 i 6:<\/strong>\ufffdPo klikni\u0119ciu Create App ID b\u0119dziesz musia\u0142\ufffd przej\u015b\u0107 kontrol\u0119 bezpiecze\u0144stwa, jak pokazano:<\/p>\n

\"utw\u00f3rz<\/a><\/p>\n

Krok 7:<\/strong>\ufffdKliknij na zak\u0142adk\u0119 \u201eUstawienia\u201d.<\/p>\n

\"ustawienie<\/a><\/p>\n

Krok 8-13:<\/strong>\ufffdDwie opcje b\u0119d\u0105 dost\u0119pne na li\u015bcie rozwijanej, Podstawowe i Zaawansowane, kliknij \u201ePodstawowe\u201d. Nast\u0119pnie wprowad\u017a swoj\u0105 \u201eDomen\u0119 aplikacji\u201d,\ufffd\u201eKontaktowy adres e-mail\u201d, \u201ePrywatno\u015b\u0107\ufffdURL\u201d, \u201eZasady i warunki\ufffdURL\u201d, \u201eDodaj logo\u201d, \u201eWybierz kategori\u0119\u201d i kliknij przycisk \u201eZapisz zmiany\u201d. Domeny aplikacji: twojadomena.com jest\ufffdpoprawna twojadomena.com\/store jest\ufffdnieprawid\u0142owa www.domena.com jest\ufffdnieprawid\u0142owa<\/p>\n

\"identyfikator-aplikacji<\/a><\/p>\n

Krok 14:<\/strong>\ufffdTeraz kliknij \u201e+Dodaj platform\u0119\u201d.<\/p>\n

\"dodaj<\/a>
\nKrok 15:\ufffd<\/strong>I wybierz Witryn\u0119 jako Platform\u0119.<\/p>\n

\"wybierz<\/a><\/p>\n

Krok 16:<\/strong>\ufffdTeraz wprowad\u017a adres URL swojej witryny.<\/p>\n

\"enter-strony-url\"<\/a>
\nKrok 17 i 18:<\/strong>\ufffdKliknij \u201eProdukty+\u201d i wybierz login Facebook.<\/p>\n

\"Nazwa<\/a>
\nKrok 19:<\/strong>\ufffdWybierz sie\u0107 jako platform\u0119 aplikacji.<\/p>\n

\"wybierz<\/a><\/p>\n

Krok 20:<\/strong>\ufffdTeraz kliknij Zapisz.<\/p>\n

\"facebook<\/a>
\nKrok 21 i 22:\ufffd<\/strong>Kliknij Ustawienia i dodaj prawid\u0142owe identyfikatory URI przekierowania OAuth. Prawid\u0142owe identyfikatory URI przekierowania OAuth: https:\/\/example.com\/pwa-app\/login<\/p>\n

\"przekierowanie-URL\"<\/a><\/p>\n

Krok 23 i 24:<\/strong>\ufffdKliknij \u201ePrzegl\u0105d aplikacji\u201d. I zaznacz \u201eUstaw \u201eNazw\u0119 swojej aplikacji\u201d jako publiczn\u0105\u201d na Tak.<\/p>\n

\"recenzja<\/a>
\nOstatni krok:<\/strong>\ufffdSkopiuj identyfikator aplikacji i klucz tajny aplikacji i wklej je w pola w module.<\/p>\n

\"ostatni<\/a><\/p>\n

Jak uzyska\u0107 szczeg\u00f3\u0142owe informacje o aplikacji Google?<\/h3>\n