Une API pour le Web Learning YQL

Yahoo Query Language est un excellent outil qui accélère votre temps de développement Web. Plus votre projet est complexe, plus YQL vous fera gagner du temps. Alors, est-ce un cadre, une application, une boisson? Aujourd'hui, vous saurez ce que c'est et comment l'utiliser!

Ce tutoriel comprend un screencast disponible pour les membres Tuts + Premium.

Qu'est ce que YQL??

Les applications Web et les services Web se multiplient comme des lapins. Ils sont tous amusants à jouer (comme les lapins) et amusants à intégrer dans d’autres projets (contrairement aux lapins). Mais apprendre une nouvelle API tous les deux jours n'est ni faisable ni amusant. Et c’est là le problème que le langage de requête Yahoo (YQL) cherche à résoudre.

Pensez à YQL en tant qu’API pour le Web, l’API unique pour les gouverner tous. Ce n'est pas difficile à apprendre, alors mettons-nous au courant maintenant!


Comment je l'utilise?

Yahoo a mis au point une jolie console pour nous permettre de faire travailler nos muscles avec YQL. Chargez cette console et explorons-la.


Dans la barre de droite, vous pouvez choisir une "table" dans la "base de données"; un exemple de requête apparaîtra dans la zone de déclaration en haut. À droite de la zone d'instruction, vous pouvez voir ce que la requête REST correspondante correspond. Ci-dessous, vous avez les données renvoyées par la requête; vous pouvez recevoir des données au format XML ou JSON.

Alors, essayons une requête!

 Sélectionnez * parmi flickr.photos.interestingness (20)

Voici l'une des exemples de requêtes; Cela renverra vingt images du groupe d'intérêt de Flickr. Les résultats de la requête ressemblent à ceci:


Essayons un autre.

 select * from feed où url = "http://rss.news.yahoo.com/rss/topstories"

Cette requête renvoie chacun des éléments récents d'un flux, dans ce cas, les Top News de Yahoo News. Bien sûr, nous pourrions nous en occuper nous-mêmes, mais ce sera plus rapide et plus facile.

Vous remarquerez que ces deux requêtes concernent des sites Yahoo; out of the box YQL ne propose qu'un tableau pour les propriétés de Yahoo. Mais ils l'ont rendu extensible, et beaucoup de gens ont écrit d'autres tables. Pour les obtenir, cliquez sur «Afficher les tables de la communauté» dans la barre latérale. Maintenant, nous pouvons tirer parti de tout, de Netflix au New York Times, de GitHub à Instapaper..

Alors, comment pouvons-nous utiliser YQL dans nos propres projets? Le plus souvent, vous l'implémenterez en utilisant cURL, mais nous pourrions également le faire en JavaScript. Regardons maintenant le CURL et ce que nous en tirons.

Prenons cette requête intéressante sur flickr que nous venons de regarder; voici ce que nous faisons:

 $ query = 'select * from flickr.photos.interestingness (20)'; // insère la requête dans l'URL complète $ url = 'http://query.yahooapis.com/v1/public/yql?format=json&q='. urlencode ($ query); // configure le cURL $ c = curl_init (); curl_setopt ($ c, CURLOPT_URL, $ url); curl_setopt ($ c, CURLOPT_RETURNTRANSFER, 1); curl_setopt ($ c, CURLOPT_SSL_VERIFYPEER, false); curl_setopt ($ c, CURLOPT_SSL_VERIFYHOST, false); // exécute le cURL $ rawdata = curl_exec ($ c); curl_close ($ c); // Convertit le code JSON renvoyé en un objet PHP $ data = json_decode ($ rawdata); // Montre-nous l'écho des données '
'; print_r ($ data); écho '
';

Screencast complet



Ce n'est pas trop compliqué Si vous ne connaissez pas bien CURL, jetez un œil à l'excellent tut de Burak Guzel sur Nettuts au début du mois. Nous assignons la valeur de retour cURL à $ rawdata puis convertissez-le en PHP. L'appel de la fonction print_r nous donne ces résultats:

Comme vous pouvez le constater, notre objet $ data a une propriété: query. Cette propriété donne toutes les saveurs. Vous pouvez voir de la $ data-> query-> count que nous avons reçu 20 objets, correspondant à notre requête. Mais c'est $ data-> requête-> résultats que nous sommes vraiment intéressés; c'est là que se trouvent nos données. L'objet de résultats contient un tableau, appelé photos..

