Tutto quello che c'è da sapere sullo studio Magento PWA

Le Progressive Web App o PWA guadagnano sempre più popolarità grazie alla funzionalità aggiornata. Grazie a una tecnologia all'avanguardia, migliora l'esperienza del cliente e porta maggiori entrate al business. Pertanto, molte aziende hanno applicato questa piattaforma ai negozi online per sfruttare il vantaggio di PWA. In particolare, molte aziende scelgono app Web progressive su Magento. Quindi ti forniremo una lista di controllo dettagliata sullo studio Magento PWA per aiutarti ad abituarti maggiormente.

Una panoramica dello studio PWA

Che cos'è l'app Web progressiva?

Un'app Web progressiva sembra e si sente come un'app nativa, ma funziona direttamente nei browser mobili. Non è necessario scaricare nulla da un App Store. I clienti ottengono invece un'esperienza simile a un'app istantaneamente nei loro browser.

Funzionalità dell'app Web progressiva

La capacità del lavoro offline: Operatori di servizio: la tecnologia è responsabile di tale funzionalità. Pertanto, consente all'app di archiviare le cose offline e di gestire in modo flessibile le richieste di rete per recuperarle. Di conseguenza, porta a ridurre al minimo la quantità di dati che dobbiamo utilizzare per eseguire l'app.

Rilevabilità e facile installazione: una PWA è un sito Web con alcuni extra che possono essere scoperti tramite i normali motori di ricerca come Google o Bing. Pertanto, gli utenti non hanno bisogno di scaricare nulla dagli app store. L'installazione di una PWA è davvero semplice, avviene in background durante la prima visita.

Utilizzo delle funzionalità del telefono: le PWA hanno molte possibilità di accedere alle funzionalità del dispositivo su Android e alcune in meno su iOS. L'utilizzo di fotocamere, GPS o scanner di impronte digitali in modo simile a un'app arricchisce l'esperienza dell'utente.

Aggiornamenti automatici: una PWA consente agli editori di implementare le patch immediatamente. Inoltre, consente loro di mantenere il pieno controllo del contenuto. I clienti utilizzano sempre la versione più recente dell'applicazione.

Sicurezza: utilizzando il protocollo HTTPS, i dati sono al sicuro grazie alla crittografia e quindi più difficili da intercettare e modificare. Inoltre, gli utenti percepiscono HTTPS come una garanzia di sicurezza e affidabilità degli editori. E Google fornisce punti aggiuntivi nella classifica di ricerca per l'utilizzo.

Sensazione simile a un'app: l'idea alla base delle PWA è trovare un modo per collegare la migliore esperienza possibile a un'esperienza simile a un'app con la natura aperta del Web.

Uno schema di Magento PWA Studio

L'origine di Magento PWA Studio

Magento ha rilasciato una serie di strumenti per tutti i commercianti che gestiscono negozi online. Magento PWA Studio è il nome di questo set di strumenti. Farà risparmiare molto tempo e denaro ai rivenditori online per sviluppare app native per tutti i diversi sistemi operativi.

Grazie agli strumenti per progettare siti Web simili a app Magento, i commercianti online possono aumentare il tasso di conversione mobile. È il risultato del miglioramento dell'esperienza cross-channel per i clienti. Inoltre, Magento PWA gli consente di comportarsi come un'app nativa per una migliore esperienza utente.

I commercianti possono sfruttare un'architettura front-end incredibilmente veloce e API Web aperte. Aiuta a trasformare i loro negozi in quella che sta rapidamente diventando la nuova norma.

Pacchetto build PWA

Il Buildpack contiene le librerie e gli strumenti di sviluppo e build essenziali per creare un front-end e una PWA velocissimi. Ti consente di organizzare il tuo ambiente locale per lo sviluppo di PWA.

Vetrina del negozio PWA

PWA Storefront, noto anche come Venia Storefront, è una PWA proof-of-concept creata con gli strumenti Peregrine e il PWA Buildpack. Quando si impara a conoscere Magento PWA Studio e cosa può ottenere, la vetrina mostra campioni di pagine di categoria e dettagli del prodotto.

Pellegrino

