Vuoi creare app Web progressive basate su WordPress e WooCommerce? Ecco come (con esempi di codice)

Come probabilmente già saprai, questo post è un po ‘su "Avanzate" lato, ma affronta un argomento che è molto interessante e presenta una nuova filiale per noi da seguire su questo intero percorso mobile-first per i nostri siti Web e / o app.


La cosa che chiamiamo "web design reattivo" è stato con noi per un po ‘, e in questa fase del gioco, la maggior parte degli sviluppatori / siti Web / strumenti web ha già integrato pienamente i principi di esso. Ma è questo il gioco finale di "mobile-friendly"? O forse è solo l’inizio.

Bene, Google pensa che sia il secondo. E in arrivo Progressive Web Apps!

Il post che stai per leggere è un’altra nostra edizione "all’interno della casa degli sviluppatori" iniziativa (ecco la precedente). È stato messo insieme da Alexandra Anghel di Appticles.com.

Inserisci Alexandra:

App Web progressive su WordPress e WooCommerce

Comprensione delle app Web progressive

Le Progressive Web App (PWA) sono esperienze che combinano il meglio del Web e il meglio delle app. Le app native di app store sono diventate molto popolari in passato grazie a funzionalità come le notifiche push, lavorare offline, animazioni e transizioni fluide, caricamento sulla schermata iniziale e così via.

Le app Web mobili sono applicazioni JavaScript che hanno funzionato nel browser e hanno tentato di portare sul Web alcune funzionalità delle app native, ma non sono state in grado di fornire notifiche push, ad esempio. Con l’introduzione mobile di nuove API Web, le Progressive Web App stanno ora colmando il divario, fornendo l’esperienza simile ad un’app sul Web mobile.

Google li descrive come essere:

  • Affidabile – Carica all’istante
  • Veloce – Rispondi rapidamente alle interazioni dell’utente
  • avvincente – Comportarsi come un’app nativa

Per raggiungere tutti questi punti, un’app Web progressiva deve avere le seguenti funzionalità:

  • Lavora offline o in condizioni di rete scadenti
  • Banner Web Installa banner o Aggiungi a schermata Home
  • Utilizzare le notifiche push Web. Con l’introduzione dell’API Push Web, ora possiamo inviare notifiche push ai nostri utenti, anche quando il browser è chiuso.
  • Implementare HTTPS
  • Utilizza un’architettura shell dell’applicazione (o shell app) che si carica istantaneamente sugli schermi degli utenti, in modo simile alle applicazioni native.

In sostanza, un PWA è un’applicazione a pagina singola scritta in JavaScript. La modalità offline, Aggiungi a schermata Home e Notifiche push Web sono tutte implementate utilizzando gli operatori del servizio.

App Web progressive e Web design reattivo

Le app Web progressive non devono essere confuse con Responsive Web Design. Le Web App progressive hanno capacità di risposta perché possono adattarsi a schermi di dimensioni diverse, ma la loro proposta di valore unica sono le caratteristiche che li rendono simili ad app.

Negli ultimi anni, RWD è stata la soluzione ideale per soluzioni Web mobili, ma a Forrester il rapporto dello scorso anno ha identificato che RWD ha raggiunto la saturazione – l’87% dei produttori di esperienze digitali la abbraccia – e che si sta verificando un cambiamento nelle aspettative dei clienti di preferire esperienze simili a un’app sul web.

Le PWA sono la soluzione per coinvolgere gli utenti del Web mobile?

La creazione di un’app Web progressiva di alta qualità offre incredibili vantaggi, facilitando il piacere degli utenti, aumentando il coinvolgimento e aumentando le conversioni. Esistono diversi esempi di aziende, in particolare del settore dell’e-commerce, che hanno utilizzato con successo app Web progressive per migliorare le loro metriche, molte di esse sono elencate sul sito web degli sviluppatori di Google.

  • Ad esempio, Alibaba.com ha creato un PWA che ha portato a un’esperienza web mobile veloce, efficace e affidabile. La nuova strategia consegnato un aumento del 76% nelle conversioni totali tra i browser e un tasso di interazione quattro volte superiore da Aggiungi a schermata iniziale.
  • In un altro caso d’uso, OLX voleva coinvolgere nuovamente gli utenti Web mobili utilizzando Aggiungi a Homescreen e Notifiche push. Essi maggiore coinvolgimento del 250% e ha migliorato anche altre metriche: il tempo fino a quando la pagina è diventata interattiva è diminuito del 23%, con un corrispondente calo dell’80% delle frequenze di rimbalzo. Anche la monetizzazione è migliorata, con una percentuale di clic (CTR) in aumento del 146%.

Come facciamo a sapere che un’app Web mobile è progressiva?

