Разработка IFrame приложения в Контакте, использование Vkontakte API
Пару дней назад, одна моя знакомая попросила помочь ей создать интернет-голосование, поскольку, функционала в Контакте не хватало (там можно создавать опрос только на 15 человек). Задачка оказалась интересной. Итак, за дело!
Кому может пригодиться данный пост:
- тому кто пытается разобраться как работает API в Контакте;
- имеет опыт работы с популярными CMS, здесь речь пойдет о Joomla;
- сильно ограничен во времени;
Этап 1: введение
Заходим в контакт и создаем свое первое приложение — это можно сделать на здесь (описывать что там нужно заполнить я не буду, думаю с этим все разобрались)
Этап 2: серверная часть
Когда наше приложение создано, пора бы позаботиться о том, где его разместить. Я не задумываясь зашел на свой сервер и создал там новый субдомен (все равно как он будет называться — никто о нем не узнает)
ПО сервера самое обыкновенное:
- nginx
- apache
- php 5.2+ (как модуль apache) — версия важна!
- memcaсhed
- mysql
Устанавливаем Joomla — там все довольно прозрачно и понятно.
Этап 3: JS API и «API в Контакте»
Что у нас на вооружении: свеженькое приложение в Контакте и только что созданный сайт на каком-нибудь стандартном шаблоне Joomla.
Тут сразу хочу обратить внимание на API в Контакте!
- Javascript API
- API в Контакте
С помощью первого можно вызывать разные диалоговый окна (приглашение друзей в приложение, зачисление голосов, установка доступа к пользовательским данным и т.д. подробное описание этих методов можно найти здесь.
Возможности второго намного больше! Обращение к скрипту www.vkontakte.ru/api.php может производиться любым удобным способом будь то AJAX запрос или HTTP запрос напрямую с сервера. Описание всех методов api есть здесь.
Теперь подробнее об инициализации api и работы с ними. Начнем по порядку:
JS API инициализируется добавлением в наш шаблон следующей яваскрипта:
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 то есть например проверить, выбрал ли пользователь требуемые параметры доступа приложения к его данным. Например так:
Для этого сначала вызовем функцию 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 приложении. Каким образом подключить виджет комментариев:
Ни в коем случае не добавляйте на страницу следующий код:
это подходит для сайтов, но не подходит для Iframe приложений!
Достаточно сделать вот так:
в JS API уже реализованы функции добавления виджетов.
Что касается самих комментариев то вы знаете, что когда пользователь оставляет свой комментарий на странице с приложением, на его стене он тоже публикуется, но ссылкой на ваш сайт, а не на приложение! Что бы этого избежать нужно использовать параметр pageURL в котором будет указан адрес приложения в формате www.vkontakte.ru/app
В итоге у меня получилось так:
Этап 6: Вывод
На выходе имеем не сложное, но рабочее приложение в Контакте. Которое можно легко расширять и развивать добавляя новые и новые возможности и компоненты используя свою любимую CMS совместно с API в Контакте и JS API.
Источник статьи: http://habr.com/ru/post/114881/
Разработка Iframe приложений на VK API. От первых шишек до двухмиллионной аудитории
Здравствуйте, в этом посте речь пойдет о том, как я создавал Iframe приложения в одной известной социальной сети. Пост будет скорее повествовательным, чем познавательным, хотя я постараюсь ответить на многие вопросы, которые поставили меня в ступор на начальном этапе.
С API Контакта познакомился сравнительно недавно. Тогда оно казалось мне жутко сложным и неоднозначным, с минимумом пояснений и полным отсутствием примеров использования. Сейчас, подтянув знания в javaScript, не испытываю абсолютно никаких трудностей. Наоборот даже приятно, что разработчики во многом подумали за меня.
Работать с javascript API Вконтакте просто до безобразия. Нужно лишь подключить файл xd_connection.js, инициализировать VK API, и делать запросы не чаще трех раз в секунду. Также стоит отметить, что и безо всяких запросов Вк передает в Iframe много необходимых параметров в виде объекта flashVars. Из него можно вытащить id пользователя, токен, упрощающий авторизацию пользователя на стороннем сервере, язык интерфейса и другие нужности.
Первый пошёл
С первым приложением я решил не мудрить и сделать психологический тест с последующим постингом результата на стену пользователю. Возможно, многие сейчас скажут фу и дальше читать не станут. Признаться, я и сам не фанат всего этого шаманства с психоанализом и астрологией, однако, как выяснилось позже, такие приложения быстро набирают аудиторию. Но тестов было море, и нужно было придумать что-то лестное, что интриговало бы пользователей и подталкивало их делиться результатом на своей стене. И я решил сделать тест на психологическую зарплату. Вам нужно ответить на несколько простых вопросов, после чего приложение предлагает разместить запись с результатом на Вашей стене. Называется он «Какую зарплату ты заслуживаешь?». На данный момент у него 1’700’000 установок.
На создание у меня ушло три дня. И 90% из всего времени было затрачено на то, чтобы заставить постинг на стену работать. Нехитрый алгоритм на основании выбранных ответов высчитывал результат, отправлял запрос на сервер, который генерировал картинку (Наложение текста на картинку использовал при помощи этого класса) с нужной зарплатой и загружал на сервер вк.
Важно: не забудьте в настройках приложения выбрать, к какой персональной информации вам понадобится доступ. Иными словами то, что Вы будете запрашивать через api, в противном случае Вконтакте не выдаст вам эту информацию.
Я решил добавить изюминку в приложение и в конце сделал подсчет, сколько и чего можно купить на Вашу «психологическую» зарплату
Модерация
Когда приложение создано и включено в настройках, оно может быть запущено по прямой ссылке любым пользователем. Для того, чтобы попасть в поиск и каталог, оно должно пройти модерацию. Для этого нужно оставить в качестве залога 10 голосов (внутренняя валюта вк) и ждать. Очень часто при первой модерации ответ от техподдержки выглядит так:
Внимание: уточнить, что именно модераторам не понравилось при таком ответе не получится. Вам вежливо скажут, что они не дают таких справок
В редких случаях техподдержка отклоняет заявку и сразу говорит Вам, что нужно поправить и даже присылает скриншот. Вероятнее всего, у них есть какой-то чеклист при помощи которого они проверяют приложения. Мою ситуацию спасло добавление кнопки «о приложении», которая не несет абсолютно никакой смысловой нагрузки, однако, после ее появления приложение, наконец-то, одобрили. Залог, кстати, всегда возвращали.
Важно: для корректной работы приложения без SSL сертификата не обойтись. Иначе приложение не будет открываться через https и вы потеряете половину пользователей. Самоподписанный сертификат не является решением проблемы
Взлёт
Дело осталось за малым. Друг, занимающийся группами, сделал несколько рекламных постов, и тут приложение как с цепи сорвалось:
За неделю посещаемость сама по себе подскочила до 125 тысяч в день. Признаться, такой нагрузки я не ожидал, поэтому пришлось даже арендовать сервер по мощнее. Воодушевленный таким успехом, я сделал еще несколько тестов на готовой платформе. они набрали 1’300’00, 300’000 и 100’000 тысяч установок на сегодняшний день. Рассказывать о них не вижу смысла, они аналогичные.
Первыми граблями, на которые я наступил, был лог файл php, разросшийся аж до 800гб. Произошло это из-за нескольких ошибок уровня notice, которые логировались при каждом прохождении теста пользователем.
Интересно, что в первый месяц существования, тест пользовался популярностью у старшей аудитории (25+), однако месяцем позже школьники перехватили инициативу.
Любопытства ради, я добавил следующий вопрос «Как вы думаете, доллар завтра подорожает?» и начал вести по нему статистику, чтобы предугадывать курс валют по настроениям населения. Но до дела так и не дошло, так что, если кому интересно, могу предоставить базу данных для анализа.
Меняем курс
При всей вирусности тестов, у них есть один большой недостаток — малый возврат аудитории. По второму разу заходить в такое приложение будут единицы. Поэтому я решил сделать игру. Точнее, я взял за основу игру 2048 Gabriele Cirulli, тогда о ней еще никто не знал. Не смотря на то, что игра opensource, я всё-таки спросил разрешения лично у автора.
Получив положительный ответ, я принялся за дело. Спустя несколько дней игра под названием «Стаккер 2048» прошла модерацию.
Внезапно появились и вторые грабли. На следующее же утро приложение взломали простейшей XSS атакой. О том, что пользовательским данным нельзя доверять, я тогда попросту не знал. Школьник подставил скрипт вместо своего имени в списке «Топ 100», в результате чего матерные алерты не давали игрокам ничего сделать. В процессе заделывания дыр я познакомился со многими видами ухищрений, на которые способны малолетние хакеры-робингуды, которые после того, как напакостили, писали в личку, что это мне за то, что я украл игру. Я заделывал дыры по мере их проявления. Были и SQL инъекции и CSRF уязвимости. Один раз мне снесли всю базу данных. Кто-то даже пытался положить сервер генерируемыми картинками, подавая на вход файлу-генератору случайную строку 10 раз в секунду. Теперь, набив шишек, я использую токен и сессии для каждого пользователя, передаю все данные POST запросом, прикрепляя хэш от всех передаваемых данных, который проверяется на сервере. С тех пор ничего страшного, к счастью, больше не происходило.
Граблями номер три стали генерируемые картинки. Если для 2048 число набранных очков для многих пользователей совпадает и проще хранить картинки с результатами, чем каждый раз генерировать их снова, то для тестов исход всегда разный и картинок накапливается очень много. Поэтому приходится при помощи планировщика Cron чистить папку с картинками каждые 10 минут.
На данный момент в «Стаккер» играют 180’000 человек, причем возвращаемость пользователей очень высокая
Для игр Вконтакте предусмотрен специальный стартовый влив трафика — добавление приложения в категорию новые, на самый верх. Стоит это 1000 голосов, при этом нужно выждать полтора месяца в очереди и обязательно иметь в приложении встроенные покупки
Монетизация
Как только посещаемость пошла в гору, я всерьез задумался о монетизации своих приложений. Особого выбора не было, так как партнерских программ, работающих напрямую с Вконтакте не так много. Я остановился на прелоудере, который показывает короткий рекламный ролик каждый раз при входе в приложение, если пользователь попадает под целевую аудиторию. Это примерно 60% всей аудитории. И рекламные объявления в стиле тех, что контакт показывает сам. При текущей посещаемости, доход с четырех моих приложений составляет в среднем 2000р в сутки. Для отслеживания посещаемости я сделал отдельную страницу, на которой при помощи HTML canvas вывожу графики активности пользователей.
Источник статьи: http://habr.com/ru/post/225645/