Oma Instagram-hakukoneen rakentaminen jQueryn ja PHP n avulla

Siitä lähtien, kun Google on kehittänyt pikahakuominaisuudet, siitä on tullut suosittu web-suunnittelun suunta. On joitakin hauskoja esimerkkejä verkossa, kuten Michael Hartin Google Images -sovellus. Tekniikat ovat melko suoraviivaisia, joissa jopa web-kehittäjä, jolla on kohtalainen jQuery-kokemus, voi poimia ohjelmointirajapinnan API: ta ja JSON-tietoja.

Tätä opetusta haluan selittää miten voimme rakentaa samanlaisen pikahaun web-sovelluksen. Sen sijaan, että vedät kuvia Googlesta, voimme käyttää Instagramia, joka on kasvanut valtavasti muutamassa lyhyessä vuodessa.

Tämä sosiaalinen verkko alkoi iOS: n mobiilisovelluksena. Käyttäjät voivat ottaa valokuvia ja jakaa niitä ystäviensä kanssa, jättää kommentteja ja ladata kolmansien osapuolten verkkoihin, kuten Flickriin. Facebook hankki äskettäin tiimin ja oli julkaissut uuden sovelluksen Android Marketille. Niiden userbase on kasvanut valtavasti, ja nyt kehittäjät voivat rakentaa uskomattomia mini-sovelluksia aivan kuten tämä instasearch-demo.

Näytä demo
Lataa lähde

API-tunnusten saaminen

Ennen projektitiedostojen luomista meidän pitäisi ensin tarkastella Instagramin API-järjestelmän ideoita. Tarvitset tilin kehittäjän portaaliin, joka tarjoaa hyödyllisiä ohjeita aloittelijoille. Tarvitsemme vain Instagram-tietokannan kyselyn a “Asiakastunnus”.

Napsauta ylimmässä työkalurivissä Hallitse asiakkaita -linkkiä ja napsauta vihreää painiketta “Rekisteröi uusi asiakas”. Sinun on annettava sovellukselle nimi, lyhyt kuvaus ja verkkosivuston URL-osoite. URL- ja uudelleenohjaus-URI voi olla sama arvo tässä tapauksessa vain siksi, että meidän ei tarvitse todentaa käyttäjiä. Täytä kaikki arvot ja luo uudet sovelluksen tiedot.

Näet pitkän merkkijonon ASIAKASTUNNUS. Tarvitsemme tätä avainta myöhemmin, kun rakennat backend-komentosarjan, joten palaamme tähän osioon. Nyt voimme aloittaa jQuery-pikahakusovelluksen rakentamisen.

Oletussivun sisältö

Varsinainen HTML on erittäin ohut käytettyjen toimintojen määrän suhteen. Koska suurin osa kuvatiedoista liitetään dynaamisesti, tarvitsemme vain muutamia pienempiä elementtejä sivun sisällä. Tämä koodi löytyy index.html tiedosto.

    Instagram Photo Instant Search App, jossa on jQuery         Huomautus: Ei välilyöntejä tai välimerkkejä. Haut rajoitetaan yhteen (1) avainsanaan.

Käytän uusinta jQuery 1.7.2 -kirjastoa sekä kaksi ulkoista .css- ja .js-resurssia. Syöttöhakukentässä ei ole ulkoista lomakekääreitä, koska emme halua koskaan lähettää lomaketta ja aiheuttaa sivun lataamisen uudelleen. Olen poistanut muutaman näppäinpainalluksen hakukentän sisällä niin, että käyttäjien kirjoittamisen aikana on rajoitettuja rajoituksia.

Tulostamme kaikki valokuvadatan keskiosan ID: n sisään #kuvat. Se pitää HTML-peruspalvelumme puhtaana ja helposti luettavissa. Kaikki muut sisäiset HTML-elementit lisätään jQueryn kautta ja poistetaan myös ennen jokaista uutta hakua.

Vetäminen API: sta

