Todo lo que necesitas saber sobre el estudio Magento PWA

Las aplicaciones web progresivas, o PWA, ganan cada vez más popularidad debido a la función actualizada. Gracias a la tecnología de punta, mejora la experiencia del cliente y genera más ingresos para el negocio. Por lo tanto, muchas empresas aplicaron esta plataforma para tiendas en línea para aprovechar las ventajas de PWA. Especialmente, muchas empresas eligen aplicaciones web progresivas en Magento. Luego, le daremos una lista de verificación detallada sobre el estudio Magento PWA para ayudarlo a acostumbrarse más a él.

Una descripción general del estudio PWA

¿Qué es la aplicación web progresiva?

Una aplicación web progresiva se ve y se siente como una aplicación nativa, pero funciona directamente en los navegadores móviles. No es necesario descargar nada de una tienda de aplicaciones. En su lugar, los clientes obtienen una experiencia similar a una aplicación al instante en sus navegadores.

Característica de la aplicación web progresiva

La capacidad del trabajo fuera de línea: Trabajadores de servicios: la tecnología es responsable de esa función. Por lo tanto, permite que la aplicación almacene cosas fuera de línea y administre de manera flexible las solicitudes de red para recuperarlas. Como resultado, lleva a minimizar la cantidad de datos que necesitamos usar para ejecutar la aplicación.

Visibilidad y fácil instalación: una PWA es un sitio web con algunos extras que se pueden descubrir a través de motores de búsqueda habituales como Google o Bing. Por lo tanto, los usuarios no necesitan descargar nada de las tiendas de aplicaciones. La instalación de una PWA es realmente fácil, ocurre en segundo plano durante la primera visita.

Uso de las funciones del teléfono: las PWA tienen muchas posibilidades para acceder a las funciones del dispositivo en Android y algunas menos en iOS. El uso de cámaras, GPS o escáneres de huellas dactilares en forma de aplicación enriquece la experiencia del usuario.

Actualizaciones automáticas: una PWA permite a los editores implementar parches de inmediato. Además, les permite mantener el control total del contenido. Los clientes siempre usan la versión más actual de la aplicación.

Seguridad: al usar el protocolo HTTPS, los datos están seguros debido al cifrado y, por lo tanto, son más difíciles de interceptar y cambiar. Además, los usuarios perciben HTTPS como una garantía de seguridad y confiabilidad de los editores. Y Google otorga puntos adicionales en el ranking de búsqueda por usarlo.

Sensación similar a una aplicación: la idea detrás de las PWA es encontrar una manera de conectar la mejor experiencia posible a una similar a una aplicación con la naturaleza abierta de la web.

Un esquema de Magento PWA Studio

El origen de Magento PWA Studio

Magento ha lanzado un conjunto de herramientas para todos los comerciantes que operan tiendas en línea. Magento PWA Studio es el nombre de este conjunto de herramientas. A los minoristas en línea les ahorrará mucho tiempo y dinero desarrollar aplicaciones nativas para todos los diferentes sistemas operativos.

Debido a las herramientas para diseñar sitios web similares a aplicaciones Magento, los comerciantes en línea pueden aumentar su tasa de conversión móvil. Es el resultado de mejorar la experiencia de canales cruzados para los clientes. Además, Magento PWA le permite comportarse como una aplicación nativa para una mejor experiencia de usuario.

Los comerciantes pueden aprovechar la arquitectura front-end ultrarrápida y las API web abiertas. Ayuda a transformar sus tiendas en lo que se está convirtiendo rápidamente en la nueva norma.

Paquete de compilación PWA

El Buildpack contiene las bibliotecas y herramientas esenciales de desarrollo y compilación para crear un front-end y una PWA ultrarrápidos. Le permite organizar su entorno local para el desarrollo de PWA.

Escaparate de PWA

PWA Storefront, también conocido como Venia Storefront, es una PWA de prueba de concepto construida con herramientas Peregrine y PWA Buildpack. Al aprender sobre Magento PWA Studio y lo que puede lograr, el escaparate muestra ejemplos de páginas de categorías y detalles de productos.

Halcón peregrino

