24 апреля 2014 в 14:51

Запуск приложения во Вконтакте из песочницы

image Статья нацелена на начинающих разработчиков, которые хотят запустить свое приложение в социальной сети.

В статье описывается личный опыт создания IFrame-приложения, с нуля, для «Вконтакте», а так же все события которые произошли во время запуска и после, ну и конечно же совершённые ошибки. Можно даже сказать что это не совсем статья, а скорее рассказ.

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

Приложением в качестве примера будет выступать – змейка, с небольшой модификацией.
Нетерпеливым, ссылка: vk.com/classic_snake
Тут можно изменять код, (рейтинг пользователей отсутствует): js.do/usr753/snake

Содержание


Немного истории
Первые проблемы
Монетизация
Сервер, Приложение, Нагрузка
Процесс работы приложения
Змейка изнутри
Что вас ждет после публикации приложения
Выводы

Немного истории


Несколько месяцев назад, на Хабре, была серия постов с заголовком «Игра в 30 строк кода». И так получилось, что я наткнулся на этот пост http://habrahabr.ru/post/202476/ там описывалось создание простой змейки, не успев дочитать его до конца, бросился писать свою. А как написал, поигрался немного и забросил это дело на длительное время.

Но вскоре, загорелся желанием попробовать себя в новой сфере, в разработке приложений для социальных сетей. Тем более игра уже была готова и пылилась в темной, забытой, директории. А сама платформа сулила такими ништяками, как – доступ к большой аудитории, нулевые затраты на раскрутку(при определенных условий). Удобный API и возможность монетизации, разными способами.

Осталось только доработать и загрузить, что я собственно и сделал.

Первые проблемы


После добавления приложения во Вконтакт, оно доступно для установки по прямой ссылке, но недоступно в поиске и не выводится в общем каталоге.

На счету нужно иметь 10 голосов(местная валюта ВК, 10 голосов == 70 руб.), для того чтобы отправить приложение на модерацию, если все нормально и оно соответствует правилам, его добавляют в каталог новых приложений, а списанные голоса возвращают обратно. А если что-то не так, то ваши 10 голосов не возвращаются. Приложение можно будет вновь отправить, после устранения несоответствий.

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

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

image

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

Проснувшись утром увидел пришедшую смс'ку: «ваше приложение одобрено и добавлено в каталог… и еще чего-то там».

image

Сразу кинулся смотреть. Игру установили 57 человек, спустя минуту обновил страницу — 100 человек, 200, 300, 400. Просидел целый день нажимая F5. К вечеру, людей установивших приложение было около 2000. На следующий день – в два раза больше. Через пару дней азарт уже пропал и участников, воспринимал как простые цифры. Кстати, модератор вернул 10 голосов, спасибо ему больше.

image


Монетизация


Приложение считалось тестовым и его монетизация не планировалась. Спустя пару недель решил повесить рекламу от партнеров ВК, выбрал прелоадер (всплывающая реклама перед загрузкой приложения). Выбрать самостоятельно рекламного партнера не разрешается, а только из списка рекомендованных.

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

Спустя пару недель, после того как приложение пропало с главной страницы, его ежедневно посещает 50-250 человек. Так же идет приток аудитории, но небольшой, 5-20 человек в день.

На графике видно, как люди его находят:
image

Еще бывает что люди удаляют приложение.
image

А заработок с прелоадера за 2 месяца, составил 76 рублей, за 4500 показов.

Но сам, прелоадер, показывается не всем, а только если пользователь подходит под «определенные параметры», а это 40-60% аудитории. Эти параметры настраивает рекламодатель, тем самым выбирая «свою» целевую аудиторию, которой и будет демонстрироваться реклама.

В эти параметры входят: интересы, вкусы, книги, ваша музыка, ваш браузер и все то, что вы сами указали на своей странице. Одним словом – Таргетинг.

image


Сервер, Приложение, Нагрузка


