Un API pentru Web Învățarea YQL

Limba de interogare Yahoo este un instrument excelent care garantează accelerarea timpului de dezvoltare web. Cu cât proiectul este mai complex, cu atât mai mult timp YQL vă va salva. Deci, este un cadru, o aplicație, o băutură? Astăzi, veți afla ce este și cum să-l utilizați!

Acest tutorial include un screencast disponibil pentru membrii Tuts + Premium.

Ce este YQL??

Aplicațiile Web și serviciile web se înmulțesc ca iepurii. Sunt cu toții distractiv să se joace cu (ca iepurii) și să se distreze pentru a se integra în alte proiecte (spre deosebire de iepurii). Însă învățarea unui nou API în fiecare zi nu este fezabilă sau distractivă. Și aceasta este problema pe care o rezolvă Yahoo Query Language (YQL).

Gândiți-vă la YQL ca API pentru web, API-ul pentru a le guverna pe toate. Nu e greu de învățat, așa că hai să mergem la viteză chiar acum!


Cum îl folosesc?

Yahoo a pus împreună o consoană destul de drăguță pentru ca noi să flexăm mușchii cu YQL. Încărcați consola aceea și să o explorăm.


În bara laterală dreaptă, puteți alege un "tabel" în "baza de date"; o interogare de eșantion va apărea în caseta de instrucțiuni din partea de sus. În partea dreaptă a casetei de instrucțiuni, puteți vedea ce ar fi interogarea REST corespunzătoare. Mai jos, aveți datele returnate din interogare; puteți primi date în XML sau JSON.

Deci, să încercăm o interogare!

 selectați * din flickr.photos.interestingness (20)

Iată una dintre întrebările esantionale; Aceasta va reveni la douăzeci de imagini din grupul de interese al lui Flickr. Rezultatele interogării arată astfel:


Să încercăm un altul.

 selectați * din feed unde url = "http://rss.news.yahoo.com/rss/topstories"

Această interogare returnează fiecare dintre articolele recente dintr-un feed, în acest caz Yahoo News Top Stories. Desigur, am putea să ne descurcăm singuri, dar acest lucru va fi mai rapid și mai ușor.

Veți observa că ambele interogări sunt pentru site-urile Yahoo; out of the box YQL oferă doar tabelul pentru proprietățile Yahoo. Dar au făcut-o extensibilă și mulți oameni au scris alte mese. Pentru a le obține, dați clic pe "Afișați mesele comunitare" din bara laterală. Acum putem folosi totul de la Netflix la New York Times, de la GitHub la Instapaper.

Deci, cum putem folosi YQL în propriile noastre proiecte? Cel mai adesea, o veți implementa folosind cURL, dar am putea să o facem și în JavaScript. Să ne uităm acum la cURL și la ceea ce obținem de la el.

Să luăm interogarea interesantă din flickr pe care tocmai am privit-o; iată ce facem noi:

 $ query = 'select * din flickr.photos.interestingness (20)'; // introduceți interogarea în adresa URL completă $ url = 'http://query.yahooapis.com/v1/public/yql?format=json&q='. urlencode (interogare $); // configurați 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); // executați cURL $ rawdata = curl_exec ($ c); curl_close ($ c); // Convertiți JSON returnat la un obiect PHP $ data = json_decode ($ rawdata); // Arata-ne ecoul de date '
„; print_r ($ date); echo "
„;

Full Screencast



Nu este prea complicat; dacă nu sunteți familiarizați cu cURL, verificați-l pe Burak Guzel de aici pe Nettuts la începutul acestei luni. Atribuiți valoarea de returnare cURL la $ rawdata și apoi convertiți-o în PHP. Apelarea funcției print_r ne oferă următoarele rezultate:

După cum puteți vedea, obiectul nostru de date $ are o proprietate: interogare. Această proprietate părinților toți biți gustoase. Puteți vedea din $ A datelor> query-> count că am primit 20 de obiecte care corespund interogării noastre. Dar e $ A datelor>> query- rezultate că suntem cu adevărat interesați; acolo sunt datele noastre. Obiectul de rezultate are o matrice în el, numite fotografii.

