Share
Imaginați-vă că ați făcut harta frumoasă pe care o solicită un client; adăugând tot felul de marcaje interesante, ferestre pop-up, suprapuneri personalizate și fotografii. Dar apoi clientul menționează că vor să-și poată adăuga propriile fotografii fără să vă tulbure sau să facă coduri în sine. Acesta este locul în care API-ul Flickr este foarte util.
API-ul Flickr vă permite să utilizați în mod esențial site-ul Web Flickr ca bază de date sau zonă de stocare pentru fotografiile dvs. Folosind API-ul Flickr, poți să iei fotografiile de pe Flickr și să le afișezi, printre altele, pe harta Google. De fiecare dată când dvs. sau clientul dvs. adăugați fotografii pe contul dvs. pe site-ul Web Flickr, harta dvs. Google este actualizată automat.
Dacă vă uitați la demo, fotografiile care apar când faceți clic pe butonul "Evenimente mai mici" sunt scoase dintr-un cont Flickr pe care l-am setat pentru acest tutorial. Sau, dacă vă uitați la harta istoricului Portsmouth, fotografiile care apar când faceți clic pe butonul Vechi fotografii (meniul din dreapta) sunt toate desenate de pe Flickr.
API-ul Flickr vă permite să faceți mult mai mult decât să luați fotografii din propriul cont. Acesta vă oferă posibilitatea de a crea interogări complexe pe metadate, desenând fotografii de la toți utilizatorii Flickr. Acest lucru vă oferă un instrument extrem de puternic pe care îl puteți folosi la tot felul de utilizări interesante și creative. Cu toate acestea, dezavantajul este că capacitatea extensivă a aplicației API poate face un pic cam descurajant, dacă nu l-ați folosit înainte și poate fi dificil să știți de unde să începeți. Având în vedere acest lucru, acest tutorial se concentrează pe exemplul de a desena fotografii din propriul dvs. cont Flickr, oferind o plimbare completă a procesului. Odată ce ai atârnat de asta, ar trebui să fii capabil să folosești bine restul API-ului.
Acest tutorial se bazează pe tutorialele anterioare, care au acoperit obținerea de informații creative cu API-ul Google Maps și crearea de suprapuneri personalizate, explicând modul în care puteți conecta API-ul Flickr la API-ul Google Maps.
Un API sau o interfață de programare a aplicațiilor este un mod fantezist de a defini un set de comenzi, publicate de o companie (de exemplu, Facebook, Twitter, You Tube, Flickr), care permit oricui să creeze o versiune foarte personalizată a conținutului lor. Atunci când oamenii vorbesc despre "mash-up" înseamnă că au folosit API-ul a două sau mai multe companii pentru a combina conținutul. Există literalmente mii de astfel de API în jurul valorii de; aruncați o privire la site-ul Web programabil pentru o listă.
Primul tutorial a analizat modul în care API-ul Google Maps vă va permite să faceți tot felul de lucruri, inclusiv personalizarea culorilor, marcajele de hartă, stilul pop-up box, nivelul de detaliere, nivelul de zoom. API-ul Flickr este la fel de amplu.
Pentru a începe cu API-ul Flickr, trebuie să creați un cont Flickr, apoi să adăugați câteva fotografii în contul dvs., astfel încât să aveți ceva de colaborat. Încercați să utilizați câteva imagini din locații diferite (acest lucru va fi important mai târziu). Imaginile utilizate în acest tutorial sunt disponibile în fișierele sursă din partea de sus a acestei pagini.
Notă: Dacă utilizați aceste imagini, vă rugăm să le acordați creatorilor originali, listați la poalele acestei pagini.
Odată ce aveți conținut de jucat, este timpul să începeți cu API-ul. Acestea sunt câteva site-uri cheie.
Înainte de a începe, primul lucru pe care trebuie să-l faceți este să obțineți propria cheie API. Faceți notă de aceste detalii; veți avea nevoie de ei mai târziu!
Aruncați o privire la acest exemplu simplu; utilizează API-ul Flickr pentru a accesa fotografiile din contul Flickr pe care l-am creat pentru acest tutorial. În loc să listați fragmente de cod izolate aici, este mai util dacă vă uitați la codul pentru întregul site web pentru a vedea cum funcționează lucrurile împreună. Accesați exemplul simplu, faceți clic dreapta pe pagină și selectați Vizualizare sursă. Sau descărcați sursa din partea de sus a acestei pagini și trageți-o în afară.
Comentariile din codul sursă oferă o explicație detaliată, dar merită oferită o scurtă trecere a câtorva domenii cheie.
Cel mai important lucru pentru a-ți obține capul este modul în care accesezi API-ul Flickr folosind o adresă URL specială. Construiți această adresă URL pentru a "cere" datele pe care le faceți. Prima parte a acestui URL este -
http://api.flickr.com/services/rest/
Adăugați apoi lucruri pentru a specifica ce faceți după. Primul lucru pe care îl adăugați este metoda -
http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos
Adăugați apoi argumentele și formatul de care aveți nevoie, care au un semn între fiecare -
http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=1c9f777eb7446f34a7261dc1a54be4b2&user_id=99599718@N05&format=json&jsoncallback=?
Accentsconagua
numele de utilizator argument este contul din care doriți să desenați fotografiile. Utilizați idGettr pentru a rezolva această problemă.api_key este codul obținut în pasul anterior. Puteți construi această adresă URL manual, examinând documentația pentru metoda aleasă, de ex. flickr.people.getPublicPhoto, dar acest lucru este un pic fiddly.Din fericire, Flickr oferă un link către un expert expert (numit API Explorer) în partea de jos a fiecărei pagini de "metodă". Un cuvânt de avertizare, totuși; în mod implicit, adresa URL generată de expert are "nojsoncallback = 1" la sfârșit. Întrucât trebuie să împingem rezultatele într-o funcție, în cazul nostru, sfârșitul ar trebui să fie "nojsoncallback =?" (Pentru mai multe detalii, consultați formatul de răspuns JSON).
Deci, pentru a construi adresa URL care solicită API-ul Flickr, trebuie să:-
api_key argument cu propria cheie.$ .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); Odată ce ați construit adresa URL care solicită API-ul Flickr, avem nevoie de o modalitate de captare a rezultatelor. Facem acest lucru folosind metoda $ .getJSON jQuery. Metoda $ .getJSON citește în date care sunt în format JSON (de exemplu, mai jos) și apelează o funcție (în acest caz displayImages1), care procesează datele într-un fel (în acest caz, afișând imaginile dintr-o pagină web).
În timp ce suntem pe subiectul JSON, merită să subliniem că JSON este doar o modalitate de formatare sau structurare a informațiilor, astfel încât un calculator să o poată citi. Dacă vă uitați la ieșirea JSON (de mai sus), puteți începe să vedeți modul în care codul accesează fiecare bit al datelor. Deci, de exemplu, data.photos.photo (uită-te în displayImages1 funcția în codul sursă al exemplului simplu) direcționează javaScript în fotografie în JSON unde sunt stocate majoritatea informațiilor. Apoi, de exemplu, var photoID = element.id; accesează elementul id pentru fiecare fotografie.
Înainte de a continua, merită să aruncați o privire rapidă la un alt exemplu. Să îmbrățișăm scopul principal al internetului (adică să împărtășim poze cu pisici) și să găsim imagini etichetate cu cuvântul "pisoi".
Pentru a maximiza abilitățile de identificare a pisicilor, de data aceasta vrem să căutăm prin fotografiile încărcate de toți. Deci, primul pas este construirea interogării API Flickr, care arată astfel -
http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=1c9f777eb7446f34a7261dc1a54be4b2&tags=kitten&format=json&jsoncallback=?
Acest apel API utilizează metoda flickr.photos.search. Această adresă URL este apoi introdusă în $ .getJSON și sunt procesate în mod similar cu primul exemplu. Uitați-vă la exemplul live pentru a vedea rezultatul. Codul sursă este disponibil prin linkul din partea de sus a acestei pagini.
Odată ce ați aruncat o privire la cele două exemple, mergeți la utilizarea API-ului pentru a vă lua propriile imagini din contul dvs. Flickr și a le afișa pe o pagină web.
Prima dvs. perie cu API-ul Flickr ar fi trebuit să vă pregătească principiile cheie ale modului în care funcționează. Cu toate acestea, probabil că ați început să observați cât de vast este!
Acest lucru nu este un lucru rău, deoarece vă oferă o gamă largă de posibilități. Utilizați documentația API ca un fel de "listă de cumpărături". Faceți-vă timp să examinați metodele (listate în partea dreaptă a paginii de pornire a documentației API) pentru a vedea ce este oferit.
S-ar putea să fi observat, de asemenea, diferitele formate de solicitare (de exemplu, folosim "restul" - așa cum indică cuvântul din adresa URL care apelează API - de mai sus), formatele de răspuns (de exemplu, folosim JSON) cu API (de exemplu, folosim JavaScript). Din nou, aceasta este o forță a API, deoarece înseamnă că conținutul de pe Flickr poate fi portat în multe aplicații diferite.
Combinația folosită în acest tutorial a fost aleasă deoarece este o combinație bună pentru a începe să învățați despre API-ul Flickr și pentru că este combinația logică atunci când conectați acest API cu API-ul Google Maps API. Merită încă să aruncați o privire asupra celorlalte opțiuni disponibile în partea stângă a paginii de pornire a documentației API.
Frumusețea Flickr este că puteți edita tot felul de meta date pentru fiecare fotografie.
Bitul care ne interesează aici este locația geografică a fiecărei fotografii și este ușor să setați pentru fiecare imagine:
Trebuie să repetați acest proces pentru fiecare dintre fotografiile dvs..
După ce ați făcut geotagging-ul fotografiilor în Flickr, le puteți afișa pe o hartă Google. Faceți clic aici pentru a vedea o demonstrație live și apoi faceți clic dreapta pentru a vedea codul sursă.
Similar cu exemplul anterior, comentariile din codul sursă oferă o explicație detaliată. Cu toate acestea, merită subliniat câteva puncte-cheie. În primul rând, pentru a construi adresa URL care solicită API-ul Flickr, folosim din nou flickr.photos.search. De data aceasta am inclus argumentele has_geo = 1 și Extra = geo pentru a vă asigura că și latitudinea și longitudinea pentru fiecare imagine sunt incluse și în rezultate. Pentru a vedea rezultatele adresei URL care solicită API-ul Flickr, copiați-o (mai jos) în browser și apoi utilizați formatul JSON Formatter pentru a vedea ieșirea mai clar.
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=?
De asemenea, merită să subliniem faptul că, deoarece codul JavaScript se leagă prin imagini, utilizează de asemenea API-ul Google Maps pentru a crea marcaje de hartă utilizând valorile latitudinii și longitudinii din API-ul Flickr. Apoi, în cadrul corp tag-uri, API-ul Google Maps este folosit pentru a crea harta în sine.
Ar trebui să puteți recrea ceva similar folosind propriile imagini pe care le-ați încărcat în Flickr. Site-ul iTouchMap este util pentru a afla care ar trebui să fie punctul central al hărții dvs..
Tot ce rămâne să faceți acum este să luați tot ceea ce este acoperit în acest tutorial și să-l aplicați pe Harta Festivalului din Marea Britanie pe care am construit-o în primul și al doilea tutoriale din această serie.
Acesta este genul de lucru pe care îl urmărim. Dacă faceți clic pe butonul "Evenimente mai mici", veți vedea imaginile extrase din Flickr.
Pentru completare, am adăugat, de asemenea, imagini care nu vin de pe Flickr, pictogramele "principalului festival". De asemenea, pentru a vedea diferitele opțiuni în ceea ce privește casetele pop-up, am folosit atât "casetele de informații" (pentru "principalele festivaluri"), cât și ferestrele informative implicite pentru fotografiile de pe Flickr.
Această hartă a fost creată făcând câteva modificări ale codului din tutorialul anterior și adăugând codul din hărțile Google Maps și Flickr (de mai sus). Mai întâi creăm o variabilă (smallEventsToggle) pentru a ține seama dacă marcajele "evenimente mici" sunt afișate sau nu. Și apoi creați o nouă opțiune în handelRequests pentru a face față situației când butonul "evenimente mici" (smallEvents). În cele din urmă, se adaugă codul din pasul anterior și câteva atingeri de finisare, cum ar fi schimbarea marcatorului de hartă implicit.
Ca de obicei, pentru a vă păstra fragmente mari în cadrul tutorialului, comentariile din codul sursă descărcabilă oferă o explicație detaliată.
Următorul tutorial va analiza optimizarea, proiectarea, depanarea și testarea.
Creditele pentru fotografiile de pe marcatorii de hărți se găsesc la sfârșitul primului tutorial.