В качестве сервера выступал простенький VPS с такими характеристиками:
Debian 32-bit, RAM: 512mb, CPU: 500Mhz*2 – все это за 210 рублей в месяц.

Установленное ПО:
Nginx – для раздачи статики, а для обработки данных, nginx перенаправляет запросы к Apache2+PHP+MySQL.

Сама же игра написана на HTML(4.0) + JavaScript и немного CSS, без использования фреймворков и без разных библиотек.

Все это было собрано из разных js/css модулей в один файл и пропущено через YUI Compressor для сжатия. В итоге был один html файл весом в 20-30кб, полноценная игра с рейтингом + пару картинок, одна для фона, вторая — лоадер, для отображения загрузки.

Эти несколько килобайт, дали больше полтора гигабайта трафика. По этому, если ваше приложение много весит, приготовьтесь платить за трафик.

Посетителей за все время:
image

А что касается нагрузки, максимальное число посетителей в день, было 6 тысяч человек.
image

Может для кого-то это и мало, а я честно говоря не ожидал что сервер выдержит. Напугали меня разные статьи, что мол сервера крутые нужны. А как оказалось, что и этого «много», используется 5-20% ресурсов из 100.

image

Загрузка процессора не поднималась выше 12% и то, если поднималась то на секунду и тут же становилось 0%, обычно прыгает с 0 до 4%.
А использование RAM, не превышало 200Мб, даже когда буфер InnoDB с 8мб поднял до 32мб, на всякий случай.
Возможно такие показатели из-за следующей архитектуры приложения, или из-за нетребовательных операций.


Процесс работы приложения


После того как пользователь заходит на страницу, он загружает один html-файл(игру), далее ajax'ом получает список пользователей(Топ100, размером в 5кб), свою позицию в рейтинге и счет, все в XML.

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

После того когда xml-список пришел к клиенту, со счетом и идентификатором пользователей VK, формируется рейтинг. Мы запрашиваем данные, через API, первых 10 пользователей. И выводим: «Имя+Фамилию и их общий счет». Если пользователь нажал на кнопку «далее», то происходит новое обращение к API, а старые данные мы не затираем, а кешируем, т. е. Повторно обращаться к API мы не будем, если мы эти данные ранее получили. А в самой Базе Данных мы храним их id'шники, счет и прочую техническую информацию.

image

Еще, главное настроить индексы, чтобы данные брались от туда, а не читались с диска.


Змейка изнутри


Напомню, что речь идет о «змейке», далее ее код будет разбираться. Если вы решили сами написать змейку, то можете пропустить этот пункт, а то получится как в известной фразе: «убийца – дворецкий».

В код мало кто полезет, по этому опишу сначала словами алгоритм, а потом уже и код посмотрите.

Сперва генерируется поле из простых div'ов. Координаты указаны в качестве идентификатора div'а, которые позволяют обратится к любой клетке. Далее создаем змейку на этом поле, путем выделения клеток, цветом и заносим координаты тела змейки, в многомерный массив.

Потом создается бонус(еда для змейки). Опять сохраняем в массив координаты бонуса.

После того когда бонус съеден, мы собираем пустые клетки в массив (без клеток на которых находится сама змейка) и из них, выбираем случайным образом другую клетку, и уже ее делаем бонусом. Если пустых клеток не обнаружено то пользователь – победитель.

При движении, в массиве, мы меняем только две клетки, заднюю – удаляем, а переднюю (незанятую змейкой), по направлению движения – красим в цвет змейки. И при каждом ходе проверяем, не столкнулись ли мы с хвостом, или с бонусом.

А для того чтобы проходить через стены, мы проверяем, если следующий клетки не существует впереди, то в массив-координат змейки, пишем – 0 (первая позиция, начало строки), либо последнюю. В зависимости от направления движения.

Пример:
X=100. Y=200.
Змейка движется сторону X++, с нулевой позиции.
0,1,2,3..99, [если клетки нет и направление не меняется, то пишем в массив 0 по x]. А с Y, тоже самое.