Înarmați cu aceste informații, am putea afișa ultimele douăzeci de fotografii interesante de pe flickr (vom folosi adresa URL http://www.flickr.com/photos/$owner/$id, luând acele variabile din fiecare obiect foto).

Trebuie să remarcăm aici că nu toate interogările vor afișa rezultatele în același mod; unii nu sunt chiar atât de dezvoltatori prietenoși ca acesta. Este o idee bună să utilizați consola YQL (sau doar print_r) pentru a verifica formatul rezultatelor înainte de a continua.

Deci, aveți o idee despre ceea ce este YQL și cum îl puteți folosi. Acum, să folosim YQL într-un mic proiect!


Tuts + Tweets

Să construim un panou Twitter care să arate ultimele tweet-uri de pe fiecare dintre conturile de Twitter ale site-urilor Tuts +. Vom începe prin a merge la consola YQL și să ne uităm la opțiunile noastre. Asigurați-vă că vizualizați tabelele comunității. Sub secțiunea Twitter, alegeți twitter.user.profile (care va include cel mai recent tweet) sau tastați această interogare în caseta de instrucțiuni:

 selectați * de pe twitter.user.profile unde

După cum vedem din rezultatele din vizualizarea arborescentă, obiectul pe care îl vom primi nu este formatat la fel de frumos ca și cele din Flickr; Cu toate acestea, vom reuși!

Să începem prin înlocuirea interogării Flickr în exemplul de mai sus cu aceasta. Iată ce obținem:


Ce s-a întâmplat? Din moment ce twitter-ul datatabil nu este unul din mesele încorporate din Yahoo, trebuie să-i spunem lui YQL să folosească și tabelele comunității. Cum facem asta? Vom adăuga o cheie / valoare env = magazin: //datatables.org/alltableswithkeys la adresa URL de bază; acum variabila $ url ar trebui să arate astfel:

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

Acum, dacă o încercăm ...


Avem datele de tip twitter!

Acum, că reușim să obținem profilul de twitter al Nettuts, să luăm în considerare ceilalți. Trebuie să obținem profilurile următoarelor conturi:

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

Deci trebuie să facem încă opt cURL-uri către YQL pentru a obține toate datele de care avem nevoie? Din fericire, YQL are spatele nostru aici; putem folosi aceasta:

 SELECT * FROM query.multi unde interogările = "QUERIES GO ARE"

Înarmat cu aceste cunoștințe, suntem gata să construim widgetul nostru. Vom începe cu o serie de interogări de la Twitter:

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

Să creăm întreaga interogare acum:

 $ query = 'SELECT * FROM interogare.multi unde interogările = "" .implode ('; ', $ twitter).' '';

Din moment ce este puțin complicat, vom pune adresa URL rădăcină în propria variabilă și apoi vom pune totul împreună. Rețineți că am adăugat diagnostice = false la adresa URL rădăcină; acest lucru împiedică YQL să returneze un pic de date suplimentare cu rezultatele noastre. De ce? Acesta va face mai ușor atunci când vom inspecta rezultatele într-un moment.

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

Acum, că avem adresa URL completă, să creăm cURL, așa cum am făcut deja:

 $ 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);

Și, ca și ultima oară, vom prinde rezultatele, vom convinge JSON-ul cu un obiect PHP și le vom trimite pentru inspecție.

 $ date = json_decode (curl_exec ($ c)); curl_close ($ c); echo "
„; print_r ($ date); echo "
„;

Nu le voi arăta aici, dar ar trebui să puteți să vă plimbați prin ele și să vedeți datele pe care vrem să le scoatem. Observați că obiectul rezultate are o matrice de rezultate în interiorul acestuia; este un pic neașteptat, dar cred că are ceva de-a face cu faptul că executăm mai multe interogări. Când ați terminat, reveniți la PHP și creați o variabilă $ results (și nu uitați să eliminați imprimarear cod):

 $ results = $ data-> query-> results-> results;

HTML-ul

Acum, că avem datele noastre, este timpul pentru unele HTML. Să aruncăm un șablon de bază în PHP:

     Introducerea limbii de interogare Yahoo    

Rețeaua Tuts +: cel mai nou mesaj