Il progetto Peregrine di Magento, come notato in precedenza, contiene una serie di strumenti e componenti dell'interfaccia utente per la creazione di una PWA Magento. I componenti possono essere combinati, estesi e miscelati per creare negozi Magento 2 PWA unici.

Alcune caratteristiche eccezionali di Magento PWA Studio

ReactJS – ReactJS funziona molto bene e offre un'eccellente esperienza di acquisto e di sviluppo.

Alternativa alla schermata iniziale – Magento PWA fornisce uno store che può essere scaricato dalla schermata iniziale. Sembrerà e funzionerà come un'app nativa

Funziona offline: le app Web PWA possono funzionare sia offline che online.

Forte back-end: il robusto back-end interno di Magento offre un'esperienza utente fluida con pochi problemi.

Il vantaggio quando si utilizza Magento PWA Studio

Strumenti di sviluppo completi

Magento Studio fornisce gli strumenti di sviluppo PWA che sono all'avanguardia e includono una documentazione completa. Gli utenti possono organizzare rapidamente i propri ambienti di sviluppo PWA locali con loro.

Installazione facile

Configurare le PWA dal back-end è semplice con Magento Studio. Per avviare correttamente l'applicazione, gli utenti devono inserire l'URL dell'istanza Magento nel file.env. Quindi clonerai un repository ed eseguirai un comando. Era evidente fin dall'inizio che la facilità di sviluppo era un obiettivo prioritario.

GraphQL

Poiché GraphQL utilizza il recupero dichiarativo dei dati, le PWA sviluppate con Magento Studio non hanno quasi alcun overfetch delle query. Quindi è in grado di ospitare più utenti da varie fonti.

Supporto della comunità

Magento è una nota piattaforma di e-commerce, che ha portato a una vasta comunità globale di utenti e collaboratori Magento PWA.

L'architettura e il framework dello studio Magento PWA

Lo studio è davvero semplice da configurare e utilizzare per evitare che si verifichino errori nelle prime fasi del processo di sviluppo dell'app. Gli sviluppatori vengono immediatamente avvisati quando qualcosa non è organizzato correttamente. Ciò consente di risparmiare tempo quando si tratta di scoprire e riparare i bug quando il programma è quasi completo.

I costruttori dello studio Magento PWA sono pronti all'uso

Non è necessario installare il builder e dedicare tempo alla personalizzazione e alla configurazione dell'ambiente. Tutto funziona subito con Magento PWA Studio dopo l'installazione. Tutto è pronto e pronto per l'uso.

Gli elementi premade sono adattabili

PWA Studio include un gran numero di parti di siti Web completate e pronte per l'uso. Quando crei il tuo sito web, puoi utilizzare uno o tutti gli elementi in qualsiasi combinazione. A questo punto, gli elementi preparati potrebbero essere utilizzati esattamente come sono. Anche i pezzi prefabbricati possono essere modificati per soddisfare le esigenze dello sviluppatore o del consumatore.

Routing e memorizzazione nella cache perfettamente semplici

Le funzionalità di routing e memorizzazione nella cache di Magento PWA Studio sono ulteriori ottime qualità. Il routing e la memorizzazione nella cache vengono eseguiti nello stesso modo in cui sono sempre stati eseguiti, senza modifiche. Se si adotta la tecnica convenzionale di instradamento e memorizzazione nella cache di Magento, tuttavia, non sarà necessaria alcuna partecipazione all'instradamento e alla memorizzazione nella cache.

Magento PWA Studio e i contro che dovrai superare

Piattaforma unica

Se vuoi possedere Magento Studio, è necessario che ogni negozio funzioni su Magento 2.3 e build più recenti. Sebbene non sia necessario preoccuparsi della compatibilità, è piuttosto limitante.

Mancanza di compatibilità

Quando si tratta di compatibilità, la funzione GraphicQL di Magento Studios lo rende inappropriato con le versioni precedenti.

Problemi di supporto iOS

Magento non supporta le notifiche PWA di iOS e non funzionerà con i dispositivi iOS che non sono connessi a Internet.

Problemi di convalida

Quando si creano nuovi account cliente, possono sorgere problemi di convalida. Ciò è particolarmente vero per gli utenti iOS durante la configurazione di una password. Non è possibile inviare una notifica se la password scelta non soddisfa i requisiti della password.

