YouTube: Comment obtenir le contenu de la liste de lecture YouTube à partir de l’API de données YouTube

YouTube: Comment obtenir le contenu de la liste de lecture YouTube à partir de l'API de données YouTube

JS Bin sur jsbin.com

Note de l’éditeur: La fenêtre interactive ci-dessus est un « Bin » intégré, dont la version canonique est disponible sur JSBin. Il vous offre la possibilité d’expérimenter les Exemple de code en place (pas besoin de le couper et le coller dans votre propre environnement). Vous pouvez modifier le HTML, le CSS, et/ou le JavaScript et toutes les modifications que vous apportez seront reflétées dans le volet de sortie sur le côté droit (la page Web résultante). Allez-y et jouez avec ! Vous ne pouvez pas le blesser. Essayez de redimensionner les volets en cliquant et en faisant glisser leurs bordures verticales. Si vous cliquez sur le bouton JSBin dans le coin supérieur gauche, cela vous donnera la possibilité de modifier le bac sur JSBin.com. Si vous cliquez sur le bouton Enregistrer à côté, cela vous donnera la possibilité de Cloner le même Bin sous votre propre compte JSBin. Que vous travailliez dans la version embarquée ou sur le site de JSBin, vous pouvez afficher la console de Bin. Il y a cinq boutons en haut au centre de la fenêtre interactive ci-dessus. Chaque bouton active et désactive le volet correspondant. Notez que cette fonctionnalité peut ne pas fonctionner à 100 % dans les fenêtres de navigation privées de certains navigateurs.

Ceci est la première partie de notre série sur Comment développer avec l’API de données . Dans cette partie, nous donnons un aperçu des API et le Développeur Portail, et vous montrer comment créer une application qui renvoie le contenu d’une liste de lecture publique.

L’API de données Suivre cette API, actuellement en version 3, donne aux développeurs la possibilité d’ajouter un certain nombre de fonctionnalités à leurs applications. L’API peut être utilisée pour télécharger et rechercher des vidéos, gérer des listes de lecture et des abonnements, mettre à jour les paramètres de chaîne et plus encore.

L’API vous donne accès à près de 20 ressources différentes et prend en charge les HTTP des verbes tels que GET (liste), POST (insérer), PUT (mettre à jour) et DELETE (supprimer) pour chaque Ressource taper. Le tableau ci-dessous montre quelles opérations sont prises en charge par les différentes ressources.

Figure 1 : Liste des opérations d'API prises en charge

Figure 1 : Liste des opérations d’API prises en charge.

Les développeurs doivent enregistrer leurs applications et obtenir un accès avant d’utiliser l’API. Il existe deux types d’accès – simple et autorisé. Si vous souhaitez rechercher des vidéos et des listes de lecture accessibles au public, un accès simple via un clé API est tout ce dont vous avez besoin. Pour les applications qui prennent des mesures au nom de l’utilisateur telles que le téléchargement de vidéos, l’édition de listes de lecture ou tout ce qui nécessiterait qu’un utilisateur soit connecté, l’accès autorisé à l’aide d’un OAuth Un flux de travail 2.0 est requis. Avec plus d’un milliard d’utilisateurs et près de 5 milliards de vidéos visionnées quotidiennement, dispose d’une vaste collection de données à explorer, dont la plupart sont accessibles au public. Je voulais en savoir plus sur l’API et comment je pourrais l’utiliser pour accéder à ces données.

Premiers pas avec le portail

La première étape consistait à se diriger vers le portail des développeurs . J’ai vu de nombreux portails et suit les meilleures pratiques pour présenter les différentes API disponibles (voir figure 2) et dire à l’utilisateur dans un langage clair ce qui peut être accompli avec chacun, que ce soit la lecture de vidéos, l’exploration des Plate-forme, comprendre le comportement des utilisateurs et plus encore.

Figure 2 : La page d'accueil du portail des développeurs YouTube montre clairement les API disponibles et ce qui peut être fait avec chacune

Figure 2 : La page d’accueil du portail des développeurs montre clairement les API disponibles et ce qui peut être fait avec chacune.

