Поисковая система Instagram фото с JQuery и PHP [Tutorial]

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

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

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

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

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

Вы увидите длинную строку символов с именем CLIENT ID. Этот ключ понадобится нам позже при создании внутреннего сценария, поэтому мы вернемся к этому разделу. Сейчас мы можем начать создание нашего приложения мгновенного поиска jQuery.

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

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




Приложение для мгновенного поиска фотографий в Instagram с помощью jQuery


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

  <section id="photos"></section>
</div>


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

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

Вытащить из API

Я хотел бы начать с создания нашего динамического PHP-скрипта, а затем перейти к jQuery. Мой новый файл называется instasearch.php, который будет содержать все важные бэкенд-хуки в API.
<? PHP
заголовок (‘Content-type: application / json’);

$ client = “YOURCLIENTIDHERE”;
$ query = $ _POST[‘q’];
$ api = “https://api.instagram.com/v1/tags/”.$query.”/media/recent?client_id=”.$client;

function get_curl ($ url) {
if (function_exists (‘curl_init’)) {
$ ch = curl_init ();
curl_setopt ($ ch, CURLOPT_URL, $ url);
curl_setopt ($ ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($ ch, CURLOPT_HEADER, 0);
curl_setopt ($ ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt ($ ch, CURLOPT_SSL_VERIFYPEER, 0);
$ output = curl_exec ($ ch);
echo curl_error ($ ch);
curl_close ($ ч);
вернуть $ output;
} еще {
return file_get_contents ($ url);
}
}

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

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

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

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

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

Сначала мы можем установить пустой массив для всех изображений. Затем внутри цикла foreach () мы вытащим объекты данных JSON один за другим. Нам нужны только три (3) конкретных значения: $ src (URL-адрес полноразмерного изображения), $ thumb (URL-адрес миниатюрного изображения) и $ url (постоянная ссылка на уникальную фотографию).
$ images = array ();
если ($ ответа) {
foreach (json_decode ($ response) -> данные как $ item) {
$ src = $ item-> images-> standard_resolution-> url;
$ thumb = $ item-> images-> thumbnail-> url;
$ url = $ item-> link;

    $ изображения[] = массив (
    "src" => htmlspecialchars ($ src),
    "thumb" => htmlspecialchars ($ thumb),
    "url" => htmlspecialchars ($ url)
    );

}

}

Те, кто не знаком с циклами PHP, могут потеряться в процессе. Не зацикливайтесь на этих фрагментах кода, если вы не понимаете синтаксис. Наш массив изображений будет содержать не более 16-20 уникальных записей фотографий, взятых с самой последней даты публикации. Затем мы можем вывести весь этот код на страницу в виде ответа jQuery Ajax.
print_r (str_replace (‘\ /’, ‘/’, json_encode ($ images)));
умереть();

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

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

При первом открытии события document ready () я настраиваю пару переменных. Первые два ведут себя как прямые селекторы цели для поля поиска и контейнера фотографий. Я также использую Таймер JavaScript приостановить поисковый запрос до 900 миллисекунд после того, как пользователь закончил печатать.
$ (Документ) .ready (функция () {
var sfield = $ (“# s”);
var container = $ (“# photos”);
таймер вар;

Есть только два основных функциональных блока, с которыми мы работаем. Основной обработчик запускается .keydown () событие, когда сосредоточено на поле поиска. Сначала мы проверяем, совпадает ли код ключа с любым из наших запрещенных ключей, и если это так, отменяем событие ключа. В противном случае очистите таймер по умолчанию и подождите 900 мс, прежде чем вызывать instaSearch ().
/ **
* Глоссарий ключевых слов
* 32 = ПРОБЕЛ
* 188 = КОММА
* 189 = Тире
* 190 = ПЕРИОД
* 191 = BACKSLASH
* 13 = ENTER
* 219 = ЛЕВЫЙ КРОНШТЕЙН
* 220 = ВПЕРЕД
* 221 = ПРАВЫЙ КРОНШТЕЙН
* /
$ (Sfield) .keydown (функция (е) {
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 ();
} еще {
clearTimeout (таймер);

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 ( “загрузка”);

$ .each (data, function (i, item) {
var ncode = ‘

полноразмерная

«;
$ (Контейнер) .append (ncode);
});
},
ошибка: функция (xhr, тип, исключение) {
$ (Sfield) .removeClass ( “загрузка”);
$ (container) .html («Ошибка:» + тип);
}
});
}

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

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

Веб-приложение для мгновенного поиска в реальном времени для фотографий из Instagram

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

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

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

            <script async defer src="https://platform.instagram.com/en_US/embeds.js"></script>

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *