Créez des applications plus rapides et plus fonctionnelles avec Shopify App Bridge

Les applications intégrées ont une importance capitale dans l’écosystème Shopify. Elles permettent aux marchands d’ajouter des fonctionnalités à leurs boutiques sans quitter l’environnement familier de l’interface administrateur Shopify. En tant que développeur d’applications Shopify, vous connaissez sans doute déjà la valeur des applications intégrées pour offrir aux marchands des fonctions supplémentaires afin de les aider à développer leur activité.

Avec le temps, ces applications intégrées, qui n’étaient au départ qu’un test à petite échelle, sont devenues plus puissantes que tout ce que nous aurions pu imaginer. Les partenaires Shopify utilisaient au départ des outils appelés EASDK (Embedded App Software Development Kit) et POSSDK (Point of Sale Software Development Kit) pour créer des applications intégrées. Mais notre écosystème d’applications a évolué, et ces outils n’ont pas pu s’adapter aux besoins des développeurs.

C’est pourquoi lors de la conférence Shopify Unite 2019, nous avons présenté un outil unifié pour le développement d’applications intégrées, appelé Shopify App Bridge.

Shopify App Bridge vous permet d’intégrer votre application partout où les marchands interagissent avec leur interface administrateur. Un seul code front end écrit avec Shopify App Bridge permet d’accéder à des expériences en point de vente, sur ordinateur et sur mobile. Les applications créées avec Shopify App Bridge sont plus performantes et plus flexibles, proposent plus de fonctionnalités et peuvent exploiter le matériel comme aucune autre application Shopify. Dans cet article, nous découvrirons les opportunités qui s’offrent aux développeurs grâce à Shopify App Bridge.

Performances et flexibilité

Avant le lancement de Shopify App Bridge, pour qu’une application soit utilisable à la fois sur Shopify PDV et sur l’interface administrateur, elle devait utiliser deux bibliothèques client distinctes : une pour Shopify PDV et une autre pour l’intégration dans l’interface administrateur web. Avec Shopify App Bridge, une seule bibliothèque est nécessaire, ce qui offre une expérience plus uniforme au marchand et facilite énormément le flux de développement.

En plus d’améliorer la cohérence et l’efficacité du développement, Shopify App Bridge peut également charger les applications jusqu’à quatre fois plus rapidement que les applications créées avec EASDK ou POSSDK.

Actions et ensembles d’actions

Les actions sont une nouvelle manière pour les applications basées sur Shopify App Bridge d’interagir avec Shopify. En les utilisant, vous prenez le contrôle sur de nombreux éléments d’interface utilisateur de Shopify. Vous pouvez ainsi personnaliser la barre supérieure, les fenêtres modales, les sélecteurs de ressources et les boutons pour offrir aux utilisateurs un design semblable à l’expérience Shopify native. Les actions peuvent facilement être envoyées pour être utilisées en contexte, par exemple pour afficher un message flottant ou activer une barre d’enregistrement contextuelle.

Les actions révèlent tout leur potentiel lorsqu’elles sont combinées dans des ensembles d’actions. Ces ensembles persistants regroupent des actions qui peuvent être envoyées à tout moment et auxquelles les applications peuvent s’abonner directement. Lorsque vous créez un ensemble d’actions, sa configuration est persistante et partagée entre Shopify et votre application. Les deux parties connaissent l’état de chaque ensemble d’actions : si une fenêtre modale est ouverte, ce qui s’affiche dans la barre de titre, etc.

Tous les ensembles d’actions utilisent la même interface afin que l’API reste simple et cohérente : create, set, subscribe et dispatch.

• Create : Utilisé pour initialiser un ensemble d’actions, parfois avec des options.
• Set : Permet de mettre à jour la configuration d’un ensemble d’actions, si disponible. Par exemple, mettre à jour le titre dans la barre de titre.
• Subscribe : Vous informe des événements dans l’interface utilisateur de Shopify, par exemple lorsqu’une fenêtre modale est fermée.
• Dispatch : Envoie des actions à Shopify, ce qui active les fonctionnalités.

