Pull to refresh

Разработка IFrame приложения в Контакте, использование Vkontakte API

Reading time 5 min
Views 47K
Пару дней назад, одна моя знакомая попросила помочь ей создать интернет-голосование, поскольку, функционала в Контакте не хватало (там можно создавать опрос только на 15 человек). Задачка оказалась интересной. Итак, за дело!

Кому может пригодиться данный пост:

  • тому кто пытается разобраться как работает API в Контакте;
  • имеет опыт работы с популярными CMS, здесь речь пойдет о Joomla;
  • сильно ограничен во времени;


Этап 1: введение


Заходим в контакт и создаем свое первое приложение — это можно сделать на здесь (описывать что там нужно заполнить я не буду, думаю с этим все разобрались)

Этап 2: серверная часть


Когда наше приложение создано, пора бы позаботиться о том, где его разместить. Я не задумываясь зашел на свой сервер и создал там новый субдомен (все равно как он будет называться — никто о нем не узнает)

ПО сервера самое обыкновенное:
  • nginx
  • apache
  • php 5.2+ (как модуль apache) — версия важна!
  • memcaсhed
  • mysql


Устанавливаем Joomla — там все довольно прозрачно и понятно.

Этап 3: JS API и «API в Контакте»


Что у нас на вооружении: свеженькое приложение в Контакте и только что созданный сайт на каком-нибудь стандартном шаблоне Joomla.

Тут сразу хочу обратить внимание на API в Контакте!

API существует 2 вида:

  1. Javascript API
  2. 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 Через полтора часа после этого поступило уже несколько предложений о покупке! Сразу говорю не продается, не вижу смысла, теперь тем более!
Tags:
Hubs:
+3
Comments 12
Comments Comments 12

Articles