Как создать свой собственный поисковик в Instagram с помощью jQuery и PHP

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

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

Эта социальная сеть начиналась как мобильное приложение для iOS. Пользователи могут делать фотографии и делиться ими со своими друзьями, оставлять комментарии и загружать их в сторонние сети, такие как Flickr. Команда была недавно приобретена Facebook и опубликовала новое приложение для Android Market. Их пользовательская база значительно выросла, и теперь разработчики могут создавать удивительные мини-приложения, как это демо instasearch.

Посмотреть демо
Скачать исходный код

Получение учетных данных API

Прежде чем создавать какие-либо файлы проекта, мы должны сначала изучить идеи, лежащие в основе системы API Instagram. Вам понадобится аккаунт для доступа к порталу разработчика, который предлагает полезные инструкции для начинающих. Все, что нам нужно для запроса базы данных Instagram, это “ID клиента”.

На верхней панели инструментов нажмите ссылку «Управление клиентами», затем нажмите зеленую кнопку. “Зарегистрировать нового клиента”. Вам нужно будет указать приложению имя, краткое описание и URL-адрес веб-сайта. URL и Redirect URI могут быть одинаковыми в этом случае только потому, что нам не нужно аутентифицировать пользователей. Просто заполните все значения и сгенерируйте новые детали приложения.

Вы увидите длинную строку символов с именем ID КЛИЕНТА. Этот ключ понадобится нам позже при создании внутреннего скрипта, поэтому мы вернемся к этому разделу. На данный момент мы можем начать создание нашего приложения мгновенного поиска jQuery.

Содержание веб-страницы по умолчанию

Фактический HTML-код очень мал по количеству используемых нами функций. Поскольку большая часть данных изображения добавляется динамически, нам требуется лишь несколько меньших элементов внутри страницы. Этот код находится внутри index.html файл.

    Приложение для мгновенного поиска фотографий в Instagram с помощью jQuery         Примечание: пробелы и знаки препинания не допускаются. Поиск ограничен одним (1) ключевым словом.

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

Мы заполним все данные фотографии внутри ID среднего раздела #фото. Он сохраняет наш основной HTML чистым и легким для чтения. Все остальные внутренние элементы HTML будут добавлены через jQuery, а также удалены перед каждым новым поиском..

Вытащить из API

Я хотел бы начать с создания нашего динамического PHP-скрипта, а затем перейти к jQuery. Мой новый файл называется instasearch.php который будет содержать все важные бэкенд-хуки в API.

Первая строка обозначает, что наши возвращаемые данные отформатированы как JSON вместо открытого текста или HTML. Это необходимо для правильного чтения данных функциями JavaScript. После этого у меня есть несколько переменных, содержащих идентификатор клиента приложения, значение поиска пользователя и окончательный URL-адрес API. Убедитесь, что вы обновили $ клиент строковое значение, соответствующее вашему собственному приложению.

Чтобы получить доступ к этим данным URL, нам нужно проанализировать содержимое файла или использовать функции cURL. Пользовательская функция get_curl () это всего лишь небольшой кусочек кода, который проверяет текущую конфигурацию PHP.

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

$ response = get_curl ($ api);

Организация и возврат данных

Мы могли бы просто вернуть этот оригинальный ответ JSON из Instagram со всей загруженной информацией. Но есть так много дополнительных данных, и это очень раздражает, чтобы пройтись по всему. Я предпочитаю организовывать ответы Ajax и извлекать какие именно данные нам нужны.

Сначала мы можем установить пустой массив для всех изображений. Тогда внутри для каждого() Цикл мы вытащим объекты данных JSON один за другим. Нам нужны только три (3) конкретных значения, которые являются $ ЦСИ(полноразмерное изображение 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))); умереть();

Но теперь, когда мы заглянули за кулисы, мы можем перейти к написанию сценариев во внешнем интерфейсе. Я создал файл ajax.js который содержит пару обработчиков событий, связанных с полем поиска. Если вы до сих пор следите за событиями, то волнуйтесь, мы так близки к завершению!

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

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

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

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

/ ** * глоссарий кодов клавиш * 32 = ПРОБЕЛ * 188 = КОММА * 189 = ЧЕРТЕЛЬ * 190 = ПЕРИОД * 191 = БЕКЛАШ * 13 = ВВОД * 219 = ЛЕВЫЙ КРОНШТЕЙН * 220 = ПРЯМОЙ СЛЭШ * 221 = ПРАВЫЙ КРОНШТЕЙН * / $ (поле ) .keydown (function (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); timer = setTimeout (function () instaSearch ();, 900););

Каждый раз, когда вы обновляете значение, оно автоматически отправляет новые результаты поиска. Есть также много других кодов клавиш, которые мы могли бы заблокировать от запуска функции Ajax - но их слишком много для перечисления в этом руководстве.

Функция Ajax instaSearch ()

Внутри моей новой пользовательской функции мы сначала добавляем “погрузка” класс на поле поиска. Этот класс обновит значок камеры для нового загружаемого изображения GIF. Мы также хотим удалить все возможные данные, оставшиеся в разделе фотографий. Переменная запроса извлекается динамически из текущего значения, введенного в поле поиска..

function instaSearch () $ (sfield) .addClass ("загрузка"); $ (Контейнер) .empty (); var q = $ (sfield) .val (); $ .ajax (тип: 'POST', URL: 'instasearch.php', данные: "q =" + q, success: function (data) $ (sfield) .removeClass ("loading"); $ .each (данные, функция (i, item) var ncode = ' 
«; $ (Контейнер) .append (ncode); ); , ошибка: функция (xhr, тип, исключение) $ (sfield) .removeClass ("загрузка"); $ (container) .html («Ошибка:» + тип); );

Если вы знакомы с функцией .ajax (), то все эти параметры должны выглядеть знакомо. Я передаю параметр поиска пользователя “Q” как данные POST. В случае успеха и неудачи мы удаляем “погрузка” класс и добавить любой ответ обратно в #фото обертка.

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

Посмотреть демо
Скачать исходный код

Последние мысли

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

К сожалению, текущие поисковые запросы в Instagram не позволяют использовать более 1 тега за раз. Это ограничивает нашу демонстрацию, но это, конечно, не снимает ее очарование. Вы должны проверить живой пример выше и скачать копию моего исходного кода, чтобы поиграть с ним. Кроме того, дайте нам знать ваши мысли в области пост-обсуждения ниже.