Статья нацелена на начинающих разработчиков, которые хотят запустить свое приложение в социальной сети.В статье описывается личный опыт создания IFrame-приложения, с нуля, для «Вконтакте», а так же все события которые произошли во время запуска и после, ну и конечно же совершённые ошибки. Можно даже сказать что это не совсем статья, а скорее рассказ.
Помимо рассказа, здесь присутствуют отчеты о нагрузке, попытка монетизации, информация о сервере и разбор кода. Поэтому вы можете переключаться, к интересующим вас пунктам.
Приложением в качестве примера будет выступать – змейка, с небольшой модификацией.
Нетерпеливым, ссылка: vk.com/classic_snake
Тут можно изменять код, (рейтинг пользователей отсутствует): js.do/usr753/snake
Содержание
Немного истории
Первые проблемы
Монетизация
Сервер, Приложение, Нагрузка
Процесс работы приложения
Змейка изнутри
Что вас ждет после публикации приложения
Выводы
Немного истории
Несколько месяцев назад, на Хабре, была серия постов с заголовком «Игра в 30 строк кода». И так получилось, что я наткнулся на этот пост http://habrahabr.ru/post/202476/ там описывалось создание простой змейки, не успев дочитать его до конца, бросился писать свою. А как написал, поигрался немного и забросил это дело на длительное время.
Но вскоре, загорелся желанием попробовать себя в новой сфере, в разработке приложений для социальных сетей. Тем более игра уже была готова и пылилась в темной, забытой, директории. А сама платформа сулила такими ништяками, как – доступ к большой аудитории, нулевые затраты на раскрутку(при определенных условий). Удобный API и возможность монетизации, разными способами.
Осталось только доработать и загрузить, что я собственно и сделал.
Первые проблемы
После добавления приложения во Вконтакт, оно доступно для установки по прямой ссылке, но недоступно в поиске и не выводится в общем каталоге.
На счету нужно иметь 10 голосов(местная валюта ВК, 10 голосов == 70 руб.), для того чтобы отправить приложение на модерацию, если все нормально и оно соответствует правилам, его добавляют в каталог новых приложений, а списанные голоса возвращают обратно. А если что-то не так, то ваши 10 голосов не возвращаются. Приложение можно будет вновь отправить, после устранения несоответствий.
После того как приложение успешно прошло модерацию, оно попадает на третью позицию в каталоге новых приложений и далее, спускается вниз, а вскоре совсем пропадает. Первые две позиции, в новых приложениях — вроде платные и стоят около 1000 голосов.
Существуют еще негласные правила о которых нигде не написано, их можно узнать только от проверяющего.
Отправил игру на модерацию. Ждать ответа долго не пришлось:
И вот тут пришлось изучать их API, писать скрипт рейтинга, который взаимодействует с моей базой данных и дополнительный модуль на JS. Таким образом, мое тестовое приложение из одного файла эволюционировало в не совсем простое. Самим приложением занимался в свободное время. Когда сделал все что нужно было, отправил на повторную проверку, и лег спать.
Проснувшись утром увидел пришедшую смс'ку: «ваше приложение одобрено и добавлено в каталог… и еще чего-то там».
Сразу кинулся смотреть. Игру установили 57 человек, спустя минуту обновил страницу — 100 человек, 200, 300, 400. Просидел целый день нажимая F5. К вечеру, людей установивших приложение было около 2000. На следующий день – в два раза больше. Через пару дней азарт уже пропал и участников, воспринимал как простые цифры. Кстати, модератор вернул 10 голосов, спасибо ему больше.
Монетизация
Приложение считалось тестовым и его монетизация не планировалась. Спустя пару недель решил повесить рекламу от партнеров ВК, выбрал прелоадер (всплывающая реклама перед загрузкой приложения). Выбрать самостоятельно рекламного партнера не разрешается, а только из списка рекомендованных.
На тот момент, само приложение, опустилось вниз и такого притока аудитории не было как раньше. Когда повесил рекламу было около 2000 уникальных посетителей в день, на следующий день 1700 и с каждым днем все меньше и меньше. Сейчас же, игра отсутствует в новых приложениях, т.е. не весит на главной как ранее, но его можно будет поднять за 1000 голосов.
Спустя пару недель, после того как приложение пропало с главной страницы, его ежедневно посещает 50-250 человек. Так же идет приток аудитории, но небольшой, 5-20 человек в день.
На графике видно, как люди его находят:
Еще бывает что люди удаляют приложение.
А заработок с прелоадера за 2 месяца, составил 76 рублей, за 4500 показов.
Но сам, прелоадер, показывается не всем, а только если пользователь подходит под «определенные параметры», а это 40-60% аудитории. Эти параметры настраивает рекламодатель, тем самым выбирая «свою» целевую аудиторию, которой и будет демонстрироваться реклама.
В эти параметры входят: интересы, вкусы, книги, ваша музыка, ваш браузер и все то, что вы сами указали на своей странице. Одним словом – Таргетинг.
Сервер, Приложение, Нагрузка
В качестве сервера выступал простенький 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кб, полноценная игра с рейтингом + пару картинок, одна для фона, вторая — лоадер, для отображения загрузки.
Эти несколько килобайт, дали больше полтора гигабайта трафика. По этому, если ваше приложение много весит, приготовьтесь платить за трафик.
Посетителей за все время:
А что касается нагрузки, максимальное число посетителей в день, было 6 тысяч человек.
Может для кого-то это и мало, а я честно говоря не ожидал что сервер выдержит. Напугали меня разные статьи, что мол сервера крутые нужны. А как оказалось, что и этого «много», используется 5-20% ресурсов из 100.
Загрузка процессора не поднималась выше 12% и то, если поднималась то на секунду и тут же становилось 0%, обычно прыгает с 0 до 4%.
А использование RAM, не превышало 200Мб, даже когда буфер InnoDB с 8мб поднял до 32мб, на всякий случай.
Возможно такие показатели из-за следующей архитектуры приложения, или из-за нетребовательных операций.
Процесс работы приложения
После того как пользователь заходит на страницу, он загружает один html-файл(игру), далее ajax'ом получает список пользователей(Топ100, размером в 5кб), свою позицию в рейтинге и счет, все в XML.
Далее все происходит на одной странице, с сервера больше ничего не грузится.
Пользователь может повторно запросить обновленные данные других участников, при нажатии на кнопку, или отправить свой результат на сервер.
После того когда xml-список пришел к клиенту, со счетом и идентификатором пользователей VK, формируется рейтинг. Мы запрашиваем данные, через API, первых 10 пользователей. И выводим: «Имя+Фамилию и их общий счет». Если пользователь нажал на кнопку «далее», то происходит новое обращение к API, а старые данные мы не затираем, а кешируем, т. е. Повторно обращаться к API мы не будем, если мы эти данные ранее получили. А в самой Базе Данных мы храним их id'шники, счет и прочую техническую информацию.
Еще, главное настроить индексы, чтобы данные брались от туда, а не читались с диска.
Змейка изнутри
Напомню, что речь идет о «змейке», далее ее код будет разбираться. Если вы решили сами написать змейку, то можете пропустить этот пункт, а то получится как в известной фразе: «убийца – дворецкий».
В код мало кто полезет, по этому опишу сначала словами алгоритм, а потом уже и код посмотрите.
Сперва генерируется поле из простых div'ов. Координаты указаны в качестве идентификатора div'а, которые позволяют обратится к любой клетке. Далее создаем змейку на этом поле, путем выделения клеток, цветом и заносим координаты тела змейки, в многомерный массив.
Потом создается бонус(еда для змейки). Опять сохраняем в массив координаты бонуса.
После того когда бонус съеден, мы собираем пустые клетки в массив (без клеток на которых находится сама змейка) и из них, выбираем случайным образом другую клетку, и уже ее делаем бонусом. Если пустых клеток не обнаружено то пользователь – победитель.
При движении, в массиве, мы меняем только две клетки, заднюю – удаляем, а переднюю (незанятую змейкой), по направлению движения – красим в цвет змейки. И при каждом ходе проверяем, не столкнулись ли мы с хвостом, или с бонусом.
А для того чтобы проходить через стены, мы проверяем, если следующий клетки не существует впереди, то в массив-координат змейки, пишем – 0 (первая позиция, начало строки), либо последнюю. В зависимости от направления движения.
Пример:
X=100. Y=200.
Змейка движется сторону X++, с нулевой позиции.
0,1,2,3..99, [если клетки нет и направление не меняется, то пишем в массив 0 по x]. А с Y, тоже самое.
Теперь разберем небольшую модификацию.
В этой модификации я сделал бонус убегающим от змейки. Через какое-то время бонус меняет направление и если сталкивается с хвостом змейки, а не головой, то поедает ее. И будет кушать до тех пор, пока от змейки ничего не останется, но она может спастись, если свернет с направления бонуса.
Здесь работают два таймера, с разной скоростью, которые передвигают бонус и змейку. Можно было бы сделать все в одном таймере, но тогда скорость была бы одинаковой, т.к. нужно проходить каждую клетку, не перепрыгивать.
Еще столкнулся с проблемой, что при движении навстречу друг к другу, бонуса и змейки, не происходит съедение первого. Из-за того что они независимо друг от друга движутся. Когда происходит проверка, бонус уже переместился на другую клетку.
Проблему решил. Вынес в отдельный метод, код проверки столкновения. Далее вставил этот метод к бонусу и к змейке.
Что вас ждет после публикации приложения
Так как приложение планировалось изначально без рейтинга, оно было полностью сделано на JavaScript, на клиентской стороне, т.е весь код доступен каждому и каждый «знающий» мог отправить свое число в место заработанного результата.
Основные фильтры на «важных» участках были выставлены. Но контроль входящего результата был слабый и мог прийти настоящий результат, а мог прийти и такой «999999». Причем приходил такой результат от школьников, которые пользовались программами для взлома типа «Charles», как мне радостно они сообщали в личку, со своих реальных аккаунтов и с реальных ip-адресов.
Написал метод который дублировал результат. В одном параметре передавался реальный, в другом шифрованный результат, методом замены символа по ключу. А далее, на сервере оба сравниваются и если что-то не соответствует, то – бан по аккаунту.
И еще, сервер отправляет сгенрированный ключ при первом обращении. Клиент же, должен его вернуть с результатом. Без этого ключа, результат не примется и если все соответствует, и все проходит проверку, то результат записывается в БД, и генерируется новый ключ, который опять отдается клиенту. Это сделано для того, чтобы повторно запрос с результатом не могли отправить, как делается в программе «Charles».
Тут, школьники уже отсеялись. В личку стали писать студенты, которые знают JavaScript.
После внедрения дополнительных проверок, вроде бы уже никто не пишет. Так как всего одна попытка и в случае чего бан аккаунта ВК.
А так, по хорошему, все вычислительные процессы нужно переносить на сервер, чтобы ничего не могли подменить, но, вот тут возможна та самая высокая нагрузка.
Еще будут писать кидалы предлагающие купить у вас приложение от 3000руб и до 3000$, которых если погуглить, то можно будет наткнутся на не совсем лестные отзывы, о них.
Школьники, с разными деловыми предложениями, стать админом группы, или админом приложения. Будут еще спрашивать: «в какой программе ты создал эту игру».
Советчики, которые знают как лучше развивать ваше приложение.
Тролли, куда же без них.
Выводы
Финансовая сторона:
Домен – 200руб в год.
SSL Сертификат (обязателен) – первый год бесплатно у startssl.com, а так, стоит от 1500руб. Самоподписанный сертификат не подходит.
VPS – 420руб за два месяца.
Затрачено на раскрутку – 0руб. Правда кинул 100руб на рекламу, чисто посмотреть что будет. 25.000 показов. 12 переходов. 5 установок.
Доход с рекламы – 76руб.
Прибыль: -544руб+затраченное время.
Но главное – полученное удовольствие от процесса.
Если разрабатывать приложение нацеленное на прибыль, то только с методами удержания пользователей, потому-что со временем они будут убавляться.
Монетизацию за счет рекламы нужно рассматривать как дополнительный источник дохода, а не как основной и то, если ежедневное количество пользователей превышает тысячный порог.
Видать поэтому столько приложений, которые торгуют виртуальными товарами за реальные деньги, потому-что не выгодно иначе.
Ну и напоследок, статистика браузеров:
И суточное время активности пользователей:
Скриншоты со статистикой из Вконтакте и Яндекс-Метрики.
Всем спасибо за внимание.