Sauf rares exceptions, en créant un ensemble d’actions, vous enregistrez simplement la configuration dans l’état partagé, et rien de plus. Les ensembles d’actions permettent de définir des actions prêtes à envoyer.

Action

Les types d’action sont des actions définies de manière statique, disponibles pour les ensembles d’actions. Il s’agit des messages envoyés entre votre application et Shopify, pour effectuer des tâches et vous informer d’événements. Prenons l’exemple d’un message flottant. Son ensemble d’actions est Toast, et les actions disponibles dans cet ensemble sont SHOW et CLEAR. Pour l’ensemble d’actions de chargement Loading, les actions disponibles sont START et STOP. Ce ne sont là que deux des ensembles d’actions disponibles dans Shopify App Bridge. Nous continuerons d’ajouter encore plus de types d’actions pour offrir de nouvelles fonctionnalités, à mesure que Shopify App Bridge évolue.

Une fois l’ensemble d’actions créé, vous pouvez envoyer les actions qu’il contient. Vous pouvez également vous abonner aux actions envoyées par Shopify. Par exemple, lorsqu’un marchand ferme une fenêtre modale depuis l’interface administrateur Shopify, Shopify envoie une action CLOSE à laquelle votre application peut s’abonner. Votre application peut fournir un rappel à exécuter lorsque l’action est envoyée.

En associant une API simple et cohérente (create, set, dispatch et subscribe) à des actions définies de manière statique, Shopify App Bridge vous offre un contrôle très précis de manière simple et intuitive. C’est également ce qui permet à Shopify App Bridge d’être évolutif. De plus, l’utilisation des actions se différencie des méthodes liées à un design visuel spécifique, en proposant à la place des blocs constitutifs regroupés par fonctionnalité.

Les ensembles d’actions enregistrent également l’état de manière transparente, ce qui vous permet d’inspecter l’état actuel de votre application à l’aide d’outils tels que Redux DevTools, et même de relancer des actions passées pour corriger les bugs.

Matériel

Shopify App Bridge offre la possibilité d’accéder à de puissantes fonctionnalités matérielles, dont la caméra et le lecteur NFC, à l’aide de l’action Scanner. Les applications peuvent utiliser la détection de fonctionnalités pour déterminer le type d’appareil sur lequel elles s’exécutent, puis demander l’accès au matériel sur les appareils mobiles le cas échéant. Une fois l’accès accordé, la détection de fonctionnalités envoie une action à l’application pour l’informer que le matériel est disponible, et la lecture peut commencer.

Gestion des changements

Les technologies évoluent très rapidement de nos jours, et il n’est pas toujours facile de suivre le rythme des changements. Shopify App Bridge assure le juste équilibre entre stabilité et nouvelles fonctionnalités en utilisant scrupuleusement la gestion sémantique de version des bibliothèques (SemVer), et vous offre ainsi un contrôle total sur l’adoption des nouveautés.

Un outil unique pour le développement d’applications intégrées

Shopify App Bridge vous permet de développer des applications intégrées plus rapidement, et ouvre ainsi la voie à la création de produits plus cohérents et plus fonctionnels pour les marchands. Commencez à profiter de toutes ces possibilités dès aujourd’hui.

Pour ne rien manquer des améliorations que nous apportons à Shopify App Bridge, abonnez-vous à notre journal des changements pour les développeurs.

Nota : App Bridge 2.0 est disponible depuis mai 2021. Migrez vers App Bridge 2.0 pour vous assurer que votre application reflète l’avenir de Shopify. Cette nouvelle version d’App Bridge inclut une interface plus fluide pour les actions et une architecture améliorée pour le tree shaking (suppression du code mort). Les navigateurs imposant des restrictions de plus en plus strictes au suivi des cookies tiers, les applications doivent mettre en place une autre méthode d’authentification. App Bridge 2.0 permet aux applications de migrer facilement de l’authentification par cookies tiers aux jetons de session.

 

---

Publié par Maud Leuenberger. Maud est la rédactrice en chef du blog français de Shopify.

Texte original par Hanna Chen. Traduction par Solenn Marchand.