Kaip sukurti savo Instagram paieškos programą su jQuery ir PHP

Nuo to laiko, kai „Google“ išvedė tiesiogines paieškos funkcijas, ji tapo populiariu interneto dizaino tendencija. Yra keletas įdomių pavyzdžių internete, pavyzdžiui, „Michael Hart“ „Google“ vaizdų programa. Visi techniniai metodai yra gana paprasti, kai net interneto kūrėjas, turintis vidutinę jQuery patirtį, gali pasiimti programavimo API ir JSON duomenis.

Dėl šios pamokos noriu paaiškinti kaip galime sukurti panašią momentinės paieškos žiniatinklio programą. Vietoj to, kad iš „Google“ būtų atvaizdai, mes galime naudoti Instagram, kuris per keletą trumpų metų išaugo.

Šis socialinis tinklas prasidėjo kaip „iOS“ mobilioji programa. Vartotojai gali fotografuoti ir dalintis jais su draugais, palikti komentarus ir įkelti į trečiųjų šalių tinklus, pvz., „Flickr“. Komanda neseniai įsigijo „Facebook“ ir paskelbė visiškai naują „Android Market“ programą. Jų userbase išaugo labai, ir dabar kūrėjai gali kurti nuostabias mini programas, kaip ir šis instasearch demo.

Peržiūrėti demonstraciją
Atsisiųsti šaltinį

API kredencialų gavimas

Prieš kuriant bet kokius projekto failus pirmiausia turėtume apsvarstyti „Instagram“ API sistemos idėjas. Jums reikės paskyros, kad galėtumėte pasiekti kūrėjo portalą, kuriame siūlomos naudingos instrukcijos pradedantiesiems. Viskas, ko reikia užklausai dėl Instagram duomenų bazės, yra a “Kliento ID”.

Viršutinėje įrankių juostoje spustelėkite nuorodą Tvarkyti klientus, tada spustelėkite žalią mygtuką “Užregistruokite naują klientą”. Turėsite pateikti programai pavadinimą, trumpą aprašymą ir svetainės URL. URL ir peradresavimo URI šiuo atveju gali būti ta pati reikšmė tik todėl, kad nereikia autentifikuoti jokių naudotojų. Tiesiog užpildykite visas vertes ir sukurkite naują programos informaciją.

Pamatysite ilgą pavadinimų eilutę KLIENTO ID. Vėliau, kai bus sukurtas „backend“ scenarijus, mums reikės šio rakto, todėl grįšime į šį skyrių. Dabar mes galime pradėti mūsų jQuery momentinės paieškos programos kūrimą.

Numatytasis tinklalapio turinys

Tikrasis HTML yra labai plonas, kad galėtume naudoti funkcionalumą. Kadangi dauguma vaizdo duomenų yra pridedami dinamiškai, puslapio viduje reikia tik keleto mažesnių elementų. Šis kodas yra index.html failą.

    „Instagram Photo Instant Search App“ su „jQuery“         Pastaba: neleidžiama naudoti tarpų ar skyrybos ženklų. Ieškoma tik vieno (1) raktinio žodžio.

Naudoju naujausią jQuery 1.7.2 biblioteką kartu su dviem išoriniais .css ir .js ištekliais. Įvesties paieškos lauke nėra išorinio formos įvynioklio, nes nenorime, kad pateiktume formą ir perkrautų puslapį. Aš pašalinau keletą klavišų paspaudimų paieškos lauke, kad naudotojai, įvedę, įvestų daugiau apribojimų.

Visus nuotraukų duomenis užpildysime viduriniosios dalies ID viduje #nuotraukos. Jis saugo mūsų pagrindinį HTML švarų ir lengvai skaitomą. Visi kiti vidiniai HTML elementai bus pridėti per jQuery ir taip pat pašalinami prieš kiekvieną naują paiešką.

Ištraukimas iš API

