Разработка Iframe приложений на VK API. От первых шишек до двухмиллионной аудитории

image
image
image Здравствуйте, в этом посте речь пойдет о том, как я создавал Iframe приложения в одной известной социальной сети. Пост будет скорее повествовательным, чем познавательным, хотя я постараюсь ответить на многие вопросы, которые поставили меня в ступор на начальном этапе.

С API Контакта познакомился сравнительно недавно. Тогда оно казалось мне жутко сложным и неоднозначным, с минимумом пояснений и полным отсутствием примеров использования. Сейчас, подтянув знания в javaScript, не испытываю абсолютно никаких трудностей. Наоборот даже приятно, что разработчики во многом подумали за меня.

Работать с javascript API Вконтакте просто до безобразия. Нужно лишь подключить файл xd_connection.js, инициализировать VK API, и делать запросы не чаще трех раз в секунду. Также стоит отметить, что и безо всяких запросов Вк передает в Iframe много необходимых параметров в виде объекта flashVars. Из него можно вытащить id пользователя, токен, упрощающий авторизацию пользователя на стороннем сервере, язык интерфейса и другие нужности.

Первый пошёл


image

С первым приложением я решил не мудрить и сделать психологический тест с последующим постингом результата на стену пользователю. Возможно, многие сейчас скажут фу и дальше читать не станут. Признаться, я и сам не фанат всего этого шаманства с психоанализом и астрологией, однако, как выяснилось позже, такие приложения быстро набирают аудиторию. Но тестов было море, и нужно было придумать что-то лестное, что интриговало бы пользователей и подталкивало их делиться результатом на своей стене. И я решил сделать тест на психологическую зарплату. Вам нужно ответить на несколько простых вопросов, после чего приложение предлагает разместить запись с результатом на Вашей стене. Называется он "Какую зарплату ты заслуживаешь?". На данный момент у него 1'700'000 установок.

На создание у меня ушло три дня. И 90% из всего времени было затрачено на то, чтобы заставить постинг на стену работать. Нехитрый алгоритм на основании выбранных ответов высчитывал результат, отправлял запрос на сервер, который генерировал картинку (Наложение текста на картинку использовал при помощи этого класса) с нужной зарплатой и загружал на сервер вк.
Важно: не забудьте в настройках приложения выбрать, к какой персональной информации вам понадобится доступ. Иными словами то, что Вы будете запрашивать через api, в противном случае Вконтакте не выдаст вам эту информацию. image
Пост выглядит так:

image

Я решил добавить изюминку в приложение и в конце сделал подсчет, сколько и чего можно купить на Вашу «психологическую» зарплату

image

Модерация


Когда приложение создано и включено в настройках, оно может быть запущено по прямой ссылке любым пользователем. Для того, чтобы попасть в поиск и каталог, оно должно пройти модерацию. Для этого нужно оставить в качестве залога 10 голосов (внутренняя валюта вк) и ждать. Очень часто при первой модерации ответ от техподдержки выглядит так:

image

Внимание: уточнить, что именно модераторам не понравилось при таком ответе не получится. Вам вежливо скажут, что они не дают таких справок
В редких случаях техподдержка отклоняет заявку и сразу говорит Вам, что нужно поправить и даже присылает скриншот. Вероятнее всего, у них есть какой-то чеклист при помощи которого они проверяют приложения. Мою ситуацию спасло добавление кнопки «о приложении», которая не несет абсолютно никакой смысловой нагрузки, однако, после ее появления приложение, наконец-то, одобрили. Залог, кстати, всегда возвращали.

Важно: для корректной работы приложения без SSL сертификата не обойтись. Иначе приложение не будет открываться через https и вы потеряете половину пользователей. Самоподписанный сертификат не является решением проблемы


Взлёт


Дело осталось за малым. Друг, занимающийся группами, сделал несколько рекламных постов, и тут приложение как с цепи сорвалось:

image

