1.0 Introdução
Estando no setor de comércio eletrônico de varejo, você deve ter se deparado com a palavra PWA (Progressive Web App). Se sim, você também deve estar ciente da capacidade que eles carregam 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. Lançar um Progressive Web App é uma tarefa bem mais simples e acessível nos dias de hoje. 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 a URL da sua loja no navegador móvel, ele receberá uma mensagem de “Adicionar à tela inicial”. O Magento 2 Progressive Web App será adicionado no 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/
[IMP] Notas para Magento 2 iOS PWA:
�> Os dispositivos iOS não oferecem nenhum prompt “Adicionar à tela inicial” embutido. Os usuários precisam adicionar manualmente o Magento 2 PWA Mobile App à tela inicial do iPhone ou iPad. �> iOS não suporta notificações push da web. As notificações push só podem ser enviadas para o dispositivo Android a partir do painel de administração do Magento 2 PWA Mobile App Builder.
[NOVA ATUALIZAÇÃO] Magento 2�PWA suporta idiomas RTL:
O Magento 2 PWA Mobile App Creator agora suporta todos os idiomas do mundo, incluindo RTL (Right To Left). O PWA Mobile App para Magento 2 pode ter idiomas como árabe, hebraico, persa, etc. O dono da loja pode oferecer todos os idiomas do site no Progressive Web App e pode até adicionar novos.
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:
a) Ative a extensão:�Ative�Magento 2�PWA módulo para fazer o aplicativo da web funcionar nos smartphones dos usuários.
b) Redirecionar na página do carrinho quando adicionar ao carrinho:�Ative para redirecionar os usuários ao carrinho de compras ou desative para mantê-los na tela do produto.
c) Exibir descrição resumida:�Ative para adicionar e exibir uma breve descrição na tela do produto do 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:�Escolha os layouts desejados dos adicionados e melhore a aparência do aplicativo.
h) Imagem para o ícone do aplicativo:�Faça o upload do ícone do aplicativo Magento 2 PWA por conta própria e altere o mesmo, se necessário.
i) Nome do aplicativo PWA:�Digite o nome do Magento 2 Progressive Web App.
j) Selecione a fonte para o aplicativo PWA:�Escolha a fonte do seu aplicativo PWA para 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�Progressive Web App.
m) Cor do tema do aplicativo: Escolha a cor do tema (cabeçalho) do seu aplicativo da web.
n) App� Cor de fundo:�Escolha 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.
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 carregar o 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.
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
– Criar um novo projeto Ao clicar em Adicionar projeto, a seguinte caixa de diálogo será exibida:
A criação do projeto levará alguns segundos. Assim que o projeto estiver pronto, clique em continuar.
– Gerenciar configurações do projeto Uma vez que o projeto é criado, clique em Configurações do projeto.
– Vá para Opções de autenticação:
– Encontre as 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.
– Adicione seu aplicativo da Web ao Firebase
– Obtenha outros detalhes relacionados ao firebase e cole o mesmo no painel de administração do módulo PWA.
– Obtenha a chave do servidor firebase na guia de mensagens na nuvem em Configurações:
– Adicione o seu domínio na autenticação >> login.
2.21 Notificações automáticas por push:
O administrador da loja pode agendar o envio de notificações automatizadas para os seguintes casos:
a) Novas configurações de pedido:�Sempre que um novo pedido é feito no aplicativo móvel Magento 2 PWA.
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:
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.
2.31 Principais categorias:
2.32 Banner quadrado:
2.33 Banner deslizante:
2.34 Banner de grade:
2.35 Banner de cronômetro regressivo
2.36 Produtos Quadrados:
2.37 Produtos de deslizamento:
2.38 Produtos de rede:
Como obter detalhes do aplicativo do Facebook?
O aplicativo do Facebook pode ser criado seguindo as etapas abaixo mencionadas: –
– Vá para o URL fornecido: https://developers.facebook.com/apps/
– Clique no botão “Adicionar um novo aplicativo”.
Etapa 3 e 4:Insira o nome do aplicativo e a id de e-mail e clique no botão “Criar ID do aplicativo”.
Etapa 5 e 6: Após clicar em Criar ID de aplicativo, você terá que passar por uma verificação de segurança, conforme mostrado:
– Clique na aba “Configurações”.
Etapa 8-13:Duas opções estarão disponíveis no menu suspenso, Básico e Avançado, clique em “Básico”. Em seguida, insira seu “Domínio do aplicativo”, “E-mail de contato”, “Privacidade URL”, “Termos e Condições URL”, “Adicionar logotipo”, “Selecionar categoria” e clique no botão “Salvar alterações”. Domínios de aplicativos: seudominio.com está correto seudomínio.com/store está incorreto www.domain.com está incorreto
– Agora clique em “+ Adicionar plataforma”.
Etapa 15: E selecione Site como Plataforma.
– Agora digite o URL do seu site.
Etapa 17 e 18:Clique em “Produtos +” e selecione o login do Facebook.
– Selecione a web como plataforma para o aplicativo.
– Agora clique em salvar.
Etapa 21 e 22: Clique em Configurações e adicione URIs de redirecionamento OAuth válidos. URIs de redirecionamento OAuth válidos: https://example.com/pwa-app/login
Etapa 23 e 24:Clique em “Avaliação do aplicativo”. E marque “Tornar ‘o nome do seu aplicativo’ Público” como Sim.
Etapa final: Copie o ID do aplicativo e o segredo do aplicativo e cole-os nos campos fornecidos no módulo.
Como obter detalhes do Google App?
- Vá para o Google Developers Console (https://console.developers.google.com/project) ou clique no link fornecido na parte superior direita da respectiva guia na página de configuração do módulo.
- Agora clique em Criar Projeto à esquerda da página.
- Digite um nome para o seu projeto e prossiga para a próxima etapa.
- Agora clique em APIs e autenticação-> Credenciais no menu à esquerda, conforme mostrado abaixo.
- 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: Aplicativo da Web.
Origens do JavaScript autorizadas: Nome de domínio de sua loja (https://www.yourstore.com).
URI de redirecionamento autorizado ou URI da página de redirecionamento do Loginizer:
https://example.com/pwa-app/login
- 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:
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.
1. Minha conta:
A opção Minha conta contém todas as informações pessoais, de envio e de pedido do usuário. Os compradores do aplicativo PWA podem visualizar todos os dados armazenados relacionados a eles e também podem atualizá-los.
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, Fale conosco, 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 no aplicativo Magento 2 PWA.
6. Entrar sair
Os usuários podem facilmente entrar/sair do aplicativo Magento 2 PWA através desta opção.
3.3 Category Screen:
1. Várias vistas:
As categorias no aplicativo PWA para o Magento 2 podem ser visualizadas tanto em lista quanto em grade.
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.
1. Informações e cuidados do produto
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
O Magento 2 Progressive Web App oferece opções rápidas de login com um toque e torna o processo de login/registro mais simples: – Login por e-mail – Login no Google – Login no 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 sua conta na loja a partir do aplicativo Magento 2 PWA. O formulário de inscrição solicita apenas os detalhes necessários para criar uma conta.
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.
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 “Continue To Checkout”.
3.7 Tela de verificação:
Os aplicativos PWA Mobile para Magento 2 vêm com um checkout organizado em uma única tela, com apenas campos relevantes e necessários obrigatórios. Os usuários do aplicativo obtêm uma visão geral completa do pedido antes de efetuar o pagamento, como detalhes de envio, detalhes de cobrança, resumo do pedido, comentário do pedido, resumo do pagamento.
1. Detalhes de envio e cobrança
Esta tela fornece detalhes dos endereços de envio 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.
3.9 Tela da Minha Conta:
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 de pedidos de aplicativos anteriores. Esta tela contém detalhes do pedido, histórico de status, endereços de envio e cobrança, etc. para todos os pedidos feitos através do aplicativo Magento 2 PWA. Os usuários do aplicativo podem visualizar rapidamente todo o resumo do pedido e acompanhar o status da entrega também.