Как да изградите своя собствена търсачка в Instagram С jQuery и PHP

Откакто Google пусна незабавни функции за търсене, тя се превърна в популярна тенденция в уеб дизайна. Има някои забавни примери онлайн, като например приложението Google Изображения на Майкъл Харт. Всички техники са доста ясни, където дори уеб разработчик с умерен jQuery опит може да набере програмни API и JSON данни.

За този урок искам да ви обясня как можем да изградим подобно уеб приложение за незабавно търсене. Вместо да изтегляме изображения от Google, можем да използваме Instagram, който е нараснал значително само за няколко кратки години.

Тази социална мрежа започна като мобилно приложение за iOS. Потребителите могат да правят снимки и да ги споделят с приятелите си, да оставят коментари и да качват в мрежи на трети страни, като Flickr. Екипът наскоро бе придобит от Facebook и публикува съвсем ново приложение за Android Market. Техният userbase е нараснал значително, и сега разработчиците могат да изградят невероятни мини-приложения точно като тази демонстрация на instasearch.

Преглед на демо
Изтеглете Източник

Получаване на удостоверения за API

Преди да създадем каквито и да било проектни файлове, първо трябва да разгледаме идеите на системата на API на Instagram. Ще имате нужда от акаунт за достъп до портала на разработчика, който предлага полезни инструкции за начинаещи. Всичко, от което се нуждаем, е да потърсим базата данни на Instagram “Клиентски идентификатор”.

В горната лента с инструменти щракнете върху връзката Управление на клиенти, след което щракнете върху зеления бутон “Регистрирайте нов клиент”. Трябва да дадете на приложението име, кратко описание и URL адрес на уебсайт. URL адресът и URI адресът за пренасочване могат да бъдат една и съща стойност в този случай само защото не е необходимо да удостоверяваме всички потребители. Просто попълнете всички стойности и генерирайте нови подробности за приложението.

Ще видите дълъг низ от знаци ID на КЛИЕНТА. Този ключ ще ни трябва по-късно, когато създаваме скрипта на бекенда, така че ще се върнем към този раздел. Засега можем да започнем изграждането на нашето jQuery приложение за незабавно търсене.

Съдържание на уебстраница по подразбиране

Действителният HTML е много тънък за функционалността, която използваме. Тъй като повечето от графичните данни се добавят динамично, ние изискваме само няколко по-малки елемента в страницата. Този код се намира вътре в index.html досие.

    Instagram Снимка Незабавно търсене App с jQuery         Забележка: Не са разрешени интервали или препинателни знаци. Търсенията са ограничени до една (1) ключова дума.

Използвам най-новата библиотека jQuery 1.7.2 заедно с два външни .css и .js ресурса. Полето за търсене на вход няма външна обвивка на формуляра, защото не искаме да изпращаме формуляра и да предизвикваме презареждане на страницата. Деактивирах няколко натискания на клавиши в полето за търсене, така че има ограничени ограничения, когато потребителите пишат.

Ще попълним всички данни за снимките в идентификатора на средната секция #photos. Той поддържа нашия основен HTML чист и лесен за четене. Всички останали вътрешни HTML елементи ще бъдат добавени чрез jQuery и ще бъдат премахнати преди всяко ново търсене.

Издърпване от API

Бих искал да започна първо с създаването на динамичен PHP скрипт и след това да се преместя в jQuery. Новият ми файл е с име instasearch.php който ще съдържа всички важни бекенд куки в API.

Първият ред обозначава, че нашите данни за връщане са форматирани като JSON вместо обикновен текст или HTML. Това е необходимо, за да може функциите на JavaScript да четат данните правилно. След това имам няколко настройки на променливи, съдържащи идентификационния клиент на приложението, стойността на потребителското търсене и крайния URL на API. Уверете се, че актуализирате $ клиент стойност, която съответства на вашето приложение.

За да получите достъп до тези данни, трябва да анализираме съдържанието на файла или да използваме cURL функции. Функцията по избор get_curl () е само малък код, който проверява срещу текущата конфигурация на PHP.

Ако не сте активирали cURL, това ще се опита да активира функцията и да изтегли данните чрез собствената си библиотека с функции. В противен случай можем просто да използваме file_get_contents (), който е по-бавен, но все пак работи добре. След това действително можем да изтеглим тези данни в променлива така:

$ response = get_curl ($ api);

Организиране и връщане на данни

Можем просто да върнем този оригинален JSON отговор от Instagram с цялата заредена информация. Но има толкова много допълнителни данни и е много досадно да се обръщаме към всичко. Предпочитам да организирам отговорите на Ajax и да извадя точно кои данни се нуждаем.

