Tot ce trebuie să știți despre Magento PWA Studio

Publicat: 2022-04-18

Progressive Web Apps sau PWA câștigă din ce în ce mai multă popularitate datorită funcției lor actualizate. Datorită tehnologiei de ultimă oră, îmbunătățește experiența clienților și aduce mai multe venituri afacerii. Prin urmare, multe companii au aplicat această platformă pentru magazinele online pentru a utiliza avantajul PWA. În special, multe companii aleg aplicații web progresive pe Magento. Apoi vă vom oferi o listă detaliată despre studioul Magento PWA pentru a vă ajuta să vă obișnuiți mai mult cu aceasta.

O prezentare generală a studioului PWA

PWA Studio

Ce este Progressive Web App?

O aplicație web progresivă arată și se simte ca o aplicație nativă, dar funcționează direct în browserele mobile. Nu este nevoie să descărcați nimic dintr-un App Store. Clienții beneficiază de o experiență asemănătoare aplicației instantaneu în browserele lor.

Caracteristica aplicației web progresive

Capacitatea de a lucra offline: Lucrătorii de servicii – tehnologia este responsabilă pentru această caracteristică. Astfel, permite aplicației să stocheze lucruri offline și să gestioneze flexibil solicitările de rețea pentru a le recupera. Ca rezultat, duce la minimizarea cantității de date pe care trebuie să o folosim pentru a rula aplicația.

Descoperire și instalare ușoară: Un PWA este un site web cu unele extra care pot fi descoperite prin motoarele de căutare obișnuite precum Google sau Bing. Prin urmare, utilizatorii nu au nevoie să descarce nimic din magazinele de aplicații. Instalarea unui PWA este foarte ușoară, se întâmplă în fundal în timpul primei vizite.

Utilizarea funcțiilor telefonului: PWA-urile au o mulțime de posibilități de a accesa funcțiile dispozitivului pe Android și câteva mai puțin pe iOS. Utilizarea camerelor, a GPS-ului sau a scanerelor de amprentă într-un mod asemănător unei aplicații îmbogățește experiența utilizatorului.

Actualizări automate: un PWA permite editorilor să implementeze imediat corecții. În plus, le permite să păstreze controlul deplin asupra conținutului. Clienții folosesc întotdeauna cea mai recentă versiune a aplicației.

Siguranță: prin utilizarea protocolului HTTPS, datele sunt sigure datorită criptării și, prin urmare, sunt mai dificil de interceptat și schimbat. Mai mult, utilizatorii percep HTTPS ca pe o garanție a siguranței și fiabilității editorilor. Și Google oferă puncte suplimentare în clasamentul căutării pentru utilizarea acestuia.

Sentiment asemănător aplicației: întreaga idee din spatele PWA-urilor este găsirea unei modalități de a conecta cea mai bună experiență posibilă la una asemănătoare aplicației cu natura deschisă a web-ului.

O schiță a Magento PWA Studio

Studio Magento

Originea Magento PWA Studio

Magento a lansat un set de instrumente pentru toți comercianții care operează magazine online. Magento PWA Studio este numele acestui set de instrumente. Retailerii online vor economisi mult timp și bani pentru a dezvolta aplicații native pentru toate sistemele de operare diferite.

Datorită instrumentelor de proiectare a site-urilor web asemănătoare aplicațiilor Magento, comercianții online își pot crește rata de conversie pe mobil. Este rezultatul îmbunătățirii experienței pe mai multe canale pentru clienți. În plus, Magento PWA îi permite să se comporte ca o aplicație nativă pentru o experiență mai bună pentru utilizator.

Comercianții pot profita de o arhitectură front-end fulgerătoare și de API-uri web deschise. Ajută la transformarea magazinelor lor în ceea ce devine rapid noua normă.

PWA Buildpack

Buildpack conține dezvoltarea esențială și construiește biblioteci și instrumente pentru crearea unui front-end și PWA extrem de rapid. Vă permite să vă aranjați mediul local pentru dezvoltarea PWA.

Vitrina PWA

PWA Storefront, cunoscut și sub numele de Venia Storefront, este un PWA dovadă de concept construit cu instrumente Peregrine și PWA Buildpack. Când aflați despre Magento PWA Studio și despre ceea ce poate realiza, vitrina arată mostre de pagini de categorii și detalii despre produse.

