Како изградити властити Инстаграм Сеарцх Енгине Са јКуери и ПХП

Откако је Гоогле развио могућности брзог претраживања, постао је популаран тренд у веб дизајну. Постоји неколико забавних примера на мрежи, као што је апликација апликације Гоогле Слике компаније Мицхаел Харт. Све технике су прилично једноставне, чак и веб програмер са умереном јКуери искуством може да покупи АПИ-је за програмирање и ЈСОН податке.

За овај туторијал желим да објасним како можемо изградити сличну веб апликацију за брзо претраживање. Уместо да вучемо слике са Гоогле-а, можемо да користимо Инстаграм који је огромно порастао за само неколико кратких година.

Ова друштвена мрежа почела је као мобилна апликација за иОС. Корисници могу фотографисати и дијелити их са својим пријатељима, остављати коментаре и слати на мреже трећих страна као што је Флицкр. Тим је недавно купио Фацебоок и објавио потпуно нову апликацију за Андроид Маркет. Њихова корисничка база је страховито порасла, а сада програмери могу да праве невероватне мини-апликације баш као овај демо за инстасеарцх.

Виев Демо
Довнлоад Соурце

Добијање АПИ акредитива

Пре него што креирамо било који пројектни фајл, прво треба да погледамо идеје које стоје иза Инстаграм АПИ система. Потребан вам је налог за приступ порталу програмера који нуди корисне инструкције за почетнике. Све што је потребно за упит на Инстаграм бази података је а “ИД клијента”.

У горњој алатној траци кликните на везу Управљање клијентима, а затим кликните на зелено дугме “Региструјте новог клијента”. Потребно је да апликацији дате име, кратак опис и УРЛ сајта. УРЛ и УРЛ за преусмеравање могу бити исте вредности у овој инстанци само зато што не морамо да аутентификујемо кориснике. Само попуните све вредности и генеришите нове детаље апликације.

Видећете дугачак низ знакова ИД КЛИЈЕНТА. Овај кључ ће нам бити потребан касније приликом израде позадинске скрипте, тако да ћемо се вратити на овај одељак. За сада можемо почети са изградњом наше јКуери апликације за тренутну претрагу.

Дефаулт Вебпаге Цонтент

Стварни ХТМЛ је веома танак за количину функционалности коју користимо. Будући да се већина слика података додаје динамички, потребно је само неколико мањих елемената унутар странице. Овај код се налази унутар индек.хтмл филе.

    Инстаграм Пхото Инстант Сеарцх Апп са јКуери         Напомена: Без размака или интерпункције. Претраживања су ограничена на једну (1) кључну реч.

Користим најновију јКуери 1.7.2 библиотеку заједно са два екстерна .цсс и .јс ресурса. Поље за претрагу уноса нема спољни омотач обрасца зато што не желимо да икада пошаљете образац и изазовете поновно учитавање странице. Искључио сам неколико притисака на тастере у пољу за претрагу, тако да постоје ограничена ограничења када корисници куцају.

Попунит ћемо све податке о фотографији унутар ИД-а средњег дијела #фотографије. Он одржава наш основни ХТМЛ чист и лак за читање. Сви остали интерни ХТМЛ елементи ће бити додани преко јКуери, а такође ће бити уклоњени пре сваке нове претраге.

Повлачење из АПИ-ја

Желео бих да почнем прво тако што ћемо креирати динамички ПХП скрипт, а затим прећи у јКуери. Именован је мој нови фајл инстасеарцх.пхп који ће садржати све важне бацкенд куке у АПИ-ју.

Прва линија означава да су наши повратни подаци форматирани као ЈСОН умјесто обичног текста или ХТМЛ-а. Ово је неопходно за ЈаваСцрипт функције за исправно читање података. Након тога имам неколико поставки варијабли које садрже ИД клијента апликације, вриједност за претраживање корисника и коначни УРЛ УРЛ-а. Обавезно ажурирајте $ цлиент вредност стринга која одговара вашој апликацији.

Да бисте приступили овим подацима УРЛ-а, морамо анализирати садржај датотеке или користити цУРЛ функције. Прилагођена функција гет_цурл () је само мали дио кода који провјерава тренутну ПХП конфигурацију.

Ако немате активиран цУРЛ, то ће покушати активирати значајку и повући податке преко своје библиотеке функција. У супротном, можемо једноставно користити филе_гет_цонтентс () који има тенденцију да буде спорији, али и даље ради. Онда можемо да извучемо ове податке у променљиву на следећи начин:

$ респонсе = гет_цурл ($ апи);

Организовање и враћање података

Могли бисмо само да вратимо овај оригинални ЈСОН одговор из Инстаграм-а са свим информацијама учитаним. Али има толико много додатних података и веома је неугодно да се кроз све петље. Радије бих организовао Ајак одговоре и извукао тачно које податке требамо.

Прво можемо поставити празан низ за све слике. Онда унутар за сваки() петља ћемо повући ЈСОН податке један по један. Потребне су нам само три (3) специфичне вредности које су $ срц(УРЛ слике у пуној величини), $ тхумб(УРЛ слике минијатуре) и $ урл(јединствена пермалинк фотографија).

