Construire un composant Avatar utilisateur avec Node.js et Transloadit

{{/ if}} form>

Notez que nous incluons un champ caché qui contient le nom d'utilisateur. Nous allons envoyer ceci à Transloadit avec notre demande, afin qu'il puisse être utilisé dans nos modèles.

Ajoutez maintenant le JavaScript, en commençant par une initialisation variable à l'aide de notre guidon JSON Helper:

<span>var sig = {{{ json sig }}};</span>

Maintenant, nous allons lier le plugin Transloadit au formulaire de téléchargement:

<span>$(function() {
</span>  <span>$('#avatar-form').transloadit({
</span>    <span>wait: true,
</span>    <span>params: JSON.parse(sig.params),
</span>    <span>signature: sig.signature,
</span>    <span>fields: true,
</span>    <span>triggerUploadOnFileSelection: true,
</span>    <span>autoSubmit: false,
</span>    <span>onSuccess: function(assembly) {
</span>      <span>$('img#avatar').attr('src', assembly.results.thumbnail[0].url + '?' + (new Date()).getTime() );
</span>      <span>var derivatives = {
</span>        <span>thumbnail : assembly.results.thumbnail[0].url,
</span>        <span>medium : assembly.results.medium[0].url,
</span>        <span>large : assembly.results.large[0].url
</span>      <span>};
</span>      $<span>.ajax({
</span>        <span>type: 'post',
</span>        <span>url: '/avatar',
</span>        <span>data: derivatives,
</span>        <span>success: function(resp){
</span>          <span>console.log(resp);
</span>        <span>}
</span>      <span>})
</span>    <span>}
</span>  <span>});
</span><span>});</span>

C'est plus complexe que l'initialisation minimale de l'intégration que nous avons examinée plus tôt, alors passons un peu à la fois.

Nous tirons les paramètres et la signature de la variable SIG, que nous avons généré sur le serveur, puis codés sous le nom de JSON. Parce que la pièce des paramètres est imbriquée, nous utilisons JSON.Parse () pour la transformer en un objet, à partir de laquelle Transloadit extraire les paramètres pertinents.

Dans l'initialisation du plugin, l'attente est définie sur true, ce qui signifie que nous attendons que les deux fichiers aient été téléchargés et ils ont été traités.

L'utilisation de notifications d'assemblage - dont vous pouvez lire plus loin dans la section d'utilisation avancée - signifie que vous n'aurez pas nécessairement à attendre que le fichier soit traité, auquel cas vous pouvez définir l'attente sur false.

Fields est défini sur true pour indiquer au plugin que nous voulons inclure des informations supplémentaires lorsque nous envoyons les fichiers pour le traitement; Dans notre cas, c'est un champ de formulaire caché nommé nom d'utilisateur, que nous peuples avec le nom d'utilisateur de l'utilisateur authentifié.

TriggerUploadOnfileSelection est utilisé pour envoyer le fichier à Transloadit dès que l'utilisateur a sélectionné un fichier, plutôt que lorsque le formulaire est soumis. Autosubmit l'empêche de soumettre le formulaire une fois que le résultat revient de Transloadit, car nous allons le faire manuellement nous-mêmes.

Le rappel Onsuccess est licencié lorsque les données reviennent de Transloadit, ce qui nous donne un hachage de données dans l'assemblage.

L'objet Assembly contient une propriété de résultats, qui à son tour contient des propriétés pour chacune de nos «étapes». Ceux-ci contiennent un tableau d'objets de fichier. Comme nous ne téléchargeons qu'un seul fichier, ils seront des tableaux contenant un seul élément. Chaque objet de fichier contient un certain nombre de propriétés, notamment le nom de fichier d'origine, les méta-informations, les ID uniques de Transloadit et d'autres bits. Pour voir la gamme complète d'informations, vous souhaiterez peut-être le connecter à la console et jeter un œil. Cependant, tout ce qui nous intéresse vraiment, c'est la propriété URL, qui contient l'URL de l'image générée sur S3.

Alternativement, vous souhaiterez peut-être utiliser la propriété SSL_URL, qui est identique à l'URL mais sur https.

Nous extraissons simplement les trois URL par le nom du dérivé correspondant, puis créant un hachage des trois dérivés et de leurs URL correspondantes.

Pour fournir des commentaires visuels à l'utilisateur, nous saisissons également l'URL de la vignette et modifions l'avatar sur la page pour afficher l'image nouvellement téléchargée.

Enfin, nous utilisons Ajax pour publier ces données en silence à notre application.

Voici la route Avatar pour capturer ces données:

<span>var sig = {{{ json sig }}};</span>

