Kako izgraditi vlastiti Instagram Search Engine S jQuery i PHP

Otkako je Google razvio trenutne značajke pretraživanja, postao je popularan trend u web dizajnu. Postoji nekoliko zabavnih primjera na mreži, kao što je aplikacija aplikacije Google Slike tvrtke Michael Hart. Tehnike su sve prilično jednostavne, gdje čak i web developer s umjerenim jQuery iskustvom može pokupiti API-je za programiranje i JSON podatke.

Za ovaj tutorijal želim objasniti kako možemo izgraditi sličnu web aplikaciju za brzo pretraživanje. Umjesto da vučemo slike s Googlea, možemo koristiti Instagram koji je strahovito porastao u samo nekoliko kratkih godina.

Ova društvena mreža pokrenuta je kao mobilna aplikacija za iOS. Korisnici mogu fotografirati i dijeliti ih sa svojim prijateljima, ostavljati komentare i prenijeti na mreže trećih strana kao što je Flickr. Tim je nedavno kupio Facebook i objavio potpuno novu aplikaciju za Android Market. Njihova korisnička baza je strahovito porasla, a sada programeri mogu graditi nevjerojatne mini-aplikacije baš kao ovaj demo za instasearch.

Prikaži demo
Preuzimanje izvora

Dobivanje API vjerodajnica

Prije izrade bilo kakvih projektnih datoteka najprije bismo trebali pogledati ideje koje se nalaze u Instagramovom API sustavu. Trebat će vam račun za pristup portalu razvojnog programera koji nudi korisne upute za početnike. Sve što trebamo za upit u Instagram bazi podataka je “ID klijenta”.

U gornjoj alatnoj traci kliknite vezu Upravljanje klijentima, a zatim kliknite zeleni gumb “Registrirajte novog klijenta”. Aplikaciji morate dati naziv, kratki opis i URL web-lokacije. URL i URL za preusmjeravanje mogu biti iste vrijednosti u ovom slučaju samo zato što ne trebamo autentificirati korisnike. Samo ispunite sve vrijednosti i generirajte nove pojedinosti o aplikaciji.

Pojavit će se dugačak niz znakova ID KLIJENTA. Taj ćemo ključ trebati kasnije prilikom izrade pozadinske skripte, pa ćemo se vratiti na ovaj odjeljak. Za sada možemo započeti s izgradnjom naše jQuery aplikacije za brzo pretraživanje.

Zadani sadržaj web-stranice

Stvarni HTML je vrlo tanak za količinu funkcionalnosti koju koristimo. Budući da se većina slikovnih podataka dodaje dinamički, potrebno je samo nekoliko manjih elemenata unutar stranice. Ovaj kod se nalazi unutar index.html datoteka.

    Instagram Fotografija Instant Search App s jQuery         Napomena: Ne dopuštaju se razmaci ili interpunkcijski znakovi. Pretraživanja su ograničena na jednu (1) ključnu riječ.

Koristim najnoviju jQuery 1.7.2 knjižnicu zajedno s dva vanjska .css i .js resursa. Polje za pretraživanje unosa nema vanjski omot obrasca jer ne želimo ikada poslati obrazac i uzrokovati ponovno učitavanje stranice. Isključio sam nekoliko pritisaka na tipke unutar polja za pretraživanje tako da postoje ograničena ograničenja kada korisnici upisuju.

Popunit ćemo sve podatke o fotografiji unutar ID-a srednjeg dijela #photos. To drži naš osnovni HTML čist i jednostavan za čitanje. Svi ostali unutarnji HTML elementi bit će dodani putem jQuery, a također će biti uklonjeni prije svakog novog pretraživanja.

Povlačenje iz API-ja

