Главная › Интернет › Разработка iframe приложений вконтакте. JavaScript: Первое приложение Вконтакте: Hello World, Иваныч

Разработка iframe приложений вконтакте. JavaScript: Первое приложение Вконтакте: Hello World, Иваныч

Сегодня речь пойдет о создании своего первого приложения для сайта «Вконтакте». Ну и как исторически сложившееся традиция, это будет программа «Hello World!».
Речь пойдет об IFrame приложении. Для тех кто не знает, эта технология позволяет создать приложение, используя ресурсы своего сайта. Другими словами, приложение — это фрейм с Вашим Интернет адресом.

Пусть наш сайт находится по адресу: http://mysite.ru. Для того, что бы не засорять директорию основного сайта, создадим папку в корне сайта и назовем ее «vk».

Создадим в нашей новой папке файл «index.php» с содержанием пустого HTML документа.

Hello World!

Добавим поле в котором будет выводится имя и фамилия человека, открывшего прложение.

Hello World! Hello World, ?!

Теперь, перейдем непосредствнно к сути вопроса. Первое что необходимо сделать — это подключить методы для работы с API контакта. Для этого добавим в тег HEAD следующую строку:

Hello World! d = document; function F() { VK.init(function() { VK.api("getProfiles", {uids: }, function(data){ if (data.error) alert(data.error.error_msg); else if (data.response) { d.getElementById("who").innerHTML = data.response.last_name + " " + data.response.first_name; }}); }); } Hello World, ?!

Несколько комментариев по коду выше. Параметры для приложения передаются GET запросом, все параметры можно посмотреть на сайте ВКонтакте или вызовом функции alert(location.href);

VK.init — Обязательная функция, которая инициализирует глобальный объект VK, необходимый для работы приложения.

VK.api — Функция вызова процедуры VK API, первым параметром передается функция для вызова, второй параметр — параметры вызываемой функции, третий параметр — callBack функция, т.е. функция которая вызовится после выполнения указанного метода. В нашем случае функция «getProfiles» возвращает информацию о пользователе, она имеет один обязательный параметр — id пользователя на сайте ВКонтакте.

Важно: На стринцу приложения передается два параметра отвечающих за идентификацию пользователя — это viewer_id и user_id. viewer_id — id пользователя, просматривающего приложение, user_id — id пользователя пригласившего данного пользователя в приложение. Например, при переходе по ссылке http://vkontakte.ru/app2270785 переменная user_id будет равна нулю, а при переходе по ссылке http://vkontakte.ru/app2270785_3596080 эта переменная будет равна 3596080.

data — в нашем случае возвращемый объект функции API. Может иметь поле error или response, в первоем случае это говорит о том что выполнить запрос не удалось, во втором случае мы имеем массив результатов работы функции. В нашем случае запросили инфомрацию одного пользователя, а значит получили одноэлементный массив.

Для ознакомления с методами и возвращаемыми значениями можно перейти по этой ссылке: http://vkontakte.ru/developers.php#devstep2

Добрый день. В данном посте хотелось бы разобрать сервис по просмотру общих друзей и общих участников групп в 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

II. Основные моменты реализации на JS

Трудности в реализации могли возникнуть на моменте получения участников группы, VK API возвращает за один запрос не более 1000 участников. Если запрашивать по 1 такому запросу, то процесс получения списка участников будет очень долгим. Решил я эту проблему применив код описанный в моей предыдущей статье , с помощью которого за раз можно получить 25 000 участников.

Так же хотелось бы объяснить почему для пользователей VK я не применил готовый метод friends.getMutual , возвращающий список идентификаторов общих друзей между парой пользователей… Дело в том, что сервис работает не только с пользователями, но и с группами, поэтому было бы лишним делать кучу обработок например, если один пользователь и одна группа. Да можно ото обработать, и это даже ускорит работу в некоторых случаях.

Все методы в статистике запросов к API работают без ошибок, кроме метода utils.resolveScreenName , это связано с тем, что пользователи вводят в поле ввода неверные ссылки.

III. Проходим модерацию в каталог приложений

Отправив готовое приложение на проверку, модератор спустя 2 дня отклонил, так как приложение не работало по HTTPS протоколу. Решил я эту проблему залив приложение со своего сервера на сервер github , работающий по протоколу HTTPS .

Топик создан для чайников 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.

Вот что у меня получилось.

Устанавливаем 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() {

// 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"));