—»     —»   Создаем простенькое приложение на PHP при помощи API Yahoo! Answers
  Раздел: Скрипты и коды   Нет комментариев  

Создаем простенькое приложение на PHP при помощи API Yahoo! Answers



Открытое API Yahoo! – это отличный ресурс, с которым можно поработать. Есть много документации для веб-разработчиков, а также демо в живом режиме и примеры реализации. Приложение получается таким интересным потому, что Yahoo! включает в себя так много различных онлайн-сервисов. Кроме поисковой системы, Yahoo! также предлагает новости, карты, погоду и многое другое.

В данном руководстве мы хотели бы сосредоточиться на API Yahoo! Answers. Мы займемся разработкой простого приложения, которое будет выдавать все недавно опубликованные ответы из различных категорий. API предоставляет результаты посредством XML или JSON, так что у нас будет возможность создать приложение при помощи любого языка программирования. Также данное руководство мы привяжем к PHP потому, что это наиболее понятный язык разработки на стороне сервера.

Создаем простенькое приложение на PHP при помощи API Yahoo! Answers

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

Регистрация нового приложения

Для начала нам понадобится новый ключ разработчика для API. Это необходимо для того, чтобы система Yahoo! могла обрабатывать запросы к сети. К тому же, иначе разработчики могли бы делать объемные анонимные запросы, перегружая пропускную способность.

Вам нужно посетить страницу новых проектов, и авторизоваться в систему Yahoo!. Здесь вам зададут несколько простых вопросов о вашем приложении – здесь не столь важно, что вы будете писать. После заполнения формы, вам будет предоставлен ID API, который понадобится нам в PHP-коде на серверной стороне.

Разработка документа

Начнем разработку проекта с новой страницы index.html, которая и будет содержать в себе ядро структуры страницы. Мы включили ссылки на последнюю библиотеку jQuery, а также внешний файл script.js. Он будет включать в себя наши Ajax-запросы, когда документ будет завершен.

Ниже мы приводим вам наш код index-файла. Обратите внимание, что мы включили несколько примерных категорий с ID, связанными с их ID в Yahoo!.

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Yahoo! Answers Webapp - Popular Questions</title>
<meta name="author" content="Jake Rocheleau">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lemon">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<div id="w">
<h1>Select a Y! Answers Category</h1>

<nav>
<a href="#" id="396545444">Politics & Government</a>
<a href="#" id="396545660">Computers & Internet</a>
<a href="#" id="396545013">Business & Finance</a>
<a href="#" id="396545122">Science & Mathematics</a>
<a href="#" id="396545015">Education & Reference</a>
</nav>

<div id="content"></div>
</div>
</body>
</html>

Для того чтобы получить несколько разных ID, вы можете просто перейти на страницу с категориями и кликнуть на различные темы. В новом URL-адресе вы сможете видеть прибавление переменной вроде ?sid=категория. Эта длинная строка цифр – уникальный ID для категории, и мы можем использовать с API для того, чтобы выводить вопросы, на которые пользователи недавно добавили ответы.

PHP на стороне сервера

Перед тем как мы подключимся к Ajax/javascript, давайте создадим API-данные внутри PHP-файла под названием ajax.php. Верхняя часть кода содержит набор статичных переменных, которые потребуются нам для определенный функций API.

$theid = $_POST['catid'];
$cats = array();
$cats['politics'] = "396545444";
$cats['internet'] = "396545660";
$cats['business'] = "396545013";
$cats['science'] = "396545122";
$cats['education'] = "396545015";

$appid = "YOURAPIKEYHERE";
$url = "http://answers.yahooapis.com/AnswersService/V1/getByCategory?appid=".$appid;

$apiurl = $url."&category_id=".$theid."&type=resolved&output=json&results=15";

Первая переменная $theid будет внесена в скрипт из Ajax. Это будет уникальный ID-номер категории, который будет вноситься тогда, когда пользователь будет кликать по новой ссылке категории. Затем мы также выставили массив этих категорий, чтобы знать, какой ID с какой категорией связан.

Теперь внутри $appid вам следует заменить строку вашим личным ключом API. Он представляет собой довольно длинную строку цифр, букв и, возможно даже, тире и различных пунктуационных знаков. URL содержит первый отрывок нашего API-вызова, так как ключ появляется в строке. $apiurl объединяет ее с новыми данными на основе уникальных ID категорий посредством Ajax.

Вы можете изменить некоторые из этих атрибутов, если вам захочется получить разные результаты. Тем не мене, тип ответа всегда должен оставаться JSON, так как с ним гораздо проще справиться, чем с XML или чистым PHP-кодом.

Зацикливаем ответные данные

Для того чтобы Ajax-ответ на PHP работал правильно, нам нужно вывести все эти данные в HTML-формат и отобразить на странице. Вы, вероятно, заметили в нашем файле index.html div с ID #content, который абсолютно пуст. Это и будет наш контейнер для всех новых данных.

$i = 0;

// setup our data array
$dataobject = json_decode(file_get_contents($apiurl));

