Kuidas luua oma Instagram otsingumootor JQuery ja PHP abil

Alates Google'i kiirotsingufunktsioonide loomisest on sellest saanud populaarne veebidisaini trend. On mõningaid lõbusaid näiteid, nagu Michael Hart Google'i rakendused. Need tehnikad on üsna lihtsad, kus isegi mõõduka jQuery kogemusega veebiarendaja võib programmeerida API-sid ja JSON-andmeid.

Selle õpetuse jaoks tahan ma seletada kuidas me saame ehitada sarnase kiire otsingu veebirakenduse. Selle asemel, et Google'ist pilte tõmmata, saame kasutada Instagramit, mis on paari lühikese aasta jooksul tohutult kasvanud.

See sotsiaalne võrgustik alustas mobiilirakendust iOS-i jaoks. Kasutajad saavad fotosid jagada oma sõpradega, jätta kommentaare ja üles laadida kolmanda osapoole võrkudesse, nagu Flickr. Meeskond omandas hiljuti Facebook ja oli avaldanud täiesti uue rakenduse Android Marketile. Nende kasutajabaas on kasvanud tohutult ja nüüd saavad arendajad ehitada suurepäraseid mini-rakendusi nagu see instasearch demo.

Kuva demo
Allalaadimise allikas

API volikirjade hankimine

Enne projektifailide loomist peaksime kõigepealt uurima Instagrami API-süsteemi ideid. Arendaja portaali juurde pääsemiseks on vaja kontot, mis pakub algajatele kasulikke juhiseid. Kõik, mida me vajame Instagram-andmebaasi küsimiseks, on a “Kliendi ID”.

Klõpsake ülemisel tööriistaribal linki Halda kliente ja seejärel klõpsake rohelist nuppu “Registreerige uus klient”. Peate andma rakendusele nime, lühikirjelduse ja veebisaidi URL-i. URL-i ja ümbersuunamise URI võib olla antud juhul sama väärtusega ainult seetõttu, et me ei pea kasutajaid autentima. Täitke kõik väärtused ja looge uued rakenduse üksikasjad.

Näete pikka tähemärki KLIENDI ID. Vajame seda võtit hiljem taustaprogrammi ehitamisel, nii et me naaseme selle sektsiooni juurde. Praegu saame alustada meie jQuery kiirotsingu rakenduse ehitamist.

Vaikimisi veebilehe sisu

Tegelik HTML on väga vähe kasutatava funktsiooni jaoks. Kuna enamik pildiandmeid on dünaamiliselt lisatud, vajame lehe sees ainult mõningaid väiksemaid elemente. See kood on sees index.html faili.

    Instagram Photo Instant Search App koos jQueryga         Märkus: tühikuid või kirjavahemärke ei ole lubatud. Otsingud on piiratud ühe (1) märksõnaga.

Ma kasutan uusimat jQuery 1.7.2 raamatukogu koos kahe välise .css ja .js ressursiga. Sisendotsingu väljal ei ole välist vormiümbrist, sest me ei taha kunagi vormi esitada ja lehe uuesti laadimist põhjustada. Olen välja lülitanud mõned klahvivajutused otsinguväljal, nii et kasutajate kirjutamisel on piiratumad piirangud.

Me täidame kõik foto andmed keskmisele ID-le #photos. See hoiab meie põhilised HTML puhtad ja kergesti loetavad. Kõik teised sisemised HTML-elemendid lisatakse jQuery kaudu ja eemaldatakse ka enne iga uut otsingut.

Tõmbamine API-lt

