Magento 2 PWA Mobile App – User Manual


1.0 Introdução

Por estar no setor de comércio eletrônico de varejo, você deve ter encontrado a palavra PWA (Progressive Web App). Em caso afirmativo, você também deve estar ciente da capacidade que eles possuem como um aplicativo de compras. Caso não, você pousou no lugar certo. Com o crescimento constante no uso de aplicativos de compras (nativos e PWA), as lojas online estão mudando para o desenvolvimento de aplicativos móveis PWA para seus negócios. O lançamento de um Progressive Web App é uma tarefa bem mais simples e acessível atualmente. A KnowBand lançou o Magento 2 PWA Mobile App, uma ferramenta completa sem código e automatizada para lançar um Progressive Web App. Em palavras simples, sempre que qualquer usuário abrir o URL da sua loja no navegador do celular, ele receberá uma mensagem "Adicionar à tela inicial". O Magento 2 Progressive Web App será adicionado ao dispositivo do usuário como qualquer outro aplicativo e a compra online pode ser feita em qualquer lugar.

1.1 Exibir aplicativo de demonstração:

Explore a demonstração do Progressive Web App para Magento 2 e dê uma olhada na aparência e no funcionamento de seus aplicativos finais:

URL da loja de demonstração:https://ma2demo.knowband.com/pwa/manager/
URL do aplicativo PWA:https://ma2demo.knowband.com/pwa/pwa-app/

2.0 Telas do painel de administração:

Com o back-end amigável do painel de administração, o administrador da loja pode configurar e personalizar a aparência e o funcionamento do aplicativo móvel PWA. É apenas uma questão de alguns cliques e botões de mouse para fazer alterações nos aplicativos da Web progressivos do Magento 2. Vamos dar uma visão geral detalhada das telas do painel do administrador:

Configurações gerais do 2.1:

Gerais-configurações

a) Ative a extensão:?Enable?Magento 2?PWA module to make web app work on the users’ smartphones.

b) Redirecionar na página do carrinho quando adicionar ao carrinho:?Enable to re-direct users to shopping cart or disable to keep them on the product screen.

c) Exibir descrição resumida:?Enable to add & display a short description on the product screen of Progressive Web App.

d) Habilitar Relatório de Log de Solicitação: Habilite esta guia para ativar o arquivo de log no aplicativo móvel PWA. Este arquivo de log pode ser usado para retificar qualquer comportamento anormal do Progressive Web Application.

e) Mostrar visualização do aplicativo: Ative para adicionar um telefone de visualização no painel de administração. Todas as alterações de cor, fonte e tela inicial serão exibidas no telefone de visualização em tempo real.

f) Habilitar barra de guias: Adicione uma barra de guia inferior no aplicativo móvel Magento 2 PWA.

g) Selecione o layout para a página inicial:?Choose desired layouts from the added ones and improve look and feel of app.

General-settings-2

h) Imagem para o ícone do aplicativo:?Upload Magento 2 PWA app icon on your own and change the same as well if required.

i) Nome do aplicativo PWA:?Enter the name of the Magento 2 Progressive Web App.

j) Selecione a fonte para o aplicativo PWA:?Choose the font of your PWA app for Magento 2.

k) cor do botão app: Escolha a cor do botão para seu aplicativo móvel PWA.

l) Cor do texto do botão do aplicativo: Escolha a cor do texto do botão para o seu Magento 2

m) Cor do tema do aplicativo: Escolha a cor do tema (cabeçalho) do seu aplicativo da web.

n) AppEscolha a cor de fundo do aplicativo da Web progressivo.

o) Cor de fundo da tela inicial: Escolha a opção de cor certa para o fundo da tela inicial do aplicativo PWA.

General-settings-3

p) Métodos de envio desativados: Escolha os métodos de envio para não funcionar no aplicativo móvel Magento 2 PWA.

q) Ativar e fazer upload do logotipo: Adicione a imagem do logotipo de sua loja a ser exibida no cabeçalho do aplicativo PWA Mobile.

2.2 Configurações de notificações push:

O Magento 2 Progressive Web App oferece notificações push ilimitadas para o mercado e promove ofertas e produtos da loja. O administrador da loja receberá notificações push para o resto da vida, sem custos adicionais.

notificações via push

Os vários campos dessa guia de configuração exigem a configuração de uma conta Firebase. Veja como você pode definir um:

Como configurar uma conta Firebase?

Faça login no Google Firebase

firebase

Criar um novo projeto Ao clicar em Adicionar projeto, a seguinte caixa de diálogo aparecerá:

projeto de criação
A criação do projeto levará alguns segundos. Assim que o projeto estiver pronto, clique em continuar.

continue-project

Gerenciar configurações do projeto Assim que o projeto for criado, clique em Configurações do projeto.

configurações do projeto

Vá para Opções de autenticação:

opções de autenticação
Localizar chaves do Firebase Nas configurações do projeto, clique em Configurações de mensagens na nuvem. A partir daqui, você pode obter diretamente a chave do servidor.

chave do firebase
Adicione seu aplicativo da Web ao Firebase

web-app-to-firebase

web-app-to-firebase

Obtenha outros detalhes relacionados ao firebase e cole o mesmo no painel de administração do módulo PWA.

firebase-details

Obtenha a chave do servidor firebase na guia de mensagens na nuvem em Configurações:

chave do firebase

Adicione seu domínio na autenticação >> login.

chave do servidor firebase

chave do servidor firebase

2.21 Notificações automáticas por push:

O administrador da loja pode agendar o envio de notificações automatizadas para os seguintes casos:

push-Notifications-2

a) Novas configurações de pedido:?Whenever any new order is placed from the Magento 2 PWA Mobile App.

b) Configurações de alteração de status do pedido: Sempre que o status de entrega de qualquer pedido é alterado / atualizado.

c) Configurações de carrinho abandonado: Sempre que qualquer usuário deixa o produto no carrinho e abandona o Progressive Web App.

2.22 Notificação push manual:

enviar notificação

Conforme mostrado no instantâneo acima, o administrador da loja pode personalizar e enviar notificações push manuais para usuários do aplicativo móvel PWA. A mensagem, imagem, desconto oferecido, link de redirecionamento podem ser adicionados / editados para melhorar a eficiência da notificação e trazer mais vendas.

Layout da Página Inicial do 2.3:

O Magento 2 PWA Mobile App Builder oferece um painel de editor DIY totalmente personalizável para personalizar e configurar a aparência do Progressive Web Application. Vários novos layouts podem ser adicionados ao painel de administração com base nos próximos festivais e ocasiões.

layout de página inicial

layout da tela inicial-3

2.31 Principais categorias:

principais categorias

2.32 Banner quadrado:

faixa quadrada

2.33 Banner deslizante:

faixa deslizante

2.34 Banner de grade:

banners de grade

2.35 Banner de cronômetro regressivo

contagem regressiva-temporizador-banner

2.36 Produtos Quadrados:

produtos quadrados

2.37 Produtos de deslizamento:

produtos deslizantes

2.38 Produtos de rede:

produtos de grade

Como obter detalhes do aplicativo do Facebook?

O aplicativo do Facebook pode ser criado seguindo as etapas abaixo mencionadas: –

?Go to given?URL: https://developers.facebook.com/apps/

?Click on the “Add a New App” button.

adicionar novo aplicativo

Etapa 3 e 4:?Enter your App name and email id, then click on “Create App ID” button.

create-app-id

Etapa 5 e 6:?After clicking on Create App ID you will have to?go through a security check as shown:

create-app-id

?Click on “Setting” tab.

configuração do aplicativo fb

Etapa 8-13:?Two option will be available in the?dropdown, Basic and Advanced, click on “Basic”. And then enter your “App Domain”,?”Contact Email”, “Privacy?URL”, “Terms and Conditions?URL”, “Add Logo”, “Select Category” and click on “Save Changes” button.
App Domains:
yourdomain.com is?correct
yourdomain.com/store is?incorrect
www.domain.com is?incorrect

fb-app-id

?Now click on “+Add Platform”.

adicionar plataforma
Etapa 15:
E selecione Site como Plataforma.

escolha-plataforma

?Now Enter your site URL.

enter-site-url
Etapa 17 e 18:?Click on “Products+” and select Facebook login.

entrar no Facebook
?Select web as the platform for the app.

escolha-plataforma

?Now click on save.

facebook-app-id
Etapa 21 e 22:Clique em Configurações e adicione URIs de redirecionamento OAuth válidos. URIs de redirecionamento de OAuth válidos: https://example.com/pwa-app/login

URL de redirecionamento

Etapa 23 e 24:?Click on “App review”. And?mark “Make ‘your app name’ Public” to Yes.

revisão do aplicativo
Etapa final:?Copy the App ID and App Secret and paste it into the fields provided in the module.

passo final