Mon intérêt était d’utiliser les données , j’ai donc cliqué sur le lien de présentation ; c’est là que j’ai eu mon premier peu de confusion. J’ai été dirigé vers la page de présentation comme prévu et elle explique très bien, en détail, en quoi consiste l’API et les bases de son fonctionnement. D’après le menu de navigation en haut, j’étais dans la section Guides du portail des développeurs.

Figure 3 : Page de présentation de l'API de données YouTube

Figure 3 : Page de présentation de l’API de données .

En cliquant sur le lien de navigation pour la page d’accueil, j’ai accédé à une page de destination de l’API de données (selon le fil d’Ariane) qui ressemble étonnamment à la page de destination du développeur illustrée à la figure 2. Mais elles sont différentes. À partir de là, lorsque je clique sur le lien Get Started, cela me ramène à la page de présentation mentionnée précédemment. Ou, à partir de cette page de destination, vous pouvez cliquer sur un lien pour un guide de mise en œuvre qui m’amène également à une page de présentation, mais différente de la première que j’ai rencontrée (celle-ci est pour un « Guide de mise en œuvre et de migration »). Enfin, à partir de la page de destination de l’API de données , je peux également cliquer sur le lien Fonctionnalités prises en charge qui m’amène à la recherche : méthode de liste dans la section Référence. Cette page « Méthode de liste » n’est pas intitulée « Fonctionnalités prises en charge » et n’est pas vraiment un récit sur la capacité de recherche de l’API de données. Il s’agit d’une page de référence qui commence par un environnement d’exécution intégré (pour tester plusieurs cas d’utilisation dans une variété de langages), après quoi apparaît une liste exhaustive d’une myriade de paramètres différents pouvant être utilisés lors de l’appel de l’API.

Ce labyrinthe déroutant de pages et de terminologie est l’une de mes bêtes noires avec le Documentation à travers un certain nombre d’API de Google ; il y a souvent tellement d’informations regroupées dans un seul portail, et les liens vous font entrer et sortir des sections d’une manière qui donne l’impression que vous sautez au lieu d’explorer le site de manière hiérarchique. Je me suis parfois retrouvé incertain d’où je venais et cela m’a donné un sentiment décousu au lieu d’une expérience fluide où je progresse à travers un voyage de pages logiquement séquencées. Pour être juste, ce problème n’est pas unique à ou à Google. Nous l’avons observé dans de nombreux portails de développeurs que nous étudions.

Je suis finalement revenu à la page Aperçu et à la section qui explique ce qui doit se passer avant de commencer. Une vidéo montrant les étapes est également incluse, mais elle est obsolète car le flux de travail affiché ne correspond plus au flux de travail que le site vous guide. En vérité, la vidéo n’est pas nécessaire. Cette partie était simple et le UX pour configurer mon projet, l’enregistrer pour utiliser l’API de données et demander ma clé API était très bon, me permettant d’être prêt en quelques minutes. Comme mentionné ci-dessus, l’une des étapes de l’obtention des informations d’identification consiste à décider du niveau d’accès dont votre application a besoin. Pour les besoins de ce projet, j’ai choisi un accès simple qui ne nécessite qu’une clé API.

Figure 4 : Choisir les bons identifiants pour votre application

Figure 4 : Choisir les bonnes informations d’identification pour votre application.

Plonger dans la documentation

Avant de plonger à fond dans la documentation de l’API, j’ai dû décider ce que la première itération de mon code devait accomplir. Juste pour me familiariser avec l’API de données , j’ai décidé qu’un développeur devrait être en mesure de fournir l’ID de n’importe quelle liste de lecture et qu’en retour, une page Web chargerait une liste liée de vidéos de cette liste de lecture. Ainsi, pour les besoins de cet article, je vais coder en dur certaines des données (le titre et l’ID de la playlist) pour conserver le code dans un échantillon plus digeste. Le but de cet article est de vous donner une idée de ce que l’API peut accomplir. Dans un article ultérieur, j’étofferai l’application de manière à ce qu’elle reflète un cas d’utilisation plus réaliste ; celui qui découvre et affiche toutes les listes de lecture associées à un nom d’utilisateur spécifique.

