Kako zgraditi svoj lasten iskalnik Instagram z jQuery in PHP

Odkar je Google razvalil takojšnje iskalne funkcije, je postal priljubljen trend v spletnem oblikovanju. Obstaja nekaj zabavnih primerov na spletu, kot je na primer aplikacija Google Slike podjetja Michael Hart. Tehnike so povsem preproste, kjer lahko tudi spletni razvijalec z zmerno izkušnjo jQuery prevzame API-je za programiranje in podatke JSON.

V tej vadnici želim pojasniti kako lahko zgradimo podobno spletno aplikacijo za hitro iskanje. Namesto da vlečemo slike iz Googla, lahko uporabimo Instagram, ki se je izjemno povečal v samo nekaj kratkih letih.

Ta družabna mreža se je začela kot mobilna aplikacija za iOS. Uporabniki lahko fotografirajo in jih delijo s svojimi prijatelji, pustijo komentarje in naložijo v omrežja tretjih oseb, kot je Flickr. Ekipa je pred kratkim pridobila Facebook in objavila popolnoma novo aplikacijo za Android Market. Njihova uporabniška baza se je izjemno povečala, zdaj pa lahko razvijalci izdelajo neverjetne mini-aplikacije, prav tako kot ta demo.

• Prikaži predstavitev
• Prenesi vir

Pridobivanje poverilnic API

Pred ustvarjanjem projektnih datotek bi morali najprej preučiti zamisli, ki so nastale v okviru Instagramovega API sistema. Potrebovali boste račun za dostop do portala razvijalca, ki ponuja koristna navodila za začetnike. Vse, kar potrebujemo za poizvedovanje v bazi podatkov Instagram, je a “ID stranke”.

V zgornji orodni vrstici kliknite povezavo Upravljanje odjemalcev in nato zeleni gumb “Registrirajte novo stranko”. Aplikaciji morate dati ime, kratek opis in URL spletnega mesta. URL in preusmeritev URI-ja sta lahko v tem primeru enaka vrednosti samo zato, ker ni potrebno preverjati pristnosti uporabnikov. Samo izpolnite vse vrednosti in ustvarite nove podrobnosti o aplikaciji.

Videli boste dolgo ime znakov ID CLIENT. Ta ključ bomo potrebovali pozneje, ko bomo gradili skript v ozadju, zato se bomo vrnili na ta razdelek. Za zdaj lahko začnemo z gradnjo naše jQuery aplikacije za takojšnje iskanje.

Privzeta vsebina spletne strani

Dejanski HTML je zelo majhen za količino funkcionalnosti, ki jo uporabljamo. Ker je večina slikovnih podatkov dinamično dodana, potrebujemo le nekaj manjših elementov znotraj strani. Ta koda je v notranjosti index.html mapa.

           
 
 Opomba: Dovoljeni presledki ali ločila niso dovoljeni. Iskanja so omejena na eno (1) ključno besedo.  
 
 
   

Uporabljam najnovejšo knjižnico jQuery 1.7.2 skupaj z dvema zunanjima .css in .js sredstvi. Polje za iskanje vnosa nima zunanjega obrazca, ker ne želimo nikoli poslati obrazca in povzročiti ponovnega nalaganja strani. V iskalnem polju sem onemogočil nekaj pritiskov na tipke, tako da so omejitve, ko uporabniki vnašajo, omejene.

Vse podatke o fotografijah bomo zapolnili v ID-ju v srednjem delu #photos. Ohranja naš osnovni HTML čist in enostaven za branje. Vsi drugi notranji elementi HTML bodo dodani preko jQuery, prav tako pa bodo odstranjeni pred vsakim novim iskanjem.

Izvlek iz API-ja

Najprej začnem z ustvarjanjem dinamičnega PHP skripta in se nato preselim v jQuery. Imenovana je moja nova datoteka instasearch.php ki bo vsebovala vse pomembne vmesne kljuke v API.

 
Prva vrstica označuje, da so naši povratni podatki oblikovani kot JSON namesto v golo besedilo ali HTML. To je potrebno, da funkcije JavaScript pravilno berejo podatke. Potem imam nekaj nastavitev spremenljivk, ki vsebujejo ID odjemalca aplikacije, vrednost iskanja uporabnika in končni URL API. Poskrbite, da posodobite $ client vrednost niza, ki ustreza vaši aplikaciji.
 
Za dostop do teh podatkov URL-ja moramo razčleniti vsebino datoteke ali uporabiti funkcije cURL. Funkcija po meri get_curl () je le majhen del kode, ki preverja trenutno konfiguracijo PHP.
 
Če nimate aktivirane funkcije cURL, boste poskusili aktivirati funkcijo in potegniti podatke prek lastne knjižnice funkcij. V nasprotnem primeru lahko preprosto uporabimo file_get_contents (), ki je ponavadi počasnejša, vendar še vedno deluje prav tako dobro. Potem lahko te podatke dejansko potegnemo v spremenljivko:
 
$ response = get_curl ($ api); 
 
Organiziranje in vračanje podatkov
 
Lahko bi samo vrnili izvirni odziv JSON iz Instagrama z vstavitvijo vseh informacij. Vendar pa je toliko dodatnih podatkov in zelo je nadležno, da se skozi vse prepletamo. Raje organiziram odzive Ajax in natančno določim, katere podatke potrebujemo.
 
Najprej lahko nastavimo prazno polje za vse slike. Potem pa znotraj za vsakogar() zanke bomo izvlekli JSON podatkovne objekte enega po enega. Potrebujemo le tri (3) specifične vrednosti, ki so $ src(URL slike v polni velikosti), $ thumb(URL sličice) in $ url(edinstvena permalink za fotografijo).
 
