Share
Immagina di aver creato la bella mappa richiesta da un cliente; aggiungendo tutti i tipi di indicatori interessanti, pop-up, sovrapposizioni e foto personalizzate. Ma poi il cliente dice che vogliono essere in grado di aggiungere le proprie foto senza disturbare te stesso, o fare qualsiasi codice stesso. È qui che l'API di Flickr è molto utile.
L'API di Flickr ti consente di utilizzare essenzialmente il sito Web di Flickr come database o area di archiviazione per le tue foto. Utilizzando l'API di Flickr, puoi catturare le tue foto da Flickr e visualizzarle, tra l'altro, sulla tua mappa di Google. Ogni volta che tu o il tuo cliente aggiungete foto al vostro account sul sito Web di Flickr, la vostra mappa di Google viene automaticamente aggiornata.
Se dai un'occhiata alla demo, le foto che appaiono quando fai clic sul pulsante "Eventi più piccoli" vengono estratte da un account Flickr che ho impostato per questo tutorial. Oppure, se guardi la mia mappa di Portsmouth History, le foto che appaiono quando fai clic sul pulsante Old Photographs (menu di destra) sono tutte disegnate da Flickr.
L'API di Flickr ti consente di fare molto di più che catturare foto dal tuo account. Ti dà la possibilità di creare query complesse sui metadati, disegnando foto da tutti gli utenti di Flickr. Questo ti dà uno strumento estremamente potente che puoi usare in tutti i tipi di usi interessanti e creativi. Il rovescio della medaglia, tuttavia, è che l'ampia capacità dell'API può renderlo un po 'scoraggiante se non l'hai mai usato prima, e può essere difficile sapere da dove iniziare. Con questo in mente, questo tutorial si concentra sull'esempio di disegnare foto dal proprio account Flickr, dando una panoramica completa del processo. Una volta che hai il blocco di questo, dovresti essere in grado di fare buon uso del resto dell'API.
Questo tutorial si basa sulle esercitazioni precedenti, che riguardavano il diventare creativi con l'API di Google Maps e la creazione di sovrapposizioni personalizzate, spiegando come collegare l'API di Flickr all'API di Google Maps.
Un'API, o Application Programming Interface, è un modo ingegnoso per definire un insieme di comandi, pubblicati da un'azienda (ad esempio Facebook, Twitter, You Tube, Flickr), che consentono a chiunque di creare una versione altamente personalizzata del loro contenuto. Quando la gente parla di "mash-up", significa che ha utilizzato l'API di due o più aziende per combinare i contenuti. Ci sono letteralmente migliaia di queste API in giro; dare un'occhiata al sito Web programmabile per un elenco.
Il primo tutorial ha esaminato il modo in cui l'API di Google Maps ti consente di eseguire ogni tipo di operazione, tra cui la personalizzazione di colori, indicatori di mappa, stile della casella popup, livello di dettaglio, livello di zoom. L'API di Flickr è altrettanto ampia.
Per iniziare con l'API di Flickr devi creare un account Flickr, quindi aggiungere alcune foto al tuo account in modo da avere qualcosa su cui lavorare. Prova ad usare alcune immagini da posizioni diverse (questo sarà importante in seguito). Le immagini utilizzate in questo tutorial sono disponibili nei file sorgente nella parte superiore di questa pagina.
Nota: Se si utilizzano queste immagini, si prega di accreditare i loro creatori originali, elencati ai piedi di questa pagina.
Una volta che hai del contenuto da giocare, è ora di iniziare con l'API. Questi sono alcuni siti chiave.
Prima di iniziare, la prima cosa che devi fare è ottenere la tua chiave API. Prendi nota di questi dettagli; ne avrai bisogno in seguito!
Dai un'occhiata a questo semplice esempio; usa l'API di Flickr per catturare le foto dall'account Flickr che ho creato per questo tutorial. Invece di elencare qui frammenti di codice isolati, è più utile se dai un'occhiata al codice per l'intero sito web per vedere come funzionano le cose insieme. Vai all'esempio semplice, fai clic con il tasto destro sulla pagina e seleziona vedi la fonte. Oppure scarica la fonte dalla cima di questa pagina e separala.
I commenti all'interno del codice sorgente forniscono una spiegazione dettagliata, ma vale la pena dare una panoramica di alcune aree chiave.
La cosa più importante da capire è come accedere all'API di Flickr utilizzando un URL speciale. Costruisci questo URL per "chiedere" i dati che stai cercando. La prima parte di questo URL è -
http://api.flickr.com/services/rest/
Quindi aggiungi le cose per specificare cosa stai cercando. La prima cosa che aggiungi è il metodo -
http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos
Quindi aggiungi gli argomenti e il formato che ti servono, che hanno un & segno tra ognuno -
http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=1c9f777eb7446f34a7261dc1a54be4b2&user_id=99599718@N05&format=json&jsoncallback=?
Accentsconagua
ID utente argomento è l'account da cui vuoi disegnare le foto. Usa idGettr per risolvere questo problema.api_key è il codice che hai ottenuto nel passaggio precedente. Puoi costruire questo URL manualmente osservando la documentazione del metodo scelto, ad es. flickr.people.getPublicPhoto, ma questo è un po 'complicato.Fortunatamente, Flickr offre un collegamento a un comodo wizard (chiamato Explorer API) nella parte inferiore di ogni pagina "metodo". Una parola di avvertimento; per impostazione predefinita l'URL generato dalla procedura guidata ha 'nojsoncallback = 1' alla fine. Dato che abbiamo bisogno di spingere i risultati in una funzione, nel nostro caso la fine dovrebbe essere "nojsoncallback =?" (Vedi il formato di risposta JSON per maggiori dettagli).
Quindi, per costruire il tuo URL che chiama l'API di Flickr, devi:-
api_key argomento con la tua chiave.$ .getJSON ("http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=YOUR_FLICKR_API_KEY_HERE&user_id=YOUR_FLICKR_ID_HERE&format=json&jsoncallback=?", displayImages1); Una volta creato l'URL che chiama l'API di Flickr, abbiamo bisogno di un modo per catturare i risultati. Lo facciamo usando il metodo jQuery $ .getJSON. Il metodo $ .getJSON legge i dati nel formato JSON (ad esempio sotto) e chiama una funzione (in questo caso displayImages1), che elabora i dati in qualche modo (in questo caso la visualizzazione delle immagini su una pagina Web).
Mentre siamo in tema di JSON, vale la pena sottolineare che JSON è solo un modo per formattare o strutturare le informazioni in modo che un computer possa leggerle. Se si guarda l'output JSON (sopra), è possibile iniziare a vedere come il codice sta accedendo a ciascun bit dei dati. Quindi, per esempio, data.photos.photo (guarda nel displayImages1 funzione nel codice sorgente dell'esempio semplice) sta dirigendo il javaScript nel foto array nel JSON in cui è memorizzata la maggior parte delle informazioni. Quindi, per esempio, var photoID = item.id; sta accedendo all'elemento id per ogni foto.
Prima di proseguire, vale la pena dare un rapido sguardo a un altro esempio. Abbracciamo lo scopo principale di internet (cioè condividendo le foto dei gatti) e troviamo le immagini taggate con la parola "gattina".
Per massimizzare le nostre abilità di ricerca dei gattini, questa volta vogliamo cercare tra le foto caricate da tutti. Quindi il primo passo è costruire la query dell'API di Flickr, che assomiglia a questo -
http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=1c9f777eb7446f34a7261dc1a54be4b2&tags=kitten&format=json&jsoncallback=?
Questa chiamata API utilizza il metodo flickr.photos.search. Questo URL viene quindi inserito nel $ GetJSON metodo ed elaborato in modo simile al primo esempio. Dai un'occhiata all'esempio dal vivo per vedere il risultato. Il codice sorgente è disponibile dal link nella parte superiore di questa pagina.
Una volta che hai dato un'occhiata ad entrambi gli esempi, prova ad utilizzare l'API per prendere le tue immagini dal tuo account Flickr e visualizzarle su una pagina web.
Il tuo primo pennello con l'API di Flickr avrebbe dovuto dotarti dei principi chiave su come funziona. Tuttavia, è anche probabile che tu abbia iniziato a notare quanto sia vasto!
Questa non è una brutta cosa in quanto ti offre una vasta gamma di possibilità. Usa la documentazione dell'API come una sorta di 'lista della spesa'. Prenditi del tempo per esaminare i metodi (elencati a destra della home page della documentazione dell'API) per vedere cosa offre.
Potresti aver notato anche i diversi formati delle richieste (ad esempio stiamo usando 'rest' - come indicato dalla parola nell'URL che chiama l'API - sopra), i formati di risposta (ad esempio stiamo usando JSON) e i linguaggi di programmazione che puoi usare con l'API (ad esempio stiamo usando JavaScript). Ancora una volta, questo è un punto di forza dell'API in quanto significa che i contenuti di Flickr possono essere trasferiti in molte app diverse.
La combinazione utilizzata in questo tutorial è stata scelta perché è una buona combinazione per iniziare con l'apprendimento dell'API di Flickr e perché è la combinazione logica quando si collega questa API all'API di Google Maps basata su JavaScript. Vale comunque la pena dare un'occhiata alle altre opzioni disponibili sul lato sinistro della home page della documentazione dell'API.
La bellezza di Flickr è che puoi modificare tutti i tipi di metadati per ogni foto.
Il bit che ci interessa qui è la posizione geografica di ogni foto, ed è facile impostarlo per ogni immagine:
Devi ripetere questo processo per ciascuna delle tue foto.
Una volta che hai geotaggato le tue foto su Flickr, puoi visualizzarle su una mappa di Google. Fare clic qui per vedere una demo dal vivo e quindi fare clic con il tasto destro per visualizzare il codice sorgente.
Analogamente all'esempio precedente, i commenti all'interno del codice sorgente forniscono una spiegazione dettagliata. Tuttavia, vale la pena evidenziare alcuni punti chiave. In primo luogo, per costruire l'URL che chiama l'API di Flickr, usiamo di nuovo flickr.photos.search. Questa volta abbiamo incluso gli argomenti has_geo = 1 e extra = geo per assicurarsi che la latitudine e la longitudine per ogni immagine siano incluse anche nei risultati. Per vedere i risultati dell'URL che chiama l'API di Flickr, copialo (sotto) nel tuo browser e poi usa JSON Formatter per vedere l'output in modo più chiaro.
http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=1c9f777eb7446f34a7261dc1a54be4b2&user_id=99599718@N05&has_geo=1&extras=geo&format=json&jsoncallback=?
Inoltre, vale la pena sottolineare che, mentre il codice JavaScript scorre tra le immagini, utilizza anche l'API di Google Maps per creare indicatori di mappa utilizzando i valori di latitudine e longitudine dell'API di Flickr. Quindi, all'interno del corpo i tag, l'API di Google Maps viene utilizzata per creare la mappa stessa.
Dovresti essere in grado di ricreare qualcosa di simile usando le tue immagini che hai caricato su Flickr. Il sito Web iTouchMap è utile per capire quale dovrebbe essere il punto centrale della tua mappa.
Tutto quello che resta da fare ora è prendere tutto in questo tutorial e applicarlo alla mappa del festival del Regno Unito che abbiamo costruito sul primo e sul secondo tutorial di questa serie.
Questo è il tipo di cosa a cui miriamo. Se fai clic sul pulsante "Eventi più piccoli" vedrai le immagini disegnate da Flickr.
Per completezza ho anche aggiunto immagini, che non provengono da Flickr, alle icone del "festival principale". Inoltre, in modo da poter vedere le diverse opzioni in termini di finestre pop-up, ho usato sia le 'info box' (per i 'main festival') sia le 'info windows' predefinite per le foto da Flickr.
Questa mappa è stata creata apportando alcune modifiche al codice dell'esercitazione precedente e aggiungendo il codice dal mashup di Google Maps e Flickr (sopra). Per prima cosa creiamo una variabile (smallEventsToggle) per stabilire se i marcatori 'piccoli eventi' sono attualmente visualizzati o meno. E quindi creare una nuova opzione nel handelRequests funzione per gestire la situazione quando il pulsante "piccoli eventi" (smallEvents) viene cliccato. Infine, il codice del passaggio precedente viene aggiunto e vengono apportati alcuni ritocchi, come la modifica dell'indicatore di mappa predefinito.
Come al solito, per risparmiare frammenti di grandi dimensioni all'interno del tutorial, i commenti all'interno del codice sorgente scaricabile forniscono una spiegazione dettagliata.
Il prossimo tutorial vedrà l'ottimizzazione, la progettazione reattiva, il debug e il test.
I crediti per le foto sugli stessi indicatori della mappa possono essere trovati alla fine del primo tutorial.