image

Теперь разберем небольшую модификацию.

В этой модификации я сделал бонус убегающим от змейки. Через какое-то время бонус меняет направление и если сталкивается с хвостом змейки, а не головой, то поедает ее. И будет кушать до тех пор, пока от змейки ничего не останется, но она может спастись, если свернет с направления бонуса.

Здесь работают два таймера, с разной скоростью, которые передвигают бонус и змейку. Можно было бы сделать все в одном таймере, но тогда скорость была бы одинаковой, т.к. нужно проходить каждую клетку, не перепрыгивать.

Еще столкнулся с проблемой, что при движении навстречу друг к другу, бонуса и змейки, не происходит съедение первого. Из-за того что они независимо друг от друга движутся. Когда происходит проверка, бонус уже переместился на другую клетку.

Проблему решил. Вынес в отдельный метод, код проверки столкновения. Далее вставил этот метод к бонусу и к змейке.


Что вас ждет после публикации приложения


Так как приложение планировалось изначально без рейтинга, оно было полностью сделано на JavaScript, на клиентской стороне, т.е весь код доступен каждому и каждый «знающий» мог отправить свое число в место заработанного результата.

Основные фильтры на «важных» участках были выставлены. Но контроль входящего результата был слабый и мог прийти настоящий результат, а мог прийти и такой «999999». Причем приходил такой результат от школьников, которые пользовались программами для взлома типа «Charles», как мне радостно они сообщали в личку, со своих реальных аккаунтов и с реальных ip-адресов.

Написал метод который дублировал результат. В одном параметре передавался реальный, в другом шифрованный результат, методом замены символа по ключу. А далее, на сервере оба сравниваются и если что-то не соответствует, то – бан по аккаунту.

И еще, сервер отправляет сгенрированный ключ при первом обращении. Клиент же, должен его вернуть с результатом. Без этого ключа, результат не примется и если все соответствует, и все проходит проверку, то результат записывается в БД, и генерируется новый ключ, который опять отдается клиенту. Это сделано для того, чтобы повторно запрос с результатом не могли отправить, как делается в программе «Charles».

Тут, школьники уже отсеялись. В личку стали писать студенты, которые знают JavaScript.

После внедрения дополнительных проверок, вроде бы уже никто не пишет. Так как всего одна попытка и в случае чего бан аккаунта ВК.

А так, по хорошему, все вычислительные процессы нужно переносить на сервер, чтобы ничего не могли подменить, но, вот тут возможна та самая высокая нагрузка.

Еще будут писать кидалы предлагающие купить у вас приложение от 3000руб и до 3000$, которых если погуглить, то можно будет наткнутся на не совсем лестные отзывы, о них.

Школьники, с разными деловыми предложениями, стать админом группы, или админом приложения. Будут еще спрашивать: «в какой программе ты создал эту игру».

Советчики, которые знают как лучше развивать ваше приложение.
Тролли, куда же без них.


Выводы


Финансовая сторона:
Домен – 200руб в год.
SSL Сертификат (обязателен) – первый год бесплатно у startssl.com, а так, стоит от 1500руб. Самоподписанный сертификат не подходит.
VPS – 420руб за два месяца.
Затрачено на раскрутку – 0руб. Правда кинул 100руб на рекламу, чисто посмотреть что будет. 25.000 показов. 12 переходов. 5 установок.
Доход с рекламы – 76руб.
Прибыль: -544руб+затраченное время.

Но главное – полученное удовольствие от процесса.

Если разрабатывать приложение нацеленное на прибыль, то только с методами удержания пользователей, потому-что со временем они будут убавляться.

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

Видать поэтому столько приложений, которые торгуют виртуальными товарами за реальные деньги, потому-что не выгодно иначе.

Ну и напоследок, статистика браузеров:

image

И суточное время активности пользователей:

image

Скриншоты со статистикой из Вконтакте и Яндекс-Метрики.

