{"id":806930,"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:04","slug":"magento-2-pwa-mobile-app-user-manual","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/it\/manuale-utente-it\/magento-2-pwa-mobile-app-user-manual\/","title":{"rendered":"Magento 2 PWA Mobile App – User Manual"},"content":{"rendered":"

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

1.0 Introduzione<\/h2>\n

Essendo nel settore dell’eCommerce al dettaglio, devi esserti imbattuto nella parola PWA (Progressive Web App). Se s\u00ec, devi anche essere consapevole della capacit\u00e0 che offrono come applicazione di acquisto. In caso contrario, sei atterrato nel posto giusto. Con la crescita costante dell’utilizzo delle app per lo shopping (sia native che PWA), i negozi online stanno passando allo sviluppo di app mobili PWA per le loro attivit\u00e0. Al giorno d’oggi, l’avvio di un’app Web progressiva \u00e8 un’attivit\u00e0 piuttosto semplice ed economica. KnowBand ha lanciato l’app mobile Magento 2 PWA, uno strumento completamente automatizzato e senza codice per avviare un’app Web progressiva. In parole semplici, ogni volta che un utente apre l’URL del tuo negozio sul browser mobile, ricever\u00e0 un messaggio richiesto di “Aggiungi alla schermata iniziale”. L’app Web progressiva Magento 2 verr\u00e0 aggiunta al dispositivo dell’utente come qualsiasi altra app e l’acquisto online pu\u00f2 essere effettuato in movimento.<\/p>\n

1.1 Visualizza l’app demo:<\/h3>\n

Esplora la demo di Progressive Web App per Magento 2 e dai un’occhiata a come appariranno e funzioneranno le tue app finali:<\/p>\n

URL negozio demo:\ufffd<\/strong>https:\/\/ma2demo.knowband.com\/pwa\/manager\/<\/a>
\nURL dell’app PWA:\ufffd<\/strong>https:\/\/ma2demo.knowband.com\/pwa\/pwa-app\/<\/a><\/p>\n

 <\/p>\n

[IMP] Note per Magento 2 iOS PWA:<\/h4>\n

\ufffd> I dispositivi iOS non offrono alcun prompt integrato “Aggiungi alla schermata iniziale”. Gli utenti devono aggiungere manualmente l’app mobile Magento 2 PWA alla schermata iniziale di iPhone o iPad. \ufffd> iOS non supporta le notifiche push web. Le notifiche push possono essere inviate al dispositivo Android solo dal pannello di amministrazione di\ufffdMagento 2 PWA Mobile App Builder.<\/p>\n

[NUOVO AGGIORNAMENTO] Magento 2\ufffdPWA supporta le lingue RTL:<\/h4>\n

Il creatore di app mobili PWA di Magento 2 ora supporta tutte le lingue del mondo, incluso RTL (da destra a sinistra). L’app mobile PWA per Magento 2 pu\u00f2 avere lingue come arabo, ebraico, persiano, ecc. Il proprietario del negozio pu\u00f2 offrire tutte le lingue del sito Web sull’app Web progressiva e persino aggiungerne di nuove.<\/p>\n

2.0 Schermate del pannello di amministrazione:<\/h2>\n

Con l’amichevole backend del pannello di amministrazione, l’amministratore del negozio pu\u00f2 configurare e personalizzare l’aspetto, la sensazione e il funzionamento dell’applicazione mobile PWA. \u00c8 solo questione di pochi clic e il mouse si attiva o disattiva per apportare modifiche alle App Web Progressive Magento 2. Diamo una panoramica dettagliata delle schermate del pannello di amministrazione:<\/p>\n

Impostazioni generali 2.1:<\/h3>\n

\"Generali-settings\"<\/p>\n

a) Abilita l’estensione:<\/strong>\ufffdAbilita\ufffdMagento 2\ufffdmodulo PWA per far funzionare la web app sugli smartphone degli utenti.<\/p>\n

b) Reindirizza sulla pagina carrello quando aggiungi al carrello:<\/strong>\ufffdAbilita per reindirizzare gli utenti al carrello o disabilita per mantenerli sullo schermo del prodotto.<\/p>\n

c) Descrizione breve dell’esposizione:<\/strong>\ufffdAbilita di aggiungere e visualizzare una breve descrizione sullo schermo del prodotto di Progressive Web App.<\/p>\n

d) Abilita segnalazione registro richieste:<\/strong> Abilitare questa scheda per attivare il file di registro sull’app mobile PWA. Questo file di registro pu\u00f2 essere utilizzato per correggere qualsiasi comportamento anomalo di Progressive Web Application.<\/p>\n

e) Mostra anteprima app:<\/strong> Abilita per aggiungere un’anteprima del telefono nel pannello di amministrazione. Tutti i cambiamenti di colore, carattere e schermata iniziale verranno visualizzati in anteprima in tempo reale sul telefono.<\/p>\n

f) Abilita barra delle schede:<\/strong> Aggiungi una barra delle schede in basso sull’app mobile Magento 2 PWA.<\/p>\n

