L'une des questions que l'on nous pose souvent lorsque nous parlons de nos activités à des développeurs ou à des responsables techniques est la suivante : qu'est-ce qu'une application Shopify exactement et quels sont les outils et les technologies nécessaires pour en créer une ? Une autre question fréquemment posée est la suivante : est-ce un problème si je n'ai pas d'expérience dans la création d'applications Shopify ?

Nous allons répondre à ces questions en détaillant les différents aspects technologiques du développement d'une application Shopify.

Si vous êtes à la recherche d'un développement Shopify personnalisé, vous pouvez contacter nos experts Shopify ou rechercher des spécialistes Shopify sur des plateformes de freelance.

Comparaison entre une application Shopify et une application web

Notre point de vue sur ce sujet est qu'une application Shopify fonctionne à peu près comme une application web standard, mais qu'elle est fortement connectée à la plateforme Shopify par l'intermédiaire d'une API. Cela a plusieurs conséquences :

• Pour créer une application Shopify, vous pouvez utiliser les mêmes technologies que pour les applications web. Vous n'êtes pas limité à une technologie spécifique (même si l'utilisation d'une technologie spécifique peut vous faciliter la vie - nous y reviendrons plus tard).
• En général, vous devez construire à la fois le backend et le frontend.
• Vous êtes responsable de l'hébergement et du fonctionnement de l'application.
• Une fois l'application approuvée par Shopify, le processus de lancement est également entièrement sous votre contrôle.

‍

Du point de vue du commerçant, on peut dire que Shopify est un logiciel en tant que service (SaaS), de même que les applications Shopify. Cela signifie qu'un marchand n'a pas besoin d'interagir avec un quelconque type de code pour installer votre application.

Composants de l'application Shopify

Nous avons identifié trois composants logiques qu'une application Shopify possède généralement :

• L'administration du marchand
• Traitement des webhooks
• Application orientée client (interface utilisateur de la vitrine)

Parmi ces trois composants, le dernier n'est pas nécessairement nécessaire. Il dépend de la fonctionnalité que vous souhaitez offrir aux marchands. Par exemple, notre application Candy Rack comprend les trois composants, tandis que Loyal ne comprend que les deux premiers.

Administration du commerçant

L'administration du marchand est un tableau de bord où le marchand met en place et configure l'application. Shopify recommande de servir l'administration du commerçant dans l'interface de Shopify (ce que l'on appelle une application intégrée). Cela signifie que vous intégrez l'application dans l'administration de Shopify à l'aide d'une iframe.

Les applications intégrées présentent plusieurs limites :

• En raison du fonctionnement de l'authentification, vous êtes plus ou moins limité à l'architecture d'une seule page (bien que des solutions partielles soient possibles avec l'aide de Turbolinks ou d'Inertia.js).
• Il peut être efficace d'utiliser React pour écrire le frontend car il existe des bibliothèques fournies par Shopify : La bibliothèque Polaris UI s'assure que votre UX est cohérente avec le reste de l'administration de Shopify et App Bridge agit comme un pont frontal qui fournit des données contextuelles de Shopify à votre application fonctionnant dans l'iframe.

L'administration du marchand est également le premier point de contact entre votre application et un marchand, et c'est là que le processus d'installation est géré. L'installation consiste essentiellement à obtenir les autorisations d'accès aux données du magasin du marchand via OAuth.

C'est aussi la partie de l'application où vous vous occupez de la facturation dans le cas où votre application n'est pas gratuite.

Traitement des webhooks

Les crochets Web permettent à Shopify d'informer votre application des différents événements qui se produisent dans les boutiques où il est installé : par exemple, la création d'une nouvelle commande ou la mise à jour d'un produit. C'est vous qui décidez à quels événements vous allez vous abonner.

La logique métier qui doit être exécutée en fonction de l'événement reçu doit absolument être gérée par des travailleurs d'arrière-plan. Sinon, vous risquez de surcharger votre application. Vous pouvez également envisager de déléguer la réception des événements en dehors de votre application.

‍

Application orientée client (interface utilisateur de la vitrine)

Si votre application étend la vitrine de Shopify (ce qui signifie qu'elle apporte de nouvelles fonctionnalités aux clients de la boutique), vous devez l'"insérer" dans la vitrine. Pour ce faire, vous devez demander à Shopify, via une API, d'injecter votre ressource JavaScript dans la boutique en ligne. Il existe deux méthodes très répandues pour cela : Script Tag et App Embed block. Il est également possible d'étendre le thème de la vitrine directement avec certains composants visuels en utilisant des blocs d'application (également appelés sections d'application).

Le développement de l'application orientée client est peut-être la partie la plus difficile de l'ensemble du processus. Généralement, vous étendez ou même remplacez le comportement par défaut de la boutique en ligne. Ce faisant, vous devez vous assurer que cela fonctionne sur différents thèmes Shopify, avec différents paramètres de la boutique, et de manière à ne rien casser dans une situation imprévue. De plus, il peut toujours y avoir des applications tierces qui interfèrent avec votre application.

L'interface utilisateur de la boutique en ligne est également l'endroit où vous devez prêter attention aux performances et à la taille de votre application.

L'évolution du développement d'applications Shopify

Si je vous ai dit précédemment que la création d'une application Shopify relevait essentiellement du développement d'une application web, cette affirmation n'est en fait que partiellement vraie. En 2021, Shopify a introduit le concept d'extension de caisse. Auparavant, il n'était pas possible d'étendre les fonctionnalités de la caisse avec une application Shopify. À cet égard, l'expérience du développeur est différente de celle d'une application web, car elle se déroule dans un environnement très limité (par exemple, vous ne pouvez utiliser qu'un ensemble spécifique de composants React préparés à l'avance), et les processus de construction et de mise en service sont gérés par Shopify.

Il est possible qu'à l'avenir, Shopify adopte cette approche dans d'autres domaines afin de mieux contrôler les applications tierces. Par conséquent, le développement d'applications Shopify s'éloignera davantage du développement d'applications web.

La pile technologique de Digismoothie

Voyons quelles sont les technologies que nous utilisons chez Digismoothie pour créer des applications Shopify.

‍

Vous pouvez en savoir plus sur les technologies que nous utilisons dans notre base de connaissances.

Conclusion

J'espère que vous avez appris ce que signifie construire une application Shopify d'un point de vue technique et quelles technologies peuvent être utilisées.

Enfin, revenons à la question posée au début. Est-ce un problème pour un ingénieur ayant une formation en développement web de rejoindre une équipe qui travaille sur des applications Shopify ? Je dirais que non. Si un ingénieur a une bonne compréhension des concepts et des technologies utilisés dans le développement d'applications web modernes, il peut s'intégrer très rapidement. La connaissance des écosystèmes et des API de Shopify viendra petit à petit.