En production, vous voudrez probablement désinfecter et valider cela.

Comme vous pouvez le voir, nous prenons le hachage des images dérivées et leurs URL, saisissons l'utilisateur actuellement authentifié de req.User, définissez la propriété Avatar sur le hachage fourni, puis mettons à jour le modèle utilisateur.

Ce n'est qu'une approche possible. Pour des commentaires plus rapides, vous voudrez peut-être utiliser le rappel OnResult du plugin pour obtenir la vignette dès qu'il a été généré, plutôt que d'attendre les trois dérivés. Au lieu d'utiliser un appel AJAX à partir de votre code client pour informer votre serveur, vous pouvez plutôt préférer utiliser la fonction de notifications d'assemblage, qui offre l'avantage supplémentaire de l'exécution des assemblages en arrière-plan, plutôt que de maintenir l'exécution sur le client. Consultez la documentation du plugin pour la gamme complète d'options.

qui conclut notre application de base. N'oubliez pas, toute la source - y compris le mécanisme d'authentification - est terminée sur GitHub.

Utilisation avancée

Avant de terminer, jetons un bref aperçu de quelques aspects les plus avancés de Transloadit.

Autres options côté client

Vous n'avez pas à utiliser le plugin jQuery fourni. Dans la section des projets communautaires de la documentation, vous trouverez un certain nombre d'alternatives, y compris un plugin pour bootstrap, un pour Drag n ’Drop, un plugin angulaire ou une prise en charge de la vieille XHR ordinaire, entre autres.

Le XHR peut valoir la peine de regarder plus en détail. Il s'agit d'une solution nue qui offre beaucoup de flexibilité, tout en vous obligeant à fournir vos propres commentaires - par exemple une sorte d'indicateur de téléchargement. Il convient également de noter qu'une fois qu'il a téléchargé le fichier, il essaie de déterminer quand l'assemblage a été terminé en interrogeant le serveur à des intervalles de 1000 ms.

Notifications

Plutôt que de faire en sorte que les utilisateurs attendent que leurs téléchargements soient traités, vous pouvez utiliser des notifications pour faire un ping de votre application lorsque les fichiers sont prêts. En utilisant cette approche, un utilisateur n'a besoin qu'attendre que le téléchargement s'est terminé.

Les notifications sont faciles à mettre en œuvre à partir d'un point de vue de consommation; Incluez simplement un notify_url avec vos instructions d'assemblage, par exemple:

<span>var sig = {{{ json sig }}};</span>

Lorsque votre URL est pingée par Transloadit, le JSON fourni comprendra un champ de signature que vous pouvez utiliser pour vérifier que la notification en est en effet provenant. Décodez simplement la signature en utilisant votre secret Secret.

Pendant le développement, vous souhaiterez peut-être profiter de ce package proxy afin de tester vos notifications d'assemblage, ou d'utiliser un service de tunneling tel que Ngrok.

Résumé

Dans cette série en deux parties, nous avons examiné un aperçu complet de Transloadit, un service de traitement de fichiers.

Dans la première partie, nous avons traversé certains des avantages et des inconvénients, puis avons examiné les concepts clés.

Cette partie, nous avons mis les mains salir et avons construit un composant Avatar utilisateur simple à l'aide de jQuery, Node.js et Express.

Vous n'êtes pas limité à jQuery, et en effet vous êtes libre d'utiliser une solution JavaScript à la vanille ou votre cadre préféré. Vous n'avez même pas besoin de l'utiliser à partir d'une application côté client, et en ce qui concerne les technologies côté serveur, vous avez une large gamme d'options. J'espère cependant que vous avez maintenant une appréciation de la façon dont il peut être utilisé pour la manipulation d'images.

utilisez-vous Transloadit dans vos projets? Connaissez-vous un meilleur service? Faites-moi savoir dans les commentaires.

Questions fréquemment posées (FAQ) sur le composant Avatar utilisateur dans node.js avec transloadit

Comment puis-je personnaliser l'apparence de l'Avatar dans Node.js avec Transloadit?

Personnalisation de l'apparence de l'avatar dans Node.js avec Transloadit implique de modifier les paramètres dans les instructions d'assemblage. Vous pouvez modifier la taille, la forme et la couleur de l'avatar. Par exemple, pour modifier la taille, ajustez le paramètre «redimensionner». Pour changer la forme, utilisez le paramètre «Crop». Vous pouvez également ajouter un texte de filigrane ou de superposition sur l'avatar en utilisant respectivement les paramètres 'Watermark' et 'Text'. ?