g) Seleziona il layout per la Home Page:<\/strong>\ufffdScegli i layout desiderati tra quelli aggiunti e migliora l’aspetto grafico dell’app.<\/p>\n

\"Impostazioni-generali-2\"<\/p>\n

h) Immagine per l’icona dell’app:<\/strong>\ufffdCarica l’icona dell’app Magento 2 PWA da solo e cambia anche la stessa se necessario.<\/p>\n

i) Nome per l’app PWA:<\/strong>\ufffdInserisci il nome dell’app Web progressiva Magento 2.<\/p>\n

j) Seleziona il carattere per l’app PWA:<\/strong>\ufffdScegli il carattere della tua app PWA per Magento 2.<\/p>\n

k) Colore pulsante dell’app:<\/strong> Scegli il colore dei pulsanti per la tua app mobile PWA.<\/p>\n

l) Colore testo pulsante app:<\/strong> Scegli il colore del testo del pulsante per la tua app Web progressiva Magento 2.<\/p>\n

m) Colore del tema dell’app:<\/strong> Scegli il colore del tema (intestazione) della tua applicazione web.<\/p>\n

n) Colore sfondo app:\ufffd<\/strong>Scegli il colore di sfondo dell’applicazione Web progressiva.<\/p>\n

o) Colore sfondo schermata iniziale:<\/strong> Scegli l’opzione di colore giusta per lo sfondo della schermata iniziale dell’app PWA.<\/p>\n

\"Impostazioni-generali-3\"<\/p>\n

p) Metodi di spedizione disabilitati<\/strong>: Scegli i metodi di spedizione a cui limitare il funzionamento nell’app mobile Magento 2 PWA.<\/p>\n

q) Abilita e carica il logo:<\/strong> Aggiungi l’immagine del logo del tuo negozio da visualizzare nell’intestazione dell’app PWA Mobile.<\/p>\n

2.2 Impostazioni delle notifiche push:<\/h3>\n

L’app Web progressiva Magento 2 offre notifiche push illimitate sul mercato e promuove offerte e prodotti in negozio. L’amministratore del negozio ricever\u00e0 notifiche push per tutta la vita senza costi aggiuntivi.<\/p>\n

\"le<\/p>\n

I vari campi sotto questa scheda di impostazione richiedono la configurazione di un account Firebase. Ecco come puoi impostarne uno:<\/p>\n

Come impostare un account Firebase?<\/strong><\/p>\n

Passo 1:<\/strong> Accedi a Google Firebase<\/p>\n

\"Firebase\"<\/p>\n

Passo 2:<\/strong> Crea un nuovo progetto Quando fai clic su Aggiungi progetto, apparir\u00e0 la seguente finestra di dialogo:<\/p>\n

\"creare-project\"
\nCi vorranno alcuni secondi per creare il progetto. Quando il progetto \u00e8 pronto, fai clic su Continua.<\/p>\n

\"continuare<\/p>\n

Passo 3:<\/strong> Gestisci le impostazioni del progetto Una volta creato il progetto, fai clic su Impostazioni del progetto.<\/p>\n

\"progetto-settings\"<\/p>\n

Passo 4:<\/strong> Vai alle opzioni di autenticazione:<\/p>\n

\"autenticazione-options\"
\nPasso 5:<\/strong> Trova le chiavi Firebase Nelle impostazioni del progetto, fai clic su Impostazioni di messaggistica cloud. Da qui puoi ottenere direttamente la chiave del server.<\/p>\n

\"Firebase-chiave\"
\nPasso 6:<\/strong> Aggiungi la tua app Web a Firebase<\/p>\n

\"web-app-to-Firebase\"<\/p>\n

\"web-app-to-Firebase\"<\/p>\n

Passo 7:<\/strong> Ottieni altri dettagli relativi a Firebase e incollali nello stesso pannello di amministrazione del modulo PWA.<\/p>\n

\"Firebase-details\"<\/p>\n

Passo 8:<\/strong> Ottieni la chiave del server Firebase dalla scheda di messaggistica cloud in Impostazioni:<\/p>\n

\"Firebase-chiave\"<\/p>\n

Passo 9:<\/strong> Aggiungi il tuo dominio nell’autenticazione >> accedi.<\/p>\n

\"Firebase-server-chiave\"<\/p>\n

\"Firebase-server-chiave\"<\/p>\n

2.21 Notifiche push automatiche:<\/h4>\n

L’amministratore del negozio pu\u00f2 pianificare l’invio automatico di notifiche per i seguenti casi:<\/p>\n

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

a) Impostazioni del nuovo ordine:<\/strong>\ufffdOgni volta che viene effettuato un nuovo ordine dall’app mobile Magento 2 PWA.<\/p>\n

b) Impostazioni di modifica dello stato dell’ordine:<\/strong> Ogni volta che lo stato di consegna di un ordine viene modificato \/ aggiornato.<\/p>\n

c) Impostazioni del carrello abbandonato:<\/strong> Ogni volta che un utente lascia il prodotto nel carrello e abbandona la Progressive Web App.<\/p>\n

