Una de las preguntas que a menudo recibimos 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 construir una? Otra pregunta frecuente es, ¿es un problema si no tengo experiencia en la construcción de aplicaciones de Shopify?

Vamos a responder a estas preguntas mediante la elaboración de diversos aspectos tecnológicos de desarrollo de aplicaciones Shopify.

Si estás buscando un desarrollo personalizado para Shopify, puedes ponerte en contacto con nuestros expertos en Shopify, así como buscar especialistas en Shopify en plataformas freelance.

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

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

• Para construir una aplicación Shopify, puedes usar las mismas tecnologías que para las aplicaciones web, no estás restringido a una tecnología específica (aunque usar alguna tecnología específica puede hacerte la vida más fácil-volveremos a eso más adelante).
• Por lo general, hay que construir tanto el backend como el frontend.
• Eres responsable del alojamiento y funcionamiento de la aplicación.
• Una vez que la aplicación es aprobada por Shopify, el proceso de lanzamiento también está totalmente bajo tu control.

‍

Desde la perspectiva del comerciante, podemos decir que Shopify es Software-as-a-Service (SaaS), así como Shopify apps. Esto 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 típicamente tiene una aplicación de Shopify:

• Administración del comerciante
• Procesamiento de Webhooks
• Aplicación de cara al cliente (interfaz de usuario de la tienda)

De estos tres, el último no es necesariamente necesario. 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 sólo de las dos primeras partes.

Administración del vendedor

La administración del comerciante es un panel de control donde un comerciante configura la aplicación. Shopify recomienda servir la administración del comerciante dentro de la interfaz de Shopify (llamada aplicación incrustada). Esto significa que incrustas la aplicación en la administración de Shopify usando iframe.

Las aplicaciones incrustadas tienen varias limitaciones:

• Debido a cómo funciona la autenticación, estás más o menos limitado a la arquitectura de 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 el frontend ya que hay librerías proporcionadas por Shopify: la librería Polaris UI se asegura de que tu UX sea consistente con el resto del admin de Shopify y App Bridge actúa como un puente frontend que proporciona datos de contexto de Shopify a tu aplicación ejecutándose en el iframe.

Merchant admin es también el primer punto de contacto entre tu aplicación y un comerciante, y es el lugar donde se gestiona el proceso de instalación, que 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 donde se gestiona la facturación en caso de que tu aplicación no sea gratuita.

Procesamiento de Webhooks

Los Webhooks son la forma en la que Shopify informa a tu aplicación sobre varios eventos que ocurren en las tiendas donde está instalado: por ejemplo, la creación de un nuevo pedido o la actualización de un producto. Tú decides a qué eventos te vas a suscribir.

La lógica de negocio que necesita ser ejecutada basada en el evento recibido debería ser definitivamente manejada por background workers. De lo contrario, puedes sobrecargar fácilmente tu aplicación. También puedes considerar delegar la recepción de eventos fuera de tu aplicación.

‍

Aplicación de cara al cliente (storefront UI)

En caso de que tu aplicación extienda el escaparate de Shopify (lo que significa que aporta nuevas características a los clientes de la tienda), necesitas "insertarla" en el escaparate. Para ello, necesitas decirle a Shopify a través de una API que inyecte tu recurso JavaScript en el escaparate. Hay dos métodos más populares para ello: Script Tag y App Embed block. También existe la posibilidad de extender el tema del escaparate directamente con algunos componentes visuales utilizando App Blocks (también conocidos como App sections).

El desarrollo de la aplicación de cara al cliente puede ser la parte más difícil de todo el proceso. Por lo general, se extiende o incluso anular el comportamiento predeterminado de la tienda frontal. Al hacer esto, es necesario asegurarse de que funciona en diferentes temas Shopify, con varios ajustes de la tienda, y de una manera que no se rompa nada en una situación imprevista. Además de esto, siempre puede haber otras aplicaciones de terceros que interfieren con su aplicación.

Front store UI es también donde debes prestar atención al rendimiento y tamaño de tu aplicación.

La evolución del desarrollo de aplicaciones para Shopify

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

Es posible que en el futuro, Shopify se mueva hacia 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.

Tecnología Digismoothie

Veamos cuáles son las tecnologías que utilizamos en Digismoothie para construir apps de Shopify.

‍

Puedes saber más sobre las tecnologías que utilizamos en nuestra base de conocimiento.

Conclusión

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

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 aplicaciones de Shopify? Yo diría que definitivamente no. Si un ingeniero tiene una buena comprensión de los conceptos y tecnologías utilizadas en el desarrollo de aplicaciones web modernas, puede saltar muy rápidamente. El conocimiento de los ecosistemas y APIs de Shopify vendrá paso a paso.