Călător

Proiectul Peregrine al Magento, așa cum s-a menționat anterior, conține un set de instrumente și componente UI pentru crearea unui PWA Magento. Componentele pot fi combinate, extinse și amestecate pentru a crea magazine PWA Magento 2 unice.

Câteva caracteristici remarcabile ale Magento PWA Studio

ReactJS – ReactJS funcționează foarte bine și oferă o experiență excelentă de cumpărături și dezvoltatori.

Alternativă pentru ecranul de pornire – Magento PWA oferă un magazin care poate fi descărcat pe ecranul de pornire. Va arăta și va funcționa ca o aplicație nativă

Funcționează offline – aplicațiile web PWA pot funcționa atât offline, cât și online.

Back-End puternic – Backend-ul intern robust al Magento oferă o experiență de utilizator fluidă, cu puține probleme.

Avantajul atunci când utilizați Magento PWA Studio

Cum se instalează Magento PWA Studio

Instrumente de dezvoltare cuprinzătoare

Magento Studio oferă instrumentelor de dezvoltare PWA care sunt de ultimă generație și includ documentație amănunțită. Utilizatorii își pot aranja rapid propriile medii locale de dezvoltare PWA cu ei.

Configurare ușoară

Configurarea PWA din backend este simplă cu Magento Studio. Pentru a porni cu succes aplicația, utilizatorii trebuie să insereze adresa URL a instanței Magento în fișierul.env. Apoi veți clona un depozit și veți rula o comandă. A fost evident încă de la început că ușurința dezvoltării a fost un obiectiv principal.

GraphQL

Deoarece GraphQL folosește preluarea declarativă a datelor, PWA-urile dezvoltate cu Magento Studio nu au aproape nicio suprapreluare a interogărilor. Apoi, este mai capabil să găzduiască mai mulți utilizatori din diverse surse.

Sprijin comunitar

Magento este o platformă de comerț electronic bine-cunoscută, care a avut ca rezultat o mare comunitate globală de utilizatori și colaboratori Magento PWA.

Arhitectura și cadrul studioului Magento PWA

Studioul este foarte simplu de configurat și utilizat pentru a evita greșelile de la începutul procesului de dezvoltare a aplicației. Dezvoltatorii sunt avertizați imediat când ceva nu este aranjat corespunzător. Acest lucru economisește timp atunci când vine vorba de descoperirea și repararea erorilor atunci când programul este aproape finalizat.

Constructorul studioului Magento PWA este gata de utilizare

Nu este nevoie să instalați constructorul și să petreceți timp personalizând și configurand mediul. Totul funcționează imediat cu Magento PWA Studio după instalare. Totul este pregătit și gata de plecare.

Elementele prefabricate sunt adaptabile

PWA Studio include un număr mare de părți ale site-ului web finalizate și gata de utilizare. Când vă creați site-ul web, puteți utiliza oricare sau toate elementele în orice combinație. În acest moment, elementele pregătite ar putea fi folosite exact așa cum sunt. Chiar și piesele prefabricate pot fi modificate pentru a satisface nevoile dezvoltatorului sau ale consumatorului.

Rutare și stocare în cache perfect simple

Funcțiile de rutare și stocare în cache ale Magento PWA Studio sunt calități suplimentare excelente. Rutarea și stocarea în cache sunt efectuate în același mod în care au fost făcute întotdeauna, fără modificări. Dacă adoptați tehnica convențională de rutare și stocare în cache Magento, totuși, nu veți avea nevoie de nicio participare la rutare și stocare în cache.

Magento PWA Studio și dezavantajele pe care va trebui să le depășiți

Platformă unică

Dacă doriți să dețineți Magento Studio, aveți nevoie ca fiecare magazin să ruleze pe Magento 2.3 și versiuni mai noi. Deși nu este necesar să vă faceți griji cu privire la compatibilitate, aceasta este destul de limitativă.

Lipsa de compatibilitate

Când vine vorba de compatibilitate, caracteristica GraphicQL a Magento Studios o face inadecvată cu versiunile anterioare.

Probleme de asistență iOS

Magento nu acceptă notificări iOS PWA și nu va funcționa cu dispozitive iOS care nu sunt conectate la internet.