Pirmiausia norėčiau pradėti kurti dinaminį PHP scenarijų ir tada pereiti į jQuery. Mano naujas failas yra pavadintas instasearch.php kurioje bus visi svarbūs „backend“ kabliai į API.

 Pirmoje eilutėje nurodoma, kad mūsų grąžinimo duomenys yra suformatuoti kaip JSON vietoj paprasto teksto ar HTML. Tai būtina, kad „JavaScript“ funkcijos tinkamai skaittų duomenis. Vėliau turiu keletą kintamųjų sąrankos, kuriose yra programos kliento ID, naudotojo paieškos vertė ir galutinis API URL. Įsitikinkite, kad atnaujinote $ klientas eilutės reikšmė, atitinkanti jūsų taikomąją programą.
 Norėdami pasiekti šiuos URL duomenis, turime išanalizuoti failo turinį arba naudoti CURL funkcijas. Pasirinktinė funkcija get_curl () yra tik nedidelis kodas, kuris tikrina dabartinę PHP konfigūraciją.
 Jei neturite CURL aktyvuoto, tai bandys aktyvuoti funkciją ir traukti duomenis per savo funkcijų biblioteką. Priešingu atveju mes galime tiesiog naudoti file_get_contents (), kuris paprastai yra lėtesnis, bet vis dar veikia taip pat. Tada mes galime iš tikrųjų ištraukti šiuos duomenis į tokį kintamąjį:
 $ response = get_curl ($ api); 
 Duomenų tvarkymas ir grąžinimas
 Mes galėjome tiesiog grąžinti šį originalų JSON atsakymą iš Instagram su visa įkelta informacija. Tačiau yra tiek daug papildomų duomenų, ir labai erzina viskas perjungti. Norėčiau organizuoti „Ajax“ atsakymus ir ištraukti tiksliai, kokių duomenų mums reikia.
 Pirmiausia galime nustatyti tuščią matricą visiems vaizdams. Tada viduje kiekvienam() „loop“ mes ištrauksime JSON duomenų objektus vienas po kito. Mums reikia tik trijų (3) konkrečių vertybių, kurios yra $ src(pilno dydžio vaizdo URL), $ nykščio(miniatiūros vaizdo URL) ir $ url(unikali nuotrauka permalink).
 $ images = masyvas (); jei ($ response) foreach (json_decode ($ response) -> duomenys kaip $ item) $ src = $ item-> images-> standard_resolution-> url; $ thumb = $ item-> images-> thumbnail-> url; $ url = $ item-> nuoroda; $ images [] = masyvas ("src" => htmlspecialchars ($ src), "thumb" => htmlspecialchars ($ thumb), "url" => htmlspecialchars ($ url));  
 Tie, kurie nėra susipažinę su PHP kilpomis, gali prarasti procesą. Jei nesuprantate sintaksės, nedvejokite šių kodų fragmentų. Mūsų atvaizdų rinkinyje bus ne daugiau kaip 16-20 unikalių nuotraukų, ištrauktų iš paskutinio paskelbimo datos. Tada mes galime išleisti visą šį kodą į puslapį kaip jQuery Ajax atsakymą.
 print_r (str_replace ('/', '/', json_encode ($ images))); mirti (); 
 Bet dabar, kai mes žiūrėjome už scenų, galime pereiti į priekinio skripto scenarijų. Sukūriau failą ajax.js kuriame yra pora įvykių tvarkytojų, susietų su paieškos laukeliu. Jei dar iki šiol sekate, susijaudinkite, kad esame taip arti užbaigimo!
 jQuery pagrindiniai įvykiai
 Pirmą kartą atidarius dokumentą pasiruošęs () įvykis, kuriame nustatau kelis kintamuosius. Pirmieji du elgiasi kaip tiesioginiai tikslinės atrankos paieškos laukui ir nuotraukų talpyklai. Taip pat naudoju „JavaScript“ laikmatį, kad sustabdytumėte paieškos užklausą iki 900 milisekundžių po to, kai vartotojas baigia rašyti.
 $ (dokumentas). jau (funkcija () var sfield = $ ("# s"); var container = $ ("# photos"); var laikmatis; 
 Yra tik du pagrindiniai funkcijų blokai, su kuriais dirbame. Pirminis tvarkytojas įjungiamas .keydown () įvykiu, kai jis sutelkiamas į paieškos lauką. Pirmiausia patikriname, ar raktų kodas atitinka bet kurį iš mūsų draudžiamų raktų, ir jei taip, paneigia pagrindinį įvykį. Priešingu atveju išvalykite numatytąjį laikmatį ir prieš skambindami palaukite 900 ms instaSearch ().
 / ** * keycode glossary * 32 = SPACE * 188 = COMMA * 189 = DASH * 190 = PERIOD * 191 = BACKSLASH * 13 = ENTER * 219 = KREPŠELIS * 220 = FORWARD SLASH * 221 = RIGHT 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 (); kitas clearTimeout (timer); timer = setTimeout (funkcija () instaSearch ();, 900);); 
 Kiekvieną kartą, kai atnaujinate vertę, ji automatiškai pradės ieškoti naujų paieškos rezultatų. Taip pat yra daug kitų raktų kodų, kuriuos galėjome užblokuoti iš „Ajax“ funkcijos įjungimo - bet per daug, kad galėtumėte įtraukti į šią pamoką.
 „Ajax instaSearch“ () funkcija
 Mano naujame priskirtos funkcijos viduje mes pirmą kartą pridedame a “pakrovimas” į paieškos lauką. Ši klasė atnaujins kameros piktogramą naujam įkėlimo gif vaizdui. Taip pat norime ištrinti visus galimus duomenis, esančius nuotraukų skyriuje. Užklausos kintamasis dinamiškai ištraukiamas iš dabartinės reikšmės, įvestos paieškos lauke.
 funkcija instaSearch () $ (sfield) .addClass ("pakrovimas"); $ (konteineris) .empty (); var q = $ (sfield) .val (); $ .ajax (type: 'POST', url: 'instasearch.php', duomenys: "q =" + q, sėkmė: funkcija (duomenys) $ (sfield) .removeClass ("loading"); $ .each (duomenys, funkcija (i, elementas) var ncode = ' 
„; $ (konteineris) .append (ncode); ); , klaida: funkcija (xhr, tipas, išimtis) $ (sfield) .removeClass ("loading"); $ (konteineris) .html („Klaida:“ + tipas); );  
 Jei esate susipažinę su .ajax () funkcija, visi šie parametrai turėtų atrodyti pažįstami. Pravažiuoju naudotojo paieškos parametrą “q” kaip POST duomenys. Sėkmingai ir nesėkmingai pašaliname “pakrovimas” klasės ir pridėti bet kokį atsakymą atgal į #nuotraukos vyniojamasis popierius.
 Sėkmės funkcijoje mes peržengiame galutinį JSON atsakymą, kad ištrauktume atskirus div elementus. Mes galime atlikti šią kilpą su $ .each () funkcija ir nukreipti mūsų atsako duomenų masyvą. Priešingu atveju gedimo metodas tiesiogiai perduos bet kokį atsakymo klaidos pranešimą iš Instagram API. Ir tai tikrai viskas!
  
 Peržiūrėti demonstraciją
 Atsisiųsti šaltinį
 
Galutinės mintys
 „Instagram“ komanda atliko nuostabų darbą tokiu milžinišku taikymu. Kartais API gali būti lėta, tačiau atsakymo duomenys visada yra tinkamai suformatuoti ir labai paprasta dirbti. Tikiuosi, kad ši pamoka gali parodyti, kad yra daug galios, veikiančios trečiųjų šalių programas.
 Deja, dabartinės Instagram paieškos užklausos neleidžia daugiau nei 1 žymos vienu metu. Tai apriboja mūsų demo, bet tai tikrai nepašalina jokio jos žavesio. Turėtumėte pasitikrinti pirmiau pateiktą pavyzdį ir atsisiųsti mano pradinio kodo kopiją, kad galėtumėte žaisti. Be to, praneškite mums savo mintis toliau pateikiamoje diskusijų srityje.