Топик создан для чайников VK API но для программистов которые понимают что такое php, javascript, jquery, css.
Если вы знаете всё выше перечисленное уделите несколько минут для прочтения этого топика и следуйте инструкции. У вас это не займет много времени! Вы сможете расширить свои возможности и выйти на новый рынок. Изюминка приложений в том, что ВК дает трафик и ваше приложение сразу после одобрения (1-2 дня) увидит тысяча людей. В данном уроке я расскажу как сделать приложение и вывести аватары друзей в столбец.
Мне лично было очень сложно понять что и где, по этому и появилась идея данного топика.
1. Заходим на страницу разработчиков: vk.com/developers.php
2. Создаем приложение нажав на синюю кнопку.
3. Вводим название, выбираем тип - iframe/Flash и любую категорию
4. Получаем смс от ВК, подтверждаем что мы - не бот. Мы - хабрамэн!
5. Ура - ура - ура! Вы создали ваше первое приложение (а может и не первое)! Далее заходим в «Настройки».
6.
Выбираем: Состояние - приложение включено и видно всем, Тип приложения: iframe. Установка приложения - требуется. Запрашивать доступ к - доступ к друзьям. Вводим адрес на скрипт (в моем случае скрипт будет размещен на локалке).
Внимание! Максимальная ширина приложения - 827 пикс.
7.
Теперь открываем наш index.php
и заполняем его:
8. Вроде ничего сложно в выше сказанном коде нету. Продолжим. теперь мы подключим скрипты Вконтакте API.
9. Теперь мы будем использовать скрипт для изменения высоты Iframe в зависимости от содержимого. Допустим у нас высота приложения в настройках - 500 пикс. А если у нас 200 друзей и будет 200 аватаров в столбец? Что делать? По этому создаем скрипт - vk_height.js
VK.init(function(){ }); function autosize(width) { //Проверяем элемент body на наличие. if (!document.getElementById("body")) { alert("error"); return; } // Успешно ли подключен ВК скрипт if (typeof VK.callMethod != "undefined") { /* Вызываем функцию vk js api для управления окном. VK.callMethod("функция", параметры) В данном случае у нас - VK.callMethod("изменение_размеров_окна", ширина, высота); Так же добавляем еще 60 пикселей что бы было небольшое расстояние. */ VK.callMethod("resizeWindow", 840, document.getElementById("body").clientHeight + 60); } else { alert("error #2"); } } $(document).ready(function(){ //Вызываем функцию регулировки высоты каждые пол секунды. setInterval("autosize(607)", 500); });
10.
Теперь подключим наш vk_height.js
к index.php
11.
Пропишем Hello, world! в index.php
Hello, world!
12. Настало время работы с самим VK JS API.
Api ВК очень напоминает мне jquery. Людям которые знают $.post, $.get, $.ajax сразу поймут что к чему. Внимание! По умолчанию данные от ВК приходят в json.
// Функция получения друзей и вывода их на экран
function doIt(){
/*
VK.api("метод", {параметр: "значение"}, callback функция{
// работаем с полученными данными
});
*/
VK.api("friends.get", {fields: "photo_medium"}, function(data) {
// Действия с полученными данными
for(c=0;citems 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 приложении. Каким образом подключить виджет комментариев:
Ни в коем случае не добавляйте на страницу следующий код:
Это подходит для сайтов, но не подходит для 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.
Вот что у меня получилось.
Добрый день. В данном посте хотелось бы разобрать сервис по просмотру общих друзей и общих участников групп в vk.com. Так же хочу рассказать с чем я столкнулся при прохождении модерации в каталог приложений.
И так чтобы добавить свое приложение в vk.com, его нужно сначала создать .
I. Настройка проекта и немного о первом запросе к APIПосле того как мы создали iframe приложение , мы должные его настроить. Зайдем в настройки приложения.
Первый запрос я передаю для того, чтобы при запуске приложения VK.COM сразу же вернул мне, с помощью GET параметра api_result , подробные данные о пользователе зашедшем в приложение.
Первый запрос к API :
method=users.get&user_ids={viewer_id}&fields=photo_50&format=json&v=5.28
Трудности в реализации могли возникнуть на моменте получения участников группы, VK API возвращает за один запрос не более 1000 участников. Если запрашивать по 1 такому запросу, то процесс получения списка участников будет очень долгим. Решил я эту проблему применив код описанный в моей предыдущей статье , с помощью которого за раз можно получить 25 000 участников.
Так же хотелось бы объяснить почему для пользователей VK я не применил готовый метод friends.getMutual , возвращающий список идентификаторов общих друзей между парой пользователей… Дело в том, что сервис работает не только с пользователями, но и с группами, поэтому было бы лишним делать кучу обработок например, если один пользователь и одна группа. Да можно ото обработать, и это даже ускорит работу в некоторых случаях.
Все методы в статистике запросов к API работают без ошибок, кроме метода utils.resolveScreenName
, это связано с тем, что пользователи вводят в поле ввода неверные ссылки.
Отправив готовое приложение на проверку, модератор спустя 2 дня отклонил, так как приложение не работало по HTTPS протоколу. Решил я эту проблему залив приложение со своего сервера на сервер github , работающий по протоколу HTTPS .
Устанавливаем Joomla - там все довольно прозрачно и понятно.
Этап 3: JS API и «API в Контакте»Что у нас на вооружении: свеженькое приложение в Контакте и только что созданный сайт на каком-нибудь стандартном шаблоне 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
VK.init(function() {
// 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 и класс который забираем по ссылке
Для работы с 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 приложении. Каким образом подключить виджет комментариев:
Ни в коем случае не добавляйте на страницу следующий код:
Это подходит для сайтов, но не подходит для 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.
Вот что у меня получилось.