Разработка 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 вывожу графики активности пользователей.

Послесловие

Для меня лично, такой независимый заработок стал прорывом и отличным стимулом. Чем больше я занимаюсь приложениями, тем больше идей у меня появляется. Планирую в ближайшем будущем заняться разработкой чего-нибудь более серьезного. Надеюсь, этот пост был полезен и интересен.