À ce stade, il était temps de commencer à parcourir la documentation de l’API, et c’est là que j’ai rencontré ma première pierre d’achoppement. Gardant à l’esprit mon objectif d’afficher une liste liée de vidéos de l’une de mes listes de lecture , la page de destination du portail API comprend une section sur la recherche de contenu. J’ai cliqué sur le lien pour les fonctionnalités prises en charge et, comme mentionné précédemment, j’ai immédiatement pris quelques niveaux de profondeur dans le Référence API (la recherche : liste ressource). J’ai trouvé les incohérences dans la mise en page choquantes, m’obligeant à me réorienter. Le problème est qu’il y a beaucoup d’informations que Google essaie d’organiser avec un espace limité pour le faire. Dans la figure ci-dessous, vous pouvez voir le système à deux menus que Google utilise sur certaines de ses pages (menus à gauche et à droite).

Figure 5 : page de référence de l'API affichant les menus de droite et de gauche

Figure 5 : page de référence de l’API affichant les menus de droite et de gauche.

Pour un développeur plus expérimenté, parcourir la documentation de cette manière peut être un jeu d’enfant. Mais j’ai trouvé que c’était un obstacle pour accéder rapidement à la version « Hello World » de mon idée. Je suis toujours vert quand il s’agit de coder, donc je cherchais un peu plus de prise en main pour me rendre à mon objectif final. Google essaie de faciliter les choses en incluant des extraits de code pour chaque ressource, comme indiqué ci-dessous.

// Sample js code for playlistItems.list
// See full sample for buildApiRequest() code, which is not
// specific to a particular API or API method.
buildApiRequest('GET',
                '//v3/playlistItems',
                {'maxResults': '25',
                 'part': 'snippet,contentDetails',
                 'playlistId': 'PLBCF2DAC6FFB574DE'});

Cependant, ce code seul ne fait rien lorsqu’il est placé dans votre application. Au lieu de cela, si vous voulez l’exemple de code de Google, vous devez copier et coller un gros morceau de code passe-partout (qui est masqué par défaut) pour que le code fonctionne. Google a créé ce passe-partout afin que le même code puisse être réutilisé dans plusieurs de ses API. Bien que cela facilite les choses pour l’employé de Google qui doit documenter les API, cela n’aide pas vraiment le développeur. Au lieu de cela, cela introduit beaucoup de surcharge qui surcharge inutilement votre code « Hello World », sans parler de l’obstacle qu’il crée pour apprendre les bases du travail avec l’API.

Un autre exemple de la nature décousue de la documentation est lorsque vous travaillez avec le paramètre part sur les requêtes API. Le paramètre part spécifie une liste de propriétés de ressources séparées par des virgules que la réponse de l’API peut inclure au choix du développeur. C’était un élément clé nécessaire pour structurer mes demandes afin de fonctionner correctement avec l’API. Vous pouvez voir dans la figure 6 ci-dessous comment Google documente cela dans sa référence API (ex : la référence pour récupérer une liste de playlists associées à une chaîne ).

Figure 6 : Le paramètre de partie sur l'une des ressources API sans définition claire de ce qui est contenu dans chaque nom de partie

Figure 6 : Le paramètre de partie sur l’une des ressources de l’API sans définition claire de ce qui est contenu dans chaque nom de partie.

Comme vous pouvez le voir, il n’y a pas d’explication claire de la composition des différents noms de pièces (ou de liens vers d’autres pages où ces pièces pourraient être expliquées). Je pouvais deviner ce qui serait contenu dans des parties telles que contentDetails ou id, mais la seule façon dont je savais avec certitude était d’utiliser console.log() de Javascript tout en testant mon code pour le découvrir par moi-même. En fait, j’ai pu trouver des exemples qui montraient les données renvoyées pour divers paramètres de pièce. Par exemple, la page de présentation des ressources PlaylistItems affiche un JSON représentation d’un élément de liste de lecture qui inclut les données que j’avais recherchées (voir figure 7 ci-dessous).

Figure 7 : Représentation JSON de la ressource PlaylistItems montrant quelles données peuvent être attendues des différents paramètres de la pièce

Figure 7 : Représentation JSON de la ressource PlaylistItems montrant quelles données peuvent être attendues des différents paramètres de la pièce.