El proyecto Peregrine de Magento, como se señaló anteriormente, contiene un conjunto de herramientas y componentes de interfaz de usuario para crear una PWA de Magento. Los componentes se pueden combinar, ampliar y mezclar para crear tiendas Magento 2 PWA únicas.

Algunas características sobresalientes de Magento PWA Studio

ReactJS: ReactJS funciona muy bien y ofrece una excelente experiencia de compra y desarrollo.

Alternativa a la pantalla de inicio: Magento PWA proporciona una tienda que se puede descargar en la pantalla de inicio. Se verá y funcionará como una aplicación nativa.

Funciona sin conexión: las aplicaciones web de PWA pueden funcionar tanto sin conexión como en línea.

Sólido back-end: el robusto back-end interno de Magento ofrece una experiencia de usuario fluida con pocos problemas.

La ventaja al usar Magento PWA Studio

Herramientas de desarrollo integrales

Magento Studio brinda herramientas de desarrollo de PWA que son de última generación e incluyen documentación completa. Los usuarios pueden organizar rápidamente sus propios entornos de desarrollo de PWA locales con ellos.

Configuración fácil

Configurar PWA desde el backend es simple con Magento Studio. Para iniciar correctamente la aplicación, los usuarios deben insertar la URL de la instancia de Magento en el archivo.env. Luego, clonará un repositorio y ejecutará un comando. Era evidente desde el principio que la facilidad de desarrollo era un objetivo primordial.

GráficoQL

Debido a que GraphQL emplea la obtención de datos declarativos, las PWA desarrolladas con Magento Studio casi no tienen una sobreobtención de consultas. Entonces es más capaz de acomodar a múltiples usuarios de varias fuentes.

Soporte comunitario

Magento es una conocida plataforma de comercio electrónico, lo que ha resultado en una gran comunidad global de usuarios y colaboradores de Magento PWA.

La arquitectura y el marco del estudio Magento PWA

El estudio es muy sencillo de configurar y utilizar para evitar que se produzcan errores al principio del proceso de desarrollo de la aplicación. Los desarrolladores reciben una advertencia inmediata cuando algo no está bien organizado. Esto ahorra tiempo cuando se trata de descubrir y reparar errores cuando el programa está casi completo.

El constructor del estudio Magento PWA está listo para usar

No es necesario instalar el constructor y dedicar tiempo a personalizar y configurar el entorno. Todo funciona de inmediato con Magento PWA Studio después de la instalación. Todo está configurado y listo para funcionar.

Los elementos prefabricados son adaptables

PWA Studio incluye una gran cantidad de partes del sitio web completadas y listas para usar. Al crear su sitio web, puede usar cualquiera o todos los elementos en cualquier combinación. En este punto, los elementos preparados podrían usarse exactamente como están. Incluso las piezas prefabricadas se pueden modificar para satisfacer las necesidades del desarrollador o del consumidor.

Enrutamiento y almacenamiento en caché perfectamente simples

Las funciones de enrutamiento y almacenamiento en caché de Magento PWA Studio son excelentes cualidades adicionales. El enrutamiento y el almacenamiento en caché se realizan de la misma manera que siempre, sin cambios. Sin embargo, si adopta la técnica convencional de enrutamiento y almacenamiento en caché de Magento, no necesitará ninguna participación con el enrutamiento y el almacenamiento en caché.

Magento PWA Studio y los contras que tendrás que superar

Plataforma única

Si desea poseer Magento Studio, necesita que cada tienda se ejecute en Magento 2.3 y versiones más nuevas. Aunque no es necesario preocuparse por la compatibilidad, es bastante limitante.

Falta de compatibilidad

Cuando se trata de compatibilidad, la función GraphicQL de Magento Studios la hace inapropiada con versiones anteriores.

Problemas de soporte de iOS

Magento no admite notificaciones PWA de iOS y no funcionará con dispositivos iOS que no estén conectados a Internet.

Problemas de validación

Al crear nuevas cuentas de clientes, pueden surgir problemas de validación. Esto es especialmente cierto para los usuarios de iOS cuando configuran una contraseña. No se puede enviar una notificación si la contraseña elegida no cumple con los requisitos de contraseña.

