Magento
Magento é uma plataforma baseada em PHP de código-fonte aberto para criar soluções de comércio eletrônico. Construído pela empresa Magento (agora parte da Adobe), é usado por mais de 350.000 desenvolvedores em todo o mundo. Permite a criação de montras digitais altamente personalizáveis para fins Business-to-Customer e Business-to-Business. Magento 2, a versão transformada da plataforma de comércio eletrônico Magento, vem com uma nova arquitetura, estrutura de codificação e design de banco de dados.
a) Visão geralA plataforma do Magento é construída sobre PHP e MySQL. Durante sua vida útil de 10 anos (a versão 1.0 lançada em março de 2008 e a versão 2.0 em novembro de 2015, sofreu alterações em termos de estrutura e padrões de desenvolvimento e agora está em sua segunda versão principal, Magento 2.
A estrutura do Magento é composta por duas partes principais, uma sendo o back-end, com o banco de dados e o MySQL, e as interfaces Model, Data e Service, como pode ser visto na figura 3. Elas são conectadas diretamente e usadas nos Blocos, Layouts, e Modelos, que seriam definidos como o front-end do aplicativo.
b) Pesquisa de produtosUm dos recursos de destaque em qualquer site é o recurso de pesquisa de produtos, que permite aos usuários digitar termos para pesquisar produtos por. Depois que os resultados da pesquisa são coletados, o usuário geralmente pode classificar ou filtrar por categorias ou atributos do produto.
No Magento, a pesquisa geralmente usa MySQL, Solr ou Elasticsearch para indexar o catálogo. A indexação de catálogo determina quais resultados serão retornados à montra ao inserir um novo termo de pesquisa ou alterar as opções de filtragem dos resultados já coletados.
c) ElasticSearchO Elasticsearch é um mecanismo de pesquisa gratuito e de código aberto desenvolvido no Apache Lucene. É particularmente usado quando se lida com grandes quantidades de dados e quando é necessário recuperá-los rapidamente. Ao usar o MySQL, a consulta de dados pode levar muito tempo para ter muitos dados. Portanto, o principal ponto de venda do Elasticsearch é multiplicar as velocidades de consulta pelas centenas. Ele funciona indexando dados em documentos com chaves e valores e é fornecido com uma API que permite recuperar esses documentos indexados.
Quando usado em uma loja Magento, o catálogo é indexado em um nó do Elasticsearch. É facilmente configurável apenas ativando-o e especificando, no painel de administração da loja, o endereço IP e a porta do host em que o nó do Elasticsearch está localizado.
d) API de pesquisaO Magento possui uma quantidade razoável de pontos de extremidade da API REST, dos quais um que pode ser usado para pesquisar produtos. Esse ponto de extremidade da API de pesquisa recebe como dados enviados uma matriz chamada critério de pesquisa, que possui a seguinte estrutura
Para fazer uma solicitação, o cliente deve enviar uma solicitação GET para um caminho específico anexado à URL base da loja. O caminho é / rest / V1 / search /? ao qual os critérios de pesquisa estão anexados.
2. ReactJS
a) Reagir como uma ferramentaReact é uma biblioteca JavaScript criada pelo Facebook e projetada para criar interfaces de usuário. Ele se baseia no uso de componentes e estados para renderizar conteúdo dinâmico em páginas da Web sem a necessidade de carregar páginas. Atualmente, é uma das bibliotecas JavaScript mais populares e suportadas para interfaces de interface do usuário.
Diferentemente das soluções JavaScript mais antigas, que envolviam o acionamento manual de alterações na página, o React “sabe” quando a interface do usuário precisa ser atualizada e renderizada novamente na página quando os estados dos componentes são alterados. A idéia principal que diferencia o React de outras bibliotecas ou estruturas (por exemplo, AngularJS, Knockout) é o uso de um "DOM virtual", que aprimora o desempenho, reduzindo o número de alterações que ocorrem no DOM.
b) DOM virtual do ReactO DOM virtual do React é tecnicamente o que parece. É um DOM criado quando os componentes são renderizados e quando os estados mudam. A abordagem usada é criar um novo DOM virtual quando algum elemento precisar ser renderizado novamente e compará-lo com outra representação DOM virtual do estado anterior do aplicativo, tornando o "diff" usando um algoritmo e renderizando novamente no DOM apenas o elementos que precisam ser alterados.
O DOM virtual é uma representação completa do DOM sem ser um DOM real, o que significa que o processo de criação de um novo DOM virtual é muito mais rápido que a criação do DOM da página real. Consequentemente, como o React cria um novo DOM virtual toda vez que algo precisa ser renderizado novamente, ele realmente não precisa saber o que mudou. Isso significa que os desenvolvedores não precisam controlar o processo de renderização, pois o React altera o DOM da página somente quando uma alteração real é necessária. Em termos de desempenho, é um dos melhores e mais inteligentes métodos para renderizar novamente parte do DOM que precisa ser alterada.
c) Biblioteca de gerenciamento de estadoAo usar uma biblioteca JavaScript, como React, os desenvolvedores criam componentes que na maioria dos casos são stateful, o que significa que cada componente possui estados que podem mudar e que acionam atualizações de componentes. Quando o aplicativo se torna grande com muitos componentes interconectados, pode se tornar complicado e os estados podem precisar ser transmitidos dos pais para os filhos e vice-versa. Para contornar esse problema, existem bibliotecas de gerenciamento de estado. Eles permitem manter os estados do aplicativo em um único local para facilitar o gerenciamento do estado. As duas bibliotecas mais populares usadas ao lado do React são o Redux e o MobX.
3. Reaja e Magento
Magento 2.3 usa uma nova ferramenta chamada PWA Studio. É uma ferramenta de Aplicação Web Progressiva que permitirá que os desenvolvedores trabalhem com o Magento de maneira "sem cabeça", o que significa que o front-end não está diretamente vinculado ao back-end e a comunicação é feita através de APIs.
Até agora, a interface de usuário do Magento foi criada usando o que é chamado de "blocos", que possuem um modelo (arquivo phtml) e um bloco PHP. Os dados geralmente são renderizados no carregamento da página através desses blocos, modelos e interfaces provenientes do back-end.
O PWA Studio usa React, Redux e webpack para desenvolvimento.
a) O que é o Progressive Web App (PWA)?O Progressive Web App é um aplicativo da Web que aplica recursos da Web (HTML, CSS, Javascript) para oferecer excelente experiência ao usuário, imitando aplicativos nativos. Mais especificamente, o PWA pode funcionar como um aplicativo nativo com um ícone na tela inicial do celular, página inicial (após a abertura do aplicativo), exibição em tela cheia, notificações por push e assim por diante.
Todos os PWAs devem garantir três critérios essenciais: Rápido (responder às interações do usuário quase instantaneamente), Confiável (poder trabalhar em condições de rede ruins) e Envolvente (fornecer uma experiência suave como o aplicativo).
Existem algumas diferenças importantes entre um PWA e um aplicativo nativo:- Um aplicativo nativo pode ser executado apenas em um determinado sistema operacional (iOS ou Android) enquanto o PWA é alimentado por navegadores móveis e é compatível com iOS e Android.
- Você precisa baixar os aplicativos nativos de uma loja de aplicativos; enquanto isso, o PWA pode ser instalado rapidamente após ser adicionado à tela inicial.
- Os usuários devem acessar suas lojas de aplicativos para obter a versão mais recente dos aplicativos nativos, mas atualizar para obter atualizações do PWA.
- Como o PWA é executado diretamente em um navegador da Web, é mais fácil para os proprietários compartilhar e promover os PWAs do que os aplicativos nativos. Os PWAs funcionam sob demanda sem ocupar a memória do dispositivo como os aplicativos nativos
b) Magento e PWAEm 2017, o Magento colaborou com o Google para trazer o melhor dos recursos do PWA para a plataforma Magento até o final de 2018. O Magento 2.3 foi lançado em 28 de novembro de 2018, com uma tonelada de atualizações impressionantes e o Magento PWA foi um deles.
Magento, de fato, é uma das primeiras plataformas de comércio eletrônico a permitir que seus usuários utilizem totalmente o potencial dos PWAs. O Magento também introduziu o PWA Studio, que oferece as ferramentas necessárias para que os desenvolvedores criem e mantenham com sucesso uma fachada de loja do PWA sobre o Magento.
c) Por que devemos aplicar o PWA no Magento 2?
A integração progressiva de aplicativos da Web tem chamado muita atenção dos usuários do Magento, especialmente quando o Magento 2 PWA Studio foi lançado. Abaixo estão três motivações principais para converter seu site em Magento PWA:
- Experiência aprimorada do usuário em dispositivos móveis: obter o PWA no celular dos usuários é fácil, sem necessidade de download, mas é apenas a porta antes que eles experimentem funções surpreendentes, como o modo offline (acesse o aplicativo mesmo quando perder a conectividade com a Internet), sincronização em segundo plano (adie ações até a conexão de rede ficar estável) e outros recursos semelhantes a aplicativos.
- Menor custo de desenvolvimento e manutenção em comparação com aplicativos nativos: para aplicativos nativos, você precisará desenvolver dois aplicativos separados (um para iOS e outro para Android), o que leva a um tempo e esforço duplicados no desenvolvimento e manutenção de aplicativos. Por outro lado, é necessária uma única base de código para criar um PWA que possa ser executado independentemente do sistema operacional.
- A PWA no site Magento 2 não é apenas uma tendência aquecida, será o futuro dos aplicativos: muitas lojas Magento adotaram essa tecnologia e encontraram uma satisfação significativamente maior na satisfação do usuário móvel.
d) Por que o Magento está se concentrando nos PWAs?O gráfico acima mostra que 63,5% das vendas de comércio eletrônico em 2018 ocorreram por meio de telefones celulares e tablets. Em 2019, as vendas por dispositivos portáteis deverão atingir 67,2%.
Como o m-commerce está gerando mais vendas on-line, a Magento fez uma jogada inteligente para trazer tendências avançadas como a PWA para sua plataforma.
e) Como o Magento PWA pode melhorar os negócios online?
Velocidade notável - O fator vital para todas as lojas online é a velocidade. Se um site para celular demorar mais de três segundos para carregar, haverá uma queda de 53% nas visitas para celular. Em outras palavras, 53% dos clientes deixarão um site se levar mais de três segundos para carregar. Os PWAs terão um papel importante aqui, pois são incrivelmente rápidos. O motivo para os PWAs serem mais rápidos é o cache no nível do navegador, que é possível por causa dos trabalhadores do serviço. Os PWAs usam operadores de serviço para pré-armazenar em cache parte do aplicativo Web para carregar instantaneamente quando o usuário o abrir na próxima vez.
Compatibilidade entre plataformas - os PWAs podem funcionar sem problemas em quase todos os navegadores e plataformas móveis amplamente utilizados. Isso inclui navegadores como Chrome, Safari, Edge e Firefox. A única base de código da Web é suficiente para executar em várias plataformas, incluindo desktops. Portanto, as empresas não precisam desenvolver e manter aplicativos para plataformas diferentes. Além disso, os PWAs não precisam ser atualizados na loja de aplicativos. As atualizações podem ser entregues em tempo real, como em um site.
Design responsivo - A implementação do PWA resultará em uma experiência consistente em dispositivos como desktop, telefones celulares e tablets. Isso ajudará a melhorar a experiência do cliente. O Google afirmou que sites com design responsivo terão melhor classificação nos resultados de pesquisa do Google. Portanto, a implementação do PWA pode aumentar a classificação do site nos resultados de pesquisa do Google.
Suporte offline - Uma parte do site completo do PWA pode ser criada para funcionar offline. Por exemplo, os clientes podem procurar os produtos do seu site de comércio eletrônico e adicioná-lo ao carrinho sem conectividade com a Internet, desde que tenham visitado as páginas anteriormente. Os clientes podem até fazer pedidos offline, assim que a Internet estiver conectada, o pedido será processado.
Fácil de SEO - Como os sites da PWA são altamente atraentes e confiáveis, os visitantes podem ficar mais tempo do que o normal. Além disso, fatores como velocidade, suporte offline etc. contribuem para o alto envolvimento do usuário. Outra vantagem significativa do uso do PWA em termos de SEO é o "primeiro índice móvel". O Google anunciou recentemente que a versão móvel de um site seria indexada primeiro. Isso significa que sites que não possuem uma versão otimizada para celular não teriam bom desempenho nas classificações.
Notificações por push -
Notificações por push são as mensagens enviadas como notificações do aplicativo. Dizem que eles aumentam o envolvimento em até 88%. As notificações por push são importantes para as empresas de comércio eletrônico para manter os clientes informados sobre as últimas ofertas, ofertas e atualizações de pedidos.
Adicionar à tela inicial - O ícone do aplicativo, que parece um ícone de aplicativo nativo, dos sites do PWA pode ser adicionado à tela inicial dos smartphones. Os usuários podem clicar no ícone e visitar o site diretamente, em vez de acessar o navegador e depois o site. Isso aumentará o tempo gasto pelo usuário no aplicativo, o que resultará em uma taxa de conversão mais alta.
f) Quais benefícios os PWAs podem prometer para os negócios de comércio eletrônico?Como os PWAs combinam o melhor dos dois mundos - aplicativo nativo e Web móvel, eles resolvem dois problemas significativos enfrentados pelo setor de comércio eletrônico ao mesmo tempo:
ü Maior taxa de conversão - as conversões na Web para dispositivos móveis são menores quando comparadas às conversões em aplicativos para dispositivos móveis. Os PWAs oferecem uma experiência perfeita de aplicativo e combinados com recursos como suporte offline, velocidade e compatibilidade entre plataformas; as taxas de conversão podem subir.
ü Aumento do número de usuários - os clientes fazem o download apenas dos aplicativos móveis de empresas de comércio eletrônico bem estabelecidas. Com os PWAs, os clientes podem adicionar o PWA da loja on-line à tela inicial do telefone com apenas um clique em um botão.
g) Métodos para converter um site Magento 2 em PWA?- Instalar extensões PWA do Magento 2
- Crie seu próprio PWA usando o Magento 2 PWA Studio
- Converter site em PWA usando o tema Pento do Magento 2
h) estudos de caso de PWAAliExpress
O AliExpress é um dos maiores negócios de comércio eletrônico, não apenas na China, mas globalmente. Depois de implementar o PWA, eles viram resultados em dias. Houve um aumento de 74% no tempo gasto no site e as visualizações de página dobraram.
Flipkart
A Flipkart é a maior loja de comércio eletrônico da Índia e lançou o Flipkart Lite como seu PWA.
O tempo dos usuários no site aumentou para 3,5 minutos com o PWA, antes eram 70 segundos no caso do aplicativo nativo. A taxa de engajamento aumentou para 40% e uma conversão 70% maior foi vista pelos clientes que chegaram pelo recurso Adicionar à tela inicial. O uso de dados também foi reduzido para um terço.
OLX
O OLX é um mercado líder na Índia, e as taxas de rejeição eram altas para a web móvel. Metade do tráfego era da Web para dispositivos móveis e eles escolheram a PWA para resolver seus problemas.
Após a implementação do PWA, a taxa de rejeição caiu 80% e a CTR (taxa de cliques) nos anúncios aumentou 146%. Com a ajuda de notificações por push, a taxa de engajamento aumentou 250%.
Jumia
A Jumia é uma loja de comércio eletrônico popular na África e, depois de testemunhar os benefícios da PWA, eles aplicaram a PWA em outras operações, como a Jumia Travel. O tráfego para o PWA aumentou 12 vezes mais do que o tráfego combinado de aplicativos nativos - Android e iOS. O uso de dados foi reduzido em cinco vezes e foram necessários 2x menos dados para concluir a primeira transação. Além disso, o armazenamento de dados necessário foi reduzido em 25x.
Konga
Konga é um grande participante na Nigéria e eles usaram o PWA para reduzir o consumo de dados. Ao implementar o PWA, o carregamento inicial levou 92% menos dados e para concluir a primeira transação, foram necessários 82% menos dados.
Empresas que utilizam recursos limitados do PWAPara utilizar todo o potencial do PWA, o site deve ser construído do zero. Isso pode ser bastante caro. No entanto, também é possível integrar apenas os recursos PWA necessários ao site existente.
As empresas podem se concentrar nos recursos que criarão o máximo impacto e implementá-lo. Isso também aumentará significativamente a experiência do cliente. Vamos ver exemplos de algumas empresas que usam recursos selecionados do PWA.
AirberlinO AirBerlin utilizou a funcionalidade offline do PWA para oferecer suporte offline confiável a seus clientes nos aeroportos. Suporte offline foi adicionado e o tempo de carregamento inicial foi reduzido para menos de um segundo. Isso permitiu que seus passageiros acessassem o cartão de embarque e os detalhes da viagem sem conectividade à Internet.
The Washington PostO Washington Post construiu uma versão simples do PWA usando a demonstração do PWA para seu feed de notícias principal. Eles se concentraram na velocidade. O tempo de carregamento da página foi reduzido para 80ms. Você pode ver a demonstração ao vivo deste produto em WAPO.com/PWA. Como viram um resultado incrível, decidiram usar o PWA para sua principal experiência na Web para dispositivos móveis.