Сначала мы создаем переменную счетчика $i на 0. Это будет уникальное целое число, которое будет повышаться каждый раз, когда мы проводим новую строку результатов. Это поможет нам определить четные/нечетные строки, чтобы мы могли задать им разные фоновые цвета.

Мы также используем PHP-функцию json_decode() для обновления строки JSON-данных в коллекции объектов. Вы заметите, что внутри нее мы также вызываем функцию file_get_contents() – это необходимо чтобы считать исходный JSON-ответ с удаленного сервера Yahoo!. Существуют и другие библиотеки с таким же функционалом, но нам вариант с PHP кажется наиболее простым и быстрым.

// begin output loop
foreach($dataobject->all->questions as $question) {
$timestamp = $question->Timestamp;
$dd = date("F d, Y", $timestamp);

echo '<div class="qbox'.(($i = !$i)? ' odd':'').'">'."rn";
echo '<h2><a href="'.$question->Link.'" target="_blank">'.$question->Subject.'</a></h2>'."rn";
echo '<p>Posted '.$dd.' - Total answers: '.$question->NumAnswers.'</p>'."rn";
echo '<p>Link URL: <a href="'.$question->Link.'" target="_blank">'.$question->Link.'</a></p>'."rn";
echo '</div>'."nnn";

$i++;
}

die();

Мы используем на самом деле простой цикл foreach() для того, чтобы пропустить опрос объекта и выдать схожий HTML. Каждый вопрос содержится внутри Div’а с классом .qbox, и возможно с альтернативным классом .odd. Строки окрашиваются в разные цвета, чтобы у нас была возможность проще пролистывать списки. Финальная функция die() очень удобна, и помогает Ajax узнавать об окончании выполнения нашего скрипта. Это сократит время ответа при вызове одного и того же скрипта сотни раз в день.

Подключаемся к jQuery/Ajax

Даже если не всецело следите за ходом нашего PHP-кода, все равно не беспокойтесь. Довольно сложно сразу переходить к результатам API, но суть остается легкой, если у вас есть немного времени на исследования. Сейчас давайте изучим последний отрывок нашей мозаики, которая привязывает нас к javascript-запросам.

$(document).ready(function(){

$("nav a").on("click", function(e){
e.preventDefault();

var clickid = $(this).attr("id");
var content = "#content";

Сначала мы устанавливаем контроллер событий, который запускается тогда, когда пользователь кликает по любой анкорной ссылке внутри nav-элемента. Мы сначала останавливаем загрузку исходного href-значения, а затем выставляем несколько переменных, которые ведут на конкретные контейнеры на странице.

 if($(this).hasClass("sel")) {
// do nothing since we already have this selected
} else {
// change to display a new content container
$("a.sel").removeClass("sel");
$(this).addClass("sel");

$(content).html("<center><img src="images/loader.gif" alt="loading..."></center>");

$.ajax({
type: "POST",
url: "ajax.php",
data: "catid="+clickid,
dataType: "html",
success: function(html) {
$(content).html(html);
}
});
}
}); // end .on() click event handler
}); // end DOM ready()

Если текущая ссылка имеет класс .sel, то нам известно, что по ней уже кликали или она была загружена, поэтому мы ничего не делаем. В противном случае, когда пользователь кликает по новой ссылке, нам нужно вывести новые Ajax-результаты.

Селектор для $(“a.sel”) будет направлен на любую другую анкорную ссылку на странице с классом .sel. Нам нужно убрать первые из них, чтобы не столкнуться с проблемами при установки новой ссылки в качестве выбранной на данный момент. Вы также заметите, что мы добавляем маленькое gif-изображение с загрузкой в область контента до того, как начинаем Ajax-запрос. Этот маленький элемент графического интерфейса позволяет нам сообщить пользователю то, что на данный момент ведется загрузка новых результатов.

Финальный запрос $.ajax() довольно понятен, если вы когда-то раньше видели подобный синтаксис. Мы определяем наш ajax.php-файл и проводим в него ID категории с именем переменной, которую использовали ранее. Если запрос проведен успешно, мы получаем целую кучу HTML-данных в ответ, а затем отображаем эти данные в контейнере с контентом. Все невероятно просто, и вряд ли здесь запутаются даже новички!

Создаем простенькое приложение на PHP при помощи API Yahoo! Answers

Подытожим

Надеемся, что данное руководство принесет вам новых знаний и пользу. Вы сможете понять очень много в сути программирования, если немного познакомитесь с онлайн API. Инструменты и ресурсы, о которых вы никогда ранее не слышали, могут оказаться очень удобными и полезными в управлении веб-приложениями.

Не стесняйтесь скачивать копию исходного кода, приведенного здесь, и использовать его в собственных проектах! Yahoo! предоставляет нам довольно быстрое реагирование в API, и представляет собой один из лучших ресурсов. Онлайн-документация Y! Answers содержит огромный объем доступной информации, с помощью которой вы можете самостоятельно начать работать с API.

Новость отредактировал Design FactoRy - 11 июля 2017, 20:06
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: PHP, API, JSON, скрипты
Опубликовал Design FactoRy   Прочитано (раз): 4440   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930