Kā izveidot savu Instagram meklētājprogrammu ar jQuery un PHP

Kopš Google izvēršanas tūlītējās meklēšanas funkcijas, tā ir kļuvusi par populāru tendenci web dizains. Ir daži jautri piemēri tiešsaistē, piemēram, Michael Hart Google attēlu lietotne. Šīs metodes ir diezgan vienkāršas, ja pat tīmekļa izstrādātājs ar mērenu jQuery pieredzi var uzņemt programmēšanas API un JSON datus.

Šai apmācībai es vēlos paskaidrot kā mēs varam izveidot līdzīgu tūlītējas meklēšanas tīmekļa lietojumprogrammu. Tā vietā, lai izvilktu attēlus no Google, mēs varam izmantot Instagram, kas dažu īsu gadu laikā ir ievērojami pieaudzis.

Šis sociālais tīkls sākās kā mobilā lietotne iOS. Lietotāji var fotografēt un kopīgot tos ar saviem draugiem, atstāt komentārus un augšupielādēt trešās puses tīklos, piemēram, Flickr. Komanda nesen iegādājās Facebook un bija publicējusi pavisam jaunu lietotni Android Market. Viņu lietotāju bāze ir izaugusi ārkārtīgi, un tagad izstrādātāji var veidot pārsteidzošas mini-progr tāpat kā šo instasearch demo.

Skatīt demonstrāciju
Lejupielādēt avotu

API sertifikātu iegūšana

Pirms jebkura projekta faila izveides mums vispirms ir jāpārbauda idejas, kas saistītas ar Instagram API sistēmu. Jums būs nepieciešams konts, lai piekļūtu izstrādātāja portālam, kas piedāvā noderīgus norādījumus iesācējiem. Viss, kas nepieciešams, lai vaicātu Instagram datu bāzei, ir a “Klienta ID”.

Augšējā rīkjoslā noklikšķiniet uz saites Pārvaldīt klientus, pēc tam noklikšķiniet uz zaļās pogas “Reģistrējiet jaunu klientu”. Jums būs jāpiešķir lietojumprogrammai nosaukums, īss apraksts un vietnes URL. Šajā gadījumā URL un novirzīšanas URI var būt vienāda vērtība tikai tāpēc, ka mums nav nepieciešams autentificēt nevienu lietotāju. Vienkārši aizpildiet visas vērtības un ģenerējiet jaunās lietojumprogrammas detaļas.

Jūs redzēsiet garu rakstzīmju virkni KLIENTA ID. Mums būs vajadzīgs šis taustiņš vēlāk, veidojot backend skriptu, tāpēc mēs atgriezīsimies šajā sadaļā. Tagad mēs varam sākt mūsu jQuery tūlītējās meklēšanas programmas izveidi.

Noklusējuma tīmekļa satura saturs

Faktiskais HTML ir ļoti niecīgs, ņemot vērā izmantoto funkcionalitāti. Tā kā lielākā daļa attēla datu tiek pievienoti dinamiski, lapā ir nepieciešami tikai daži mazāki elementi. Šis kods ir atrodams index.html failu.

    Instagram Photo Instant Search lietotne ar jQuery         Piezīme: Nav atļautas atstarpes vai pieturzīmes. Meklējumi attiecas tikai uz vienu (1) atslēgvārdu.

Es izmantoju jaunāko jQuery 1.7.2 bibliotēku kopā ar diviem ārējiem .css un .js resursiem. Ieejas meklēšanas laukā nav ārējā formas iesaiņojuma, jo mēs nevēlamies iesniegt veidlapu un izraisīt lapas atkārtotu ielādi. Esmu atspējojis dažus taustiņsitienus meklēšanas laukā, lai lietotāji varētu rakstīt vairāk ierobežojumu.

Mēs ievietosim visus fotoattēla datus vidusdaļas ID #photos. Tas saglabā mūsu pamata HTML tīru un viegli lasāmu. Visi citi iekšējie HTML elementi tiks pievienoti, izmantojot jQuery, un arī noņemti pirms katra jaunā meklēšanas.

Izvilkšana no API

