1.0 Introducción
Al estar en la industria del comercio electrónico minorista, debe haber encontrado la palabra PWA (aplicación web progresiva). En caso afirmativo, también debe tener en cuenta la capacidad que tienen como aplicación de compras. En caso de que no, has aterrizado en el lugar correcto. Con el crecimiento constante en el uso de aplicaciones de compras (tanto nativas como PWA), las tiendas en línea están cambiando al desarrollo de aplicaciones móviles PWA para sus negocios. Lanzar una aplicación web progresiva es una tarea bastante más simple y asequible en estos días. KnowBand ha lanzado la aplicación móvil Magento 2 PWA, una herramienta completa sin código y automatizada para lanzar una aplicación web progresiva. En palabras simples, cada vez que un usuario abra la URL de su tienda en el navegador móvil, recibirá un mensaje de “Agregar a la pantalla de inicio”. La aplicación web progresiva Magento 2 se agregará en el dispositivo del usuario como cualquier otra aplicación y las compras en línea se pueden realizar sobre la marcha.
1.1 Ver aplicación de demostración:
Explore la demostración de la aplicación web progresiva para Magento 2 y eche un vistazo a cómo se verán y funcionarán sus aplicaciones finales:
URL de la tienda de demostración:�https://ma2demo.knowband.com/pwa/manager/
URL de la aplicación PWA:�https://ma2demo.knowband.com/pwa/pwa-app/
[IMP] Notas para Magento 2 iOS PWA:
�> Los dispositivos iOS no ofrecen ningún mensaje incorporado “Agregar a la pantalla de inicio”. Los usuarios deben agregar manualmente la aplicación móvil Magento 2 PWA a la pantalla de inicio del iPhone o iPad. �> iOS no admite notificaciones web push. Las notificaciones automáticas solo se pueden enviar al dispositivo Android desde el panel de administración de Magento 2 PWA Mobile App Builder.
[NUEVA ACTUALIZACIÓN] Magento 2�PWA admite lenguajes RTL:
El creador de aplicaciones móviles Magento 2 PWA ahora es compatible con todos los idiomas del mundo, incluido RTL (de derecha a izquierda). La aplicación móvil PWA para Magento 2 puede tener idiomas como árabe, hebreo, persa, etc. El propietario de la tienda puede ofrecer todos los idiomas del sitio web en la aplicación web progresiva e incluso puede agregar otros nuevos.
Pantallas del panel de administración 2.0:
Con el backend del panel de administración amigable, el administrador de la tienda puede configurar y personalizar la apariencia y el funcionamiento de la aplicación móvil PWA. Es solo una cuestión de unos pocos clics y alternar el mouse para realizar cambios en las aplicaciones web progresivas de Magento 2. Veamos una descripción detallada de las pantallas del panel de administración:
2.1 Configuración general:
a) Habilitar la Extensión:Habilite el módulo Magento 2 PWA para que la aplicación web funcione en los teléfonos inteligentes de los usuarios.
b) Redirigir en la página del carrito cuando se agrega al carrito:Habilite para redirigir a los usuarios al carrito de compras o deshabilite para mantenerlos en la pantalla del producto.
c) Mostrar descripción breve:Habilite para agregar y mostrar una breve descripción en la pantalla del producto de Progressive Web App.
d) Habilitar informes de registro de solicitudes: Habilite esta pestaña para activar el archivo de registro en la aplicación móvil de PWA. Este archivo de registro se puede utilizar para rectificar cualquier comportamiento anormal de la aplicación web progresiva.
e) Mostrar vista previa de la aplicación: Habilite para agregar un teléfono de vista previa en el panel de administración. Todos los cambios de color, fuente y pantalla de inicio se mostrarán en el teléfono de vista previa en tiempo real.
f) Habilitar barra de pestañas: Agregue una barra de pestañas inferior en la aplicación móvil Magento 2 PWA.
g) Seleccionar diseño para la página de inicio:Elija los diseños deseados de los agregados y mejore la apariencia de la aplicación.
h) Imagen para el icono de la aplicación:Cargue el ícono de la aplicación Magento 2 PWA por su cuenta y cámbielo también si es necesario.
i) Nombre de la aplicación PWA:�Ingrese el nombre de la aplicación web progresiva Magento 2.
j) Seleccionar fuente para la aplicación PWA:Elija la fuente de su aplicación PWA para Magento 2.
k) Color del botón de la aplicación: Elija el color del botón para su aplicación móvil PWA.
l) Color del texto del botón de la aplicación: Elija el color del texto del botón para su aplicación web progresiva Magento 2.
m) Color del tema de la aplicación: Elija el color del tema (encabezado) de su aplicación web.
n) Color de fondo de la aplicación:Elija el color de fondo de la aplicación web progresiva.
o) Color de fondo de la pantalla de bienvenida: Elija la opción de color adecuada para el fondo de la pantalla de presentación de la aplicación PWA.
p) Métodos de envío deshabilitados: Elija los métodos de envío para que no funcionen en la aplicación móvil Magento 2 PWA.
q) Habilitar y cargar logotipo: Agregue la imagen del logotipo de su tienda para que se muestre en el encabezado de la aplicación PWA Mobile.
2.2 Configuración de notificaciones automáticas:
La aplicación web progresiva Magento 2 ofrece notificaciones automáticas ilimitadas al mercado y promueve ofertas y productos de la tienda. El administrador de la tienda recibirá notificaciones automáticas de por vida sin cargos adicionales.
Los diversos campos de esta pestaña de configuración requieren la configuración de una cuenta de Firebase. Así es como puede configurar uno:
¿Cómo configurar una cuenta de Firebase?
Paso 1: Iniciar sesión Google Firebase
Paso 2: Crear un nuevo proyecto Al hacer clic en Agregar proyecto, aparecerá el siguiente cuadro de diálogo:
Tardará unos segundos en crear el proyecto. Una vez que el proyecto esté listo, haga clic en continuar.
Paso 3: Administrar la configuración del proyecto Una vez creado el proyecto, haga clic en Configuración del proyecto.
Paso 4: Vaya a las opciones de autenticación:
Paso 5: Buscar claves de Firebase En la configuración del proyecto, haga clic en Configuración de mensajería en la nube. Desde aquí, puede obtener directamente la clave del servidor.
Paso 6: Agregue su aplicación web a Firebase
Paso 7: Obtenga otros detalles relacionados con firebase y pegue lo mismo en el panel de administración del módulo PWA.
Paso 8: Obtenga la clave del servidor Firebase desde la pestaña de mensajería en la nube en Configuración:
Paso 9: Agregue su dominio en autenticación>>iniciar sesión.
2.21 Notificaciones automáticas automáticas:
El administrador de la tienda puede programar el envío automático de notificaciones para los siguientes casos:
a) Configuración de nuevos pedidos:Siempre que se realice un nuevo pedido desde la aplicación móvil Magento 2 PWA.
b) Ajustes de cambio de estado del pedido: Siempre que se cambie/actualice el estado de entrega de cualquier pedido.
c) Configuración del carrito abandonado: Siempre que un usuario deje el producto en el carrito y abandone la aplicación web progresiva.
2.22 Notificación de inserción manual:
Como se muestra en la instantánea anterior, el administrador de la tienda puede personalizar y enviar notificaciones push manuales a los usuarios de la aplicación móvil de PWA. El mensaje, la imagen, el descuento ofrecido, el enlace de redirección se pueden agregar/editar para mejorar la eficiencia de la notificación y generar más ventas.
Diseño de la página de inicio de 2.3:
Magento 2 PWA Mobile App Builder ofrece un panel de edición de bricolaje totalmente personalizable para personalizar y configurar la apariencia de la aplicación web progresiva. Se pueden agregar varios diseños nuevos al panel de administración en función de los próximos festivales y ocasiones.
2.31 Categorías principales:
2.32 Bandera cuadrada:
2.33 Pancarta Deslizante:
2.34 Banner de cuadrícula:
2.35 Pancarta del temporizador de cuenta regresiva
2.36 Productos cuadrados:
2.37 Productos deslizantes:
2.38 Productos de rejilla:
¿Cómo obtener los detalles de la aplicación de Facebook?
La aplicación de Facebook se puede crear siguiendo los pasos mencionados a continuación:
Paso 1:�Ir a la URL dada: https://developers.facebook.com/apps/
Paso 2:�Haga clic en el botón “Agregar una nueva aplicación”.
Paso 3 y 4:Ingrese el nombre de su aplicación y la identificación de correo electrónico, luego haga clic en el botón “Crear ID de aplicación”.
Paso 5 y 6:Después de hacer clic en Crear ID de aplicación, deberá pasar por un control de seguridad como se muestra:
Paso 7:Haga clic en la pestaña “Configuración”.
Paso 8-13:�Estarán disponibles dos opciones en el menú desplegable, Básico y Avanzado, haga clic en “Básico”. Y luego ingrese su “Dominio de la aplicación”, “Correo electrónico de contacto”, “URL de privacidad”, “URL de términos y condiciones”, “Agregar logotipo”, “Seleccionar categoría” y haga clic en el botón “Guardar cambios”. Dominios de la aplicación: sudominio.com es correcto sudominio.com/tienda es incorrecto www.dominio.com es incorrecto
Paso 14:�Ahora haga clic en “+Agregar plataforma”.
Paso 15:�Y seleccione Sitio web como Plataforma.
Paso 16:Ahora ingrese la URL de su sitio.
Paso 17 y 18:�Haga clic en “Productos+” y seleccione iniciar sesión en Facebook.
Paso 19:�Seleccione web como la plataforma para la aplicación.
Paso 20:�Ahora haga clic en guardar.
Paso 21 y 22:�Haga clic en Configuración y agregue un URI de redirección de OAuth válido. URI de redireccionamiento de OAuth válidos: https://example.com/pwa-app/login
Paso 23 y 24:�Haga clic en “Revisión de la aplicación”. Y marque “Hacer público ‘el nombre de su aplicación'” en Sí.
Paso final:�Copie el ID de la aplicación y el Secreto de la aplicación y péguelos en los campos proporcionados en el módulo.
¿Cómo obtener los detalles de la aplicación de Google?
- Vaya a Google Developers Console (https://console.developers.google.com/project) o haga clic en el enlace que se encuentra en la parte superior derecha de la pestaña respectiva en la página de configuración del módulo.
- Ahora haga clic en Crear proyecto a la izquierda de la página.
- Ingrese un nombre para su proyecto y continúe con el siguiente paso.
- Ahora haga clic en API y autenticación-> Credenciales en el menú de la izquierda, como se muestra a continuación.
- Haga clic en el botón Crear nuevo ID de cliente en el panel derecho de la pantalla.
- Es posible que deba completar el formulario para la pantalla de consentimiento antes de continuar. Para hacerlo, debe hacer clic en Pantalla de consentimiento en el menú de la izquierda, como se muestra en la imagen de arriba.
- Complete el formulario emergente con los detalles a continuación:
Tipo de aplicacion:�Aplicación Web.
Orígenes autorizados de JavaScript:�El nombre de dominio de su tienda (https://www.yourstore.com).
URI de redireccionamiento autorizado o URI de la página de redireccionamiento del iniciador de sesión:
https://example.com/pwa-app/login
- Ahora haga clic en el botón Crear ID de cliente para obtener su ID de cliente y clave secreta de cliente.
- Ahora puede usar el secreto del cliente y la identificación del cliente para permitir que sus clientes inicien sesión en su tienda usando su cuenta de Google.
3.0 Pantallas de la aplicación Front End PWA:
Eche un vistazo rápido a las pantallas perfectamente diseñadas de Progressive Web App para Magento 2:
3.1 Pantalla de inicio:
La pantalla de inicio de la aplicación web progresiva Magento 2 es totalmente personalizable desde el panel de administración del módulo. Puede diseñar el diseño de las pantallas de la aplicación de la forma que desee. Los diseños personalizados se pueden diseñar en el panel de administración en función de eventos, festivales, ocasiones, etc. y se pueden usar cuando sea necesario.
1. Diseño dinámico:
Usando varios elementos de diseño (banners, controles deslizantes, categorías, etc.), el administrador de la tienda puede crear un diseño dinámico según la necesidad.
2. Logotipo de la tienda:
Agregue el logotipo de la tienda en el encabezado de la aplicación PWA.
3. Carrito de compras:
El ícono del carrito de compras en la esquina superior derecha de la pantalla de inicio permite a los usuarios cambiar a la pantalla del carrito.
4. Menú de navegación:
Explore las categorías en las aplicaciones con el menú de navegación izquierdo en la pantalla de inicio.
3.2 Menú de navegación izquierdo:
Las aplicaciones móviles Magento 2 PWA presentan una categorización perfecta de productos. Las categorías en la aplicación móvil de PWA serán las mismas que están disponibles en el sitio web. Los compradores en línea pueden navegar fácilmente por productos de múltiples categorías sin problemas. También se pueden agregar varias páginas de CMS al menú de navegación izquierdo usando el panel de administración.
1. Mi cuenta:
La opción Mi cuenta contiene toda la información personal, de envío y de pedido del usuario. Los compradores de la aplicación PWA pueden ver todos los datos almacenados relacionados con ellos y también pueden actualizarlos.
2. Categorías
Las categorías que se muestran en el menú de navegación izquierdo de la aplicación PWA son las mismas que las de su sitio web.
3. Páginas de CMS:
Se puede acceder a varias páginas de CMS como Acerca de nosotros, Contáctenos, Términos y condiciones, etc. desde aquí.
4. Idioma(s)
La opción de idioma permite a los usuarios de la aplicación PWA ver la aplicación web en el idioma deseado. Todos los idiomas disponibles se muestran solo en esta opción.
5. Moneda(s)
Todas las monedas disponibles en su sitio web se muestran aquí en la aplicación Magento 2 PWA.
6. Iniciar/Cerrar sesión
Los usuarios pueden iniciar o cerrar sesión fácilmente desde la aplicación Magento 2 PWA a través de esta opción.
3.3 Pantalla de categoría:
1. Vistas múltiples:
Las categorías en la aplicación PWA para Magento 2 se pueden ver tanto en la lista como en la vista de cuadrícula.
2. Clasificación:
Esta opción permite a los compradores en línea elegir el orden de clasificación para reducir la búsqueda y obtener el producto deseado con facilidad.
3. Filtrar:
La opción de filtrar productos simplifica la búsqueda de productos. Los usuarios pueden filtrar todos los productos en categorías usando varios atributos como tamaño, color, precio, etc.
3.4 Pantalla del producto:
La pantalla del producto de la aplicación web progresiva Magento 2 contiene toda la información necesaria del producto al igual que la de su tienda. Desde múltiples imágenes de productos hasta descripciones cortas y largas ayuda a que el usuario se anime a comprar. La disponibilidad del producto se indica como “En stock” o “Fuera de stock” según el estado del inventario.
1. Información y cuidado del producto
Aquí se mostrará la información completa del producto disponible en el inventario.
2. Descripción breve
Los usuarios pueden leer la breve descripción de su producto para decidir rápidamente sobre la compra.
3. Opciones de productos:
Todas las opciones relacionadas con el producto como tamaño, color, etc. se muestran aquí.
5. Agregar al carrito:
Este botón permite a los usuarios agregar productos al carrito. Los usuarios pueden seguir procesando el carrito para la compra.
6. Intercambio social de productos:
La opción de compartir para el producto permite a los usuarios compartir productos en múltiples canales sociales.
Pantalla de inicio de sesión de 3.5
La aplicación web progresiva Magento 2 ofrece opciones rápidas de inicio de sesión con un solo toque y hace que el proceso de inicio de sesión/registro sea más fluido: – Inicio de sesión por correo electrónico – Inicio de sesión en Google – Inicio de sesión en Facebook
1. Iniciar sesión
Los usuarios de la aplicación pueden autenticarse e iniciar sesión fácilmente en las aplicaciones PWA utilizando sus credenciales de inicio de sesión de correo electrónico anteriores.
2. Regístrate
Todos los nuevos usuarios de la aplicación pueden registrarse y crear su cuenta en la tienda desde la aplicación Magento 2 PWA. El formulario de registro solicita solo los detalles necesarios para crear una cuenta.
3. Inicia sesión con Facebook
Los usuarios pueden iniciar sesión en la aplicación PWA utilizando sus credenciales de cuenta de Facebook.
4. Iniciar sesión con Google+
Los usuarios pueden iniciar sesión en la aplicación PWA con las credenciales de su cuenta de Google.
3.6 Pantalla del carrito de compras:
La bolsa de compras de las aplicaciones Magento 2 PWA mostrará todos los productos agregados junto con su cantidad y precio a pagar. Los usuarios de la aplicación también pueden ver los detalles del producto para estar seguros antes de comprar uno.
1. Aplicar Vale:
Esta opción permite a los usuarios usar cupones del sitio web y obtener ofertas de descuento.
2. Precio total del producto:
Los usuarios pueden ver el costo completo de su bolsa de compras antes de continuar. Se actualiza automáticamente de acuerdo con cualquier actualización con cantidad de producto o nueva incorporación.
3. Actualizar cantidad de producto:
Los usuarios de la aplicación PWA pueden incluso actualizar la cantidad del producto con la opción “Actualizar cantidad”.
4. Eliminar producto:
Los usuarios de la aplicación pueden simplemente eliminar el producto del carrito simplemente tocando la opción “Eliminar”.
5. Continuar comprando:
Los usuarios de la aplicación pueden dejar el carrito para buscar más productos en su aplicación.
6. Continuar para pagar:
Los usuarios de la aplicación PWA pueden continuar con las pantallas de pago y pago simplemente tocando la opción “Continuar con el pago”.
3.7 Pantalla de pago:
Las aplicaciones móviles de PWA para Magento 2 vienen con una sola pantalla de pago sin desorden con solo los campos relevantes y necesarios. Los usuarios de la aplicación obtienen una descripción general completa del pedido antes de realizar el pago, como los detalles de envío, los detalles de facturación, el resumen del pedido, el comentario del pedido y el resumen del pago.
1. Detalles de envío y facturación
Esta pantalla proporciona detalles de las direcciones de envío y facturación guardadas por el usuario. El usuario también puede editar/guardar la nueva dirección de envío si es necesario.
2. Resumen del pedido
Los usuarios de la aplicación pueden ver los detalles del producto antes de realizar el pago.
3. Métodos de envío
Todos los métodos de envío disponibles se muestran aquí. Los usuarios pueden elegir el que se adapte a sus necesidades.
4. Comentario del pedido
Los usuarios también pueden agregar cualquier comentario relacionado con su pedido que será visible para el administrador de la tienda en la página web del pedido en el backend.
6. Resumen de pago
Esta sección muestra los detalles completos del pago desglosado relacionados con la compra.
7. Proceder al pago
Los usuarios de la aplicación PWA serán redirigidos a la pantalla de pago después de tocar el botón “Continuar con el pago”.
3.8 Pantalla de pago:
La aplicación Magento 2 PWA trae todos los pagos de vista web (sitio web) en la aplicación. Los usuarios de la aplicación encontrarán aquí las mismas opciones de pago que están disponibles en las aplicaciones. La pantalla de pago de la aplicación web progresiva Magento 2 está completamente optimizada para la vista de la aplicación.
3.9 Pantalla Mi cuenta:
La pantalla Mi cuenta de la aplicación Magento 2 PWA ofrece todos los detalles de los usuarios disponibles en la aplicación web progresiva. Los compradores en línea pueden ver los datos personales, la dirección de envío, los detalles del pedido, etc.
1. Detalles personales
Los usuarios también pueden ver y actualizar sus detalles de perfil previamente guardados.
2. Dirección(es) de envío
Los usuarios de la aplicación pueden ver la lista completa de direcciones de envío guardadas previamente en la aplicación PWA.
3. Detalles del pedido
Los usuarios de la aplicación pueden ver la lista completa de los pedidos realizados anteriormente desde la aplicación PWA y sus detalles.
4. Función de reordenamiento
Hay un botón de pedido directo en la pantalla Mi cuenta de la aplicación PWA. Todos los productos anteriores bajo este pedido se agregarán al carrito con solo un botón.
3.10 Pantalla de detalles del pedido
La aplicación web progresiva Magento 2 muestra los detalles completos de los pedidos de aplicaciones anteriores. Esta pantalla contiene detalles del pedido, historial de estado, direcciones de envío y facturación, etc. para cada pedido realizado a través de la aplicación Magento 2 PWA. Los usuarios de la aplicación pueden ver rápidamente el resumen completo del pedido y también pueden realizar un seguimiento del estado de la entrega.