$ имагес = арраи (); иф ($ репли) фореацх (јсон_децоде ($ респонсе) -> дата ас $ итем) $ срц = $ итем-> имагес-> стандард_ресолутион-> урл; $ тхумб = $ итем-> имагес-> тхумбнаил-> урл; $ урл = $ итем-> линк; $ имагес [] = арраи ("срц" => хтмлспециалцхарс ($ срц), "тхумб" => хтмлспециалцхарс ($ тхумб), "урл" => хтмлспециалцхарс ($ урл));

Они који нису упознати са ПХП петљама могу се изгубити у процесу. Не фокусирајте се толико на ове исјечке кода ако не разумете синтаксу. Наш низ слика ће садржати највише 16-20 јединствених уноса фотографија повучених из најновијег датума објављивања. Онда можемо исписати сав овај код на страницу као јКуери Ајак одговор.

принт_р (стр_реплаце (';' ',' / ', јсон_енцоде ($ имагес))); умрети();

Али сада када смо погледали иза сцене можемо скочити у фронтенд скриптовање. Направио сам датотеку ајак.јс која садржи неколико руковаоца догађаја везаних за поље за претрагу. Ако још пратите до сада, онда се узбудите да смо близу завршетка!

јКуери Кључни догађаји

Приликом првог отварања документа спреман () догађај постављам неколико варијабли. Прва два се понашају као директни циљни селектори за поље за претрагу и контејнер за фотографије. Такође користим ЈаваСцрипт тајмер за паузирање упита за претраживање до 900 милисекунди након што корисник заврши са куцањем.

$ (доцумент) .реади (фунцтион () вар сфиелд = $ ("# с"); вар цонтаинер = $ ("# пхотос"); вар тимер;

Постоје само две главне функције са којима радимо. Примарни управљач покреће догађај .кеидовн () када је фокусиран на поље за претрагу. Прво проверавамо да ли кључни код одговара неком од наших забрањених кључева, и ако је тако, негирамо кључни догађај. У супротном, обришите подразумевани тајмер и сачекајте 900мс пре позива инстаСеарцх ().

/ ** * кеицоде глоссари * 32 = СПАЦЕ * 188 = ЦОММА * 189 = ДАСХ * 190 = ПЕРИОД * 191 = БАЦКСЛАСХ * 13 = ЕНТЕР * 219 = ЛИЈЕВИ НОСАЧ * 220 = НАПРЕД СЛАСХ * 221 = ДЕСНА БРАЦКЕТ * / $ (сфиелд) ) .кеидовн (функција (е) иф (е.кеиЦоде == '32' || е.кеиЦоде == '188' || е.кеиЦоде == '189' || е.кеиЦоде == '13' | | е.кеиЦоде == '190' || е.кеиЦоде == '219' || е.кеиЦоде == '221' || е.кеиЦоде == '191' || е.кеиЦоде == '220') | е.превентДефаулт (); елсе цлеарТимеоут (тимер); тимер = сетТимеоут (фунцтион () инстаСеарцх ();, 900););

Сваки пут када ажурирате вредност, аутоматски ће се преузети нови резултати претраге. Постоје и многи други кључни кодови које смо могли блокирати да би покренули Ајак функцију - али превише за унос у овај водич.

Функција Ајак инстаСеарцх ()

Унутар моје нове корисничке функције прво додајемо “лоадинг” у поље за претрагу. Ова класа ће ажурирати икону камере за нову слику учитавања. Такође желимо да испразнимо све могуће податке који су остали у секцији фотографија. Варијабла упита се динамички извлачи из тренутне вредности унете у поље за претрагу.

фунцтион инстаСеарцх () $ (сфиелд) .аддЦласс ("лоадинг"); $ (контејнер) .емпти (); вар к = $ (сфиелд) .вал (); $ .ајак (типе: 'ПОСТ', урл: 'инстасеарцх.пхп', дата: "к =" + к, успех: функција (дата) $ (сфиелд) .ремовеЦласс ("лоадинг"); $ .еацх (подаци, функција (и, итем) вар нцоде = ' 
'; $ (контејнер) .аппенд (нцоде); ); , грешка: функција (кхр, типе, екцептион) $ (сфиелд) .ремовеЦласс ("учитавање"); $ (цонтаинер) .хтмл ("Грешка:" + тип); );

Ако сте упознати са .ајак () функцијом онда би сви ови параметри требали изгледати познато. Пролазим параметар за претраживање корисника “к” као ПОСТ подаци. Након успјеха и неуспјеха уклањамо “лоадинг” и додајте било који одговор назад у #фотографије враппер.

У оквиру функције успеха прелазимо кроз коначни ЈСОН одговор како бисмо извукли појединачне див елементе. Ову петљу можемо остварити са $ .еацх () функцијом и циљањем нашег низа података. У супротном, метода квара ће директно извести било коју поруку о грешци одговора из Инстаграм АПИ-ја. И то је стварно све!

Виев Демо
Довнлоад Соурце

Последње мисли

Инстаграм тим је урадио диван посао скалирања тако огромне апликације. АПИ понекад може бити спор, али подаци о одговорима су увијек исправно форматирани и врло једноставни за рад. Надам се да овај туторијал може показати да постоји много снаге за рад са апликацијама трећих страна.

Нажалост, тренутни Инстаграм упити за претраживање не дозвољавају више од 1 ознаке одједном. Ово је ограничавајуће за наш демо, али то свакако не уклања било који његов шарм. Требало би да погледате живи пример изнад и да преузмете копију мог изворног кода да бисте се играли. Осим тога, јавите нам своје мишљење у области за дискусију у наставку.