Cómo instalar Magento PWA Studio (con la versión 2

Paso 1: Instale la última versión de Magento

Para instalar Magento PWA Studio, primero debe tener instalada una versión de Magento 2.3.x. No puede instalar Magento PWA Studio Project (2.3) sin él, porque ninguna otra versión de Magento lo admite.

Paso 2: Instalar NodeJS

Después de eso, deberá instalar NodeJS (versión> = 10.14.1). Si no está familiarizado con la técnica, utilice el comando que se indica a continuación. (Esto es solo para usuarios de Linux).

sudo apt-get install nodejs

En primer lugar, debe verificar la versión del nodo: nodo -v

Luego, revise la versión de NPM: npm -v

Si la versión que instaló es más antigua que la que se muestra arriba, use el siguiente comando para actualizar a la versión más reciente y estable del nodo.

sudo npm caché limpio -f

sudo npm install -gn

sudo n estable

Paso 3: Instale y ejecute Node JS

Después de la instalación y ejecución de NodeJS, deberá instalar Yarn (Yarn >=1.13.0 ). Ejecute el siguiente comando para la instalación de Yarn. (Aplicable solo para SO Linux).

sudo npm instalar hilo -g

Ahora verifique la versión de hilo:

hilo -v

Paso 4:

Ahora que Yarn está instalado, clone el repositorio de PWA en su directorio de desarrollo.

clon de git: https://github.com/magento-research/pwa-studio.git

Paso 5:

Consecutivamente a este paso, instale las dependencias del proyecto ejecutando el siguiente comando.

instalación de hilo

Paso 6: crea el archivo .env

Para crear el archivo .env, ejecute el siguiente comando desde el directorio raíz de PWA:

(Para el tema Venia, puede usar el Magento que instaló usted o el Magento 2.3.1 predeterminado. Aquí estamos usando el predeterminado).

MAGENTO_BACKEND_URL=”https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/” yarn buildpack create-env-file packages/venia-concept

También puede crear el archivo .env y establecer su valor MAGENTO_BACKEND_URL personalizado con el siguiente comando:

MAGENTO_BACKEND_URL=”https://YOUR_MAGENTO_BACKEND_URL/” yarn buildpack create-env-file packages/venia-concept

Paso 7: Instale el certificado SSL

Instale el certificado SSL ya que PWA se ejecuta en una ruta segura. Puede ejecutar el comando create-custom-origin para generar el certificado SSL:

yarn buildpack crear paquetes de origen personalizados/concepto de venia

Paso 8: Instale los datos de muestra de Venia

También puede instalar los datos de muestra de Venia, ya hay un script bash disponible en packages/venia-concept/deployVeniaSampleData.sh

bash desplegarVeniaSampleData.sh

Para instalar datos de muestra en Magento, ejecute los siguientes comandos:

configuración bin/magento:actualizar

indexador bin/magento: reindexar

Cree todos los artefactos para su tema ahora ejecutando:

construcción de corrida de hilo

Inicie el servidor ejecutando cualquiera de los siguientes comandos según sus necesidades, desde el directorio raíz de su proyecto PWA.

Para desarrollo-

reloj hilado: venia

Para ejecutar el desarrollador completo PWA Studio

reloj hilado: todos

Para construir artefactos y ejecutar el estudio PWA para la puesta en escena-

construcción de ejecución de hilo & etapa de ejecución de hilo: venia

PWA ahora se ha instalado correctamente. Cuando ejecute los comandos mencionados anteriormente, verá la URL donde está operando el PWA. Luego indicará si la instalación fue exitosa o no

Conclusión

Lo guiaremos a través de este artículo con la esperanza de que: tenga una descripción general de Magento pwa studio. Con muchas características impresionantes, definitivamente vale la pena saltar para aumentar su tienda en línea. Por lo tanto, su negocio puede satisfacer la demanda de los clientes y brinda más oportunidades para desarrollarse en el entorno de Internet. Sin embargo, si todavía está confundido acerca de esta tecnología, Magesolution está dispuesto a ser un socio para ayudar a su negocio. Con muchas experiencias en este campo, estamos seguros de brindar el mejor servicio: desarrollo de aplicaciones web progresivas de Magento. Por eso, si tienes alguna duda, contacta con nosotros para tener más información.