Як побудувати власну пошукову систему Instagram З jQuery і PHP

З тих пір, як Google розгорнув функції миттєвого пошуку, він став популярним напрямком у веб-дизайні. Є кілька цікавих прикладів в Інтернеті, наприклад, у програмі "Зображення Майкла Харта". Всі ці методи є досить простими, де навіть веб-розробник з помірно досвідченим jQuery може підібрати програмування API та дані JSON.

Для цього підручника я хочу пояснити як ми можемо побудувати подібне веб-додаток миттєвого пошуку. Замість того, щоб витягувати зображення з Google, ми можемо використовувати Instagram, який значно збільшився за кілька років.

Ця соціальна мережа розпочалася як мобільний додаток для iOS. Користувачі можуть знімати фотографії та ділитися ними з друзями, залишати коментарі та завантажувати їх на такі мережі, як Flickr. Команда нещодавно придбала компанія Facebook і опублікувала абсолютно нову програму для Android Market. Їх userbase значно зросла, і тепер розробники можуть створювати дивовижні міні-програми, подібно до цього демонстраційного матеріалу.

Переглянути демонстрацію
Завантажити джерело

Отримання облікових даних API

Перш ніж створювати будь-які файли проекту, ми повинні спочатку розглянути ідеї, які стоять за системою API API. Вам потрібен обліковий запис для доступу до порталу розробника, який пропонує корисні інструкції для початківців. Все, що нам потрібно, щоб отримати запит до бази даних 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 URL. Переконайтеся, що оновлено $ client значення рядка, яке відповідає вашій програмі.

Щоб отримати доступ до цих URL-адрес, нам необхідно проаналізувати вміст файлу або використовувати функції cURL. Користувацька функція get_curl () - це лише невеликий код, який перевіряє поточну конфігурацію PHP.

Якщо у вас немає активації cURL, це спробує активувати функцію та витягнути дані через власну бібліотеку функцій. В іншому випадку ми можемо просто використовувати file_get_contents (), який має тенденцію бути повільнішою, але все ще працює так само добре. Тоді ми можемо витягти ці дані у змінну так:

$ response = get_curl ($ api);

Організація та повернення даних

Ми могли б просто повернути цей оригінальний JSON-відповідь від Instagram з усією завантаженою інформацією. Але є так багато додаткових даних, і це дуже дратує прокручувати все. Я вважаю за краще організувати відповіді Ajax і витягнути, які саме дані нам потрібні.

Спочатку можна налаштувати пустий масив для всіх зображень. Потім всередині a для кожного() цикл ми витягнемо об'єкти даних JSON один за одним. Нам потрібні лише три (3) конкретні значення, які є $ src(URL-адреса зображення в повному розмірі), $ thumb(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 [] = масив ("src" => htmlspecialchars ($ src), "thumb" => htmlspecialchars ($ thumb), "url" => htmlspecialchars ($ url));

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

print_r (str_replace (':', '/', json_encode ($ images))); die ();

Але тепер, коли ми дивилися за лаштунками, ми можемо перейти до сценаріїв frontend. Я створив файл ajax.js яка містить пару обробників подій, пов'язаних з полем пошуку. Якщо ви досі стежите до зараз тоді приїжджаєте збуджені ми так близько до завершення!

Ключові події jQuery

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

$ (document) .ready (function () var sfield = $ ("# s"); var container = $ ("# photos");

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

/ ** * глосарій коду ключів * 32 = КОСМОС * 188 = COMMA * 189 = ПЕРЕМІЩЕННЯ * 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 (function () instaSearch ();, 900););

Щоразу, коли ви оновлюватимете значення, воно автоматично переходить на нові результати пошуку. Існує також багато інших ключових кодів, які ми могли б заблокувати від запуску функції Ajax, - але занадто багато, щоб їх було внесено до цього посібника..

Функція Ajax instaSearch ()

Усередині моєї нової функції ми спочатку додаємо a “завантаження” класу на поле пошуку. Цей клас оновлюватиме значок камери для нового зображення для завантаження gif. Ми також хочемо очистити всі можливі дані, що залишилися в розділі фотографій. Змінна запиту витягується динамічно з поточного значення, введеного в поле пошуку.

function instaSearch () $ (sfield) .addClass ("завантаження"); $ (контейнер) .empty (); var q = $ (sfield) .val (); $ .ajax (type: 'POST', url: 'instasearch.php', дані: "q =" + q, success: function (data) $ (sfield) .removeClass ("завантаження"); $ .each (дані, функція (i, item) var ncode = ' 
'; $ (контейнер) .append (ncode); ); , помилка: функція (xhr, type, exception) $ (sfield) .removeClass ("завантаження"); $ (container) .html ("Помилка:" + тип); );

Якщо ви знайомі з функцією .ajax (), то всі ці параметри повинні виглядати звично. Я передаю параметр пошуку користувача “q” як дані POST. Після успіху і невдачі ми видаляємо “завантаження” класу і додавати будь-яку відповідь назад в #photos обгортка.

У межах функції успіху ми перебираємо кінцевий JSON-відповідь, щоб витягнути окремі елементи div. Ми можемо виконати цей цикл за допомогою функції $ .each () і націлювання на масив даних відповіді. Інакше метод збою буде безпосередньо виводити будь-яке повідомлення про помилку відповіді з Instagram API. І це дійсно все!

Переглянути демонстрацію
Завантажити джерело

Заключні думки

Команда Instagram зробила чудову роботу по масштабуванню такої величезної програми. API іноді може бути повільним, але дані відповіді завжди правильно відформатовані і з ними легко працювати. Я сподіваюся, що цей навчальний посібник може продемонструвати, що існує велика кількість потужності для роботи з додатками третьої сторони.

На жаль, поточні пошукові запити Instagram не дозволяють одночасно більше 1 тегу. Це обмеження для нашої демонстрації, але це, звичайно, не знімає жодної її чарівності. Ви повинні перевірити живий приклад вище і завантажити копію мого вихідного коду, щоб грати з ним. Додатково повідомте нам свої думки в області після обговорення нижче.