Cela indiquait un manque d’organisation cohérente du portail ; l’endroit idéal pour inclure cette information serait sur les pages où les pièces sont mentionnées. Ici, les informations sont données dans le plus grand contexte pour quelqu’un qui essaie de comprendre l’API. Si cela n’avait pas de sens d’inclure la représentation sur chacune de ces pages, peut-être pour réduire la redondance, il aurait au moins été utile de relier les noms de pièces à la représentation unique. Encore une fois, le problème n’était pas que l’information n’existait pas, c’était qu’elle n’était pas toujours à des endroits pertinents du point de vue contextuel.

Avec ces problèmes d’organisation à l’esprit, c’est là que Google aurait pu proposer quelques brefs tutoriels qui guident les utilisateurs étape par étape dans le processus de configuration d’une simple application « Hello World » qui appelle l’API. Les didacticiels ne doivent pas nécessairement être exhaustifs, mais ils doivent guider le lecteur à travers les étapes minimalement viables d’appel de l’API afin que vous ayez une meilleure compréhension du fonctionnement des demandes et des réponses.

J’ai décidé que j’aurais plus de chance de me tourner, assez ironiquement, vers une vidéo . L’un des avantages de travailler avec les API des plus grands fournisseurs, comme Google, est que beaucoup d’entre eux ont des didacticiels et des procédures pas à pas produits par des tiers disponibles sur le Web. Une recherche rapide sur a fait apparaître la vidéo ci-dessous. Il utilise JavaScript et JQuery de répertorier les vidéos sur une chaîne , ce que je cherchais à accomplir.

Après avoir regardé la vidéo pour m’assurer qu’elle faisait ce que je voulais, j’ai fait quelques ajustements, remplacé mes informations et essayé. Comme mentionné précédemment, je voulais garder ma première itération de ce code simple et pour ce faire, mon code suppose que vous avez déjà l’ID de la playlist que vous souhaitez récupérer. Trouver l’ID d’une liste de lecture est assez facile. Pointez votre navigateur sur n’importe quelle chaîne qui a une ou plusieurs listes de lecture, faites un clic droit sur un lien de liste de lecture et choisissez Copier l’adresse du lien dans le menu contextuel. Cela copiera l’intégralité du lien de la liste de lecture dans votre presse-papiers. Collez le lien dans un éditeur de texte (ou n’importe quel endroit qui vous permettra de coller le contenu de votre presse-papiers). Le lien ressemblera à ceci :

 HTTPS

L’ID de la liste de lecture est la chaîne de lettres et de chiffres qui vient après le paramètre « list= ».

J’ai codé en dur cet ID de liste de lecture dans la première itération de mon code. Une autre chose à noter à propos de JSBin (l’éditeur de code interactif intégré en haut de ce didacticiel) est que vous pouvez masquer votre clé API. En tant que meilleure pratique, vous ne voulez jamais révéler votre clé API dans le Code source. Nous avons publié une technique (couverte dans cet article sur Web programmable) qui vous permet de demander à l’utilisateur son API, après quoi il stocke cette clé dans le stockage HTML5. Comme vous pouvez le voir dans le Bin intégré ci-dessus, mon code utilise cette technique.

Un inconvénient de l’API de données dont les développeurs et les concepteurs d’API peuvent tirer des leçons est lié à la façon dont l’API ne répond pas avec des URL complètes pour les actifs auxquels le développeur pourrait vouloir se lier. Par exemple, une vidéo. Au lieu de cela, pour chaque actif inclus dans une réponse d’API, l’API ne répond qu’avec un ID d’actif. Si vous voulez créer un lien vers cet élément, vous devez savoir quelque chose sur URL structure, puis, avec l’ID d’actif en main, construisez le lien hypertexte avec votre code. Par exemple, l’URL de pour le lien vers une vidéo est :

https://www..com/watch?v=NNM2kEBGiRs

où « NNM2kEBGiR » est l’ID d’élément de la vidéo.

Étant donné que l’API de données ne répond qu’avec des identifiants, vous, en tant que développeur, devez savoir concaténer un identifiant avec « https://www..com/watch?v= » afin de créer l’intégralité du lien hypertexte.

