Share
De Yahoo Query-taal is een geweldig hulpmiddel dat uw webontwikkelingstijd zeker zal versnellen. Hoe complexer uw project, hoe meer tijd YQL u zal besparen. Dus, is het een kader, een toepassing, een drank? Vandaag zult u ontdekken wat het is en hoe u het moet gebruiken!
Deze tutorial bevat een screencast die beschikbaar is voor leden van Tuts + Premium.
Web-apps en webservices vermenigvuldigen zich als konijnen. Ze zijn allemaal leuk om mee te spelen (zoals konijnen) en leuk om te integreren in andere projecten (in tegenstelling tot konijnen). Maar elke dag een nieuwe API leren, is niet haalbaar of leuk. En dat is het probleem dat de Yahoo Query Language (YQL) oplost.
Zie YQL als de API voor internet, de enige API om ze allemaal te beheren. Het is niet moeilijk om te leren, dus laten we je nu meteen op de hoogte brengen!
Yahoo heeft een mooie console samengesteld waarmee we onze spieren kunnen uitrusten met YQL. Laad die console op, en laten we het verkennen.
In de rechterzijbalk kunt u een "tabel" in de "database" kiezen; een voorbeeldquery verschijnt bovenaan in het statement-vak. Aan de rechterkant van het instructievak kunt u zien wat de REST-query die overeenkomt met die zou doen. Hieronder ziet u de gegevens die door de query zijn geretourneerd; u kunt gegevens ontvangen in XML of JSON.
Laten we dus een zoekopdracht proberen!
selecteer * uit flickr.photos.interestingness (20)
Hier is een van de voorbeeldvragen; Dit levert twintig afbeeldingen op van de interessantheidsgroep van Flickr. De resultaten van de query zien er als volgt uit:
Laten we een andere proberen.
selecteer * from feed waarbij url = "http://rss.news.yahoo.com/rss/topstories"
Deze query retourneert elk van de recente items in een feed, in dit geval de Topverhalen van Yahoo News. Natuurlijk kunnen we het zelf aan, maar dit zal sneller en gemakkelijker zijn.
U zult merken dat deze beide zoekopdrachten voor Yahoo-sites zijn; out of the box YQL biedt alleen een tabel voor Yahoo-eigendommen. Maar ze hebben het uitbreidbaar gemaakt en veel mensen hebben andere tabellen geschreven. Om die te krijgen, klikt u op de "Toon gemeenschapstabellen" in de zijbalk. Nu kunnen we gebruik maken van alles van Netflix tot de New York Times, van GitHub tot Instapaper.
Dus hoe kunnen we YQL gebruiken in onze eigen projecten? Meestal implementeert u het met cURL, maar we kunnen dit ook in JavaScript doen. Laten we nu naar de cURL kijken, en wat we ervan krijgen.
Laten we die flickr-interessantheidsquery nemen waar we zojuist naar keken; Dit is wat we doen:
$ query = 'select * from flickr.photos.interestingness (20)'; // plaats de query in de volledige URL $ url = 'http://query.yahooapis.com/v1/public/yql?format=json&q='. urlencode ($ vraag); // stel de cURL $ c = curl_init () in; 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); // voer de cURL $ rawdata = curl_exec ($ c) uit; curl_close ($ c); // Converteer de geretourneerde JSON naar een PHP-object $ data = json_decode ($ rawdata); // Toon ons de data-echo ''; print_r ($ data); echo '';
Accentsconagua
$ rawData en converteer het vervolgens naar PHP. Het aanroepen van de print_r-functie geeft ons deze resultaten: 
Zoals u ziet, heeft ons $ data-object één eigenschap: query. Die eigenschap heeft alle smakelijke stukjes. U kunt zien vanaf de $ Data-> query-> count dat we 20 objecten hebben ontvangen, passend bij onze vraag. Maar het is $ Data-> query-> resultaten waar we echt in geïnteresseerd zijn; dat is waar onze gegevens zijn. Het resultaatobject heeft één array, foto's genaamd.
Gewapend met deze informatie zouden we de twintig laatste interessante foto's van flickr kunnen weergeven (we zouden de url http://www.flickr.com/photos/$owner/$id gebruiken en die variabele uit elk fotofoto nemen.)
Ik moet hier opmerken dat niet alle zoekopdrachten hun resultaten op dezelfde manier weergeven; sommige zijn niet zo ontwikkelaarvriendelijk als deze. Het is een goed idee om de YQL-console te gebruiken (of gewoon print_r) om het resultaatformaat te bekijken voordat u verder gaat.
Dus je hebt een idee van wat YQL is en hoe je het kunt gebruiken. Laten we nu YQL gebruiken in een klein project!
Laten we een Twitter-paneel bouwen dat de nieuwste tweets laat zien van alle Twitter-accounts van de Tuts + -sites. We beginnen met naar de YQL-console te gaan en naar onze opties te kijken. Zorg ervoor dat u de community-tabellen bekijkt. Kies in het gedeelte Twitter twitter.user.profile (die de laatste tweet bevat), of typ deze vraag in het instructievak:
selecteer * van twitter.user.profile waar
Zoals we kunnen zien aan de hand van de resultaten in de boomstructuur, is het object dat we terugkomen niet zo mooi geformatteerd als de Flickr-objecten; maar we zullen het redden!
Laten we beginnen met het vervangen van de Flickr-vraag in het bovenstaande voorbeeld door deze. Dit is wat we krijgen:
Wat is er mis? Omdat de twitter-datatabel niet een van de ingebouwde tabellen van Yahoo is, moeten we YQL ook vertellen om de community-tabellen te gebruiken. Hoe doen we dat? We voegen een de sleutel / waarde toe env = vastlegt: //datatables.org/alltableswithkeys naar onze basis-URL; nu zou de variabele $ url er als volgt uit moeten zien:
$ url = 'http://query.yahooapis.com/v1/public/yql?format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&q='. urlencode ($ vraag);
Als we het nu proberen ...
We hebben de twittergegevens!
Nu we het twitterprofiel van Nettuts met succes hebben ontvangen, laten we de andere bekijken. We moeten de profielen van de volgende accounts ophalen:
Dus moeten we nog acht cURL's naar YQL uitvoeren om alle gegevens te krijgen die we nodig hebben? Gelukkig heeft YQL hier onze rug; we kunnen dit gebruiken:
SELECT * FROM query.multi waarbij queries = "QUERIES GO HERE"
Gewapend met deze kennis zijn we klaar om onze widget te bouwen. We beginnen met een reeks van twitterqueries:
$ 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 WHERE id = \' phototuts \ ", 'audiotuts' => 'SELECT * FROM twitter.user.profile WHERE id = \' audiotuts \", 'psdtuts' => 'SELECT * FROM twitter.user.profile WHERE id = \' psdtuts \ ", 'aetuts' => 'SELECT * FROM twitter.user.profile WHERE id = \' aetuts \", 'cgtuts' => 'SELECT * FROM twitter.user.profile WHERE id = \ 'cgtutsplus \ ",' vectortuts '=>' SELECT * FROM twitter.user.profile WHERE id = \ 'vectortuts \",' activetuts '=>' SELECT * FROM twitter. user.profile WHERE id = \ 'activetuts \ "); Laten we nu onze volledige vraag maken:
$ query = 'SELECT * FROM query.multi where queries = "'. implode (';', $ twitter). '"'; Omdat het een beetje ingewikkeld wordt, plaatsen we de root-URL in zijn eigen variabele en plaatsen we alles samen. Merk op dat ik diagnostiek = false aan de root-URL heb toegevoegd; dit voorkomt dat YQL wat extra gegevens retourneert met onze resultaten. Waarom? Het maakt het alleen maar eenvoudiger als we de resultaten in een oogwenk inspecteren.
$ root = 'http://query.yahooapis.com/v1/public/yql?format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&diagnostics=false'; $ url = $ root. '& q ='. urlencode ($ vraag);
Nu we onze volledige URL hebben, laten we onze cURL maken, net zoals we al deden:
$ 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);
En net als de vorige keer vangen we de resultaten op, convergeren de JSON naar een PHP-object en geven ze weer ter inspectie.
$ data = json_decode (curl_exec ($ c)); curl_close ($ c); echo ''; print_r ($ data); echo '';
Ik zal ze je hier niet laten zien, maar je moet er doorheen kunnen lopen en de stukjes gegevens zien die we eruit willen halen. Merk op dat het resultatenobject een array met resultaten erin bevat; dat is een beetje onverwacht, maar ik denk dat het iets te maken heeft met het feit dat we meerdere vragen uitvoeren. Als je klaar bent, ga je terug naar de PHP en maak je een $ resultatenvariabele (en vergeet niet de print te verwijderen)r code):
$ results = $ data-> query-> resultaten-> resultaten;
Nu we onze gegevens hebben, is het tijd voor wat HTML. Laten we een basissjabloon invoeren onder de PHP:
Inleiding tot Yahoo Query-taal The Tuts + Network: Laatste tweet
In de lijst zullen we nu wat PHP gebruiken om alle items in de $ -resultatenarray die we hebben uitgepakt te herhalen en er een ingang voor te bouwen. Stel eerst de lus in:
Binnen dat lijstitem opent u een PHP-codeblokkering; we zouden moeten beginnen met het opzetten van een paar variabelen.
$ meta = $ resultaten [$ i] -> item-> meta; $ item = $ resultaten [$ i] -> item-> item; $ link = $ resultaten [$ i] -> item-> resource;
Helaas maakte de auteur van de twitter-tabel het terugkeer-object niet zo gemakkelijk om mee te werken; in plaats van sleutel / waarde-paren te gebruiken, zijn elke sleutel en waarde vermeldingen in hun eigen array. Het zal dus niet ongelofelijk voor de hand liggend zijn wat we elke objectreferentie zijn als we klaar zijn. Onthoud echter dat dit allemaal onder de verantwoordelijkheid van de auteur valt. De flickr-tabel waarnaar we eerder keken - of de RSS-tabel die u moet controleren - is een veel bruikbare API.
Dus wat willen we in onze twitterwidget? Laten we de gebruikersavatar aan de linkerkant en hun naam, gebruikersnaam, laatste tweet en de tijd van de laatste tweet aan de rechterkant weergeven. Om dit te doen, laten we dit onder die variabelen toevoegen:
bron. "". $ meta [0] -> inhoud. "" /> ";?>inhoud . ""; ?> (inhoud?>) meta [2] -> inhoud; ?> '. $ item [1] -> meta [1] -> inhoud. ''; ?>
Ik weet dat het een beetje cryptisch is, maar als je dit bekijkt en dan kijkt naar het object dat we in de browser hebben afgedrukt, zul je zien dat het goed werkt. We beginnen met een anker en plaatsen de avatar-afbeelding erin. Daarna maken we in een div een nieuwe link voor de naam, die linkt naar hun twitterpagina. Vervolgens zetten we hun gebruikersnaam en tijd van de laatste tweet in kleine tags (en als we dat wilden, konden we de tijd converteren naar iets dat een beetje meer kijkersvriendelijk is). Ten slotte plaatsen we hun nieuwste tweet in een anker; Als u hierop klikt, gaat u naar de pagina van de tweet.
Dit is hoe dit eruit ziet:
Nog niet zo goed, maar we hebben enkele goede haakjes voor onze CSS.
Niets ingewikkeld hier; we beginnen met een avond uit het landschap:
lichaam font: 13px / 1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; achtergrond: #ececec; padding: 10px; img border: 0;
Daarna geven we een lijst met het uiterlijk en gevoel:
ul margin: 0; padding: 0; rand: 1px vast # 474747; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; achtergrond: #ccc; width: 50%; li min-height: 50px; opvulling: 10px 5px; list-style-type: none; border-bottom: 1px solid # 474747; border-top: 1px vaste #ececec; li div padding-left: 58px; li a.img float: left; padding-right: 5px; li a display: block; li: first-child border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; li: last-child border-bottom: 0;
Als laatste aspect geven we elk lijstitem een schaduw bij zweven:
li: hover box-shadow: 0px 0px 15px # 000; -moz-box-shadow: 0px 0px 15px # 000; -webkit-box-shadow: 0px 0px 15px # 000;
Daar heb je het! Zie onze voltooide twitter widget:
Als u wilt, kunt u jQuery gebruiken om een YQL-instructie uit te voeren. U kunt de plug-in genaamd jquery.queryYQL-op GitHub downloaden. Het is vrij eenvoudig te gebruiken; hier is een wijziging van de voorbeeldvraag:
$ .queryYQL ("select * from feed where url =" http://feeds.feedburner.com/nettuts?format=xml "", function (data) var ul = $ ("YQL is een behoorlijk krachtige tool; het zou u veel tijd moeten besparen door u één gemeenschappelijke API te geven voor toegang tot inhoud op internet. Je moet echt door de lijst met beschikbare tabellen bladeren; je zult waarschijnlijk iets vinden dat je veel tijd zal kosten. Sommige tabellen bieden zelfs verificatie en schrijven.
Is YQL een tool die je in de toekomst zult gebruiken? Laat het me weten in de comments!