Htio bih početi najprije stvaranjem naše dinamičke PHP skripte, a zatim premjestiti u jQuery. Imenovana je moja nova datoteka instasearch.php koji će sadržavati sve važne backend kuke u API-ju.

 Prvi redak označava da su naši povratni podaci oblikovani kao JSON umjesto otvorenog teksta ili HTML-a. To je potrebno da bi JavaScript funkcije ispravno čitale podatke. Nakon toga dobivam nekoliko postavki varijabli koje sadrže ID aplikacijskog klijenta, vrijednost za pretraživanje korisnika i konačni URL URL-a. Provjerite jeste li ažurirali $ klijent vrijednost niza koja odgovara vašoj aplikaciji.
 Za pristup ovim podacima URL-a potrebno je analizirati sadržaj datoteke ili koristiti cURL funkcije. Prilagođena funkcija get_curl () je samo mali dio koda koji provjerava trenutnu PHP konfiguraciju.
 Ako nemate aktiviran cURL, to će pokušati aktivirati značajku i povući podatke putem vlastite knjižnice funkcija. Inače možemo jednostavno koristiti file_get_contents () koji je sporiji, ali i dalje radi. Tada zapravo možemo povući te podatke u varijablu tako:
 $ response = get_curl ($ api); 
 Organiziranje i povrat podataka
 Mogli bismo samo vratiti ovaj originalni JSON odgovor iz Instagram-a sa svim učitanim informacijama. Ali ima toliko dodatnih podataka i vrlo je neugodno provlačiti kroz sve. Radije bih organizirao Ajax odgovore i izvukao točno koje podatke trebamo.
 Prvo možemo postaviti prazan niz za sve slike. Onda unutar za svakoga() petlju ćemo izvući JSON podatkovne objekte jedan po jedan. Trebamo samo tri (3) specifične vrijednosti koje su $ src(URL slike u punoj veličini), $ palac(URL minijature) i $ url(jedinstvena permalink fotografija).
 $ images = array (); ako ($ response) foreach (json_decode ($ reply) -> podaci kao $ item) $ src = $ item-> images-> standard_resolution-> url; $ thumb = $ item-> images-> thumbnail-> url; $ url = $ item-> link; $ images [] = array ("src" => htmlspecialchars ($ src), "thumb" => htmlspecialchars ($ thumb), "url" => htmlspecialchars ($ url));  
 Oni koji nisu upoznati s PHP petljama mogu se izgubiti u tom procesu. Nemojte se toliko usredotočiti na te isječke koda ako ne razumijete sintaksu. Naš niz slika sadržavat će najviše 16-20 jedinstvenih unosa fotografija povučenih od posljednjeg datuma objavljivanja. Tada možemo ispisati sav ovaj kôd na stranicu kao jQuery Ajax odgovor.
 print_r (str_replace (';' ',' / ', json_encode ($ images))); umrijeti(); 
 Ali sada kada smo pogledali iza scene možemo skočiti u frontend skriptiranje. Napravio sam datoteku ajax.js koja sadrži nekoliko rukovatelja događaja vezanih za polje za pretraživanje. Ako još uvijek pratite do tada, uzbuđeni smo, tako smo blizu završetka!
 jQuery Ključni događaji
 Prilikom prvog otvaranja dokumenta spreman() događaj Postavljam nekoliko varijabli. Prva dva se ponašaju kao izravni ciljni selektori za polje za pretraživanje i spremnik fotografija. Također koristim JavaScript timer za pauziranje upita za pretraživanje do 900 milisekundi nakon što korisnik završi s upisivanjem.
 $ (document) .ready (function () var sfield = $ ("# s"); var container = $ ("# photos"); var timer; 
 Postoje samo dvije glavne funkcije s kojima radimo. Primarni rukovatelj pokreće događaj .keydown () kada se fokusira na polje za pretraživanje. Najprije provjerimo da li ključni ključ odgovara bilo kojem od naših zabranjenih ključeva, i ako je tako, negiramo ključni događaj. Inače poništite zadani timer i pričekajte 900ms prije poziva instaSearch ().
 / ** * Glosar ključnog koda * 32 = PROSTOR * 188 = COMMA * 189 = DASH * 190 = RAZDOBLJE * 191 = BAKŠA * 13 = ENTER * 219 = LIJEVI NOSAČ * 220 = NAPRIJED SLASH * 221 = DESNA BRACKET * / $ (sfield) ) .keydown (funkcija (e) if (e.keyCode == '32' || e.keyCode == '188' || e.keyCode == '189' || e.keyCode == '13' | | e.keyCode == '190' || e.keyCode == '219' || e.keyCode == '221' || e.keyCode == '191' || e.keyCode == '220') e.preventDefault (); else clearTimeout (timer); timer = setTimeout (funkcija () instaSearch ();, 900);); 
 Svaki put kada ažurirate vrijednost, automatski će se preuzeti novi rezultati pretraživanja. Postoje i mnogi drugi ključni kodovi koje smo mogli blokirati za pokretanje funkcije Ajax - ali previše za unos u ovaj vodič.
 Funkcija Ajax instaSearch ()
 Unutar moje nove korisničke funkcije prvo dodajemo “Učitavam” na polje za pretraživanje. Ova klasa će ažurirati ikonu fotoaparata za novu sliku učitavanja. Također želimo isprazniti sve moguće podatke koji su ostali u odjeljku fotografija. Varijabla upita se dinamički izvlači iz trenutne vrijednosti unesene u polje za pretraživanje.
 funkcija instaSearch () $ (sfield) .addClass ("učitavanje"); $ (Spremnik) .empty (); var q = $ (sfield) .val (); $ .ajax (type: 'POST', url: 'instasearch.php', podaci: "q =" + q, uspjeh: funkcija (data) $ (sfield) .removeClass ("učitavanje"); $ .each (podaci, funkcija (i, item) var ncode = ' 
„; $ (Spremnik) .append (ncode); ); , pogreška: funkcija (xhr, tip, iznimka) $ (sfield) .removeClass ("učitavanje"); $ (container) .html ("Pogreška:" + tip); );  
 Ako ste upoznati s .ajax () funkcijom, onda bi svi ti parametri trebali izgledati poznato. Prolazim parametar za pretraživanje korisnika “q” kao POST podaci. Nakon uspjeha i neuspjeha uklanjamo “Učitavam” i dodajte bilo koji odgovor natrag u #photos omot.
 Unutar funkcije uspjeha prelazimo kroz konačni JSON odgovor kako bismo izvukli pojedinačne elemente div. Ovu petlju možemo ostvariti s $ .each () funkcijom i ciljanjem našeg niza podataka. Inače će metoda neuspjeha izravno izvesti bilo koju poruku o pogrešci odgovora iz Instagram API-ja. I to je doista sve što postoji!
  
 Prikaži demo
 Preuzimanje izvora
 
Završne misli
 Instagram tim je učinio divan posao skaliranjem tako ogromne primjene. API ponekad može biti spor, ali podaci o odgovorima uvijek su ispravno formatirani i vrlo jednostavni za rad. Nadam se da ovaj tutorial može pokazati da ima puno snage radi off 3rd party aplikacije.
 Nažalost, trenutni Instagram upiti za pretraživanje ne dopuštaju više od 1 oznake odjednom. Ovo je ograničavajuće za naš demo, ali zasigurno ne uklanja nikakav njegov šarm. Trebali biste pogledati gornji primjer uživo i preuzeti kopiju mog izvornog koda kako bi se igrao s njom. Osim toga, javite nam svoje mišljenje u području za raspravu u nastavku.