За неделю посещаемость сама по себе подскочила до 125 тысяч в день. Признаться, такой нагрузки я не ожидал, поэтому пришлось даже арендовать сервер по мощнее. Воодушевленный таким успехом, я сделал еще несколько тестов на готовой платформе. они набрали 1'300'00, 300'000 и 100'000 тысяч установок на сегодняшний день. Рассказывать о них не вижу смысла, они аналогичные.

Первыми граблями, на которые я наступил, был лог файл php, разросшийся аж до 800гб. Произошло это из-за нескольких ошибок уровня notice, которые логировались при каждом прохождении теста пользователем.

Интересно, что в первый месяц существования, тест пользовался популярностью у старшей аудитории (25+), однако месяцем позже школьники перехватили инициативу.

Любопытства ради, я добавил следующий вопрос «Как вы думаете, доллар завтра подорожает?» и начал вести по нему статистику, чтобы предугадывать курс валют по настроениям населения. Но до дела так и не дошло, так что, если кому интересно, могу предоставить базу данных для анализа.


Меняем курс


При всей вирусности тестов, у них есть один большой недостаток — малый возврат аудитории. По второму разу заходить в такое приложение будут единицы. Поэтому я решил сделать игру. Точнее, я взял за основу игру 2048 Gabriele Cirulli, тогда о ней еще никто не знал. Не смотря на то, что игра opensource, я всё-таки спросил разрешения лично у автора.

image

Получив положительный ответ, я принялся за дело. Спустя несколько дней игра под названием "Стаккер 2048" прошла модерацию.

image

Внезапно появились и вторые грабли. На следующее же утро приложение взломали простейшей XSS атакой. О том, что пользовательским данным нельзя доверять, я тогда попросту не знал. Школьник подставил скрипт вместо своего имени в списке «Топ 100», в результате чего матерные алерты не давали игрокам ничего сделать. В процессе заделывания дыр я познакомился со многими видами ухищрений, на которые способны малолетние хакеры-робингуды, которые после того, как напакостили, писали в личку, что это мне за то, что я украл игру. Я заделывал дыры по мере их проявления. Были и SQL инъекции и CSRF уязвимости. Один раз мне снесли всю базу данных. Кто-то даже пытался положить сервер генерируемыми картинками, подавая на вход файлу-генератору случайную строку 10 раз в секунду. Теперь, набив шишек, я использую токен и сессии для каждого пользователя, передаю все данные POST запросом, прикрепляя хэш от всех передаваемых данных, который проверяется на сервере. С тех пор ничего страшного, к счастью, больше не происходило.

Граблями номер три стали генерируемые картинки. Если для 2048 число набранных очков для многих пользователей совпадает и проще хранить картинки с результатами, чем каждый раз генерировать их снова, то для тестов исход всегда разный и картинок накапливается очень много. Поэтому приходится при помощи планировщика Cron чистить папку с картинками каждые 10 минут.

На данный момент в «Стаккер» играют 180'000 человек, причем возвращаемость пользователей очень высокая

Для игр Вконтакте предусмотрен специальный стартовый влив трафика — добавление приложения в категорию новые, на самый верх. Стоит это 1000 голосов, при этом нужно выждать полтора месяца в очереди и обязательно иметь в приложении встроенные покупки


image

Монетизация


Как только посещаемость пошла в гору, я всерьез задумался о монетизации своих приложений. Особого выбора не было, так как партнерских программ, работающих напрямую с Вконтакте не так много. Я остановился на прелоудере, который показывает короткий рекламный ролик каждый раз при входе в приложение, если пользователь попадает под целевую аудиторию. Это примерно 60% всей аудитории. И рекламные объявления в стиле тех, что контакт показывает сам. При текущей посещаемости, доход с четырех моих приложений составляет в среднем 2000р в сутки. Для отслеживания посещаемости я сделал отдельную страницу, на которой при помощи HTML canvas вывожу графики активности пользователей.

Послесловие