$ images = array (); if ($ response) foreach (json_decode ($ response) -> podatki kot $ item) $ src = $ item-> images-> standard_resolution-> url; $ thumb = $ item-> images-> sličica-> url; $ url = $ item-> link; $ images [] = array ("src" => htmlspecialchars ($ src), "thumb" => htmlspecialchars ($ thumb), "url" => htmlspecialchars ($ url));  
 
Tisti, ki ne poznajo zanke PHP, se lahko v procesu izgubijo. Ne osredotočajte se toliko na te odrezke kode, če ne razumete skladnje. Naše slike bodo vsebovale največ 16-20 edinstvenih vnosov fotografij, natisnjenih od zadnjega datuma objave. Potem lahko izpisamo vso to kodo na stran kot odziv jQuery Ajax.
 
print_r (str_replace (';' ',' / ', json_encode ($ images))); die (); 
 
Toda zdaj, ko smo se ozrli v zakulisje, lahko skočimo v skripto za frontend. Ustvaril sem datoteko ajax.js ki vsebuje nekaj dogodkov, ki so povezani z iskalnim poljem. Če še vedno spremljate vse do takrat, potem ste navdušeni, da smo tako blizu dokončanja!
 
jQuery Ključni dogodki
 
Ko prvič odprete dokument pripravljeno () priredim nekaj spremenljivk. Prvi dve se obnašata kot neposredni ciljni selektorji za iskalno polje in vsebnik fotografij. Uporabljam tudi časovnik za JavaScript za začasno ustavitev iskalne poizvedbe do 900 milisekund po tem, ko je uporabnik končal tipkanje.
 
$ (document) .ready (funkcija () var sfield = $ ("# s"); var container = $ ("# photos"); var timer; 
 
Obstajajo samo dve glavni funkcijski bloki, s katerimi delamo. Primarni upravljalnik se sproži z dogodkom .keydown (), ko je osredotočen na iskalno polje. Najprej preverimo, ali se koda ključa ujema z nobenim od naših prepovedanih ključev, in če je tako, zanikamo ključni dogodek. Sicer izbrišite privzeti časovnik in počakajte 900ms pred klicem instaSearch ().
 
/ ** * Glosar za ključno kodo * 32 = PROSTOR * 188 = COMMA * 189 = DASH * 190 = OBDOBJE * 191 = NOSILEC * 13 = VNOS * 219 = LEVA NOSILEC * 220 = NAPREDNA SLASH * 221 = DESNA NOSILEC * / $ (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);); 
 
Vsakič, ko posodobite vrednost, se bo samodejno preneslo novih rezultatov iskanja. Obstaja tudi veliko drugih kod za ključe, ki bi jih lahko onemogočili, da bi sprožili funkcijo Ajax, vendar jih je bilo preveč za uvrstitev v to vadnico..
 
Funkcija Ajax instaSearch ()
 
V moji novi funkciji po meri dodamo prvo “nalaganje” na iskalno polje. Ta razred bo posodobil ikono fotoaparata za novo sliko gif nalaganja. Prav tako želimo izprazniti vse možne podatke, ki ostanejo v razdelku fotografije. Spremenljivka poizvedbe se dinamično potegne iz trenutne vrednosti, vnesene v iskalno polje.
 
funkcija instaSearch () $ (sfield) .addClass ("nalaganje"); $ (container) .empty (); var q = $ (sfield) .val (); $ .ajax (tip: 'POST', url: 'instasearch.php', podatki: "q =" + q, uspeh: funkcija (podatki) $ (sfield) .removeClass ("nalaganje"); $ .each (podatki, funkcija (i, item) var ncode = '
 
'; $ (container) .append (ncode); ); , napaka: funkcija (xhr, type, exception) $ (sfield) .removeClass ("nalaganje"); $ (container) .html ("napaka:" + tip); );  
 
Če ste seznanjeni s funkcijo .ajax (), bi morali vsi ti parametri videti znani. Prenašam parameter za iskanje uporabnikov “q” kot podatki POST. Po uspehu in neuspehu odstranimo “nalaganje” in dodajte odziv nazaj v #photos ovoj.
 
Znotraj funkcije uspeha preletimo končni JSON odziv, da izvlečemo posamezne elemente div. To zanka lahko dosežemo s funkcijo $ .each () in ciljno usmerimo našo podatkovno zbirko odzivov. V nasprotnem primeru bo metoda napake neposredno izpisala kakršnokoli sporočilo o napaki odziva iz Instagram API-ja. In to je res vse!
 
 
 
Prikaži predstavitev
 
Prenesi vir
 
Končne misli
 
Ekipa Instagram je naredila čudovito delo, ki je naredilo takšno ogromno aplikacijo. API je včasih lahko počasen, vendar so podatki o odzivu vedno pravilno oblikovani in z njimi je zelo enostavno delati. Upam, da ta vadnica lahko pokaže, da je veliko moči, ki delajo z aplikacijami tretjih oseb.
 
Na žalost trenutne iskalne poizvedbe v Instagramu ne dovoljujejo več kot ene oznake naenkrat. To je omejeno na naš demo, vendar zagotovo ne odstrani nobenega od njegovih čar. Oglejte si primer v živo zgoraj in prenesite kopijo moje izvorne kode, s katero se lahko igrate. Sporočite nam tudi svoje mnenje v spodnjem razpravnem prostoru.