¿Qué es una aplicación de Shopify y cómo crear una?

Una de las preguntas que recibimos con frecuencia cuando hablamos con desarrolladores o líderes de ingeniería sobre lo que hacemos es qué es exactamente una aplicación de Shopify y qué herramientas y tecnologías se necesitan para crear una. Otra pregunta frecuente es: ¿Es un problema si no tengo experiencia en la creación de aplicaciones de Shopify?

Respondamos a estas preguntas elaborando varios aspectos tecnológicos del desarrollo de aplicaciones de Shopify.

Cómo se compara una aplicación de Shopify con una aplicación web

Nuestra perspectiva sobre este tema es que una aplicación Shopify funciona de manera muy similar a una aplicación web estándar, pero está fuertemente conectada con la plataforma Shopify a través de una API. Esto tiene varias implicaciones:

• Para crear una aplicación de Shopify, puede usar las mismas tecnologías que para las aplicaciones web. No está restringido a una tecnología específica (aunque el uso de alguna tecnología específica puede facilitarle la vida; volveremos a eso más adelante).
• Por lo general, necesita construir tanto el backend como el frontend.
• Usted es responsable del alojamiento y funcionamiento de la aplicación.
• Una vez que Shopify aprueba la aplicación, el proceso de lanzamiento también está completamente bajo tu control.

‍

Desde la perspectiva del comerciante, podemos decir que Shopify es un software como servicio (SaaS), al igual que las aplicaciones de Shopify. Significa que un comerciante no necesita interactuar con ningún tipo de código para instalar su aplicación.

Componentes de la aplicación Shopify

Identificamos tres componentes lógicos que normalmente tiene una aplicación de Shopify:

• administrador del comerciante
• Procesamiento de webhook
• Aplicación orientada al cliente (interfaz de usuario de escaparate)

De estos tres, el último no es necesariamente obligatorio. Depende de la funcionalidad que desee proporcionar a los comerciantes. Por ejemplo, nuestra aplicación Candy Rack consta de los tres componentes, mientras que Loyal consta solo de las dos primeras partes.

administrador del comerciante

El administrador de comerciantes es un tablero donde un comerciante instala y configura la aplicación. Shopify recomienda atender al administrador del comerciante dentro de la interfaz de Shopify (la llamada aplicación integrada). Esto significa que incrusta la aplicación en la administración de Shopify usando iframe.

Las aplicaciones integradas vienen con varias limitaciones:

• Debido a cómo funciona la autenticación, está más o menos limitado a la arquitectura de la aplicación de una sola página (aunque son posibles soluciones parciales con la ayuda de Turbolinks o Inertia.js).
• Podría ser eficiente usar React para escribir la interfaz, ya que hay bibliotecas proporcionadas por Shopify: la biblioteca de UI de Polaris se asegura de que su UX sea consistente con el resto del administrador de Shopify y App Bridge actúa como un puente de interfaz que proporciona datos de contexto de Shopify a su aplicación ejecutándose en el iframe.

El administrador del comerciante también es el primer punto de contacto entre su aplicación y un comerciante, y es el lugar donde se maneja el proceso de instalación. La instalación básicamente significa obtener los permisos para acceder a los datos de la tienda del comerciante a través de OAuth.

También es la parte de la aplicación en la que se ocupa de la facturación en caso de que su aplicación no sea gratuita.

Procesamiento de webhook

Los webhooks son la forma en que Shopify informa a su aplicación sobre varios eventos que ocurren en las tiendas donde está instalado: por ejemplo, la creación de nuevos pedidos o la actualización de productos. Tú decides a qué eventos te vas a suscribir.

La lógica empresarial que debe ejecutarse en función del evento recibido definitivamente debe ser manejada por trabajadores en segundo plano. De lo contrario, puede sobrecargar fácilmente su aplicación. También puede considerar delegar la recepción de eventos fuera de su aplicación.

‍

Aplicación orientada al cliente (interfaz de usuario de escaparate)

En caso de que su aplicación amplíe Shopify Storefront (lo que significa que ofrece nuevas funciones para los clientes de la tienda), debe "insertarla" en la tienda principal. Para hacerlo, debe decirle a Shopify a través de una API que inyecte su recurso de JavaScript en la tienda principal. Hay dos métodos más populares para eso: Script Tag y App Embed block. También existe la posibilidad de ampliar el tema de la tienda directamente con algunos componentes visuales utilizando Bloques de aplicación (también denominados secciones de aplicación).

El desarrollo de la aplicación orientada al cliente puede ser la parte más desafiante de todo el proceso. Por lo general, extiende o incluso anula el comportamiento predeterminado de la tienda principal. Al hacer esto, debe asegurarse de que funcione en diferentes temas de Shopify, con varias configuraciones de la tienda y de manera que no rompa nada en una situación imprevista. Además de esto, siempre puede haber otras aplicaciones de terceros que interfieran con su aplicación.

La interfaz de usuario de la tienda frontal también es donde debe prestar atención al rendimiento y al tamaño de su aplicación.

La evolución del desarrollo de la aplicación Shopify

Si bien le dije antes que la creación de una aplicación Shopify es básicamente el desarrollo de una aplicación web, esta afirmación en realidad es solo parcialmente cierta. En 2021, Shopify introdujo el concepto de extensiones de pago. Antes de eso, no era posible ampliar la funcionalidad del pago con una aplicación de Shopify. En este aspecto, la experiencia del desarrollador es diferente en comparación con una aplicación web, ya que ocurre en un entorno muy limitado (por ejemplo, puede usar solo un conjunto específico de componentes React preparados previamente), y Shopify maneja los procesos de creación y lanzamiento.

Es posible que en el futuro, Shopify adopte este enfoque en otras áreas para tener más control sobre las aplicaciones de terceros. Como resultado, el desarrollo de aplicaciones de Shopify se alejará aún más del desarrollo de aplicaciones web.

Pila de tecnología Digismoothie

‍

Puede obtener más información sobre las tecnologías que utilizamos en este artículo.

Conclusión

Espero que hayas aprendido lo que significa crear una aplicación de Shopify desde una perspectiva técnica y qué tecnologías se pueden usar.

Por último, volvamos a la pregunta planteada al principio. ¿Es un problema para un ingeniero con experiencia en desarrollo web unirse a un equipo que trabaja en las aplicaciones de Shopify? Diría definitivamente que no. Si un ingeniero tiene una buena comprensión de los conceptos y las tecnologías utilizadas en el desarrollo de aplicaciones web modernas, puede saltar rápidamente. El conocimiento de los ecosistemas y las API de Shopify vendrá paso a paso.