Vue Storefront + Vendure = Comercio Electrónico de Código Abierto de Pila Completa

Hola, VJs London. Hablemos de comercio electrónico de código abierto de pila completa, ¿de acuerdo? Mi nombre es Jakub y soy líder tecnológico en Vue Storefront. También soy miembro del equipo principal de storefront.UI, que es una biblioteca de interfaz de usuario para comercio electrónico. También soy el principal responsable de la integración de Vue Storefront y Venger. Aparte del trabajo, también soy un buceador técnico y actualmente estoy haciendo un curso de buceo en cuevas, y también soy un excursionista de montaña. En la segunda imagen, estoy en la cima del volcán Tabor de Tenerife, que en realidad fue nuestra ubicación de Vue Storefront en mayo de este año. Sí, estamos escondidos.

Ahora déjame contarte una breve historia. En agosto de este año, me propuse una meta a largo plazo y ambiciosa. Me dije a mí mismo que el próximo año me gustaría unirme a Filip Rakowski, quien es el CTO de Vue Storefront, en una de las mejores conferencias de Vue.js y dar una charla. Ahora mismo, en dos meses, estoy aquí dando una charla en lugar de esperar al próximo año. Todo es posible, chicos. Solo den este primer paso.

¿Alguna vez te has preguntado cómo es construir una tienda de comercio electrónico desde cero? Manejar todos estos pedidos, productos y categorías lleva tiempo. El tiempo es un recurso que es posible que no tengas como alguien que quiere ser líder en el mercado. ¿Qué tal si te digo que existen soluciones en el mercado que puedes elegir y utilizar en minutos u horas en lugar de esperar a que los desarrolladores desarrollen la solución desde cero? Lo cual básicamente lleva semanas o meses. ¿Qué tal si te digo que estas herramientas son gratuitas, de código abierto y respaldadas por una gran comunidad de colaboradores que hacen todo lo posible para que el proyecto sea lo mejor posible?

Queremos presentarte lo que llamo una combinación de ensueño para el comercio electrónico de código abierto, que es ViewStorefront y Vengeo. ViewStorefront es una plataforma frontend ultrarrápida para el comercio sin cabeza, pero ¿qué es exactamente el comercio sin cabeza? Si has jugado algunos videojuegos en los últimos años, probablemente conozcas a este personaje. Este es un personaje del juego Team Fortress 2 y se llama HeadlessHorselessHorseman. ¿Por qué traigo este ejemplo como una comparación con el comercio sin cabeza? HeadlessHorselessHorseman era un personaje muy poderoso, al igual que el comercio sin cabeza. Pero en más detalles, ¿qué es el comercio sin cabeza? El comercio sin cabeza básicamente significa que estás separando tu frontend, o la parte de interfaz de usuario de tu tienda de comercio electrónico, del backend. Esto permite que incluso las empresas maduras tengan la flexibilidad y maniobrabilidad de una startup. Básicamente significa que, por ejemplo, ViewStoreFront puede conectarse a muchas plataformas de comercio electrónico, CMS sin cabeza, pasarelas de pago, motores de búsqueda y muchos otros servicios de terceros. ¿Y qué hay de la pila tecnológica? Básicamente, ViewStoreFront se construye utilizando tres herramientas principales. Nuxt.js, que es un framework para Vue.js. También estamos utilizando TypeScript y GraphQL, pero ViewStoreFront también funciona con API REST. Algunos conceptos básicos de ViewStoreFront. ViewStoreFront utiliza el concepto de composables, que se utilizan para mapear ciertas funcionalidades de tu comercio electrónico o mapear un dominio específico de tu comercio electrónico. En este caso, veremos el dominio de productos. Cada composable contendrá cuatro elementos principales. El primero será una variable, en este caso, productos. Esta variable de productos contendrá un valor de tu dominio de productos. Luego, tendremos un método de búsqueda o el método de carga que se utilizará para obtener los datos de tu plataforma de comercio electrónico a Vue Storefront. Los composables pueden tener varios métodos, como por ejemplo, usar producto o usar dirección.

Puede tener agregar dirección, eliminar dirección, actualizar dirección, obtener dirección. Por lo tanto, puede tener más de un método, pero debe tener al menos un método que se utilizará para obtener los datos.

A continuación, tenemos un objeto de error, que se utilizará para cada propiedad de este objeto de error que se mapeará a los métodos específicos que tiene este composable. En este caso particular del composable de uso de producto, el objeto de error contendrá solo una propiedad, que se llamará búsqueda. Y contendrá un error que puede ocurrir en una situación en la que estás obteniendo los datos de tu plataforma de comercio electrónico.

Por último, pero no menos importante, tenemos la propiedad de carga, que se utilizará para indicar si todavía estamos esperando que los datos se obtengan de tu plataforma de comercio electrónico. Estos fueron algunos conceptos básicos.

Ahora, en cuanto a la personalización. Echemos otro vistazo al composable de uso de producto. Tenemos un método de búsqueda que se utiliza para obtener un producto específico por ID. Esto dará como resultado un objeto que contendrá los datos de nuestro producto. Sin embargo, ¿qué pasa si queremos tener un objeto diferente o una estructura diferente o propiedades diferentes? Para este caso en particular, podríamos usar el concepto de consultas personalizadas. Estas consultas personalizadas se utilizarán para anular la consulta predeterminada que enviamos a la plataforma de comercio. ¿Y cómo funciona en más detalle? En middleware.config.js, que es básicamente el archivo de configuración principal de Vue Storefront, podríamos definir un objeto de consultas personalizadas. Podríamos definir estas consultas personalizadas, que son básicamente, por ejemplo, consultas GraphQL.

Además de las consultas personalizadas, también podemos personalizar Vue Storefront o nuestra tienda construida con Vue Storefront mediante el uso de extensiones. Entonces, en lugar de simplemente personalizar la consulta específica, podemos extender los métodos de API que se utilizan para obtener los datos o modificar los datos. Podemos extender la propia aplicación y también los hooks del ciclo de vida de toda la aplicación. Como Adam Jar y Greg Polak solían decir, repasemos. Vue Storefront se construye utilizando una pila de tecnología moderna. Vue Storefront puede conectarse a varios servicios externos y proporciona funcionalidad completa de comercio electrónico. Es altamente personalizable, como expliqué anteriormente.

Sí, y pasando a Venture. Venture también está relacionado con el comercio sin cabeza, pero en este caso, es un framework para la parte backend de tu comercio electrónico. Si quieres saber más sobre qué es Venture y cómo se conecta con Vue Storefront, recientemente hemos grabado una entrevista con Michael Bromley, quien es el fundador de Venture, y sí, puedes escuchar más sobre qué es Vue Storefront, qué es Venture, cómo se conectan y cuáles son los planes para las futuras versiones. Venture admite muchas funcionalidades de forma nativa. Tenemos gestión de inventario, comercio como pagos, promociones. Tenemos múltiples idiomas, monedas, impuestos y canales de venta. Venture también es escalable, listo para la nube y autoscalable. Tenemos gestión de medios, como recorte de imágenes, soporte de almacenamiento en la nube, y tenemos soporte para equipos con permisos basados en roles y una interfaz de administración.

Entonces, pila de tecnología. Venture se construye utilizando NestJS, que es un framework para Node.js y Express. También se construye utilizando TypeScript y GraphQL, y también cuenta con el soporte de Elasticsearch y la base de datos de tu elección.

Algunos conceptos básicos de Venture. Así es como realmente funciona Venture. Tenemos dos API de GraphQL. Tenemos la API de administración y la API de la tienda. La API de la tienda se utiliza principalmente para las operaciones de tu tienda, como obtener datos sobre productos, colecciones, usuarios y clientes, y la API de administración se utiliza para cosas más avanzadas, como gestionar roles, gestionar productos, etc. Si estás solicitando datos a través de la API de GraphQL, estos datos pasarán por el servidor de Venture, que iniciará una cola y creará un trabajador que accederá a la base de datos y devolverá los datos al servidor de Venture, y este servidor de Venture devolverá los datos a tu API de GraphQL.