Acum, în interiorul listei, vom folosi câteva PHP pentru a itera peste fiecare dintre elementele din matricea de rezultate $ extrase și pentru a construi o intrare pentru aceasta. Mai întâi, configurați buclele:

   

În interiorul acelui element de listă, deschideți un cod de blocare PHP; ar trebui să începem prin stabilirea câtorva variabile.

 $ meta = $ rezultate [$ i] -> element-> meta; $ item = $ rezultate [$ i] -> item-> item; $ link = $ rezultate [$ i] -> element-> resursă;

Din păcate, autorul tabelului de twitter nu a făcut obiectul întoarcere prea ușor de folosit; în loc să utilizeze perechi cheie / valoare, fiecare cheie și valoare sunt intrări în matrice proprie. Deci nu va fi incredibil de evidentă ce suntem fiecare referință de obiect atunci când am terminat. Totuși, rețineți că acest lucru este supus autorului. Tabelul flickr pe care l-am examinat mai devreme - sau tabela RSS pe care ar trebui să o verificați - este un API mult mai ușor de utilizat.

Deci, ce vrem în miniaplicația noastră twitter? Să arătăm avatar-ul din stânga și numele, numele de utilizator, cel mai recent tweet și ora celui mai recent tweet pe dreapta. Pentru a face acest lucru, să adăugăm mai jos aceste variabile:

 resursă ". $ meta [0] -> conținut. "" /> ";?> 
conținut. ""; ?> (conținut?>) meta [2] -> conținut; ?> ". $ item [1] -> meta [1] -> conținut. ''; ?>

Știu că este un pic cam critic, dar dacă te uiți la asta și apoi priviți obiectul pe care l-am tipărit în browser, veți vedea că funcționează bine. Începem cu o ancora și punem imaginea avatarului în ea. După aceea, în interiorul unui div, facem un alt link pentru numele, care se leagă de pagina lor de twitter. Apoi ne-am pus numele de utilizator și timpul ultimului tweet în etichete mici (și dacă vrem să reușim, am putea converti timpul la ceva mai puțin prietenos cu privirea). În cele din urmă, am pus ultimul lor tweet într-o ancoră; dând clic pe acesta vă va duce la pagina tweet-ului.

Iată cum arată acest lucru:


Nu încă destul, dar avem niște cârlige bune pentru CSS.

CSS

Nimic nu este complicat aici; începem să ieșim din seară pe peisaj:

 corp font: 13px / 1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; fundal: #ececec; padding: 10px;  img frontieră: 0; 

Apoi vom da o listă de aspect și simt:

 ul marja: 0; padding: 0; frontieră: 1px solid # 474747; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; fundal: #ccc; lățime: 50%;  li min-height: 50px; padding: 10px 5px; list-style-type: none; frontieră-fund: 1px solid # 474747; frontieră: 1px solid #ececec;  li div padding-left: 58px;  li a.img float: left; padding-dreapta: 5px;  a a display: bloc;  li: prim-copil border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0;  li: ultimul-copil border-bottom: 0; 

Ca o atingere finală, vom da fiecărui element din listă o umbră care să stea pe hover:

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

Acolo îl ai! Iată miniaplicația noastră de twitter finalizată:



Făcând-o cu JavaScript

Dacă preferați, puteți folosi jQuery pentru a executa o declarație YQL. Puteți obține plugin-ul numit jquery.queryYQL-pe GitHub. Este destul de simplu de utilizat; iată o modificare a interogării de exemplu:

 $ .queryYQL ("selectați * din feed unde url =" http://feeds.feedburner.com/nettuts?format=xml "", funcția (data) var ul = $ ("
    "); $ .each (date.query.results.item, function () $ ("
  • ") .append (this.title) .appendTo (ul);); ul.appendTo ($ (" # content ")););

O vei folosi?

YQL este un instrument destul de puternic; ar trebui să vă economisească mult timp oferindu-vă un singur API comun pentru a accesa conținutul pe tot globul. Trebuie să căutați cu adevărat lista tabelelor disponibile; veți găsi probabil ceva care vă va face mult timp. Unele mese furnizează chiar autentificarea și scrierea.

Este YQL un instrument pe care îl veți folosi în viitor? Anunță-mă în comentariile!

Cod