Создаём собственный API-4
Всем привет. Итак, пришло время создать классы Gateway и Connector и посмотреть на наш API в деле. Для этого нам понадобится доступ к удалённому хосту или виртуальные хосты Apache. Я буду использовать удалённый хост.
Итак, создайте на удалённом хосте структуру базы, как это было описано во второй части статьи. Теперь нужно написать класс Gateway, который реализует протокол передачи данных. Как я уже говорил, будем исходить из объективной простоты, а именно – наши данные будут передаваться в виде сериализованного и закодированного POST запроса. Хотя, никто не мешает разработать свой протокол и потратить на это пару килобаксов вашего заказчика.
(more…)
Создаём собственный API – 3
Как я и обещал, сегодня мы допилим классы api_executor и api_functions. Для начала посмотрим на класс api_functions и интерфейс api_functions_itrfc. Интерфейс api_functions_itrfc теперь выглядит так: (more…)
Создаём собственный API – 2
Всем привет 🙂
Ну что ж, как я и обещал, сегодня мы создадим класс Executor в первом приближении. Для нормальной работы класса нам понадобится несколько вспомогательных классов-утилит и функций, а также драйвер для проверки того, что получилось. На самом деле, эти вспомогательные классы займут львиную долю сегодняшней статьи, но они необходимы и третья часть будет посвящена API в чистом виде. Но, не будем забегать вперёд.
Итак, для работы нам понадобится следующее: (more…)
Создаем собственный API
Введение
Всем привет. Сегодня я начну цикл статей, посвящённых созданию API.
Сразу, несколько ответов на ваши невысказанные вопросы:
- Цикл, потому что материал достаточно объёмный и серьёзный. В одну статью не вместится.
- API (application programming interface, в переводе с буржуйского – интерфейс программирования приложений) используется в том случае, если необходимо предоставить сторонним разработчикам часть низкоуровневого функционала некоторой системы.
- Класс задач, в которых используется API, разнообразен. Вот несколько примеров: вы являетесь владельцем базы данных всех жителей страны и хотите предоставить возможность различным компаниям через их корпоративные приложения пользоваться вашей базой. В этом случае, вам необходим API, т.к. просто продать базу данных экономически невыгодно и несёт в себе риск по утечке информации. Другой пример: у вас есть некоторая мультифункциональая система и вы хотите предоставить её часть для эволюции другим программистам. Так делает, например, Vkontakte. (more…)
Букмарклеты или как скачать аудиофайлы с сайта vkontakte?
Сегодня я собираюсь рассказать про одну интересную технологию, как мне кажется, с большим будущим. Называется эта технология bookmarklets(букмарклеты).
Букмарклет – это маленькая JavaScript-программа, оформленная в виде javascript-ссылки и вызываемая как браузерная закладка. Итак, мы знаем, что в атрибуте href гипертекстовой ссылки можно указать url любой существующей страницы, обычно url этот выглядит примерно так <a href=’http://address.org/path/index.html’>ссылка</a>, в данном случае http: – это указание протокола обмена, а все остальное – указание сервера, пути к файлу, и имени файла, к которому обратится браузер после клика на ссылке. Так вот, существует ряд протоколов, таких как, например, http: (протокол гипертекстового обмена), ftp:(протокол обмена файлами), file:(протокол загрузки локальных файлов пользователя).
Помимо этого существует еще один интересный протокол javascript:, который мы и будем использовать для создания букмарклетов. Выглядит это примерно так:
<a href=’javascript:alert(‘Hello, world’);’>букмарклет</a> при щелчке по этой ссылке, выполнится команда alert(‘Hello, world’); Проверьте, как это работает.
Попробуем теперь перетащить эту ссылку в панель закладок браузера, или щелкнув на ней правой кнопкой добавить ее в закладки. После того, как ссылка сохранена в закладки, можно в любой момент выбрать ее и выполнить.
Попробуем немного усложнить нашу закладку, пусть тепреь она выводит адрес документа из которого она вызвана. Вот этот букмарклет:
<a href=’javascript:alert(document.location);’>Адрес текущей страницы</a>.
Добавьте эту ссылку (Адрес текущей страницы) в закладки и вызовите ее, открыв предварительно в браузере какую-нибудь интернет-страницу, например сайт Яндекса. Вы увидите всплывающее оповещение с указанием адреса текущей страницы. Из этого можно сделать один очень важный вывод: букмарклет, вызванный из браузера, как закладка, выполняется в контексте текущей, открытой в браузере страницы. А этот факт дает нам неограниченный доступ к изменению данных на странице, и к извлечению из страницы любых данных, вплоть до полной замены содержимого этой страницы.
К сожалению, длина скрипта, сохраняемого в закладке ограничена. Причем, для разных браузеров она разная. Не углубляясь в различия между браузерами, можно сказать, что длина эта ограничена для различных браузеров от 488 до 2084 символов, что не может не огорчить. В принципе, для несложных букмарклетов нам хватит и этой длины, но что делать, если нам хочется большего? Что если мы хотим написать скрипт, который производит достаточно сложную обработку загруженной страницы, и в 2 кБ скрипта нам никак не уложиться?
Для этого можно использовать способ, заключающийся в следующем: сам букмарклет представляет собой небольшой скрипт, у которого есть лишь одно предназначение – загрузить основной скрипт и запустить его на выполнение.
Созданием этого скрипта мы сейчас и займемся. Но для начала замечу вот что. Какой бы скрипт мы ни создавали, практически всегда в нем мы будем объявлять создание новых функций и новых переменных. А создаваться они будут в контексте загруженной пользователем страницы, где до нас уже могут существовать какие-либо переменные и функции. Понятно, что мы никак не можем предугадать, какие имена будут у этих переменных, а значит, создавая свои собственные, мы можем случайно переопределить уже существующие переменные, внеся тем самым непредсказуемые изменения в логику работы пользовательских скриптов. Таким образом, запустив букмарклет, помимо его полезной работы, мы можем получить и совершенно непредсказуемые побочные явления, связанные с перопределением переменных.
Самый удобный способ избавиться от этих эффектов – применить анонимную функцию. Анонимные функции определяются также как и именованные, за исключением того факта, что им не присваивается имя.
Простое объявление функции:
function fun2(x) {
return x + 1;
}
Объявление функции, как переменной:
var fun2 = function(x) {
return x + 1;
}
К обеим этим функциям мы можем обратиться одинаково:
alert(fun1(5));
alert(fun2(5));
Мы получим абсолютно идентичное поведение. Такая же анонимная функция объявляется так:
function(x) {
alert(x);
}
Однако, если ее просто объявить, то толку от нее не будет никакого. Чтобы от любой функции была польза – ее надо вызвать. Вызов анонимной функции всегда совмещен с ее объявлением, для этого полностью все объявление функции берется в круглые скобки, после которого также в круглых скобках приписываются все ее аргументы вызова:
(function(x) {
alert(x);
})(5);
А для функции без аргументов – вот так:
(function() {
alert('Я функция!');
})();
К чему мы городили весь этот огород? А к тому, что новая область видимости переменных в JavaScript возникает только в одном единственном случае – при объявлении функции. Таким образом, если в функции объявить переменную, то ее имя не перекроется с таким же именем, но объявленным в глобальном контексте. Поясню на примере:
var a = 5;
(function(){
var a = 10;
alert(a); // alert(10)
})();
alert(a); // alert(5)
Как видим второй вызов alert дал значение 5, а не 10, потому что переменная a = 10 Объявлена в другом контексте видимости. В дальнейшем при создании букмарклетов мы всегда будем использовать анонимные функции – они обеспечивают гарантию от побочных явлений за счет добавления всего 17 лишних символов скрипта (function(){})(); а весь код встраивается между фигурными скобками.
А вот теперь пора переходить к анонсированному чуть ранее загрузчику скриптов. Делать это мы будем вот так:
var script = document.createElement('script');
script.src = 'http://script_url.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
Как видим здесь нет ничего сложного: при помощи createElement создается элемент SCRIPT, этому элементу задаются необходимые параметры src и type (в src указывается полный url загружаемого скрипта), и, наконец, скрипт при помощи appendChild добавляется в конец раздела HEAD страницы. После этого он тут же начинает загружаться с сервера, и сразу после загрузки – выполняется.
Замечу сразу, что текст скрипта всего букмарклета должен быть собран в единую строку без переносов, чтобы он выглядел как ссылка и его можно было добавить в закладки.
Покажем это на простом примере. Ниже приведен простой букмарклет, загружающий с сервера скрипт и выполняющий его:
<a href=”javascript:(function(){var script=document.createElement(‘script’); script.src=’http://easy-4-web.ru/samples/bookmarklet/3_loaded/script.js’; document.getElementsByTagName(‘head’)[0].appendChild(script)})();”>Загрузить букмарклет</a>
А вот и сам готовый букмарклет: Загрузить букмарклет просто перетащите его в закладки и запустите. Он загружает с адреса http://easy-4-web.ru/samples/bookmarklet/3_loaded/script.js скрипт в котором – очень простое содержимое:
(function(){
alert('Hello, world!');
})();
Да, после запуска букмарклета, мы увидим все то же сообщение “Hello, world!”.
Перестанем, наконец, писать бесполезные букмарклеты и сделаем хоть что-нибудь полезное, чтобы оценить всю мощь и красоту букмарклетов.
Я собираюсь сделать несложный букмарклет, который позволит мне легко и удобно сохранять аудиозаписи с сайта vkontakte.ru. Покопавшись немного в исходниках HTML-страниц сайта, я обнаружил, что при нажатии кнопки PLAY любой из аудиозаписей, происходит вызов функции operate, в которую в качестве параметров передаетсся либо url mp3-файла аудиозаписи, либо несколько параметров, указывающих на имя сервера медиаконтента, ID пользователя и ID файла аудиозаписи из которых путем конкатенации легко составить полный url аудиофайла.
Таким образом, моя идея заключается в следующем: после запуска букмарклет ищет на странице все кнопки PLAY (обычно они имеют class=’playimg’ или class=’play’), затем рядом с каждой такой кнопкой создает ссылку на аудиофайл, url к которому скрипт извлекает из атрибута onClick кнопки PLAY путем несложных текстовых преобразований.
Как видим, здесь напрямую придется работать с DOM-структурой, а мне очень не хотелось бы писать на низкоуровневом JavaScript все эти поиски элементов, извлечение из них атрибутов и создание новых элементов в существующем дереве DOM. Я собираюсь использовать для этого фреймворк jQuery.
Подгрузку jQuery я собирался делать стандартным способом при помощи createElement и appendChild, однако столкнулся вот с какой трудностью – после команды appendChild скрипт начинает загружаться, и нет никаких гарантий по времени его загрузки, в любом случае если сразу после appendChild попытаться обратиться к объекту jQuery, то выскочит ошибка “jQuery not defined“. Возник вопрос, как отследить момент, когда jQuery уже загрузился и можно начинать с ним работать?
Я решил обойтись собственным рукотворным решение, которое заключается в следующем: сразу после appendChild я запускаю цикл отслеживания, который каждые 0,1 сек проверяет, существование объекта jQuery, и как только объект появляется, загрузчик прекращает цикл проверки и вызывает функцию обратного вызова, в теле которой и будет происходить вся обработка страницы.
Также мой загрузчик скриптов перед тем как загружать какой-либо скрипт, проверит, а существует ли уже в DOM-структуре script с совпадающим атрибутом src? И если такой скрипт уже есть то загрузка нового произведена не будет.
Чтобы не утомлять читателя подробным описание его работы, я просто приведу готовый скрипт загрузчика, оснащенный необходимыми комментариями:
var easybml = {
// загружает скрипт
loadJS: function(url) {
var scripts = document.getElementsByTagName('script'),
alreadyLoaded = false;
for(var i=0; i<scripts.length; i++) {
if(scripts[i].src == url) {
alreadyLoaded = true;
break;
}
}
if(!alreadyLoaded) {
var script = document.createElement('script');
script.src = url;
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
}
},
// Загружает jQuery с заданного ресурса, после инициализации jQuery вызывает
// событие complete
loadJQuery: function(src, complete) {
easybml.loadJS(src);
// если передана функция обратного вызова, то сохраняем указатель на нее
// и запускаем циклическую проверку инициализации jQuery
if(complete) {
easybml.prv.complete = complete;
easybml.prv.checkJQuery();
}
},
// секция закрытых данных, к этим методам обращаться не надо
prv: {
complete: null,
// циклически проверяет загружен ли jQuery, и когда он загружен
// вызывает функцию easybml.prv.complete
checkJQuery: function() {
if (typeof jQuery == 'undefined') {
setTimeout('easybml.prv.checkJQuery()', 100);
} else {
easybml.prv.complete();
}
}
}
};
(function(){
// загружаем jQuery, если он еще не загружен
if (typeof jQuery == 'undefined') {
easybml.loadJQuery('http://easy-4-web.ru/samples/bookmarklet/5_jquery/jquery.php', function() {
// после загрузки и инициализации jQuery становятся доступными все
// методы. Присоединяем к документу обработчик события onclick
$(document).ready(function() {
$("body").click(function() {
alert("Hello world!");
});
});
});
}
})();
Функция easybml.loadJS(url) загружает скрипт с адреса url, если скрипт с таким же src еще не был загружен.
Функция easybml.loadJQuery(src, complete) загружает скрипт фреймворка jQuery с адреса src, и после его успешной загрузки и инициализации вызывает функцию обратного вызова complete.
Как видим в данном примере вся полезная функциональность скрипта заключена в том, что он к элементу BODY документа присоединяет обработчик события OnClick, который при клике на странице выводит alert(‘Hello, world!’).
И наконец, остался последний шаг. Вот она – полная версия скрипта, позволяющего загрузить аудиозаписи с сайта vkontakte.ru:
var easybml = {
// загружает скрипт
loadJS: function(url) {
var scripts = document.getElementsByTagName('script'),
alreadyLoaded = false;
for(var i=0; i<scripts.length; i++) {
if(scripts[i].src == url) {
alreadyLoaded = true;
break;
}
}
if(!alreadyLoaded) {
var script = document.createElement('script');
script.src = url;
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
}
},
// Загружает jQuery с заданного ресурса,
// после инициализации jQuery вызывает событие complete
loadJQuery: function(src, complete) {
easybml.loadJS(src);
// если передана функция обратного вызова, то сохраняем указатель
//на нее и запускаем циклическую проверку инициализации jQuery
if(complete) {
easybml.prv.complete = complete;
easybml.prv.checkJQuery();
}
},
// секция закрытых данных, к этим методам обращаться не надо
prv: {
complete: null,
// циклически проверяет загружен ли jQuery, и когда он загружен
// вызывает функцию easybml.prv.complete
checkJQuery: function() {
if (typeof jQuery == 'undefined') {
setTimeout('easybml.prv.checkJQuery()', 100);
} else {
easybml.prv.complete();
}
}
}
};
(function(){
function clearQuotes(str) {
return jQuery.trim(str).replace(/\'|\"/g,'');
}
function getMP3url(attr) {
var parts = attr.split(",");
if(parts.length == 3) {
return clearQuotes(parts[1]);
} else if(parts.length == 5) {
return 'http://cs' + clearQuotes(parts[1]) + '.vkontakte.ru/u' +
clearQuotes(parts[2]) + '/audio/' + clearQuotes(parts[3]) + '.mp3';
} else if(parts.length == 2) {
return parts[0];
}
return parts[3];
}
// загружаем jQuery, если он еще не загружен
if (typeof jQuery == 'undefined') {
easybml.loadJQuery('http://easy-4-web.ru/samples/bookmarklet/
5_jquery/jquery-1.4.4.min.js', function() {
$(document).ready(function() {
$(".playimg").each(function(n, el) {
var container = $(el).parent();
container.width('auto');
var clickAttr = $(el).attr("onclick").toString();
container.append(("<a href='" + getMP3url(clickAttr) +
"' border='0' target='_blank'><img src='http://easy-4-web.ru/samples/
bookmarklet/6_saveaudio/saveicon.png' border='0'></a>"));
});
$(".play").each(function(n, el) {
var container = $(el).parent();
container.width('auto');
var valueAttr = container.find('input').attr('value').toString();
container.append(("<a href='" + getMP3url(valueAttr) + "'
border='0' target='_blank'><img src='http://easy-4-web.ru/samples/
bookmarklet/6_saveaudio/saveicon.png' border='0'></a>"));
});
});
});
}
})();
Здесь используется ряд вспомогательных функций:
clearQuotes(str) – Очищает строку str от обрамляющих пробелов и скобок,
getMP3url(attr) – Извлекает из атрибута attr собственно сам url аудиофайла,
Ну и наконец после объявления этих функций начинается непосредственно полезная работа скрипта – поиск на странице кнопок PLAY и добавление к ним ссылок на скачивание.
Полную версию букмарклета я разместил по адресу http://easyapi.ru/bml/vksaveaudio/.
Пользуйтесь на здоровье.
UPD 14.04.2011.
Сайт vkontakte изменил способ рендеринга страниц, содержащих проигрыватель audio-файлов. Они унифицировали отображение контейнера проигрывателя и теперь не требуется дополнительных плясок с бубном для различного рода страниц – теперь аудио-проигрыватель везде рендерится абсолютно одинаково, что дает возможность упростить скрипт. Ниже я приведу только текст основной функции скрипта, так как изменился только он. Скрипт стал короче, из него убраны все ветвления оператором if:
(function(){
function getMP3url(attr) {
var parts = attr.split(",");
return parts[0];
}
if (typeof jQuery == 'undefined') {
easybml.loadJQuery('http://easyapi.ru/bml/vksaveaudio/jquery-1.4.4.min.js', function() {
$(document).ready(function() {
$(".play_new").each(function(n, el) {
var container = $(el).parent().parent();
container.width('auto');
var valueAttr = container.find('input').
attr('value').toString();
container.append(("<a href='" +
getMP3url(valueAttr) + "' border='0' target='_blank'>
<img src='http://easyapi.ru/bml/vksaveaudio/saveicon.png'
border='0'></a>"));
});
});
});
}
})();