Tenemos un panel de administración disponible para ti, donde puedes agregar productos, agregar colecciones, modificar usuarios, etc. También tenemos la API de GraphQL, que te permite obtener datos para tu tienda. En cuanto a la personalización, Venture admite un patrón similar al de tu tienda, porque en lugar de consultas personalizadas, tenemos campos personalizados, que nos permiten extender la estructura predeterminada de los dominios o entidades en nuestra base de datos. Por ejemplo, si queremos extender un producto, podemos agregar una nueva propiedad llamada info-url de tipo string. Luego, podemos crear una mutación en nuestro GraphQL para actualizar el producto con la nueva propiedad info-url. Gracias a esto, no tenemos que crear una nueva entidad, simplemente estamos extendiendo la entidad predeterminada. También podemos personalizar el flujo de pedidos, lo que nos permite no utilizar el flujo predeterminado. Por ejemplo, podemos agregar un paso entre agregar artículos y realizar el pago. El predeterminado es agregar artículos y luego pasar a realizar el pago. Agregar artículos significa visitar la tienda y agregar productos al carrito. Y realizar el pago significa gestionar los datos de pago y proceder al pago. Digamos que antes de realizar el pago, queremos validar al cliente. ¿Cómo podemos hacer eso? En primer lugar, crearemos un nuevo proceso que contendrá un objeto con propiedades que nos permitirán crear un nuevo flujo. Agregaremos la validación del cliente y también modificaremos el paso existente de agregar artículos para que vayamos al paso de validación en lugar de ir al pago. Luego, en la validación del cliente, diremos que desde este paso podemos volver atrás al paso de agregar artículos o avanzar al paso de realizar el pago. Y luego solo tenemos que registrar este nuevo proceso en la configuración de Venture, así de simple.

Venture también admite complementos que te permiten extender la funcionalidad predeterminada. Tenemos complementos principales, como la interfaz de administración que has visto anteriormente, el soporte de Elasticsearch, el soporte de correo electrónico y el servidor de activos, que se proporcionan de forma predeterminada. Luego tenemos los complementos empresariales que llegarán próximamente, como Búsqueda Avanzada, Tarjeta de Regalo, Lista de Deseos, etc. Y también tenemos los complementos comunitarios, que permiten integrar Stripe, Braintree, pasarelas de pago, reseñas, autenticación social con Auth0, por ejemplo. Así que repasemos una vez más. Venture se construye utilizando una pila de tecnología moderna.

Puede conectarse a varios servicios externos utilizando complementos, proporciona funcionalidad completa de comercio electrónico, y es altamente personalizable. Entonces podrías estar pensando, hay un patrón similar aquí, y tienes toda la razón. Ambas herramientas están construidas utilizando frameworks modernos como Next.js y Nest.js. Son personalizables por defecto utilizando consultas y campos personalizados. Proporciona, proporcionan funcionalidad completa de comercio electrónico, y están configurados para integrarse con herramientas y servicios externos, como pasarelas de pago, CMS sin cabeza, y así sucesivamente. Y son de código abierto y respaldados por una gran comunidad de colaboradores.

Así que diría que esta Aventura Divertida Fused 2.0 suena y parece ser un sueño de comercio electrónico de código abierto de pila completa. Y permíteme mostrarte cómo funciona. Básicamente, lo que estamos haciendo aquí es crear una tienda en línea desde cero con Venge. Configuramos un proyecto, definimos una base de datos, idioma, proveedor de correo, en este caso, el local, y también creamos una tienda con Fused Storefront y configuramos una plantilla para Venger. Luego, instalamos las dependencias, como siempre, y configuramos algunas variables de entorno para que la tienda funcione como se espera. Aquí, la API de GraphQL y el método de autenticación, y también tenemos que agregar este método a la configuración de Venger, dos pasos sencillos que nos permiten ejecutar nuestra tienda. Así que esperemos un segundo para eso. Vale, tenemos una tienda Venger en funcionamiento, y también tenemos un ViewStoreFront en funcionamiento, así que podemos desplazarnos hacia abajo para listar, agregar algunos productos, definir alguna configuración, modificar la cantidad de los productos, agregar algunos datos de cliente a nuestro proceso de pago, configurar algunos datos de envío, así como el método de envío. Algunos datos de facturación, en este caso, es lo mismo, pago y hacer un pedido, y eso es todo. Así que en menos de un minuto y medio, tendrás una tienda en línea configurada y lista para aceptar algunos pedidos y jugar. Así que si te gusta lo que ves, asegúrate de darle una estrella tanto a ViewStoreFront como al proyecto Venger porque son de código abierto y así es como, digamos, viven, gracias a estas estrellas. Así que asegúrate de darles. Y también, si te gustaría contribuir, asegúrate de visitar el canal de Slack de Venger o el canal de Discord de ViewStoreFront. Y eso será todo. Muchas gracias por tu atención y asegúrate de contactarme en GitHub utilizando el identificador Paroshen o en Twitter utilizando el identificador d.andrewski. Nos vemos. Gracias. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.