Vispirms es gribētu sākt, izveidojot dinamisko PHP skriptu un pēc tam pāriet uz jQuery. Mans jaunais fails ir nosaukts instasearch.php kas satur visus svarīgākos API savienojumus.

 Pirmā rinda norāda, ka mūsu atgriešanās dati ir formatēti kā JSON, nevis vienkārša teksta vai HTML. Tas ir nepieciešams, lai JavaScript funkcijas varētu pareizi nolasīt datus. Pēc tam man ir daži parametru iestatījumi, kas ietver lietojumprogrammas klienta ID, lietotāja meklēšanas vērtību un galīgo API URL. Pārliecinieties, ka esat atjauninājis $ klients virknes vērtība, kas atbilst jūsu paša lietojumprogrammai.
 Lai piekļūtu šim URL datiem, mums jāanalizē faila saturs vai jāizmanto CURL funkcijas. Pielāgotā funkcija get_curl () ir tikai neliels kods, kas pārbauda pašreizējo PHP konfigurāciju.
 Ja jums nav aktivizēts CURL, tas mēģinās aktivizēt funkciju un vilkt datus, izmantojot savu funkciju bibliotēku. Pretējā gadījumā mēs varam vienkārši izmantot file_get_contents (), kas mēdz būt lēnāks, bet joprojām darbojas tikpat labi. Tad mēs varam šos datus izmainīt tādā mainīgajā lielumā kā:
 $ response = get_curl ($ api); 
 Datu organizēšana un atgriešana
 Mēs varētu atgriezt šo sākotnējo JSON atbildi no Instagram ar visu augšupielādēto informāciju. Bet ir tik daudz papildu datu, un tas ir ļoti kaitinoši, lai visu caurskatītu. Es dodu priekšroku organizēt Ajax atbildes un izvelciet tieši tos datus, kas mums vajadzīgi.
 Vispirms mēs varam iestatīt tukšu masīvu visiem attēliem. Tad iekšpusē katram() cilpa mēs izvelēsim JSON datu objektus pa vienam. Mums ir vajadzīgas tikai trīs (3) specifiskas vērtības, kas ir $ src(pilna izmēra attēla URL), $ īkšķis(sīktēlu attēla URL) un $ url(unikāls foto permalink).
 $ images = masīvs (); ja ($ atbilde) foreach (json_decode ($ response) -> dati kā $ vienums) $ src = $ item-> images-> standard_resolution-> url; $ thumb = $ item-> images-> thumbnail-> url; $ url = $ item-> saite; $ images [] = masīvs ("src" => htmlspecialchars ($ src), "thumb" => htmlspecialchars ($ thumb), "url" => htmlspecialchars ($ url));  
 Tie, kas nepazīst PHP cilpas, šajā procesā var pazust. Ja nesaprotat sintaksi, nepievērsiet tik lielu uzmanību šiem koda fragmentiem. Mūsu attēlu klāstā būs ne vairāk kā 16-20 unikālu fotogrāfiju ierakstu, kas izvilkti no pēdējā publicēšanas datuma. Tad mēs varam izvadīt visu šo kodu uz lapu kā jQuery Ajax atbildi.
 print_r (str_replace ('/', '/', json_encode ($ images))); mirst (); 
 Bet tagad, kad mēs esam skatījušies aiz ainas, mēs varam pāriet uz priekšu skriptu. Esmu izveidojis failu ajax.js kas satur pāris notikumu apstrādātājus, kas saistīti ar meklēšanas lauku. Ja jūs joprojām sekojat līdz šim, satraucieties, ka esam tik tuvu pabeigšanai!
 jQuery galvenie notikumi
 Pirmo reizi atverot dokumentu gatavs () ja es izveidoju pāris mainīgos. Pirmie divi uzvedas kā tiešie mērķa atlasītāji meklēšanas laukam un fotoattēlu konteineram. Es arī izmantoju JavaScript taimeri, lai apturētu meklēšanas vaicājumu līdz 900 milisekundēm pēc tam, kad lietotājs ir pabeidzis rakstīt.
 $ (dokuments). jau (funkcija () var sfield = $ ("# s"); var container = $ ("# photos"); var taimeris; 
 Mēs strādājam tikai ar diviem galvenajiem funkciju blokiem. Primārais apstrādātājs tiek aktivizēts ar .keydown () notikumu, kad tas ir fokusēts uz meklēšanas lauku. Vispirms pārbaudām, vai atslēgas kods atbilst kādam no mūsu aizliegtajiem taustiņiem, un, ja tā, noliegt galveno notikumu. Pretējā gadījumā notīriet noklusējuma taimeri un gaidiet 900ms pirms zvana instaSearch ().
 / ** * keycode glossary * 32 = SPACE * 188 = COMMA * 189 = DASH * 190 = PERIOD * 191 = BACKSLASH * 13 = ENTER * 219 = LEFT BRACKET * 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 (); else clearTimeout (taimeris); timer = setTimeout (funkcija () instaSearch ();, 900);); 
 Katru reizi, kad atjaunināsiet vērtību, tā automātiski iegūs jaunus meklēšanas rezultātus. Ir arī daudzi citi atslēgu kodi, kurus mēs varētu bloķēt, lai aktivizētu Ajax funkciju - bet pārāk daudz, lai to varētu iekļaut šajā apmācībā.
 Ajax instaSearch () funkcija
 Manā jaunajā pielāgotajā funkcijā mēs vispirms pievienojam a “iekraušana” klasei meklēšanas laukā. Šī klase atjauninās kameras ikonu jaunam gif attēlam. Mēs arī vēlamies iztukšot visus iespējamos datus, kas atstāti fotoattēlu sadaļā. Vaicājuma mainīgais tiek dinamiski noņemts no pašreizējās vērtības, kas ievadīta meklēšanas laukā.
 funkcija instaSearch () $ (sfield) .addClass ("ielāde"); $ (konteiners) .empty (); var q = $ (sfield) .val (); $ .ajax (tips: 'POST', url: 'instasearch.php', dati: "q =" + q, veiksme: funkcija (dati) $ (sfield) .removeClass ("ielāde"); $ .each (dati, funkcija (i, vienums) var ncode = ' 
"; $ (konteiners) .append (ncode); ); , kļūda: funkcija (xhr, tips, izņēmums) $ (sfield) .removeClass ("ielāde"); $ (konteiners) .html ("Kļūda" + tips); );  
 Ja jūs esat iepazinies ar .ajax () funkciju, tad visiem šiem parametriem ir jābūt pazīstamiem. Es izietu lietotāja meklēšanas parametru “q” kā POST dati. Pēc panākumiem un neveiksmēm mēs noņemsim “iekraušana” klasi un pievienojiet jebkuru atbildi atpakaļ #photos iesaiņojums.
 Veiktspējas funkcijas ietvaros mēs izlozējam caur galīgo JSON atbildi, lai izņemtu atsevišķus div elementus. Mēs varam paveikt šo funkciju ar $ .each () funkciju un mērķēt mūsu atbildes datu masīvu. Pretējā gadījumā neveiksmes metode tieši izdos atbildes kļūdas ziņojumu no Instagram API. Un tas viss tiešām ir!
  
 Skatīt demonstrāciju
 Lejupielādēt avotu
 
Galīgās domas
 Instagram komanda ir paveikusi brīnišķīgu darbu tādā milzīgā pielietojumā. Dažkārt API var būt lēna, bet atbildes dati vienmēr ir pareizi formatēti un ar to ir viegli strādāt. Es ceru, ka šī apmācība var pierādīt, ka ir daudz jaudas, kas strādā pie trešo pušu lietojumprogrammām.
 Diemžēl pašreizējie Instagram meklēšanas vaicājumi neļauj vairāk nekā 1 tagu vienlaikus. Tas ierobežo mūsu demo, bet tas noteikti nenovērš nevienu no tā šarmu. Jums jāpārbauda iepriekš redzamais piemērs un lejupielādējiet mana pirmkoda kopiju, lai to varētu atskaņot. Papildus paziņojiet mums savas domas zemāk esošajā diskusiju zonā.