Share
Yahoo Query Language è un ottimo strumento che è garantito per accelerare i tempi di sviluppo del tuo web. Più complesso è il tuo progetto, più tempo sarà YQL a salvarti. Quindi, è un quadro, un'applicazione, una bevanda? Oggi scoprirai di cosa si tratta e come usarlo!
Questo tutorial include uno screencast disponibile per i membri Tuts + Premium.
Le app Web e i servizi Web si moltiplicano come conigli. Sono tutti divertenti da giocare con (come i conigli) e divertenti da integrare in altri progetti (diversamente dai conigli). Ma imparare una nuova API a giorni alterni non è fattibile o divertente. E questo è il problema che Yahoo Query Language (YQL) non è in grado di risolvere.
Pensa a YQL come l'API per il web, l'unica API per dominarli tutti. Non è difficile da imparare, quindi ti aiutiamo subito ad accelerare!
Yahoo ha messo insieme una console molto carina per farci piegare i muscoli con YQL. Carica quella console e esploriamola.
Nella barra laterale destra, puoi scegliere una "tabella" nel "database"; una query di esempio verrà visualizzata nella casella dell'istruzione in alto. A destra della casella dell'istruzione, puoi vedere quale sarebbe la query REST corrispondente. Di seguito, hai i dati restituiti dalla query; puoi ricevere dati in XML o JSON.
Quindi, proviamo una query!
seleziona * da flickr.photos.interestingness (20)
Ecco una delle query di esempio; Ciò restituirà venti immagini dal gruppo di interesse di Flickr. I risultati della query hanno questo aspetto:
Proviamo un altro.
seleziona * dal feed dove url = "http://rss.news.yahoo.com/rss/topstories"
Questa query restituisce ciascuno degli elementi recenti in un feed, in questo caso, le notizie principali di Yahoo News. Certo, potremmo gestirlo da soli, ma questo sarà più facile e veloce.
Noterai che entrambe queste query riguardano i siti Yahoo; out of the box YQL offre solo una tabella per le proprietà di Yahoo. Ma l'hanno reso estensibile e molte persone hanno scritto altre tabelle. Per ottenerli, fai clic su "Mostra tabelle della community" nella barra laterale. Ora possiamo sfruttare tutto, da Netflix al New York Times, da GitHub a Instapaper.
Quindi, come possiamo usare YQL nei nostri progetti? Molto spesso, lo implementerai usando cURL, ma potremmo farlo anche in JavaScript. Diamo un'occhiata al cURL ora, e cosa ne ricaviamo.
Prendiamo quella query di interesse su Flickr che abbiamo appena visto; ecco cosa facciamo:
$ query = 'seleziona * da flickr.photos.interestingness (20)'; // inserisce la query nell'URL completo $ url = 'http://query.yahooapis.com/v1/public/yql?format=json&q='. UrlEncode ($ query); // imposta 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); // esegue il cURL $ rawdata = curl_exec ($ c); curl_close ($ c); // Converti il JSON restituito in un oggetto PHP $ data = json_decode ($ rawdata); // Mostraci l'eco dei dati ''; print_r ($ data); eco '';
Accentsconagua
$ rawData e quindi convertirlo in PHP. Chiamare la funzione print_r ci dà questi risultati: 
Come puoi vedere, il nostro oggetto $ data ha una proprietà: query. Quella proprietà genera tutti i pezzi gustosi. Puoi vedere dal $ Dati-> query-> count che abbiamo ricevuto 20 oggetti, corrispondenti alla nostra richiesta. Ma è $ Dati->> Risultati query- che ci interessa davvero; ecco dove sono i nostri dati. L'oggetto risultati ha una matrice, chiamata foto.
Armati di queste informazioni, potremmo visualizzare le venti ultime foto interessanti di flickr (utilizzeremmo l'URL http://www.flickr.com/photos/$owner/$id, prendendo quelle variabili da ciascun oggetto fotografico).
Dovrei notare qui che non tutte le query mostreranno i loro risultati nello stesso modo; alcuni non sono altrettanto facili da sviluppare come questo. È una buona idea usare la console YQL (o semplicemente print_r) per verificare il formato dei risultati prima di procedere.
Quindi hai un'idea di cosa sia YQL e come puoi usarlo. Ora, usiamo YQL in un piccolo progetto!
Costruiamo un pannello di Twitter che mostrerà gli ultimi tweet di ciascuno degli account Twitter dei siti Tuts +. Inizieremo andando alla console YQL e osservando le nostre opzioni. Assicurati di visualizzare le tabelle della community. Sotto la sezione Twitter, scegli twitter.user.profile (che includerà l'ultimo tweet) oppure digita questa query nella casella dell'istruzione:
seleziona * da twitter.user.profile dove
Come possiamo vedere dai risultati nella vista ad albero, l'oggetto che otterremo non è formattato abbastanza bene come quelli di Flickr; tuttavia, ce la faremo!
Iniziamo sostituendo la query di Flickr nell'esempio precedente con questa. Ecco cosa otteniamo:
Cosa c'è che non va? Poiché il datatable di twitter non è una delle tabelle incorporate di Yahoo, dobbiamo dire a YQL di usare anche le tabelle della community. Come lo facciamo? Aggiungeremo una chiave / valore ENV = negozio: //datatables.org/alltableswithkeys al nostro URL di base; ora la variabile $ url dovrebbe apparire così:
$ url = 'http://query.yahooapis.com/v1/public/yql?format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&q='. UrlEncode ($ query);
Ora se proviamo ...
Abbiamo i dati di Twitter!
Ora che stiamo ottenendo con successo il profilo twitter di Nettuts, consideriamo gli altri. Abbiamo bisogno di ottenere i profili dei seguenti account:
Quindi dobbiamo fare ancora otto cURL in YQL per ottenere tutti i dati di cui abbiamo bisogno? Per fortuna, YQL ci da le spalle; possiamo usare questo:
SELECT * FROM query.multi where queries = "QUERIES GO HERE"
Armati di questa conoscenza, siamo pronti a costruire il nostro widget. Inizieremo con una serie di query su 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 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 \ "); Creiamo ora la nostra richiesta completa:
$ query = 'SELECT * FROM query.multi where queries = "'. implode (';', $ twitter). '"' '; Dal momento che è un po 'complicato, inseriremo l'URL di root nella sua variabile, quindi metteremo tutto insieme. Nota che ho aggiunto diagnostics = false all'URL di root; questo impedisce a YQL di restituire un po 'di dati extra con i nostri risultati. Perché? Semplicemente renderà più semplice l'ispezione dei risultati in un momento.
$ root = 'http://query.yahooapis.com/v1/public/yql?format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&diagnostics=false'; $ url = $ root. '& q ='. UrlEncode ($ query);
Ora che abbiamo il nostro URL completo, creiamo il nostro cURL, proprio come abbiamo già fatto:
$ 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);
E come l'ultima volta, prenderemo i risultati, confiniamo il JSON su un oggetto PHP e li stamperemo per l'ispezione.
$ data = json_decode (curl_exec ($ c)); curl_close ($ c); eco ''; print_r ($ data); eco '';
Non te li mostrerò qui, ma dovresti essere in grado di girarli e vedere i pezzi di dati che vogliamo estrarre. Si noti che l'oggetto risultati ha una matrice di risultati al suo interno; è un po 'inaspettato, ma credo che abbia qualcosa a che fare con il fatto che stiamo eseguendo più query. Quando hai finito, torna al PHP e crea una variabile $ risultati (e non dimenticare di rimuovere la stampacodice r):
$ risultati = $ dati-> query-> risultati-> risultati;
Ora che abbiamo i nostri dati, è tempo per un po 'di HTML. Inseriamo un modello base sotto il PHP:
Yahoo Query Language Introduzione La rete Tuts +: ultimi Tweet
Ora, all'interno della lista, useremo alcuni PHP per scorrere su ciascuno degli elementi nell'array $ results che abbiamo estratto e creare una voce per esso. Innanzitutto, imposta il ciclo:
All'interno di quell'elemento dell'elenco, apri un codice in codice PHP; dovremmo iniziare impostando alcune variabili.
$ meta = $ results [$ i] -> item-> meta; $ item = $ results [$ i] -> item-> item; $ link = $ risultati [$ i] -> oggetto-> risorsa;
Sfortunatamente, l'autore della tabella di Twitter non ha reso l'oggetto di reso troppo facile da lavorare; invece di utilizzare coppie chiave / valore, ogni chiave e valore sono voci nel proprio array. Quindi non sarà assolutamente ovvio quale sia il riferimento a ciascun oggetto quando abbiamo finito. Tuttavia, ricorda che questo è tutto soggetto all'autore. La tabella flickr che abbiamo esaminato in precedenza, o la tabella RSS da verificare, è un'API molto più utilizzabile.
Quindi cosa vogliamo nel nostro widget Twitter? Mostriamo l'avatar dell'utente sulla sinistra e il loro nome, nome utente, ultimo tweet e ora dell'ultimo tweet a destra. Per fare ciò, aggiungiamo questo sotto quelle variabili:
risorsa. "". $ meta [0] -> contenuto. "" /> ";?>contenuto. ""; ?> (contenuto?>) meta [2] -> contenuti; ?> '. $ item [1] -> meta [1] -> contenuto. ''; ?>
So che è un po 'criptico, ma se guardi questo e poi guardi l'oggetto che abbiamo stampato sul browser, vedrai che funziona bene. Iniziamo con un'ancora e inseriamo l'immagine dell'avatar. Dopodiché, all'interno di un div, creiamo un altro link per il nome, che si collega alla loro pagina Twitter. Poi abbiamo inserito il loro nome utente e il tempo dell'ultimo tweet in tag piccoli (e se lo avessimo voluto, avremmo potuto convertire il tempo in qualcosa di un po 'più intuitivo per gli spettatori). Alla fine, abbiamo messo i loro ultimi tweet in un'ancora; Cliccando su questo ti porterà alla pagina del tweet.
Ecco come appare:
Non ancora carino, ma abbiamo dei buoni ganci per i nostri CSS.
Niente di complicato qui; iniziamo di sera fuori dal paesaggio:
body font: 13px / 1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; sfondo: #ececec; padding: 10px; img border: 0;
Quindi daremo alla lista il suo aspetto e aspetto:
ul margine: 0; padding: 0; border: 1px solid # 474747; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; sfondo: #ccc; width: 50%; li min-height: 50px; imbottitura: 10px 5px; list-style-type: none; border-bottom: 1px solid # 474747; border-top: 1px solid #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;
Come tocco finale, daremo ad ogni elemento della lista un'ombra sul passaggio del mouse:
li: hover box-shadow: 0px 0px 15px # 000; -moz-box-shadow: 0px 0px 15px # 000; -webkit-box-shadow: 0px 0px 15px # 000;
Ecco qua! Guarda il nostro widget di twitter completato:
Se preferisci, puoi usare jQuery per eseguire un'istruzione YQL. Puoi ottenere il plugin, chiamato jquery.queryYQL, su GitHub. È abbastanza semplice da usare; ecco una modifica della query di esempio:
$ .queryYQL ("seleziona * dal feed dove url =" http://feeds.feedburner.com/nettuts?format=xml "", function (data) var ul = $ ("YQL è uno strumento piuttosto potente; dovrebbe farti risparmiare molto tempo dandoti un'unica API comune per accedere ai contenuti di tutto il web. Dovresti davvero sfogliare l'elenco delle tabelle disponibili; probabilmente troverai qualcosa che ti farà molto tempo. Alcune tabelle forniscono anche l'autenticazione e la scrittura.
YQL è uno strumento che userai in futuro? Fatemi sapere nei commenti!