2.22 Notifica push manuale:<\/h4>\n

\"send-notifica\"<\/p>\n

Come mostrato nell’istantanea sopra, l’amministratore del negozio pu\u00f2 personalizzare e inviare notifiche push manuali agli utenti dell’app PWA Mobile. Il messaggio, l’immagine, lo sconto offerto, il link di reindirizzamento possono essere aggiunti \/ modificati per migliorare l’efficienza della notifica e aumentare le vendite.<\/p>\n

Layout della pagina iniziale 2.3:<\/h3>\n

Magento 2 PWA Mobile App Builder offre un pannello di editor fai-da-te completamente personalizzabile per personalizzare e configurare l’aspetto dell’applicazione Web progressiva. Vari nuovi layout possono essere aggiunti al pannello di amministrazione in base ai prossimi festival e occasioni.<\/p>\n

\"home-page-layout<\/p>\n

\"layout-schermata<\/p>\n

2.31 Categorie principali:<\/h4>\n

\"I<\/p>\n

2.32 Banner quadrato:<\/h4>\n

\"piazza-banner\"<\/p>\n

2.33 Banner scorrevole:<\/h4>\n

\"scorrevoli-banner\"<\/p>\n

2.34 Banner griglia:<\/h4>\n

\"grid-banner\"<\/h4>\n

2.35 Banner del timer per il conto alla rovescia<\/h4>\n

\"conto<\/p>\n

2.36 Prodotti quadrati:<\/h4>\n

\"quadrati<\/p>\n

2.37 Prodotti scorrevoli:<\/h4>\n

\"sottoprodotti<\/p>\n

2.38 Prodotti a griglia:<\/h4>\n

\"grid-products\"<\/p>\n

Come ottenere i dettagli dell’app Facebook?<\/h3>\n

L’app di Facebook pu\u00f2 essere creata seguendo i seguenti passaggi: –<\/p>\n

Passo 1:<\/strong>Vai all’URL fornito : https:\/\/developers.facebook.com\/apps\/<\/p>\n

Passo 2:<\/strong>Fare clic sul pulsante “Aggiungi una nuova app”.<\/p>\n

\"add-new-app\"<\/a><\/p>\n

Passaggio 3 e 4:<\/strong>Immettere il nome dell’app e l’ID e-mail, quindi fare clic sul pulsante “Crea ID app”.<\/p>\n

\"create-app-id\"<\/a><\/p>\n

Passaggio 5 e 6:<\/strong> Dopo aver fatto clic su Crea ID app, sar\u00e0 necessario eseguire un controllo di sicurezza come mostrato:<\/p>\n

\"create-app-id\"<\/a><\/p>\n

Passo 7:<\/strong>Fare clic sulla scheda “Impostazioni”.<\/p>\n

\"fb-app-impostazione\"<\/a><\/p>\n

Passaggio 8-13:<\/strong>Due opzioni saranno disponibili nel menu a discesa , Base e Avanzate, fare clic su “Base”. Quindi inserisci il tuo “Dominio app”, “Email di contatto”, “URL della privacy”, “Termini e condizioni URL”, “Aggiungi logo”, “Seleziona categoria” e fai clic sul pulsante “Salva modifiche”. Domini app: tuodominio.com \u00e8 corretto tuodominio.com\/store non corretto www.dominio.com non \u00e8 corretto<\/p>\n

\"fb-app-id\"<\/a><\/p>\n

Passo 14:<\/strong>Ora fai clic su “+ Aggiungi piattaforma”.<\/p>\n

\"add-piattaforma\"<\/a>
\nPassaggio 15: <\/strong>E seleziona Sito Web come piattaforma.<\/p>\n

\"scegliere-platform\"<\/a><\/p>\n

Passo 16:<\/strong>Ora inserisci l’URL del tuo sito.<\/p>\n

\"enter-sito-url\"<\/a>
\nPassaggio 17 e 18:<\/strong>Fai clic su “Prodotti +” e seleziona Accesso a Facebook.<\/p>\n

\"accesso<\/a>
\nPasso 19:<\/strong>Seleziona web come piattaforma per l’app.<\/p>\n

\"scegliere-platform\"<\/a><\/p>\n

Passo 20:<\/strong> Ora fai clic su Salva.<\/p>\n

\"facebook-app-id\"<\/a>
\nPassaggio 21 e 22: <\/strong>Fare clic su Impostazioni e aggiungere un URI di reindirizzamento OAuth valido. URI di reindirizzamento OAuth validi: https:\/\/example.com\/pwa-app\/login<\/p>\n

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

Passaggio 23 e 24:<\/strong>Fare clic su “Revisione app”. Seleziona “Rendi” pubblico “il nome della tua app su S\u00ec.<\/p>\n

\"app-recensione\"<\/a>
\nPasso finale:<\/strong>Copiare l’ID app e il segreto dell’app e incollarli nei campi forniti nel modulo.<\/p>\n

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

Come ottenere i dettagli dell’app Google?<\/h3>\n