Для меня лично, такой независимый заработок стал прорывом и отличным стимулом. Чем больше я занимаюсь приложениями, тем больше идей у меня появляется. Планирую в ближайшем будущем заняться разработкой чего-нибудь более серьезного. Надеюсь, этот пост был полезен и интересен.
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 33

    +2
    С API Контакта познакомился сравнительно недавно. Тогда оно казалось мне жутко сложным и неоднозначным, с минимумом пояснений и полным отсутствием примеров использования.
    Может быть сделаете FAQ для новичков?
      +6
      Да, конечно, это и будет моей следующей статьей.
        0
        у ВК довольно хорошо задокументированный апи, с кучей примеров, да еще и возможностью сразу же испытать любой метод, с любыми параметрами, с помощью vk.com/dev

        примеры работы с самим апи описаны на странице JS SDK vk.com/dev/Javascript_SDK, даже так и написано «Пример обращения к ВКонтакте API:»
        ну и дальше открываем vk.com/dev/methods, выбираем любой метод, и тестируем запрос-ответ к методу вводя нужные параметры.
      +1
      Важно: для корректной работы приложения без SSL сертификата не обойтись.

      Небольшая поправочка. Модераторы ВК, как правило, смотрят на доступность приложения по https. С недавних пор наличие сертификата стало обязательным при прохождении модерации приложений ВК.
        0
        Как боретесь с нагрузкой на сервер? Вообще при подобном трафике на приложение нагрузка на сервер играет хоть какую-либо роль?
          0
          Сервер занимается, в основном, работой с бд и генерацией картинок. Они довольно прожорливые, поэтому планирую (если возможно) перенести эту задачу на клиент. С таким трафиком i7 и 8гб оперативки справляется на ура, однако через 20 минут после публикации статьи сервак упал.
          +9
          Хабр как всегда удивляет.
          Откровенная реклама приложения в соц сети, с прямыми ссылками. При этом пост не находится в «я пиарюсь».
          И пост набирает плюсы. Других авторов подобных постов начинали сразу люто минусовать…
            0
            Не понимаю вашего негодования. Я разместил ссылки только на два моих приложения для людей, которым захочется потыкать и пощупать. В рекламе приложения нуждаются только на начальном этапе, потом они разлетаются самостоятельно. Не думаю, что пользователям Хабра будет интересен глупенький тест или 2048, которую все уже прошли вдоль и поперек. К Хабру отношусь с уважением и статьи стараюсь писать от души.
              +2
              Вы неправильно поняли. Никакого негодования.
              Статья нормальная. Мотивирует, так сказать, оторвать задницу от дивана и хоть что-то наконец сделать)
              Просто такие статьи обычно размещают в разделе «я пиарюсь», а если нет, то воинствующие хабражители обычно минусуют)
              Вот я и удивился в очередной раз реакции хабражителей.

              P.S. Продолжайте писать, у вас неплохо получается.
            0
            Я остановился на прелоудере, который показывает короткий рекламный ролик каждый раз при входе в приложение, если пользователь попадает под целевую аудиторию.

            Подскажите, пожалуйста, где можно почитать про данный вид рекламы в vk? С правой стороны Вашего приложения расположен блок контекстной рекламы, был бы признателен за ссылку на описание интеграции и такого вида рекламы.
              0
              Единственная разрешенная реклама в ВК: socialtank.ru (контекстная), creara-media.ru (прелоадеры)
              Всё остальное (кроме обмена траффиком между своими приложениями) запрещено.
              Не сочтите за рекламу рекламы.
                0
                Прелоудер — www.creara-media.ru
                Контекстная реклама — www.socialtank.ru (Можно добавить даже сторонний сайт)

                Интеграция — проще некуда. Регистрируетесь, отправляете приложение на модерацию. Чтобы успешно ее пройти надо иметь больше 300 человек посещаемости в сутки. Когда приложение одобрят — нужно просто скопировать несколько строк кода в тело страницы. Что и куда копировать там подробно расписано.
                0
                доход с четырех моих приложений составляет в среднем 2000р в сутки

                На каком промежутке времени, если не секрет? Просто 2круб разово, это одно дело. Стабильных 2круб/день на месячном отрезке уже другое дело. Про год я молчу, года как я понимаю не набирается.
                  0
                  Уже два месяца держится. Тесты стали потихоньку сдуваться, а игра прёт вверх, поэтому в целом ничего не меняется
                  0
                  еще хотелось бы добавить, что кроме 1000 голосов и месяца ожиданий, не факт, что ваше приложение, спустя это время, окажется в блоке новых, модераторы имеют право отказать в размещении, при этом не всегда обьясняя причину, хотя зачастую причина звучит как «приложение имеет недостаточную функциональность», деньги вернут, а вот время — нет. поэтому рассчитывать на размещение в новых следует только в том случае, если вы уверены в том, что игра довольно серьезного уровня.
                  ну и конечно же в новые может попасть только игра, приложения туда не добавляют, так же как и в блок «рекомендации».
                    0
                    «приложение имеет недостаточную функциональность»

                    с такой причиной приложение и не одобрят даже для поиска
                      0
                      да, у меня даже на этот счет картинка есть жизненная :)

                      image
                    0
                    А как вы считаете зарплату? =)
                      0
                      Моё предположение — накопление баллов по «правильным» ответам. Круто было бы одолжить статистику кредиторов. Это бы повысило точность ответов и демотивировало проходящих тест. А то мне насчитало такую зарплату, о которой неприлично говорить с моим опытом и достижениями.
                        0
                        Признаюсь, над качеством алгоритма я не сильно старался, он простой как грабли, даже стыдно что-ли.
                        0
                        У каждого вопроса своя ценность и характеристика (плохой/хороший). В конце всё это суммируется и умножается на рандомный коэффициент из диапазона от 0.7 до 1.3
                        0
                        Меня интересует — как ведете разработку, тестирование методов ВК? Недавно пробовал — на локалке не работают, только в iframe vk.com
                          0
                          Все верно, работает только через iframe. Все время приходится заливать на сервер
                            0
                            работает и на локалке, в качестве урла пишем localhost:44301/
                            0
                            Скажите, а где тестировать приложение до публикации в списке приложение ВКонтакте?
                              0
                              У вк без публикации в каталоге отключена только возможность принимать голоса от пользователей, включая офферы. Но установив в настройках себя тестером платежей можно и их проверить на работоспособность. А тестировать приложение можно и без проверки, все методы апи будут работать.
                                0
                                А ещё без проверки нельзя приглашать друзей в приложение.
                                0
                                Стаккера надо на мобилки )
                                  0
                                  А в каких группах рекламные посты были?
                                    0
                                    Теперь, набив шишек, я использую токен и сессии для каждого пользователя, передаю все данные POST запросом, прикрепляя хэш от всех передаваемых данных, который проверяется на сервере.


                                    А можно поподробнее этот момент? Что именно вы прикрепляете в хэш? Ведь через js все переменные можно посмотреть и на клиенте
                                      0
                                      Контакт при запуске приложения передает в него хэш, стоящийся следующим образом
                                      auth_key = md5(api_id + '_' + viewer_id + '_' + api_secret)
                                      Пользователь не знает api_secret, а мы на сервере собираем такой же хэш и проверяем от кого пришел запрос. Таким образом злоумышленник сможет испортить только свои данные. Подробнее тут vk.cc/2W7PZP
                                        0
                                        да, но это не помогает от накруток)
                                          0
                                          Но данные передаются только в момент запуска приложения, а не при каждом последующем запросе к бэк-енду. Можно пояснить, то я тоже сейчас столкнулся с проблемой верификации пользователя.
                                          При запуске приложения мы проверяем что auth_key = md5(api_id + '_' + viewer_id + '_' + api_secret) и создаем юзеру сессию. Если дальнейшие запросы идут через AngularJS то мы можем только посмотреть наличие сессии и надеятся что это все еще тот юзер. А если приложение долго открыто и сессия истекла — тогда юзера считаем неавторизованным? Или я что-то упустил? Как вы используете токен?

                                      Only users with full accounts can post comments. Log in, please.