Haluaisin aloittaa ensin luomalla dynaamisen PHP-komentosarjan ja siirtymällä sitten jQueryyn. Uusi tiedosto on nimetty instasearch.php joka sisältää kaikki tärkeät backend-koukut API: han.

 Ensimmäinen rivi osoittaa, että palautustietomme on alustettu JSON: ksi pelkän tekstin tai HTML: n sijasta. Tämä on välttämätöntä, kun JavaScript-toiminnot lukevat tiedot oikein. Myöhemmin minulla on muutamia muuttujia, jotka sisältävät sovellusasiakkaan tunnuksen, käyttäjänhakuarvon ja lopullisen API-URL-osoitteen. Varmista, että päivität $ client merkkijonon arvo vastaa omaa sovellusta.
 Tämän URL-osoitteen käyttämiseksi meidän on jäsennettävä tiedoston sisältö tai käytettävä CURL-toimintoja. Mukautettu toiminto get_curl () on vain pieni koodi, joka tarkistaa nykyisen PHP-määrityksen.
 Jos sinulla ei ole CURL-aktivointia, se yrittää aktivoida ominaisuuden ja vetää tietoja omien toimintojen kirjastosta. Muuten voimme yksinkertaisesti käyttää file_get_contents (), joka on yleensä hitaampi, mutta toimii silti yhtä hyvin. Sitten voimme todella vetää nämä tiedot muuttujaan:
 $ response = get_curl ($ api); 
 Tietojen järjestäminen ja palauttaminen
 Voisimme vain palauttaa tämän alkuperäisen JSON-vastauksen Instagramista kaikilla ladatuilla tiedoilla. Mutta on niin paljon ylimääräisiä tietoja, ja se on erittäin ärsyttävää kiertää kaikkea. Haluan mieluummin järjestää Ajax-vastauksia ja vetää ulos juuri ne tiedot, joita tarvitsemme.
 Ensin pystymme asettamaan tyhjän taulukon kaikille kuville. Sitten sisällä jokaiselle() silmukka vedämme JSON-dataobjektit yksitellen. Tarvitsemme vain kolme (3) erityistä arvoa $ src(täysikokoisen kuvan URL-osoite), $ peukalo(pikkukuvan URL-osoite) ja $ url(ainutlaatuinen valokuvakuva).
 $ images = array (); jos ($ vastaus) foreach (json_decode ($ response) -> data kuten $ item) $ src = $ item-> images-> standard_resolution-> url; $ thumb = $ item-> kuvat-> thumbnail-> url; $ url = $ item-> linkki; $ images [] = array ("src" => htmlspecialchars ($ src), "thumb" => htmlspecialchars ($ thumb), "url" => htmlspecialchars ($ url));  
 Ne, jotka eivät tunne PHP-silmukoita, voivat kadota prosessissa. Älä keskity niin paljon näihin koodinpätkiin, jos et ymmärrä syntaksia. Meidän joukko kuvia sisältää enintään 16-20 ainutlaatuista valokuvien merkintää, jotka on vedetty viimeisimmästä julkaisupäivästä. Sitten voimme lähettää tämän koodin sivulle jQuery Ajax -vastauksena.
 print_r (str_replace ('/', '/', json_encode ($ images))); kuolla(); 
 Mutta nyt, kun olemme katsoneet kulissien takana, voimme hypätä frontend-skripteihin. Olen luonut tiedoston ajax.js joka sisältää pari tapahtumakäsittelijää, jotka on sidottu hakukenttään. Jos olet edelleen seurannut tähän asti, niin innostu, että olemme niin lähellä valmistumista!
 jQuery Key -tapahtumat
 Kun avaat asiakirjan ensimmäisen kerran valmis() Tapahtuma asetan pari muuttujaa. Kaksi ensimmäistä käyttäytyvät suorina kohdevalikoimina hakukenttään ja valokuvasäiliöön. Käytän myös JavaScript-ajastinta, jos haluat keskeyttää hakupyynnön 900 millisekunnin kuluttua siitä, kun käyttäjä on kirjoittanut tekstin.
 $ (asiakirja). jo (toiminto () var sfield = $ ("# s"); var container = $ ("# photos"); var ajastin; 
 Työskentelemme vain kahden päätoimintolohkon kanssa. Ensisijainen käsittelijä käynnistyy .keydown () -tapahtumalla, kun se kohdistetaan hakukenttään. Tarkistamme ensin, vastaako avainkoodi mihinkään kielletyistä avaimista, ja jos näin on, poista avaintapahtuma. Muussa tapauksessa poista oletusajastin ja odota 900 ms ennen soittoa instaSearch ().
 / ** * tunnusluku sanasto * 32 = SPACE * 188 = COMMA * 189 = DASH * 190 = PERIOD * 191 = BACKSLASH * 13 = ENTER * 219 = VASEN BRACKET * 220 = ULKOINEN SLASH * 221 = OIKEA BRACKET * / $ (sfield ) .keydown (toiminto (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 (ajastin); timer = setTimeout (toiminto () instaSearch ();, 900);); 
 Joka kerta kun päivität arvon, se siirtyy automaattisesti hakemaan uusia hakutuloksia. On myös monia muita avainkoodeja, jotka olisimme voineet estää Ajax-toiminnon käynnistämisestä - mutta liian monta mainittavaa opetusta varten.
 Ajax instaSearch () -toiminto
 Uuden muokatun toiminnon sisällä lisätään ensin a “Ladataan” luokkaa hakukenttään. Tämä luokka päivittää kameran kuvakkeen uudelle latausgif-kuvalle. Haluamme myös tyhjentää mahdolliset tiedot, jotka jäävät valokuvien osioon. Kyselymuuttuja vedetään dynaamisesti hakukenttään syötetystä nykyisestä arvosta.
 toiminto instaSearch () $ (sfield) .addClass ("lataus"); $ (Kontti) .empty (); var q = $ (sfield) .val (); $ .ajax (type: 'POST', url: 'instasearch.php', tiedot: "q =" + q, menestys: toiminto (data) $ (sfield) .removeClass ("loading"); $ .each (data, toiminto (i, kohde) var ncode = ' 
'; $ (Kontti) .append (ncode); ); , virhe: toiminto (xhr, tyyppi, poikkeus) $ (sfield) .removeClass ("lataus"); $ (kontti) .html ("Virhe:" + tyyppi); );  
 Jos tunnet .ajax () -toiminnon, kaikki nämä parametrit näyttävät tutulta. Ohitan käyttäjän hakuparametrin “q” kuin POST-tiedot. Onnistumisen ja epäonnistumisen jälkeen poistamme “Ladataan” luokkaan ja lisää kaikki vastaukset takaisin #kuvat kääre.
 Menestystoimintoon kuuluu silmukka läpi lopullisen JSON-vastauksen vetämällä yksittäiset div-elementit. Voimme saavuttaa tämän silmukan $ .each () -toiminnolla ja kohdistaa vastausdatapakettimme. Muussa tapauksessa epäonnistumismenetelmä välittää suoraan minkä tahansa vastausvirhesanoman Instagram API: sta. Ja se on todella kaikki siinä!
  
 Näytä demo
 Lataa lähde
 
Lopulliset ajatukset
 Instagram-tiimi on tehnyt loistavan työn skaalattaen näin valtavan sovelluksen. API voi olla ajoittain hidasta, mutta vastaustiedot on aina muotoiltu oikein ja niitä on helppo käsitellä. Toivon, että tämä opetusohjelma pystyy osoittamaan, että kolmannen osapuolen sovelluksissa on paljon virtaa.
 Valitettavasti nykyiset Instagram-hakukyselyt eivät salli enempää kuin 1 tunniste kerrallaan. Tämä rajoittuu demoihimme, mutta se ei varmasti poista mitään sen charmia. Sinun tulisi tarkistaa yllä oleva live-esimerkki ja lataa kopio lähdekoodista, jotta voin toistaa. Kerro meille myös ajatuksesi alla olevasta keskustelualueesta.