Пару дней назад, одна моя знакомая попросила помочь ей создать интернет-голосование, поскольку, функционала в Контакте не хватало (там можно создавать опрос только на 15 человек). Задачка оказалась интересной. Итак, за дело!
Кому может пригодиться данный пост:
Заходим в контакт и создаем свое первое приложение — это можно сделать на здесь (описывать что там нужно заполнить я не буду, думаю с этим все разобрались)
Когда наше приложение создано, пора бы позаботиться о том, где его разместить. Я не задумываясь зашел на свой сервер и создал там новый субдомен (все равно как он будет называться — никто о нем не узнает)
ПО сервера самое обыкновенное:
Устанавливаем Joomla — там все довольно прозрачно и понятно.
Что у нас на вооружении: свеженькое приложение в Контакте и только что созданный сайт на каком-нибудь стандартном шаблоне Joomla.
Тут сразу хочу обратить внимание на API в Контакте!
API существует 2 вида:
С помощью первого можно вызывать разные диалоговый окна (приглашение друзей в приложение, зачисление голосов, установка доступа к пользовательским данным и т.д. подробное описание этих методов можно найти здесь.
Возможности второго намного больше! Обращение к скрипту www.vkontakte.ru/api.php может производиться любым удобным способом будь то AJAX запрос или HTTP запрос напрямую с сервера. Описание всех методов api есть здесь.
Теперь подробнее об инициализации api и работы с ними. Начнем по порядку:
JS API инициализируется добавлением в наш шаблон следующей яваскрипта:
src=http://vkontakte.ru/js/api/xd_connection.js?2
Сразу хотелось бы заметить что «API initialization succeeded» эта строка здесь написана не зря и говорит о том, что функция VK.init выполнится, когда готово к работе API! Но не ваш web-ресурс. Для того что бы проверить готовность к выполнению вашего js кода, можно воспользоваться вашей любимой js-библиотекой или фереймворком. Лично я предпочитаю Mootools — им и воспользовался.
Мой код инициализации выглядит так:
Что теперь мы можем делать? А теперь мы можем использовать API то есть например проверить, выбрал ли пользователь требуемые параметры доступа приложения к его данным. Например так:
Для этого сначала вызовем функцию getUserSettings, которая вернет нам битовую маску настроек текущего пользователя. Вызов осуществляется с помощью метода VK.api, где первый параметр это название функции, а второй CallBack функция. Переменная data это результат работы функции getUserSettings, который нужно проверить на предмет ошибки, если вернулось data.error — значит ошибка! Ошибка может быть по двум (на мой взгляд) причинам: приложение не одобрено администрацией сайта (у меня до одобрения работало только getProfiles, кстати, я потом встречал записи на форумах что в тестовом режиме все работает). Если функция вернула data.response то продолжаем работу сверяем битовые маски текущих прав и требуемых и вызываем функцию JS API showSettingsBox с единственным параметром (маска требуемых прав, у меня 263 — это доступ к фотографиям, друзьям и сслыка на приложение в левом меню пользователя)
О масках подробнее здесь.
На мой взгляд вызывать методы «API в Контакте» с помощью JS API как-то не хорошо. Это удобно для простых задач. Полностью Iframe приложение построеное на JS это очень трудоемко. И поэтому переходим к изучению HTTP запросов к API.
Для этого у нас есть Joomla и класс который забираем по ссылке vkapi.class.php
для работы с API через PHP потребуется создать две константы, будут включаться в каждый запрос это api_id вашего приложения (его видно прямо в адресной строке при переходе по ссылке на приложение) и секретный ключ — он выдается при создании приложения (он длинный и его можно изменить в настройках приложения)
вызов API средствами PHP выглядит следующим образом:
Первый foreach берет всех зарегистрированных пользователей из моего приложения (но не более 1000), а далее выполняется запрос к «API в контакте» на загрузку данных об этих пользователях. На выходе имеем массив значений вида: $ans['response'][$i]['field'], где response — массив данных о пользователях, дальше $i элемент и наконец требуемое свойство пользователя field например first_name (имя) или photo.
Преимущества такого подхода:
1. Становятся доступными secure методы API, что не маловажно если нужно узнать баланс или зачисить/снять голоса.
2. Не нужно писать «тысячи» строк кода на JS для работы с API
3. Мы получаем легко-администрируемый сайт и приложение одновременно.
Что именно я делал в Joomla рассказывать очень долго и не нужно я только приведу примерную логику работы моего приложения.
Не для кого не секрет, что все компоненты Joomla базируются на MVC-паттерне. Который все раскладывает по полочкам!
Controller компонента принимает все команды/запросы пользователя (хоть на действия пользователя при переходе по ссылкам, хоть с помощью AJAX запросов c использованием JS)
Model отвечает за все операции с базой данных нашего компонента, у меня, например: выводит само голосование, списки проголосовавших за определенного участника голосования, отвечает на проверку и повторного голосования и еще несколько вспомогательных функций.
View управляет выводом различных Layout'ов и передачей в них данных из модели.
Тем кто занимался разработкой компонентов под Joomla все предельно ясно.
Никто не мешает нам использовать класс vkapi.class.php в любом месте приложения, лично я использовал его только во view для подготовки данных к выводу (например по uid пользователей в контакте, который поставили мое приложение, я подгружал адреса фотографий)
Уже все привыкли к огромному количеству различных форм и кнопочек из соц сетей. Мне тоже захотелось такую в своем Iframe приложении. Каким образом подключить виджет комментариев:
Ни в коем случае не добавляйте на страницу следующий код:
src=«userapi.com/js/api/openapi.js?22»
это подходит для сайтов, но не подходит для Iframe приложений!
Достаточно сделать вот так:
в JS API уже реализованы функции добавления виджетов.
Что касается самих комментариев то вы знаете, что когда пользователь оставляет свой комментарий на странице с приложением, на его стене он тоже публикуется, но ссылкой на ваш сайт, а не на приложение! Что бы этого избежать нужно использовать параметр pageURL в котором будет указан адрес приложения в формате www.vkontakte.ru/app{app_id}
В итоге у меня получилось так:
На выходе имеем не сложное, но рабочее приложение в Контакте. Которое можно легко расширять и развивать добавляя новые и новые возможности и компоненты используя свою любимую CMS совместно с API в Контакте и JS API.
Вот что у меня получилось: vkontakte.ru/app2176209
Спасибо за внимание, с уважением Данила.
P.S. Администрация одобрила приложение через день, попросив в залог 10 голосов.
P.P.S Через полтора часа после этого поступило уже несколько предложений о покупке! Сразу говорю не продается, не вижу смысла, теперь тем более!
Кому может пригодиться данный пост:
- тому кто пытается разобраться как работает API в Контакте;
- имеет опыт работы с популярными CMS, здесь речь пойдет о Joomla;
- сильно ограничен во времени;
Этап 1: введение
Заходим в контакт и создаем свое первое приложение — это можно сделать на здесь (описывать что там нужно заполнить я не буду, думаю с этим все разобрались)
Этап 2: серверная часть
Когда наше приложение создано, пора бы позаботиться о том, где его разместить. Я не задумываясь зашел на свой сервер и создал там новый субдомен (все равно как он будет называться — никто о нем не узнает)
ПО сервера самое обыкновенное:
- nginx
- apache
- php 5.2+ (как модуль apache) — версия важна!
- memcaсhed
- mysql
Устанавливаем Joomla — там все довольно прозрачно и понятно.
Этап 3: JS API и «API в Контакте»
Что у нас на вооружении: свеженькое приложение в Контакте и только что созданный сайт на каком-нибудь стандартном шаблоне Joomla.
Тут сразу хочу обратить внимание на API в Контакте!
API существует 2 вида:
- Javascript API
- API в Контакте
С помощью первого можно вызывать разные диалоговый окна (приглашение друзей в приложение, зачисление голосов, установка доступа к пользовательским данным и т.д. подробное описание этих методов можно найти здесь.
Возможности второго намного больше! Обращение к скрипту www.vkontakte.ru/api.php может производиться любым удобным способом будь то AJAX запрос или HTTP запрос напрямую с сервера. Описание всех методов api есть здесь.
Теперь подробнее об инициализации api и работы с ними. Начнем по порядку:
JS API инициализируется добавлением в наш шаблон следующей яваскрипта:
src=http://vkontakte.ru/js/api/xd_connection.js?2
VK.init(function() {
// API initialization succeeded
// Your code here
});
Сразу хотелось бы заметить что «API initialization succeeded» эта строка здесь написана не зря и говорит о том, что функция VK.init выполнится, когда готово к работе API! Но не ваш web-ресурс. Для того что бы проверить готовность к выполнению вашего js кода, можно воспользоваться вашей любимой js-библиотекой или фереймворком. Лично я предпочитаю Mootools — им и воспользовался.
Мой код инициализации выглядит так:
VK.init(function() {
// API initialization succeeded
window.addEvent('domready', function(){
//DOM ready
})
});
Что теперь мы можем делать? А теперь мы можем использовать API то есть например проверить, выбрал ли пользователь требуемые параметры доступа приложения к его данным. Например так:
VK.api('getUserSettings', function(data){
if (data.response){
if (!(256 & data.response))
VK.callMethod('showSettingsBox', 263);
}
if (data.error){
alert('Error Code:'+data.error.error);
}
});
Для этого сначала вызовем функцию getUserSettings, которая вернет нам битовую маску настроек текущего пользователя. Вызов осуществляется с помощью метода VK.api, где первый параметр это название функции, а второй CallBack функция. Переменная data это результат работы функции getUserSettings, который нужно проверить на предмет ошибки, если вернулось data.error — значит ошибка! Ошибка может быть по двум (на мой взгляд) причинам: приложение не одобрено администрацией сайта (у меня до одобрения работало только getProfiles, кстати, я потом встречал записи на форумах что в тестовом режиме все работает). Если функция вернула data.response то продолжаем работу сверяем битовые маски текущих прав и требуемых и вызываем функцию JS API showSettingsBox с единственным параметром (маска требуемых прав, у меня 263 — это доступ к фотографиям, друзьям и сслыка на приложение в левом меню пользователя)
О масках подробнее здесь.
На мой взгляд вызывать методы «API в Контакте» с помощью JS API как-то не хорошо. Это удобно для простых задач. Полностью Iframe приложение построеное на JS это очень трудоемко. И поэтому переходим к изучению HTTP запросов к API.
Этап 4: PHP и «API в Контакте»
Для этого у нас есть Joomla и класс который забираем по ссылке vkapi.class.php
для работы с API через PHP потребуется создать две константы, будут включаться в каждый запрос это api_id вашего приложения (его видно прямо в адресной строке при переходе по ссылке на приложение) и секретный ключ — он выдается при создании приложения (он длинный и его можно изменить в настройках приложения)
вызов API средствами PHP выглядит следующим образом:
foreach ($this->items as $item){
$uids[] = $item->item;
}
$api = new vkapi();
$ans = $api->api('getProfiles', array('uids' => implode(',',$uids), 'fields' => 'photo, photo_big'));
Первый foreach берет всех зарегистрированных пользователей из моего приложения (но не более 1000), а далее выполняется запрос к «API в контакте» на загрузку данных об этих пользователях. На выходе имеем массив значений вида: $ans['response'][$i]['field'], где response — массив данных о пользователях, дальше $i элемент и наконец требуемое свойство пользователя field например first_name (имя) или photo.
Преимущества такого подхода:
1. Становятся доступными secure методы API, что не маловажно если нужно узнать баланс или зачисить/снять голоса.
2. Не нужно писать «тысячи» строк кода на JS для работы с API
3. Мы получаем легко-администрируемый сайт и приложение одновременно.
Что именно я делал в Joomla рассказывать очень долго и не нужно я только приведу примерную логику работы моего приложения.
Не для кого не секрет, что все компоненты Joomla базируются на MVC-паттерне. Который все раскладывает по полочкам!
Controller компонента принимает все команды/запросы пользователя (хоть на действия пользователя при переходе по ссылкам, хоть с помощью AJAX запросов c использованием JS)
Model отвечает за все операции с базой данных нашего компонента, у меня, например: выводит само голосование, списки проголосовавших за определенного участника голосования, отвечает на проверку и повторного голосования и еще несколько вспомогательных функций.
View управляет выводом различных Layout'ов и передачей в них данных из модели.
Тем кто занимался разработкой компонентов под Joomla все предельно ясно.
Никто не мешает нам использовать класс vkapi.class.php в любом месте приложения, лично я использовал его только во view для подготовки данных к выводу (например по uid пользователей в контакте, который поставили мое приложение, я подгружал адреса фотографий)
Этап 5: Виджеты
Уже все привыкли к огромному количеству различных форм и кнопочек из соц сетей. Мне тоже захотелось такую в своем Iframe приложении. Каким образом подключить виджет комментариев:
Ни в коем случае не добавляйте на страницу следующий код:
src=«userapi.com/js/api/openapi.js?22»
это подходит для сайтов, но не подходит для Iframe приложений!
Достаточно сделать вот так:
VK.Widgets.Comments("vk_comments", {limit: 10, width: "578", attach: "*"});
в JS API уже реализованы функции добавления виджетов.
Что касается самих комментариев то вы знаете, что когда пользователь оставляет свой комментарий на странице с приложением, на его стене он тоже публикуется, но ссылкой на ваш сайт, а не на приложение! Что бы этого избежать нужно использовать параметр pageURL в котором будет указан адрес приложения в формате www.vkontakte.ru/app{app_id}
В итоге у меня получилось так:
VK.Widgets.Comments("vk_comments", {limit: 10, width: "578", attach: "*", pageURL: "http://vkontakte.ru/app2176209"});
Этап 6: Вывод
На выходе имеем не сложное, но рабочее приложение в Контакте. Которое можно легко расширять и развивать добавляя новые и новые возможности и компоненты используя свою любимую CMS совместно с API в Контакте и JS API.
Вот что у меня получилось: vkontakte.ru/app2176209
Спасибо за внимание, с уважением Данила.
P.S. Администрация одобрила приложение через день, попросив в залог 10 голосов.
P.P.S Через полтора часа после этого поступило уже несколько предложений о покупке! Сразу говорю не продается, не вижу смысла, теперь тем более!