Първо можем да настроим празен масив за всички изображения. Тогава вътре за всеки() ние ще извадим JSON данните обекти един по един. Необходими са само три (3) специфични стойности, които са $ SRC(URL адрес в пълен размер на изображението), $ палец(URL адрес на миниизображение) и $ URL(уникална снимка за постоянна връзка).

$ images = array (); if ($ response) foreach (json_decode ($ response) -> данни като $ 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));

Тези, които не са запознати с PHP цикли, могат да се загубят в процеса. Не се фокусирайте толкова много върху тези кодови фрагменти, ако не разбирате синтаксиса. Нашият набор от изображения ще съдържа най-много 16-20 уникални записани снимки от последната дата на публикуване. Тогава можем да изведем целия код на страницата като jQuery Ajax отговор.

print_r (str_replace (':', '/', json_encode ($ images))); умрат ();

Но сега, след като погледнем зад кулисите, можем да прескочим в скриптовете на frontend. Създадох файл ajax.js който съдържа няколко събития, свързани с полето за търсене. Ако все още следите досега, тогава се вълнувайте, че сме толкова близо до завършването!

jQuery Ключови събития

При първо отваряне на документа готов() Събитие създавам няколко променливи. Първите две се държат като директни целеви селектори за полето за търсене и контейнера за снимки. Също така използвам таймер на JavaScript, за да поставя на пауза заявката за търсене до 900 милисекунди след като потребителят приключи.

$ (document) .ready (function () var sfield = $ ("# s"); var контейнер = $ ("# photos");

Съществуват само две основни функционални блока, с които работим. Основният манипулатор се задейства от събитие .keydown (), когато е фокусирано върху полето за търсене. Първо проверяваме дали кодът на ключа съвпада с някой от нашите забранени ключове и ако е така, отричаме ключовото събитие. В противен случай изчистете таймера по подразбиране и изчакайте 900ms преди обаждането instaSearch ().

/ ** * ключов речник * 32 = ПРОСТРАНСТВО * 188 = COMMA * 189 = DASH * 190 = ПЕРИОД * 191 = БАКСЛАШ * 13 = ВХОД * 219 = ЛЯВА КОНТАКТ * 220 = ПРЕДВАРИТЕЛНА ЗАБАВКА * 221 = ДЯСНА КОНТАКТ * / $ (поле ) .keydown (функция (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 (таймер); timer = setTimeout (функция () instaSearch ();, 900););

Всеки път, когато актуализирате стойността, автоматично ще се изтеглят нови резултати от търсенето. Има и много други ключови кодове, които бихме могли да блокираме за задействане на функцията Ajax - но твърде много за включване в този урок.

Функцията Ajax instaSearch ()

Вътре в новата ми персонализирана функция първо добавяме a “Зареждане” клас в полето за търсене. Този клас ще обнови иконата на камерата за ново зареждащо изображение. Също така искаме да изпратим всички възможни данни, останали в раздела за снимки. Променливата за заявка се изтегля динамично от текущата стойност, въведена в полето за търсене.

функция instaSearch () $ (sfield) .addClass ("зареждане"); $ (Контейнер) .empty (); var q = $ (sfield) .val (); $ .ajax (type: 'POST', url: 'instasearch.php', данни: "q =" + q, успех: функция (данни) $ (sfield) .removeClass ("loading"); $ .each (данни, функция (i, item) var ncode = ' 
"; $ (Контейнер) .append (ncode); ); , грешка: функция (xhr, type, exception) $ (sfield) .removeClass ("зареждане"); $ (container) .html ("Грешка:" + тип); );

Ако сте запознати с функцията .ajax (), всички тези параметри трябва да изглеждат познати. Предавам параметъра за търсене на потребителя “р” като данни за POST. При успех и неуспех ние премахваме “Зареждане” клас и добавяте отговора обратно към #photos халат.

В рамките на функцията за успех ние прелистваме крайния JSON отговор, за да извадим отделните div елементи. Можем да постигнем тази верига с функцията $ .each () и да насочим нашия масив от данни за отговор. В противен случай методът за неуспех ще изведе директно всяко съобщение за грешка при отговор от Instagram API. И това наистина е всичко!

Преглед на демо
Изтеглете Източник

Заключителни мисли

Екипът на Instagram е свършил чудесна работа, мащабирайки такова огромно приложение. API понякога може да бъде бавен, но данните за реакцията винаги са правилно форматирани и с тях е много лесно да се работи. Надявам се, че този урок може да демонстрира, че има много мощност, която работи от приложения на трети страни.

За съжаление настоящите заявки за търсене в Instagram не позволяват повече от 1 маркер наведнъж. Това е ограничаващо за нашата демонстрация, но със сигурност не премахва очарованието му. Трябва да разгледате живия пример по-горе и да изтеглите копие от моя изходен код, за да играете с него. Освен това споделете вашите мисли в пост-дискусионната област по-долу.