Come installare Magento PWA Studio (con la versione 2

Passaggio 1: installa l'ultima versione di Magento

Per installare Magento PWA Studio, devi prima avere una versione Magento 2.3.x installata. Non puoi installare Magento PWA Studio Project (2.3) senza di esso, perché nessun'altra versione di Magento lo supporta.

Passaggio 2: installa NodeJS

Successivamente, dovrai installare NodeJS (versione >=10.14.1). Se non hai dimestichezza con la tecnica, usa il comando elencato di seguito. (Questo è solo per utenti Linux.)

sudo apt-get install nodejs

Prima di tutto, devi controllare Node version : node -v

Quindi, rivedere la versione NPM: npm -v

Se la versione installata è precedente a quella mostrata sopra, utilizzare il comando seguente per eseguire l'aggiornamento alla versione più recente e stabile del nodo.

sudo npm cache clean -f

sudo npm install -gn

sudo n stabile

Passaggio 3: installa ed esegui Node JS

Dopo l'installazione e l'esecuzione di NodeJS, dovrai installare Yarn (Yarn >=1.13.0 ). Eseguire il comando seguente per l'installazione di Yarn. (Applicabile solo per il sistema operativo Linux).

sudo npm install yarn -g

Ora controlla la versione del filato:

filato -v

Passaggio 4:

Ora che Yarn è installato, clona il repository PWA nella directory di sviluppo.

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

Passaggio 5:

Dopo questo passaggio, installare le dipendenze del progetto eseguendo il comando seguente.

installazione del filato

Passaggio 6: crea il file .env

Per creare il file .env, eseguire il comando successivo dalla directory principale PWA-

(Per il tema Venia puoi usare Magento che è installato da te o il Magento 2.3.1 predefinito. Qui stiamo usando il predefinito.)

MAGENTO_BACKEND_URL=”https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/” pacchetto build di filati create-env-file packages/venia-concept

Puoi anche creare il file .env e impostare il valore MAGENTO_BACKEND_URL personalizzato utilizzando il comando seguente:

MAGENTO_BACKEND_URL=”https://YOUR_MAGENTO_BACKEND_URL/” pacchetto build di filati create-env-file packages/venia-concept

Passaggio 7: installa il certificato SSL

Installa il certificato SSL poiché PWA viene eseguito su un percorso sicuro, puoi eseguire il comando create-custom-origin per generare il certificato SSL:

filato buildpack crea pacchetti di origine personalizzata/venia-concept

Passaggio 8: installare i dati di esempio Venia

Puoi anche installare i dati di esempio Venia, c'è uno script bash già disponibile su packages/venia-concept/deployVeniaSampleData.sh

bash deployVeniaSampleData.sh

Per installare dati di esempio in Magento, esegui i seguenti comandi:

configurazione bin/magento: aggiornamento

indicizzatore bin/magento:reindex

Costruisci ora tutti gli artefatti per il tuo tema eseguendo-

costruzione di filati

Avvia il server eseguendo uno dei seguenti comandi in base alle tue necessità, dalla directory principale del tuo progetto PWA.

Per lo sviluppo-

filato run watch:venia

Per l'esecuzione di PWA Studio per sviluppatori completi

orologio da corsa filato: tutto

Per la creazione di manufatti e l'esecuzione di PWA Studio per la messa in scena-

filato run build && filato run stage:venia

La PWA è stata ora installata correttamente. Quando esegui i comandi sopra menzionati, vedrai l'URL in cui sta operando la PWA. Quindi indicherà se l'installazione è andata a buon fine o no

Conclusione

Ti guidiamo attraverso questo articolo con la speranza che: hai una panoramica di Magento pwa studio. Con molte funzionalità straordinarie, vale sicuramente la pena di saltare per aumentare il tuo negozio online. Pertanto, la tua azienda può soddisfare la domanda dei clienti e offre maggiori opportunità di sviluppo nell'ambiente Internet. Tuttavia, se sei ancora confuso su questa tecnologia, Magesolution è disposta a essere un partner per assistere la tua attività. Con molte esperienze in questo campo, siamo fiduciosi di fornire il miglior servizio: Magento Progressive Web Application Development. Pertanto, se avete domande, contattateci per avere maggiori informazioni.