Como obter detalhes do Google App?

  • Acesse o Google Developers Console (https://console.developers.google.com/project) ou clique no link no canto superior direito da guia correspondente na página de configuração do módulo.
  • Agora clique em
  • Digite um nome para o seu projeto e prossiga para a próxima etapa.
  • Agora clique em APIs e auth-> Credentials no menu esquerdo, como mostrado abaixo.

google-app-id

  • Clique no botão Criar novo ID do cliente no painel direito da tela.
  • Pode ser necessário preencher o formulário da Tela de consentimento antes de prosseguir. Para fazer isso, é necessário clicar na tela de consentimento no menu à esquerda, como mostra a imagem acima.
  • Preencha o formulário de pop-up com os detalhes abaixo:

Tipo de aplicação:?Web Application.
Origens do JavaScript autorizadas:?Your store domain name (http://www.yourstore.com).
URI de redirecionamento autorizado ou URI da página de redirecionamento do Loginizer:
https://example.com/pwa-app/login

google-app-id

  • Agora clique no botão Criar identificação do cliente para obter sua identificação e chave secreta do cliente.
  • Agora você pode usar o segredo e o ID do cliente para permitir que seus clientes acessem sua loja usando a conta do Google.

3.0 Telas do aplicativo PWA de front-end:

Dê uma olhada rápida nas telas perfeitamente projetadas do Progressive Web App para Magento 2:

Tela inicial do 3.1:

tela inicial

A tela inicial do Magento 2 Progressive Web App é totalmente personalizável a partir do painel de administração do módulo. Você pode projetar o layout das telas do aplicativo da maneira que desejar. Layouts personalizados podem ser projetados no painel de administração com base em eventos, festivais, ocasiões, etc. e usados ​​sempre que necessário.

1. Layout dinâmico:

Usando vários elementos de design (banners, controles deslizantes, categorias, etc), o administrador da loja pode criar um layout dinâmico conforme a necessidade.

2. Logotipo da loja:
Adicione o logotipo da loja no cabeçalho do aplicativo PWA.

3. Carrinho de Compras:
O ícone do carrinho de compras no canto superior direito da tela inicial permite que os usuários ativem a tela do carrinho.

4. Menu de Navegação:
Navegue pelas categorias nos aplicativos com o menu de navegação esquerdo na tela inicial.

3.2 Menu de navegação esquerdo:

Os aplicativos móveis Magento 2 PWA vêm com categorização contínua de produtos. As categorias no PWA Mobile App serão as mesmas disponíveis no site. Os compradores online podem navegar facilmente por produtos de várias categorias sem complicações. Várias páginas do CMS também podem ser adicionadas ao menu de navegação esquerdo usando o painel de administração.

navegação-bar-473x1024

1. Minha conta:
A opção Minha conta contém todas as informações pessoais, de remessa e de pedidos do usuário. Os compradores de aplicativos da PWA visualizam todos os dados armazenados relacionados a eles e também podem atualizar os mesmos.

2. Categorias
As categorias exibidas no menu de navegação esquerdo do aplicativo PWA são as mesmas do seu site.

3. Páginas CMS:
Várias páginas do CMS, como Sobre nós, Entre em contato, Termos e condições, etc., podem ser acessadas aqui.

4. Línguas)
A opção de idioma permite que os usuários do aplicativo PWA visualizem o aplicativo Web no idioma desejado. Todos os idiomas disponíveis são exibidos somente nesta opção.

5. Moeda (s)
Todas as moedas disponíveis em seu site são exibidas aqui em

6. Entrar sair
Os usuários podem facilmente entrar / sair do

3.3 Category Screen:

tela de categoria

1. Várias vistas:
As categorias no aplicativo PWA para

2. Classificação:
Essa opção permite que os compradores online escolham a ordem de classificação para restringir a pesquisa e obter o produto desejado com facilidade.

3. Filtro:
A opção de filtrar produtos simplifica a pesquisa de produtos. Os usuários podem filtrar todos os produtos em categorias usando vários atributos como tamanho, cor, preço etc.

Tela do produto 3.4:

A tela do produto do Magento 2 Progressive Web App contém todas as informações necessárias do produto, as mesmas da sua loja. De várias imagens de produtos a descrições curtas e longas, ajuda o usuário a pensar na compra. A disponibilidade do produto é sinalizada como "Em estoque" ou "Fora de estoque" com base no status do estoque.

tela do produto-473x1024

1. Informações sobre produtos e cuidados
As informações completas do produto, conforme disponíveis no inventário, serão exibidas aqui.

2. Pequena descrição
Os usuários podem ler a breve descrição de seu produto para decidir rapidamente sobre a compra.

3. Opções do produto:
Todas as opções relacionadas ao produto, como tamanho, cor etc. são exibidas aqui.

5. Adicionar ao carrinho:
Este botão permite aos usuários adicionar produtos ao carrinho. Os usuários podem ainda processar o carrinho para compra.

6. Compartilhamento Social de Produtos:
A opção de compartilhamento do produto permite que os usuários compartilhem produtos em vários canais sociais.

Tela de Login 3.5

login-screen-473x1024

O Magento 2 Progressive Web App oferece opções de login de um toque rápidas e torna o processo de login / registro mais simples: – Login de e-mail – Login do Google – Login do Facebook

1. Entrar
Os usuários do aplicativo podem facilmente autenticar e fazer login em aplicativos PWA usando suas credenciais de login de e-mail anteriores.

2. Inscrever-se
Todos os novos usuários do aplicativo podem se inscrever e criar suas contas na loja do

3. Entre com Facebook
Os usuários podem fazer login no aplicativo PWA usando suas credenciais de conta do Facebook.

4. Faça o login com o Google+
Os usuários podem fazer login no aplicativo PWA usando suas credenciais de conta do Google.

Tela do carrinho de compras 3.6:

A sacola de compras dos aplicativos Magento 2 PWA exibirá todos os produtos adicionados junto com sua quantidade e preço a pagar. Os usuários do aplicativo também podem ver os detalhes do produto antes de comprá-lo.

shopping-cart-screen-473x1024

1. Aplicar vale:
Esta opção permite que os usuários usem cupons do site e obtenham ofertas de desconto.

2. Preço Total do Produto:
Os usuários visualizam o custo completo de sua sacola de compras antes de prosseguir. É atualizado automaticamente de acordo com qualquer atualização com a quantidade do produto ou nova adição.

3. Atualize a Quantidade de Produtos:
Os usuários do aplicativo PWA podem até atualizar a quantidade do produto com a opção "Atualizar quantidade".

4. Remover Produto:
Os usuários do aplicativo podem simplesmente remover o produto do carrinho simplesmente tocando na opção "Remover".

5. Continue comprando:
Os usuários do aplicativo podem sair do carrinho para procurar mais produtos no seu aplicativo.

6. Continue para verificar:
Os usuários do aplicativo PWA podem prosseguir para as telas de checkout e pagamento apenas tocando na opção "Continuar no checkout".

3.7 Tela de verificação:

Os aplicativos PWA Mobile para Magento 2 vem com uma única tela de verificação livre de confusão, com apenas os campos relevantes e necessários obrigatórios. Os usuários do aplicativo obtêm uma visão geral completa do pedido antes de realmente fazer o pagamento, como detalhes de envio, detalhes de faturamento, resumo do pedido, comentário do pedido, pagamento

tela de pagamento 473x1024

1. Detalhes de envio e cobrança
Essa tela fornece detalhes dos endereços de entrega e cobrança salvos pelo usuário. O usuário também pode editar / salvar o novo endereço de entrega, se necessário.

2. resumo do pedido
Os usuários do aplicativo visualizam os detalhes do produto antes de efetuar o pagamento.

3. Métodos de Envio
Todos os métodos de envio disponíveis são exibidos aqui. Os usuários podem escolher aquele que atenda às suas necessidades.

4. Comentário de encomenda
Os usuários também podem adicionar qualquer comentário relacionado ao pedido que ficará visível para armazenar o administrador na página da web do pedido no back-end.

6. Resumo do pagamento
Esta seção exibe os detalhes completos do pagamento da repartição envolvidos na compra.

7. Prossiga para o pagamento
Os usuários do aplicativo PWA serão redirecionados para a tela Pagamento depois de tocar no botão "Continuar com o pagamento".

3.8 Payment Screen:

Magento 2 PWA App traz todos os pagamentos de visualização da web (site) no aplicativo. Os usuários do aplicativo encontrarão aqui as mesmas opções de pagamento disponíveis nos aplicativos. A tela de pagamento do Magento 2 Progressive Web App é totalmente otimizada para visualização do aplicativo.

tela de pagamento 473x1024

3.9 Tela da Minha Conta:

tela-minha-conta-473x1024

A tela de minha conta do app Magento 2 PWA oferece todos os detalhes dos usuários disponíveis no Progressive Web App. Os compradores online podem visualizar os dados pessoais, endereço de entrega, detalhes do pedido, etc.

1. Detalhes pessoais
Os usuários também podem visualizar e atualizar seus detalhes de perfil pré-salvos.

2. Endereço de envio (s)
Os usuários do aplicativo podem ver a lista completa de endereços de entrega pré-salvos no aplicativo PWA.

3. detalhes do pedido
Os usuários do aplicativo podem visualizar a lista completa dos pedidos feitos anteriormente no aplicativo PWA e seus detalhes.

4. Recurso de nova encomenda
Há um botão direto de novo pedido na tela Minha conta do aplicativo PWA. Todos os produtos anteriores deste pedido serão adicionados ao carrinho com apenas um único botão.

Tela 3.10 Order Detail

O Magento 2 Progressive Web App exibe detalhes completos dos pedidos de aplicativos anteriores. Esta tela contém detalhes do pedido, histórico de status, endereços de envio e cobrança, etc. para cada pedido feito através do aplicativo Magento 2 PWA. Os usuários do aplicativo podem visualizar rapidamente todo o resumo do pedido e controlar o status da entrega também.

tela-minha-conta-473x1024

Joe Parker

We boast of the best in the industry plugins for eCommerce systems and has years of experience working with eCommerce websites. We provide best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify . We also provide custom module development and customization services for the website and modules..

Leave a Reply

Your email address will not be published. Required fields are marked *