Armés de ces informations, nous pourrions afficher les vingt dernières photos intéressantes de Flickr (nous utiliserions l'URL http://www.flickr.com/photos/$owner/$id, en prenant ces variables de chaque objet photo.)

Je dois noter ici que toutes les requêtes n’afficheront pas leurs résultats de la même manière; certains ne sont pas aussi favorables aux développeurs que celui-ci. C'est une bonne idée d'utiliser la console YQL (ou simplement print_r) pour vérifier le format des résultats avant de continuer.

Vous avez donc une idée de ce que YQL est et comment vous pouvez l’utiliser. Maintenant, utilisons YQL dans un petit projet!


Tuts + Tweets

Construisons un panneau Twitter qui affichera les derniers tweets de chacun des comptes Twitter des sites Tuts +. Nous allons commencer par aller sur la console YQL et examiner nos options. Assurez-vous que vous visualisez les tables de la communauté. Sous la section Twitter, choisissez twitter.user.profile (qui inclura le dernier tweet), ou tapez cette requête dans la zone de déclaration:

 sélectionnez * depuis twitter.user.profile où

Comme on peut le voir dans les résultats dans l'arborescence, l'objet que nous allons récupérer n'est pas aussi bien formaté que celui de Flickr; cependant, nous le ferons!

Commençons par remplacer la requête Flickr dans l'exemple ci-dessus par celle-ci. Voici ce que nous obtenons:


Qu'est-ce qui ne va pas? Puisque le datatable Twitter n'est pas l'une des tables intégrées de Yahoo, nous devons également dire à YQL d'utiliser les tables de communauté. Comment fait-on cela? Nous ajouterons une clé / valeur env = store: //datatables.org/alltableswithkeys à notre URL de base; maintenant la variable $ url devrait ressembler à ceci:

 $ url = 'http://query.yahooapis.com/v1/public/yql?format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&q='. urlencode ($ query);

Maintenant si on l'essaie…


Nous avons les données Twitter!

Maintenant que nous avons réussi à obtenir le profil Twitter de Nettuts, considérons les autres. Nous devons obtenir les profils des comptes suivants:

  • Psdtuts
  • Vectortuts
  • Audiotuts
  • Aetuts
  • Activetuts
  • Cgtuts
  • Phototuts
  • Tutsplus

Alors, devons-nous faire huit autres CURL dans YQL pour obtenir toutes les données dont nous avons besoin? Heureusement, YQL a notre dos ici; nous pouvons utiliser ceci:

 SELECT * FROM query.multi où interrogations = "QUERIES ALLER ICI"

Forts de cette connaissance, nous sommes prêts à construire notre widget. Nous allons commencer par un tableau des requêtes Twitter:

 $ twitter = array ('tutsplus' => 'SELECT * DE twitter.user.profile WHERE id = \' tutsplus \ ", 'nettuts' => 'SELECT * DE twitter.user.profile WHERE id = \' nettuts \" , 'phototuts' => 'SELECT * FROM twitter.user.profile WHERE id = \' phototuts \ ", 'audiotuts' => 'SELECT = DE twitter.user.profile WHERE id = \' audiotuts \", 'psdtuts' => 'SELECT * FROM twitter.user.profile WHERE id = \' psdtuts \ ", 'aetuts' => 'SELECT * DE twitter.user.profile WHERE id = \' aetuts \", 'cgtuts' => 'SELECT * FROM twitter.user.profile WHERE id = \ 'cgtutsplus \ ",' vectortuts '=>' SELECTIONNER * DE twitter.user.profile WHERE id = \ 'vectortuts \",' activetuts '=>' SELECT * FROM twitter. user.profile WHERE id = \ 'activetuts \ ");

Créons maintenant notre requête complète:

 $ query = 'SELECT * FROM requête.multi où requêtes = "'. implode (';', $ twitter). '";

Comme cela devient un peu compliqué, nous allons mettre l'URL racine dans sa propre variable, puis tout mettre ensemble. Notez que j'ai ajouté diagnostics = false à l'URL racine; Cela empêche YQL de renvoyer un peu de données supplémentaires avec nos résultats. Pourquoi? Cela facilitera les choses lorsque nous inspecterons les résultats dans un instant.

 $ root = 'http://query.yahooapis.com/v1/public/yql?format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&diagnostics=false'; $ url = $ root. '& q ='. urlencode ($ query);

Maintenant que nous avons notre URL complète, créons notre cURL, comme nous l'avons déjà fait:

 $ c = curl_init (); curl_setopt ($ c, CURLOPT_URL, $ url); curl_setopt ($ c, CURLOPT_RETURNTRANSFER, 1); curl_setopt ($ c, CURLOPT_SSL_VERIFYPEER, false); curl_setopt ($ c, CURLOPT_SSL_VERIFYHOST, false);

Et comme la dernière fois, nous allons récupérer les résultats, convertir le JSON en un objet PHP et les exporter pour inspection..

 $ data = json_decode (curl_exec ($ c)); curl_close ($ c); écho '
'; print_r ($ data); écho '
';

Je ne vous les montrerai pas ici, mais vous devriez pouvoir les parcourir et voir les données que nous voulons extraire. Notez que l’objet de résultats contient un tableau de résultats; c'est un peu inattendu, mais je pense que cela a quelque chose à voir avec le fait que nous exécutons plusieurs requêtes. Quand vous avez fini, retournez dans PHP et créez une variable $ results (et n'oubliez pas de supprimer printcode r):

 $ résultats = $ data-> requête-> résultats-> résultats;

Le HTML

Maintenant que nous avons nos données, il est temps d'utiliser du HTML. Jetons un modèle de base sous PHP:

     Introduction au langage de requête Yahoo    

The Tuts + Network: Dernier tweet

Maintenant, dans la liste, nous allons utiliser un peu de PHP pour itérer sur chacun des éléments du tableau $ results que nous avons extrait et créer une entrée pour celui-ci. Tout d'abord, configurez la boucle:

   

Dans cet élément de liste, ouvrez un codeblock PHP; nous devrions commencer par mettre en place quelques variables.

 $ meta = $ résultats [$ i] -> élément-> méta; $ item = $ résultats [$ i] -> item-> item; $ link = $ results [$ i] -> item-> ressource;

Malheureusement, l'auteur de la table twitter n'a pas rendu le retour d'objet trop facile à utiliser; au lieu d'utiliser des paires clé / valeur, chaque clé et valeur sont des entrées dans leur propre tableau. Il ne sera donc pas évident de savoir ce que nous sommes chaque objet de référence lorsque nous avons terminé. Cependant, rappelez-vous que tout cela est sujet à l'auteur. La table flickr que nous avons examinée précédemment, ou la table RSS que vous devriez consulter, est une API beaucoup plus utilisable..

Alors, que voulons-nous dans notre widget Twitter? Montrons l'avatar de l'utilisateur à gauche et son nom, son nom d'utilisateur, son dernier tweet et l'heure du dernier tweet à droite. Pour ce faire, ajoutons ceci sous ces variables:

 Ressource ."" . $ meta [0] -> content. "" /> ";?> 
contenu . ""; ?> (contenu?>) méta [2] -> contenu; ?> '. $ item [1] -> meta [1] -> content. ''; ?>

Je sais que c'est un peu cryptique, mais si vous regardez ceci, puis l'objet que nous avons imprimé au navigateur, vous verrez que cela fonctionne bien. Nous commençons avec une ancre et y plaçons l'image de l'avatar. Après cela, dans un div, nous créons un autre lien pour le nom, qui renvoie à leur page Twitter. Ensuite, nous mettons leur nom d’utilisateur et l’heure du dernier tweet dans de petites balises (et si nous le voulions, nous pourrions convertir l’heure en quelque chose d’un peu plus convivial). Enfin, nous mettons leur dernier tweet dans une ancre; en cliquant dessus vous mènera à la page du tweet.

Voici à quoi cela ressemble:


Pas encore joli, mais nous avons de bons crochets pour notre CSS.

Le CSS

Rien de compliqué ici; on commence par sillonner le paysage:

 body font: 13px / 1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; arrière-plan: #ecec; rembourrage: 10px;  img border: 0; 

Ensuite, nous donnerons à la liste son apparence:

 ul marge: 0; rembourrage: 0; bordure: solide 1px # 474747; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; arrière-plan: #ccc; largeur: 50%;  li min-height: 50px; rembourrage: 10px 5px; type de style de liste: aucun; fond de bordure: solide 1px # 474747; border-top: 1px solid #ececec;  li div padding-left: 58px;  li a.img float: left; padding-right: 5px;  li a display: block;  li: premier enfant border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0;  li: dernier-enfant border-bottom: 0; 

Pour terminer, nous allons donner une ombre à chaque élément de la liste:

 li: survol box-shadow: 0px 0px 15px # 000; -moz-box-shadow: 0px 0px 15px # 000; -webkit-box-shadow: 0px 0px 15px # 000; 

Voilà! Voici notre widget Twitter complété:



Faire avec JavaScript

Si vous préférez, vous pouvez utiliser jQuery pour exécuter une instruction YQL. Vous pouvez obtenir le plugin appelé jquery.queryYQL-sur GitHub. C'est assez simple à utiliser. voici une modification de l'exemple de requête:

 $ .queryYQL ("select * from feed où url =" http://feeds.feedburner.com/nettuts?format=xml "", fonction (données) var ul = $ ("
    "); $ .each (data.query.results.item, function () $ ("
  • ") .append (this.title) .appendTo (ul);); ul.appendTo ($ (" # # contenu ")););

Allez-vous l'utiliser?

YQL est un outil assez puissant. cela devrait vous faire gagner beaucoup de temps en vous fournissant une API unique et commune pour accéder au contenu sur le Web. Vous devriez vraiment parcourir la liste des tables disponibles; vous trouverez probablement quelque chose qui vous ressemblera beaucoup de temps. Certaines tables fournissent même l'authentification et l'écriture.

YQL est-il un outil que vous utiliserez à l'avenir? Faites-moi savoir dans les commentaires!