Prima di tutto, essere progressivi è un punteggio, non un Sì o No, e c’è un plug-in di Chrome chiamato Faro che puoi usare per misurare questo punteggio. Questo plugin è davvero facile da usare e genera un rapporto con tutte le funzionalità PWA, in sostanza ci fa sapere cosa dobbiamo cambiare affinché un’app Web diventi completamente progressiva. Per la nostra versione alfa del PWA WooCommerce, siamo riusciti a ottenere un punteggio 91 su Lighthouse.

Faro

Come possiamo costruire un PWA?

Lo standard PWA di Google non elenca alcuna particolare tecnologia o framework per la creazione di app Web progressive. Può essere qualsiasi cosa purché venga seguita la checklist. Molti PWA vengono creati utilizzando JS angolare o Reagire, quali sono i framework JavaScript più popolari al momento.

reagire

Sia AngularJS che React hanno i loro vantaggi:

  • The Angular / Ionico la combinazione è piuttosto popolare al giorno d’oggi. Ionic è un ottimo framework che è stato originariamente creato per le app mobili, ma si è esteso alle app Web progressive e persino alle applicazioni desktop.
  • React è davvero intuitivo e di facile comprensione. Beneficia di un’app eccellente per la creazione di caldaie, la creazione-reattiva-app, che include il supporto PWA di default.

Oltre a questi due, VueJS sta anche guadagnando popolarità.

Successivamente, vedremo alcuni esempi di codice da un’applicazione di e-commerce costruita con React in cima a WordPress e WooCommerce API REST.

Potresti anche essere interessato a questi articoli:

  • I migliori modelli di dashboard di amministrazione angolare

Comprensione dell’API REST di WooCommerce

Quando si tratta di creare un’applicazione di e-commerce, la prima cosa di cui abbiamo bisogno è un’API da cui possiamo recuperare i dati. Fortunatamente, l’inclusione dell’API REST nel core ha aperto le porte all’utilizzo di WordPress come backend. Inoltre, per le app di e-commerce possiamo usare l’API REST dal popolare plugin WooCommerce.

WooCommerce ha anche un pacchetto NPM (API WooCommerce) per effettuare chiamate API, ma purtroppo questo pacchetto richiede sia la chiave del consumatore sia il segreto del consumatore per autenticare le richieste. Avremmo un problema di sicurezza se utilizzassimo il segreto del consumatore in un’app frontend.

Inoltre, durante la creazione di chiavi dalla sezione di amministrazione di WooCommerce, non è possibile specificare autorizzazioni a livello di percorso, ad esempio consentire l’accesso alla visualizzazione per i prodotti e l’accesso in scrittura per gli ordini.

Quindi, abbiamo dovuto creare un proxy nel nostro plug-in WordPress, che consente l’accesso a un set limitato di endpoint API. Come base, abbiamo usato il wrapper PHP dell’API REST di WooCommerce, come puoi vedere nell’esempio seguente:

Visualizza il codice su nocciolo.

Inizializziamo innanzitutto il client WooCommerce utilizzando la chiave consumer e il segreto. Il secondo e il terzo metodo stanno creando un percorso personalizzato chiamato prodotti e mappano quel percorso verso l’endpoint prodotti / categorie dall’API WooCommerce.

In questo modo, possiamo consentire l’accesso alla lettura di categorie e prodotti, ma consentiamo solo l’operazione di creazione per un ordine.

Creazione di una nuova app React in quattro semplici passaggi

Dopo aver impostato l’API, possiamo iniziare a lavorare sulla nostra applicazione React. Dopo l’installazione NodeJS e NPM a livello globale, è possibile utilizzare il pacchetto create -eagire-app per generare rapidamente un’app React JS con supporto PWA per impostazione predefinita.

  1. Installare NodeJS e NPM globalmente
  2. Installare creare-reagiscono-app boilerplate
    npm installa create-reply-app -g
  3. creare nuova applicazione React
    creare-reagire-app mia-app
  4. Avvia l’applicazione
    cd my-app & inizio npm

Di seguito è riportato uno screenshot dell’applicazione che viene generato da create -eagire-app, ha tutto ciò di cui abbiamo bisogno, quindi possiamo iniziare a scrivere codice, incluso il caricamento dal vivo:

app di reazione del campione

Ci sono alcune cose da tenere a mente quando si avvia una nuova app:

1) Organizzazione dei file delle app
Esistono diversi tutorial utili su come strutturare al meglio l’app. Preferisco le cartelle per funzionalità, perché consente una migliore scalabilità. Puoi trovare a spiegazione davvero buona qui.
2) Linters e standard di codifica
Gli standard di codifica possono essere fastidiosi se non sei abituato a loro, ma Non saltare questo passaggio. Aiutano a ripulire le dipendenze non utilizzate e assicurano che i dati siano validati correttamente a livello di componente. Inoltre, se installi un plug-in per editor più bello che formatta automaticamente il tuo codice, usare gli standard di codifica diventa un gioco da ragazzi. Per quanto riguarda lo standard stesso, preferisco quello popolare creato da Airbnb.
3) Piccoli componenti
Mantenere i file dei componenti piccoli li rende più facili da testare e gestire. Puoi iniziare a scrivere codice in un singolo componente e, una volta ingrandito, dividerlo in un componente più piccolo. Per i componenti UI / UX, ci sono diverse librerie compatibili con React, come ad esempio UI materiale, UI semantica o anche bootstrap, solo per fare alcuni esempi.

Queste librerie contengono una serie di componenti già pronti, come griglie, menu, schede, pulsanti e così via. Ecco un esempio di un’interfaccia di applicazione e-commerce costruita con elementi di base dell’interfaccia utente semantica:

Puoi vedere un elenco di categorie, un elenco di prodotti e un menu laterale. Immergiamoci nel codice: vedrai quanto è facile utilizzare React per creare un esempio del genere.

app di e-commerce di esempio

Immergersi in ReactJS

Di seguito è riportato un componente React che legge una serie di categorie di prodotti dall’API. Lo stato del componente viene inizializzato con un elenco vuoto di categorie. Nel metodo componentWillMount che viene chiamato automaticamente da React prima del rendering, facciamo una richiesta per recuperare le categorie e le aggiungiamo allo stato dopo aver ricevuto la risposta:

Visualizza il codice su nocciolo.

Come puoi vedere, non è necessario chiamare il metodo di rendering quando vengono ricevute le categorie, React se ne occupa per noi e esegue nuovamente il rendering del componente. Il metodo di rendering restituisce semplicemente un altro componente personalizzato chiamato CategoriesList che riceve i dati delle categorie e assomiglia a questo:

Visualizza il codice su nocciolo.

Il componente sopra scorre l’elenco delle categorie che riceve come prop e chiama un altro componente personalizzato chiamato CategoryCard per rendere un singolo elemento di categoria.

Tutti questi componenti comunicano passando oggetti di scena tra di loro. Il componente principale Categorie chiama l’API e passa un elenco di categorie a CategoriesList, che a sua volta passa i dettagli di una categoria alle schede categoria.

Gestire lo stato globale dell’app tramite Redux

Il problema con l’approccio sopra è che a volte abbiamo dati che devono essere gestiti al livello di applicazione superiore, ad esempio un elenco di prodotti che sono stati aggiunti al carrello. Il numero di prodotti è mostrato nell’icona del carrello dalla barra dell’intestazione, ma questi sono anche visualizzati come un elenco nella pagina di pagamento.

Se aggiungiamo tutti questi dati nel componente dell’applicazione genitore, diventerà molto difficile da gestire su applicazioni più grandi. Questo è dove biblioteche come ReduxJs entra. Solo per chiarire, Redux può essere usato in combinazione con qualsiasi framework JavaScript, non è specifico di React.

Inoltre, l’utilizzo di Redux non significa che non possiamo usare lo stato o gli oggetti di scena a livello di componente. Redux dovrebbe essere usato solo per conservare i dati che hanno senso a livello di applicazione.

Vediamo come possiamo leggere i prodotti dall’API e renderli in un elenco, simile a quello di cui abbiamo bisogno con le categorie, ma questa volta usando Redux. Innanzitutto, dobbiamo stabilire una connessione con Redux avvolgendo il nostro componente principale dell’app in un archivio globale:

Visualizza il codice su nocciolo.

In questo esempio, l’app store globale conterrà un elenco di categorie e un elenco di prodotti, che vengono uniti mediante il metodo combinReducers di Redux.

Quindi, continuiamo definendo le azioni Redux, che sono funzioni molto semplici che restituiscono oggetti che devono contenere una proprietà type. Poiché JS è asincrono, avremo bisogno di due azioni: una per segnalare quando viene inviata una richiesta e l’altra per segnalare quando viene ricevuta una risposta. L’intera app saprà quando si svolgono queste azioni.

Di seguito, abbiamo anche aggiunto una funzione chiamata fetchProducts. Come puoi vedere, questa funzione:

  • invia l’azione richiesta prodotti,
  • chiama l’API per il recupero dei prodotti,
  • invia l’azione receiveProducts alla ricezione di un risultato.

Visualizza il codice su nocciolo.

Per modificare lo stato dell’app, aggiungeremo un cosiddetto Redux "riduttore". Il riduttore è solo una funzione che ascolta determinate azioni e cambia una parte dello stato globale, in questo caso l’elenco dei prodotti.