Всем спасибо за внимание.
Артём @usr753
карма
6,0
рейтинг 0,0
webdev
Самое читаемое Разработка

Комментарии (21)

  • +2
    Ремарка для тех, кто собирается издавать приложение/игру в соц. сети ВКонтакте:
    Тс успел попасть под «халявную» раздачу трафика от соц. сети, а именно — все новые одобренные приложения/игры появлялись под спойлером «Показать больше новых приложений». Сейчас это убрали. В разделе новых приложений — показываются только те, которые оплатили это место (на данный момент цена 1000 голосов). А под вышеупомянутым спойлером — все предыдущие «проплаченные» приложения.
    Иными словами, соц. сеть теперь не даёт стартового трафика вовсе.
    • 0
      То есть сейчас в том числе и для Приложений(не игры) нужно платить, чтобы попасть в новые?
      • +1
        Приложения, насколько мне известно, в этот блок вообще не попадают. Только игры. У приложений свой отдельный каталог:
        image
        А игровые приложения — да, попадают теперь в раздел новых только за голоса.
        И то, на протяжение первых 6 месяцев. Потом кнопка размещения пропадает.
        К слову, туда ещё очередь отстоять нужно. 2 недели назад очередь была уже на конец июня.
        Всё очень плохо.
        • 0
          Все же немного не так. Если фильтр выбран как «Все приложения», то очевидно, что показываются и Игры и Приложения.

          И то, на протяжение первых 6 месяцев. Потом кнопка размещения пропадает.

          То есть у нас есть 6 месяцев, чтобы после запуска игры отправить ее в каталог(за 1к голосов)?

          Моя же история полной неудачи с размещением Приложения была вот какой. Ранее, у ВК был каталог разделен табами — Игры и Приложения.
          И пока было так — трафик с главной шел более-менее. Но при размещении я допустил одну досадную ошибку по незнанию — размещался в том же контейнере, что и тестировал на продакшене. Дата создания была что-то около недель трех, и поэтому приложение после публикации было сразу же 4 в списке — выводятся в каталоге они по дате создания, а не публикации, что совсем не очевидно.
          Но и это было не так плохо, как казалось. Буквально через неделю ВК ввел этот новый общий каталог с большими картинками. Соответственно, мое Приложение было после кучи новых игр, и трафик с главной идти почти перестал.
          Знал бы я, что будет такое изменение в выдаче каталога — естественно подождал бы, и тогда красивая большая иконка на более выгодном месте притащила бы большую аудиторию.
          • +1
            Когда выбраны «Все приложения» — часть не игровых приложений показывается. Но, очевидно, с уменьшенными коэффициентами рейтинга, потому что не игровых приложений в общем каталоге — кот наплакал.
            Что касается издательства в ВК впринципе. Ранее эту соц. сеть ещё можно было рассматривать как площадку для старта и развития. Хоть и небольшой, но трафик начальный давался.
            По мере развития ВК, администрация всеми средствами урезала этот трафик, и площадку всё больше начали рассматривать как тестовую.
            Сейчас начального трафика уже нет. Однако, размещение рекламы в каталоге сравнительно дешёвое (мой рекорд на 10 голосов — чуть более 500 переходов). Поэтому, сейчас ВК — не более чем площадка для отладки скриптов и выявления багов.
            Рассматривать её как источник дохода — уже врядли возможно.
            Во-первых, без трафика развивать игру не реально. Трафик — деньги. И не малые.
            Во-вторых, платёжка в ВК — оставляет желать лучшего. На одном и том же ДАУ при одинаковом соц. деме (минимальные отличия) — ВК зарабатывает почти в 10 раз меньше другой популярной российской соц. сети (конфетку тому, кто угадает какой).
            Так что если у вас нет денег хотя бы на гарантированные 100-200 тысяч инсталлов ЦА (даже по рублю считать — уже огого), надеяться на что-то в ВК — весьма опрометчиво.
            • 0
              Спасибо за пояснение. С другой популярной российской соц. сетью у меня немного не заладилось. Более серьезные требования, как то необходимость иметь ООО(если я все правильно понял), всякие договоры, а так же более скупое API и возможности вирального продвижения. Хотя я и реализовал интеграцию в ту самую сеть, так и не решил ничего с запуском. Так же толком не ясно как там зарабатывать — где-то есть информация о том, что там есть внутренняя рекламная сеть на вроде той, что сейчас у ВК(хотя я не нашел примеров), а другие сети баннеров там использовать нельзя.
              Сейчас у меня 40к установок, а посещений и вовсе кот наплакал. На проект я по большей части забил, так как перспектив развития не вижу, и тратить время тоже не очень хочется.
  • 0
    Что касается методов удержания в приложении — по этому поводу написано очень много интересных статей.
    Если сразу к цифрам — то возвращаемость на следующий день выше 10% — это нормально. Т.е. из сегодняшней 1000 человек, если больше ста вернутся завтра — это знак того, что вы на правильном пути.
  • +1
    >SSL Сертификат (обязателен) – первый год бесплатно у startssl.com

    И второй год бесплатен, и так далее…
    • 0
      Я вот читаю startssl и вижу, что там есть Free, он чем не подходит для задачи автора?
      • 0
        Я где-то говорил, что он не подходит?
        Я говорю, что нет ограничения по времени для сертификатов. Раз в год перевыпускай бесплатно и пользуйся сколько нужно…
        • 0
          А я и не утверждаю обратного, мне просто разобраться нужно. Какое преимущество дает платный сертификат перед бесплатным кроме валидности на 2 года?
          • +1
            Сравнение различных видов сертификатов есть на том же сайте StartSSL: www.startssl.com/?app=40
  • –10
    Когда популярность приложения разрастется и следовательно начнет сильно расти трафик и количество запросов, то в качестве хостинга файлов хорошо подойдет облачное хранилище от selectel.
  • 0
    Спасибо за подробность, её не всегда встретишь в статьях подобного рода.
  • 0
    Поиграл, сначала боялся врезаться в «стенки», потом врезался и понял, что игра на торе :)
    Режим погони впервые увидел, классная идея.

    В следующей статье хотелось бы увидеть подробнее про «И вот тут пришлось изучать их API».

    И еще: такая низкая доля IE — потому что сдает позиции? Или просто таргетинг немного другой(в смысле те, кому интересно открыть змейку скорее всего сидят не на IE)?
    • 0
      Скриншот со статистикой браузеров — игроков, которые играли в эту змейку, а не из рекламы.
      А такая доля IE, наверное, потому что эти люди часто играют в браузерные игры и им часто показывается табличка: «ваш браузер не поддерживается».
  • 0
    Я бы еще хотел добавить один совет: никогда не запускайтесь летом.
    • 0
      В социальном геймдеве не имеет значения сезон запуска. Летом у офисных сотрудников нет никакого желания работать, по этому они проводят больше времени в социальной сети и как следствие в играх.
      • 0
        Возможно. Просто я так с плеча рубанул оглядываясь но собственное приложение, где основная аудитория до 18, и детям летом есть чем заняться кроме интернета.
      • 0
        Если брать по ЦА:
        1) дети уезжают к бабушкам или в летние лагеря.
        2) офисные работники (как и любые другие) так же берут отпуска на летнее время и проводят их на дачах/морях и т.д.

        Да и вообще, летом многие на улице, загорают на берегу реки или в парке мегаполиса, кушают шашлыки или ругаются на невыносимую жару.
        Лето — действительно не лучший вариант. Особенно в случае, если игра — первая. Это просто дополнительный риск, который лучше минимизировать, проведя (или планируя) запуск в другое время года.
        • 0
          Лично мы запускаемся в ВК например в апреле и все лето анализируем, по осени уходим в ОК, с уже полностью готовым приложением. А в целом, летом очень даже играют, но праймтайм смещается с вечернего времени на дневное.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.