Probleme de validare

La crearea de noi conturi de client, pot apărea probleme de validare. Acest lucru este valabil mai ales pentru utilizatorii iOS atunci când configurează o parolă. O notificare nu poate fi transmisă dacă parola aleasă nu îndeplinește cerințele privind parola.

Cum se instalează Magento PWA Studio (cu versiunea 2 )

Cum se instalează Magento PWA Studio

Pasul 1: Instalați cea mai recentă versiune Magento

Pentru a instala Magento PWA Studio, trebuie mai întâi să aveți instalată o versiune Magento 2.3.x. Nu puteți instala Magento PWA Studio Project(2.3) fără acesta, deoarece nicio altă versiune Magento nu îl acceptă.

Pasul 2: Instalați NodeJS

După aceea, va trebui să instalați NodeJS (versiunea >=10.14.1). Dacă nu sunteți familiarizat cu tehnica, utilizați comanda listată mai jos. (Acesta este numai pentru utilizatorii Linux.)

sudo apt-get install nodejs

În primul rând, trebuie să verificați versiunea Node :

 node -v

Apoi, revizuiți versiunea NPM:

 npm -v

Dacă versiunea pe care ați instalat-o este mai veche decât cea afișată mai sus, utilizați comanda de mai jos pentru a face upgrade la cea mai recentă și stabilă versiune a nodului.

 sudo npm cache clean -f
 sudo npm install -gn
 sudo n stable

Pasul 3: Instalați și rulați Node JS

După instalarea și rularea NodeJS, va trebui să instalați Yarn (Yarn >=1.13.0 ). Rulați următoarea comandă pentru instalarea Yarn. (Aplicabil numai pentru sistemul de operare Linux).

 sudo npm install yarn -g

Acum verificați versiunea de fire:

 yarn -v

Pasul 4:

Acum că Yarn este instalat, clonează depozitul PWA în directorul de dezvoltare.

 Pasul 5:

Consecutiv la acest pas, instalați dependențele proiectului rulând următoarea comandă.

 yarn install

Pasul 6: Creați fișierul .env

Pentru a crea fișierul .env, executați comanda următoare din directorul rădăcină PWA-

(Pentru tema Venia puteți folosi Magento care este instalat de dvs. sau Magento implicit 2.3.1. Aici folosim implicit.)

 De asemenea, puteți crea fișierul .env și puteți seta valoarea dvs. personalizată MAGENTO_BACKEND_URL utilizând următoarea comandă:

 Pasul 7: Instalați certificatul SSL

Instalați certificatul SSL pe măsură ce PWA rulează pe o cale sigură. Puteți rula comanda create-custom-origin pentru generarea certificatului SSL:

 Pasul 8: Instalați datele Venia Sample

De asemenea, puteți instala datele Venia Sample, există deja un script bash disponibil la

 Pentru a instala date mostre în Magento, executați următoarele comenzi:

 Construiește acum toate artefactele pentru tema ta rulând-

 yarn run build

Porniți serverul rulând oricare dintre următoarele comenzi, conform nevoilor dvs., din directorul rădăcină al proiectului PWA.

În ceea ce privește dezvoltarea-

 Cu scopul de a rula PWA Studio de dezvoltator complet

 Pentru construirea de artefacte și rularea studioului PWA la montare-

 PWA a fost acum instalat cu succes. Când rulați comenzile menționate mai sus, veți vedea adresa URL la care funcționează PWA. Apoi va indica dacă instalarea a avut succes sau nu 

Instalați Magento PWA Studio

Concluzie

Vă prezentăm acest articol cu ​​speranța că: aveți o privire de ansamblu asupra studioului Magento PWA. Cu o mulțime de funcții uimitoare, merită cu siguranță săriți pentru a vă crește magazinul online. Prin urmare, afacerea dvs. poate satisface cererea clienților și aduce mai multe oportunități de dezvoltare în mediul internet. Cu toate acestea, dacă sunteți încă confuz cu privire la această tehnologie, Magesolution este dispus să fie un partener pentru a vă ajuta afacerea. Cu multe experiențe în acest domeniu , suntem încrezători că oferim cel mai bun serviciu: Magento Progressive Web Application Development. Prin urmare, dacă aveți întrebări, contactați-ne pentru a avea mai multe informații.