Questo riduttore non fa nulla quando riceve un’azione sui prodotti di richiesta, ma restituisce sempre lo stato corrente. Per l’azione di ricezione dei prodotti, il riduttore restituisce i dati che gli vengono passati, in questo caso sarà un elenco di prodotti.

Visualizza il codice su nocciolo.

Per concludere, usiamo queste azioni e riduttori in un nuovo componente Prodotti.

Visualizza il codice su nocciolo.

Questo componente è racchiuso nel metodo connect da Redux e invia semplicemente fetchProducts nel suo metodo componentWillMount. Inoltre, il componente include un elenco di prodotti, ma come puoi vedere il componente dell’elenco di prodotti non riceve direttamente i dati dei prodotti. Questo perché il componente Elenco prodotti è direttamente collegato allo stato globale dell’app, anche usando Redux.

In questo modo, può accedere ai dati dei prodotti direttamente dall’app store, scorrere l’elenco dei prodotti e utilizzare un componente ProductCard per eseguire il rendering di un singolo elemento del prodotto.

Visualizza il codice su nocciolo.

Finora, abbiamo visto alcuni esempi su come visualizzare i dati, ma cosa succederebbe se volessimo aggiungere l’interazione dell’utente, ad esempio aggiungendo un prodotto al carrello?

In questo caso, quando l’utente fa clic su "Aggiungi al carrello" pulsante, invieremo un’azione che modificherà lo stato globale dell’app. La barra di intestazione, che mostra il numero di prodotti carrello, sarà collegata con Redux. Conterà il numero di prodotti salvati nel carrello dell’applicazione e si aggiornerà di conseguenza.

aggiungi al carrello esempio

Collegamento dell’app con WordPress

Questi sono tutti esempi di base per iniziare e probabilmente ti starai chiedendo come esattamente possiamo collegare questa app con WordPress.

Bene, possiamo ospitare l’app su un sottodominio e lasciarla connettere all’API, oppure possiamo usarla come tema WordPress, il che significa creare un tema molto semplice con un file index.php che caricherà solo un file JavaScript / CSS. Il bollettino di creazione-reattiva-app include comandi per la creazione della build dell’applicazione, in modo da poter ottenere immediatamente i file di produzione.

Visualizza il codice su nocciolo.

Dove utilizzare i lavoratori dell’assistenza

Per la modalità offline, possiamo aggiungere un operatore del servizio che visualizzerà la shell dell’app anche quando gli utenti sono offline. Il lavoratore dell’assistenza è solo un file JavaScript che si registra nel browser.

Visualizza il codice su nocciolo.

Esistono diverse strategie che puoi utilizzare per la modalità offline, come prima la rete o prima la cache, e puoi leggere su queste in Google libro di cucina offline.

La memorizzazione nella cache della shell dell’applicazione presenta vantaggi anche quando disponiamo di una connessione di rete, poiché l’app verrà caricata molto più velocemente.

Se vuoi andare ancora oltre e iniziare a memorizzare nella cache i dati provenienti dall’API, puoi utilizzare i pacchetti NPM come redux-persist e modificare la tua app per salvare / recuperare i dati dalla memoria locale del browser.

Per le notifiche push Web, si consiglia di dare un’occhiata a Plugin WordPress gratuito One Signal. Questo plugin funziona anche con temi reattivi, quindi dovresti assolutamente provarlo immediatamente.

Qual è il prossimo?

Puoi trovare il demo per il PWA WooCommerce sopra riportato qui.

Stiamo già lavorando alla versione beta ed ecco solo una parte della nostra tabella di marcia:

  • Aggiungi funzionalità in modalità offline
  • Aggiungi notifiche push
  • Finalizza la procedura di pagamento

Se desideri contribuire o personalizzarlo in base alle tue esigenze, puoi trovare la versione alfa dell’applicazione web progressiva e-commerce su GitHub.

Demo PWA

Cosa pensi delle Progressive Web App e del ruolo che possono avere sul panorama mobile di WordPress? Stai pensando di seguire questo percorso con il tuo prossimo progetto?

Non dimenticare di partecipare al nostro corso intensivo per accelerare il tuo sito WordPress. Con alcune semplici correzioni, puoi ridurre i tempi di caricamento anche del 50-80%:

Layout e presentazione di Karol K.

Informazioni sull’autore: Alexandra Anghel è co-fondatrice e CTO di Appticles.com – una piattaforma per la creazione di app Web progressive. Come estensione della piattaforma, Appticles ha un plugin per WordPress (Pacchetto mobile WordPress) che ha superato i download di 1 milione. Alexandra è uno sviluppatore full stack. Ha partecipato a due acceleratori di attività: Startupbootcamp (Copenaghen / Danimarca) e Prosper Women Accelerator (Saint Louis / Stati Uniti). All’inizio del 2017, è entrata a far parte di Codette come co-fondatrice.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map