De la création de vidéos et de l'optimisation d'images au téléchargement de photos et à l'édition de modèles 3D, Shopify Les applications gèrent les médias pour toutes sortes de raisons.

Si vous développez une application qui permet aux commerçants ou aux clients d'interagir avec les médias, vous devrez probablement implémenter une fonctionnalité de téléchargement de fichiers multimédias.

J'ai récemment commencé à travailler sur une application de gestion groupée d'images de collection. J'ai découvert qu'il y avait de nombreux facteurs à prendre en compte, mais que l'essentiel du développement concernait la gestion des téléchargements. Plusieurs étapes sont à mettre en œuvre, notamment l'acceptation des fichiers, le stockage et la validation. Sans parler des performances de téléchargement.

Avec n'importe quelle application, permettre aux utilisateurs de télécharger des fichiers est généralement compliqué. Cela soulève de nombreux problèmes, et si le fichier est simplement transmis à une API, cela peut donner l'impression d'une double gestion inefficace.

En explorant le Shopify Documentation du développeur, la API d'administration GraphQL a révélé une fonctionnalité pratique : les développeurs peuvent générer des URL temporaires capables de recevoir des fichiers directement des utilisateurs, éliminant ainsi la double manipulation.

Les développeurs peuvent générer des URL temporaires capables de recevoir des fichiers directement des utilisateurs, éliminant ainsi la double gestion.

Cela signifie que l'application n'a pas besoin de gérer de fichiers et que les téléchargements sont moins longs. C'est un avantage considérable pour l'application. et L'expérience utilisateur. Dans cet article, nous allons examiner les quatre étapes de création d'une application permettant à un utilisateur de télécharger des fichiers multimédias directement sur Shopify.

Intégrer une fonctionnalité de téléchargement dans votre application

Dans cet exemple, je vais créer un processus pour télécharger et associer des images à des collections, mais la même approche générale pourrait être appliquée à d'autres types de médias, tels que des vidéos ou des fichiers de modèles 3D.

Si vous préférez passer directement au code terminé, vous pouvez trouver le projet React terminé dans ce dépôt GitHub, ou tu peux voir les commits Pour voir chaque étape en détail. Sinon, passons à un aperçu général de chaque étape du processus.

1. Configuration des bases

Nous pouvons commencer en utilisant le Interface de ligne de commande de l'application Shopify Pour démarrer une application Node.js. L'interface de ligne de commande de l'application Shopify crée une application dans votre compte partenaire, génère un squelette de projet React (avec un backend Rails ou Node.js) et démarre un serveur avec ngrok.

L'application peut ensuite être installée dans une boutique de développement et accessible depuis l'interface d'administration. L'outil CLI de Shopify peut également être utilisé pour remplissez votre boutique de développement avec des exemples de produits, dont nous aurons besoin pour créer des collections auxquelles nos images téléchargées pourront être appliquées.

« Le composant de zone de dépôt permet aux commerçants de télécharger des fichiers en les faisant glisser et en les déposant dans une zone d'une page ou en activant un bouton. »

L'étape suivante consiste à répertorier les collections des magasins et à ajouter un Polaris composant de la zone de largage pour chaque collection. Le composant « zone de dépôt » permet aux commerçants de télécharger des fichiers par glisser-déposer dans une zone d'une page ou en activant un bouton.

En fonction de la façon dont votre application peut être utilisée API de téléchargement de fichiers, vous pouvez personnaliser l'élément de zone de dépôt pour accepter uniquement des types de fichiers spécifiques ou déclencher la boîte de dialogue de fichier à partir d'une action ailleurs sur la page.

Lorsque vous utilisez l'élément de zone de dépôt, assurez-vous de suivre les meilleures pratiques et informez les commerçants lorsqu'un fichier ne peut pas être téléchargé, et fournissez des commentaires une fois que le fichier a été déposé et que le téléchargement commence.

Vous aimerez aussi: Premiers pas avec GraphQL.

2. Préparation des mutations

Par défaut, l'application générée par la CLI de l'application Shopify inclut Client Apollo, un client GraphQL avec gestion d'état. Il nous permettra d'utiliser GraphQL pour interroger les données du magasin et modifier les objets. Si vous ne connaissez pas GraphQL et son utilisation sur Shopify pour récupérer et exploiter les données, je vous recommande de consulter notre documentation du développeur sur GraphQL.

Nous devrons utiliser deux mutations GraphQL : stagedUploadsCreate pour générer une URL temporaire pour nos images, et collectionUpdate pour mettre à jour la propriété d'image de la collection du côté de Shopify.

Les mutations doivent être enveloppées dans le gql fonction qui les analysera dans des documents de requête.

useMutation hook renvoie une fonction que nous pouvons appeler lorsque nous sommes prêts à exécuter une mutation spécifique.

Vous aimerez aussi: Limites de débit des API et utilisation de GraphQL.

3. Générer l'URL temporaire

Une fois qu'un utilisateur dépose un fichier sur le zone de largage composant, nous pouvons demander une URL temporaire en exécutant stagedUploadsCreate. La mutation attend un input décrivant le fichier. Comme nous utilisons un composant de zone de dépôt, nous avons accès à l'objet fichier pour en extraire le nom, le type et la taille.

Il convient également de noter que cette mutation accepte un tableau et peut générer plusieurs URL simultanément. Dans mon exemple, la zone de largage a été configurée pour n'autoriser qu'un seul fichier. La réponse inclut une URL temporaire ainsi que les paramètres d'authentification.

Vous aimerez aussi: Récupération plus rapide des métachamps Shopify avec GraphQL.

4. Préparez un formulaire et commencez le téléchargement

Maintenant que nous disposons de l'URL et des paramètres d'authentification, nous pouvons créer un nouveau formulaire, ajouter chaque paramètre et le fichier lui-même. Le téléchargement de l'image est alors lancé. Chercher.

Si nous recevons une réponse OK, le téléchargement a réussi. La dernière étape consiste à indiquer à Shopify d'utiliser cette nouvelle image en exécutant collectionUpdate, qui attend un ID de collection et toutes les propriétés qui ont changé (dans ce cas : l'image de la collection).

Pour vérifier que nous avons correctement configuré tout cela, vous pouvez télécharger une image via l'application, et lorsque vous accédez à l' Collections Dans la zone d'administration, vous verrez que l'image a été appliquée à une collection. Si vous affichez un aperçu d'image de collection dans votre application, la modification sera immédiatement appliquée grâce à la gestion des états du client Apollo.

Vous aimerez aussi: Comment créer une application Shopify : le guide complet.

Utilisez GraphQL pour télécharger des fichiers afin d'améliorer les performances de l'application

Bien qu'il ne soit pas toujours possible d'envoyer un fichier directement à Shopify, cette approche, lorsqu'elle est pertinente, peut améliorer les performances de votre application et réduire la distance parcourue par les fichiers. L'API d'administration GraphQL permet également aux applications de gérer davantage de types de médias, comme les vidéos et les modèles 3D.

Cette technique démontre comment différentes caractéristiques de la API d'administration GraphQL Peut être utilisé avec les composants Polaris pour implémenter des fonctionnalités dans votre application. Cette API offre une multitude de fonctionnalités à explorer pour développer vos applications.

Que pensez-vous de la façon de télécharger des fichiers à l’aide de GraphQL et React ? Faites-nous savoir dans les commentaires ci-dessous!

Cet article a été publié pour la première fois sur le site du Conception et développement de sites Web Shopify blog et est mis à disposition ici pour éduquer et jeter un filet plus large de découverte.