Sooviksin kõigepealt alustada oma dünaamilise PHP skripti loomisega ja seejärel liikuda jQuery-sse. Minu uus fail on nimega instasearch.php mis sisaldab kõiki olulisi taustaprogramme API-sse.

 Esimene rida näitab, et meie tagasipöördumisandmed on vormindatud kui JSON lihtteksti või HTML asemel. See on vajalik JavaScripti funktsioonide jaoks andmete õigeks lugemiseks. Hiljem on mul mõned muutujate seadistused, mis sisaldavad rakenduse kliendi ID-d, kasutaja otsingu väärtust ja lõplikku API URL-i. Veenduge, et värskendate $ klient stringi väärtus, mis sobib teie enda rakendusega.
 Sellele URL-i andmetele pääsemiseks peame failide sisu analüüsima või kasutama CURL-funktsioone. Kohandatud funktsioon get_curl () on lihtsalt väike kood, mis kontrollib praegust PHP konfiguratsiooni.
 Kui sul ei ole CURL-i aktiveeritud, püüab see funktsiooni aktiveerida ja andmeid tõmmata oma funktsioonide raamatukogu kaudu. Vastasel juhul saame lihtsalt kasutada failit___kontinendid (), mis kipuvad olema aeglasemad, kuid toimivad siiski sama hästi. Siis saame tegelikult need andmed selliseks muutujaks tõmmata:
 $ response = get_curl ($ api); 
 Andmete organiseerimine ja tagastamine
 Me võime lihtsalt selle originaalse JSON-i vastuse tagasi saata kõikidest üles laaditud andmetest. Aga seal on nii palju lisateavet ja see on väga tüütu, et kõike läbi sõita. Soovin korraldada Ajaxi vastuseid ja tõmmata täpselt välja, milliseid andmeid vajame.
 Kõigepealt saame kõikide piltide jaoks tühja massiivi seadistada. Siis sees igaühele() silmus, eemaldame JSON-i andmeobjektid ükshaaval. Vajame ainult kolme (3) konkreetset väärtust, mis on $ src(täissuuruses pildi URL), $ pöidla(pisipiltide URL) ja $ url(unikaalne foto permalink).
 $ images = massiiv (); kui ($ vastus) foreach (json_decode ($ response) -> andmed kui $ 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));  
 Need, kes ei tunne PHP silmuseid, võivad protsessis kaduda. Ärge keskenduge nii palju nendele koodilõigetele, kui te ei mõista süntaksit. Meie piltide kogum sisaldab kõige rohkem 16-20 unikaalset fotode kirjet, mis on tõmmatud viimasest avaldamiskuupäevast. Siis saame kogu koodi sisestada lehele jQuery Ajax vastusena.
 print_r (str_replace ('/', '/', json_encode ($ images))); surra (); 
 Aga nüüd, kui me vaatame kulisside taga, saame hüpata esiplaanile. Olen loonud faili ajax.js mis sisaldab otsinguväljale siduvaid paari sündmuskäitlejaid. Kui sa siiani jätkad, siis ärge unustage, et oleme nii lähedal!
 jQuery võtmeüritused
 Dokumendi esmakordsel avamisel valmis () sündmus, kus olen paar muutujat. Kaks esimest käituvad otsese sihtvalijana otsinguväljale ja fotode konteinerile. Kasutan ka JavaScripti taimerit otsingupäringu peatamiseks kuni 900 millisekundini pärast seda, kui kasutaja on kirjutamise lõpetanud.
 $ (dokument) .ready (funktsioon () var sfield = $ ("# s"); var container = $ ("# photos"); var taimer; 
 Meil on ainult kaks peamist funktsiooni plokki. Primaarset käitlejat käivitab .keydown () sündmus, kui see on suunatud otsinguväljale. Kõigepealt kontrollime, kas võtmekood vastab ühele meie keelatud võtmetele, ja kui see on nii, siis tühistage võti. Vastasel juhul tühjendage vaikimisi taimer ja oodake enne helistamist 900 ms instaSearch ().
 / ** * klahvikood glossary * 32 = SPACE * 188 = COMMA * 189 = DASH * 190 = PERIOD * 191 = BACKSLASH * 13 = ENTER * 219 = LEFT BRACKET * 220 = EDASI SLASH * 221 = PAREM BRACKET * / $ (sfield ) .keydown (funktsioon (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 (taimer); timer = setTimeout (funktsioon () instaSearch ();, 900);); 
 Iga kord, kui uuendate väärtust, läheb see automaatselt uute otsingutulemuste juurde. Samuti on palju teisi võtmekoode, mida oleksime võinud blokeerida Ajax-funktsiooni käivitamisel - kuid liiga palju, et seda õpetust kasutada.
 Ajax instaSearch () funktsioon
 Minu uue kohandatud funktsiooni sees lisame kõigepealt a “laadimine” klassi otsinguväljale. See klass uuendab kaamera ikooni uue laadimisgif-pildi jaoks. Samuti soovime tühistada võimalikud andmed, mis on jäänud fotode sektsioonis. Päringu muutuja tõmmatakse dünaamiliselt otsinguväljale sisestatud praegusest väärtusest.
 funktsioon instaSearch () $ (sfield) .addClass ("laadimine"); $ (konteiner) .empty (); var q = $ (sfield) .val (); $ .ajax (tüüp: 'POST', url: 'instasearch.php', andmed: "q =" + q, edu: funktsioon (andmed) $ (sfield) .removeClass ("laadimine"); $ .each (andmed, funktsioon (i, kirje) var ncode = ' 
'; $ (konteiner) .append (ncode); ); , viga: funktsioon (xhr, tüüp, erand) $ (sfield) .removeClass ("laadimine"); $ (konteiner) .html ("Error:" + tüüp); );  
 Kui sa tunned .ajax () funktsiooni, peaksid kõik need parameetrid tundma tuttavad. Ma läbin kasutaja otsingu parameetri “q” kui POST-andmeid. Edu ja ebaõnnestumise korral eemaldame selle “laadimine” klassi ja lisage vastus tagasi #photos ümbris.
 Edufunktsioonis oleme silmus läbi JSONi lõpliku vastuse, et tõmmata üksikud div elemendid välja. Me saame seda silmusmängu teostada $ .each () funktsiooniga ja suunata meie vastuseandmete massiivi. Vastasel juhul väljastab ebaõnnestumise meetod otseselt mis tahes vastuse veateate Instagram API-lt. Ja see on tõesti kõik, mis sellel on!
  
 Kuva demo
 Allalaadimise allikas
 
Lõplikud mõtted
 Instagrami meeskond on teinud sellist tohutut rakendust suurepärast tööd. API võib aeg-ajalt olla aeglane, kuid vastuse andmed on alati õigesti vormindatud ja väga lihtne töötada. Loodan, et see õpetus suudab tõestada, et kolmanda osapoole rakendustest töötab palju võimu.
 Kahjuks ei võimalda praegused Instagrami otsingupäringud korraga rohkem kui 1 märgendit. See piirdub meie demoga, kuid kindlasti ei eemalda see selle võlu. Peaksite üle vaatama ülaltoodud live näite ja alla laadima oma lähtekoodi koopia. Lisaks andke meile teada oma mõtted alljärgnevas arutelupiirkonnas.