La mise en œuvre du composant Avatar utilisateur dans une application du monde réel implique l'intégration dans le processus d'enregistrement d'utilisateur ou de profil de votre application. Lorsqu'un utilisateur enregistre ou met à jour son profil, vous pouvez utiliser Transloadit pour générer un avatar en fonction des détails de l'utilisateur. Vous pouvez ensuite stocker l'URL de l'Avatar dans votre base de données et l'utiliser où que vous ayez besoin d'afficher l'avatar de l'utilisateur.

Comment puis-je gérer les erreurs lorsque vous utilisez Transloadit pour la génération d'avatar de l'utilisateur?

Gestion des erreurs dans les erreurs dans les erreurs dans les erreurs dans les erreurs dans les erreurs dans les erreurs de l'utilisateur? Transloadit implique d'écouter des événements d'erreur dans votre assemblage. Si une erreur se produit pendant le processus d’assemblage, Transloadit émettra un événement «d’erreur». Vous pouvez écouter cet événement et le gérer de manière appropriée. Par exemple, vous souhaiterez peut-être enregistrer l'erreur, informer l'utilisateur ou réessayer l'assemblage.

Puis-je utiliser Transloadit pour la génération d'avatar utilisateur dans un environnement non Node.js?

Oui, Transloadit est un service basé sur le cloud et il fournit des API pour divers langages de programmation, notamment Python, Ruby, PHP, et Java. Vous pouvez utiliser ces API pour intégrer Transloadit dans votre application non Node.js.

Comment puis-je optimiser les performances de la génération d'avatar utilisateur avec Transloadit?

Optimisation des performances de la génération d'avatar utilisateur avec Transloadit implique le réglage de vos instructions d'assemblage et la gestion efficacement de vos ressources. Par exemple, vous pouvez réduire la taille des avatars générés pour enregistrer la bande passante et l'espace de stockage. Vous pouvez également utiliser la fonctionnalité `` Auto_retry '' de Transloadit pour réessayer automatiquement les assemblages échoués, ce qui peut améliorer la fiabilité de votre processus de génération d'avatar.

Comment puis-je tester le composant Avatar utilisateur dans Node.js avec Transloadit?

Tester le composant Avatar utilisateur implique la création de tests unitaires pour vos instructions d'assemblage et vos tests d'intégration pour l'intégration de votre application avec Transloadit. Vous pouvez utiliser des frameworks de test comme Mocha ou en plaisantant à cet effet. Vous pouvez également utiliser des services simulés pour simuler le comportement de Transloadit lors des tests.

Comment puis-je sécuriser le processus de génération d'avatar de l'utilisateur avec Transloadit?

La sécurisation du processus de génération d'avatar de l'utilisateur avec Transloadit implique l'utilisation d'URL sécurisées pour vos assemblages et protéger vos clés API transloadit. Vous pouvez utiliser la fonctionnalité «authentification de signature» de Transloadit pour vous assurer que seuls les clients autorisés peuvent créer des assemblages. Vous devez également stocker vos clés API Transloadit en toute sécurité et ne jamais les exposer dans le code côté client.

Puis-je utiliser Transloadit pour d'autres tâches de traitement des médias en plus de la génération d'avatar de l'utilisateur?

Oui, Transloadit est un Service polyvalent de traitement des médias et il prend en charge une large gamme de tâches en plus de la génération d'avatar utilisateur. Vous pouvez l'utiliser pour le traitement de l'image et de la vidéo, le téléchargement de fichiers, etc. Vous pouvez même enchaîner plusieurs tâches dans un seul assemblage pour créer des workflows de traitement des médias complexes.

Comment puis-je surveiller la progression de la génération d'avatar utilisateur avec Transloadit?

Surveillance de la progression de la génération d'avatar utilisateur avec Transloadit implique d'écouter des événements de progression dans votre assemblée. Transloadit émet des événements de «progression» à intervalles réguliers pendant le processus d'assemblage. Vous pouvez écouter ces événements et mettre à jour l'interface utilisateur de votre application pour refléter les progrès actuels.

Comment puis-je mettre à l'échelle le processus de génération d'avatar de l'utilisateur avec Transloadit?

La mise à l'échelle du processus de génération d'avatar de l'utilisateur avec Transloadit implique l'utilisation de plusieurs assemblages et la gestion efficace de votre utilisation de votre transloadit. Vous pouvez créer plusieurs assemblages pour traiter les avatars en parallèle, ce qui peut augmenter considérablement votre débit. Vous devez également surveiller votre utilisation en transloadit et ajuster votre plan selon les besoins pour vous assurer que vous avez suffisamment de capacité pour gérer la charge de votre application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!