Cette conception, où les développeurs doivent coder en dur des fragments d’URL dans leur code source, rend les applications peu performantes ou pire, facilement cassées. Si décide de modifier sa structure d’URL (ce qu’il a déjà fait dans le passé), au mieux, il redirigera les URL structurées héritées au bon endroit. Au pire, cela pourrait ne rien faire et les applications pourraient se casser en conséquence.

On pourrait faire valoir qu’en renvoyant l’ID de l’actif par opposition à l’URL entière, garantit des charges utiles plus petites. Mais à notre avis, le risque de panne d’applications sur toute la ligne ne vaut pas les petites économies.

Quoi d’autre était dans le portail

Une chose que j’ai appréciée dans le portail était la possibilité de tester les appels directement dans la documentation (voir la figure 8 ci-dessous). Une fois revenu sur le portail après avoir terminé le didacticiel vidéo, l’appel de l’API à partir de la documentation a été utile pour comprendre ce à quoi je pouvais m’attendre lors des demandes.

Figure 8 : Exemple d'appel effectué directement dans la documentation

Figure 8 : Exemple d’appel effectué directement dans la documentation.

Il existe également une console séparée qui vous permet d’exécuter des requêtes sans avoir besoin d’autoriser avec OAuth. En raison du grand nombre de ressources dans cette API, la console est pratique une fois que vous avez défini les appels que vous souhaitez effectuer.

Une autre fonctionnalité intéressante que j’ai trouvée plus tard était la section Exemple de code. Vous trouverez ici neuf regroupements d’échantillons de code couvrant huit langues. Certains langages tels que Python ont près de deux douzaines d’exemples tandis que d’autres tels que .NET sont limités à une poignée. En l’absence de procédures pas à pas de base de style « Hello World », ces collections de code sont un bon endroit pour commencer pour quelqu’un qui découvre l’API.

L’API de données dispose d’un certain nombre de SDK à utiliser, mais la page de destination du portail ne le rend pas évident. À partir de la page de destination de l’API, il y a une section intitulée Autres ressources, mais cliquer sur les différents liens n’a rien donné d’utile. La page GitHub ne mentionne pas non plus les SDK. Vous devez revenir à la page de présentation de l’API pour trouver un lien vers la page du SDK intitulée « Bibliothèques clientes ». Ici, il y a des liens pour les clients officiels en six langues, dont Java, JavaScript, .NET, Objective-C, PHP et Python ainsi que des SDK de démarrage pour Dart, Go, Node.js et Rubis.

Sommaire

Dans l’ensemble, il s’agit d’une bonne API qui offre aux développeurs de nombreuses options pour inclure des fonctionnalités dans leurs applications. Le portail lui-même est profond et contient presque tout ce qu’un développeur rechercherait lorsqu’il utilise l’API pour la première fois. Je n’ai que deux reproches. Tout d’abord, en tant que nouveau développeur, j’aurais apprécié un ou deux tutoriels de base qui m’ont permis de passer du point A à « Hello World » en un temps raisonnable. « Time to Hello World » est une métrique que de nombreux fournisseurs d’API utilisent pour évaluer la qualité de leurs portails de développeurs. J’ai eu la chance, en raison de la popularité de l’API, de pouvoir me tourner vers une ressource tierce. Mais cela semble être une occasion manquée d’améliorer encore plus l’expérience des développeurs. Mon autre reproche est que même si le portail est profond, il peut parfois sembler un peu déstructuré. Il n’est pas facile de synthétiser la quantité d’informations contenues ici, mais il existe un certain nombre d’endroits où une organisation plus minutieuse du site peut aider les développeurs à voyager au lieu de les jeter au milieu de l’océan.

Ceci est la première partie de notre série sur Comment développer avec l’API de données . Dans la deuxième partie, nous vous montrons comment afficher toutes les listes de lecture d’une chaîne par programmation en ne connaissant que l’ID de la chaîne. En utilisant cela, vous pouvez interroger l’API de données afin de découvrir tous les ID de playlist.

YouTube: Comment obtenir le contenu de la liste de lecture YouTube à partir de l'API de données YouTube

#Comment #obtenir #contenu #liste #lecture # #partir #lAPI #données #